restyle

src/pages/queryBuilder/queryBuilder.css

@@ -1,66 +1,66 @@
-#queryBuilderContainer > button {
-    margin-left: 10px;
-}
-#queryEditorContainer {
-    display: flex;
-}
-#queryTextEditor {
-    width: 60%;
-    padding: 20px;
-}
-#queryTextEditor > * {
-    padding: 12px;
-}
-#queryGraphEditor {
-    width: 40%;
-    padding: 20px;
-}
-.textEditorRow {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-}
-.textEditorRow > p {
-    margin: 0;
-    font-size: 16px;
-}
-.textEditorIconButton > span > svg {
-    font-size: 40px;
-    color: #b2b0b0;
-}
-.textEditorIconButton:disabled > span > svg {
-    color: #e0e0e0;
-}
-
-#jsonEditorTitle {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px;
-}
-#uploadIconLabel {
-    margin-bottom: 0;
-}
-
-#queryBuilderButtons {
-    width: 100%;
-    padding: 0 20px;
-    display: flex;
-    gap: 16px;
-}
-
-@media (max-width: 1450px) {
-    #queryEditorContainer {
-        flex-direction: column;
-        align-items: center;
-    }
-    #queryGraphEditor {
-        width: 100%;
-    }
-    #graphContainer {
-        margin: auto;
-    }
-    #queryTextEditor {
-        width: 100%;
-    }
+#queryBuilderContainer > button {
+    margin-left: 10px;
+}
+#queryEditorContainer {
+    display: flex;
+}
+#queryTextEditor {
+    width: 60%;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}
+#queryGraphEditor {
+    width: 40%;
+    padding: 20px;
+}
+.textEditorRow {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.textEditorRow > p {
+    margin: 0;
+    font-size: 16px;
+}
+.textEditorIconButton > span > svg {
+    font-size: 40px;
+    color: #b2b0b0;
+}
+.textEditorIconButton:disabled > span > svg {
+    color: #e0e0e0;
+}
+
+#jsonEditorTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px;
+}
+#uploadIconLabel {
+    margin-bottom: 0;
+}
+
+#queryBuilderButtons {
+    width: 100%;
+    padding: 0 20px;
+    display: flex;
+    gap: 16px;
+}
+
+@media (max-width: 1450px) {
+    #queryEditorContainer {
+        flex-direction: column;
+        align-items: center;
+    }
+    #queryGraphEditor {
+        width: 100%;
+    }
+    #graphContainer {
+        margin: auto;
+    }
+    #queryTextEditor {
+        width: 100%;
+    }
 }

src/pages/queryBuilder/textEditor/textEditorRow/QualifiersSelector.jsx

@@ -68,10 +68,18 @@ export default function QualifiersSelector({ id, associations }) {
   if (associationOptions.length === 0) return null;
   if (associationOptions.length === 1 && associationOptions[0].name === 'association') return null;
 
+  const subjectQualfiers = value.qualifiers.filter(({ name }) => name.includes('subject'));
+  const predicateQualifiers = value.qualifiers.filter(({ name }) => name.includes('predicate'));
+  const objectQualifiers = value.qualifiers.filter(({ name }) => name.includes('object'));
+  const otherQualifiers = value.qualifiers.filter((q) => (
+    !subjectQualfiers.includes(q) &&
+    !predicateQualifiers.includes(q) &&
+    !objectQualifiers.includes(q)
+  ));
+
   return (
-    <details>
-      <summary>Qualifiers</summary>
-      <div className="qualifiers-dropdown">
+    <div className="qualifiers-dropdown">
+      <div style={{ marginRight: '2rem' }}>
         <Autocomplete
           value={value}
           onChange={(_, newValue) => {
@@ -86,31 +94,56 @@ export default function QualifiersSelector({ id, associations }) {
           renderInput={(params) => <TextField {...params} label="Association" variant="outlined" />}
         />
 
-        <hr />
-
-        {
-          value.qualifiers.map(({ name, options }) => (
-            <Autocomplete
-              key={name}
-              value={qualifiers[name] || null}
-              onChange={(_, newValue) => {
-                if (newValue === null) {
-                  setQualifiers((prev) => {
-                    const next = { ...prev };
-                    delete next[name];
-                    return next;
-                  });
-                } else { setQualifiers((prev) => ({ ...prev, [name]: newValue || null })); }
-              }}
-              options={options}
-              style={{ width: 300 }}
-              renderInput={(params) => <TextField {...params} label={name} variant="outlined" />}
-              size="small"
-            />
-          ))
-        }
+        {otherQualifiers.length > 0 && <hr />}
+
+        <QualifiersList
+          value={otherQualifiers}
+          qualifiers={qualifiers}
+          setQualifiers={setQualifiers}
+        />
       </div>
 
-    </details>
+      <QualifiersList
+        value={subjectQualfiers}
+        qualifiers={qualifiers}
+        setQualifiers={setQualifiers}
+      />
+      <QualifiersList
+        value={predicateQualifiers}
+        qualifiers={qualifiers}
+        setQualifiers={setQualifiers}
+      />
+      <QualifiersList
+        value={objectQualifiers}
+        qualifiers={qualifiers}
+        setQualifiers={setQualifiers}
+      />
+    </div>
+  );
+}
+
+function QualifiersList({ value, qualifiers, setQualifiers }) {
+  if (value.length === 0) return null;
+  return (
+    <div className="qualifiers-list">
+      {value.map(({ name, options }) => (
+        <Autocomplete
+          key={name}
+          value={qualifiers[name] || null}
+          onChange={(_, newValue) => {
+            if (newValue === null) {
+              setQualifiers((prev) => {
+                const next = { ...prev };
+                delete next[name];
+                return next;
+              });
+            } else { setQualifiers((prev) => ({ ...prev, [name]: newValue || null })); }
+          }}
+          options={options}
+          renderInput={(params) => <TextField {...params} label={name} variant="outlined" />}
+          size="small"
+        />
+      ))}
+    </div>
   );
 }

src/pages/queryBuilder/textEditor/textEditorRow/TextEditorRow.jsx

@@ -1,9 +1,10 @@
 /* eslint-disable no-restricted-syntax */
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import IconButton from '@material-ui/core/IconButton';
 import AddBoxOutlinedIcon from '@material-ui/icons/AddBoxOutlined';
 import IndeterminateCheckBoxOutlinedIcon from '@material-ui/icons/IndeterminateCheckBoxOutlined';
 
+import { Collapse } from '@material-ui/core';
 import BiolinkContext from '~/context/biolink';
 import QueryBuilderContext from '~/context/queryBuilder';
 import NodeSelector from './NodeSelector';
@@ -160,9 +161,14 @@ function getValidAssociations(s, p, o, model) {
 export default function TextEditorRow({ row, index }) {
   const queryBuilder = useContext(QueryBuilderContext);
   const { model } = useContext(BiolinkContext);
+  const [isOpen, setIsOpen] = useState(false);
   if (!model) return 'Loading...';
   const { query_graph } = queryBuilder;
   const edge = query_graph.edges[row.edgeId];
+  const hasQualifiers = Array.isArray(edge.qualifier_constraints) &&
+    edge.qualifier_constraints.length > 0 &&
+    Array.isArray(edge.qualifier_constraints[0].qualifier_set) &&
+    edge.qualifier_constraints[0].qualifier_set.length > 0;
   const { edgeId, subjectIsReference, objectIsReference } = row;
 
   const subject = ((query_graph.nodes[edge.subject].categories && query_graph.nodes[edge.subject].categories[0]) || 'biolink:NamedThing')
@@ -271,10 +277,34 @@ export default function TextEditorRow({ row, index }) {
         </IconButton>
       </div>
 
-      <QualifiersSelector
-        id={edgeId}
-        associations={validAssociations}
-      />
+      <Collapse in={isOpen}>
+        <div className="qualifiers-wrapper">
+          <QualifiersSelector
+            id={edgeId}
+            associations={validAssociations}
+          />
+        </div>
+      </Collapse>
+
+      <button
+        type="button"
+        className="dropdown-toggle"
+        onClick={() => { setIsOpen((p) => !p); }}
+        style={{ fontSize: '0.9em', color: '#333' }}
+      >
+        <span style={{ fontSize: '0.8em' }}>
+          {isOpen ? '▲' : '▼'}
+        </span>
+        <span
+          style={hasQualifiers ? {
+            fontWeight: 'bold',
+            fontStyle: 'italic',
+          } : undefined}
+        >
+          {' Qualifiers'}
+          {hasQualifiers && '*'}
+        </span>
+      </button>
     </div>
   );
 }

src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css

@@ -10,25 +10,57 @@
     flex-direction: column;
     align-items: flex-start;
 }
-.editor-row-wrapper {
-    display: flex;
-    flex-direction: column;
-}
 
 summary {
     display: list-item;
     cursor: pointer;
 }
 
+.qualifiers-wrapper {
+    padding: 2.5rem;
+    border-top: 1px solid #e0e0e0;
+}
+
 .qualifiers-dropdown {
-    padding: 1rem 0rem;
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+}
+
+.qualifiers-list {
+    flex: 1;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }
 
-.textEditorRow {
+.editor-row-wrapper {
+    display: flex;
+    flex-direction: column;
     background-color: #f9f9f9;
-    border: 1px solid #f0f0f0;
+    box-shadow: 0px 0px 5px #00000031;
+    border: 1px solid #e0e0e0;
     border-radius: 16px;
+    overflow: hidden;
+}
+
+.textEditorRow {
+    padding: 12px;
+}
+
+.dropdown-toggle {
+    border: none;
+    background-color: #efefef;
+    padding: 4px;
+    border-radius: 0px 0px 16px 16px;
+}
+.dropdown-toggle:hover {
+    background-color: #e6e6e6;
+}
+.dropdown-toggle:active {
+    background-color: #e0e0e0;
+}
+.dropdown-toggle:focus-visible {
+    outline: 2px solid blue;
+    outline-offset: -2px;
 }