From 1b0b5bee2a676ab8a5f4a7f9fe81834a426786f6 Mon Sep 17 00:00:00 2001 From: David Glymph Date: Tue, 24 Sep 2024 12:25:24 -0400 Subject: [PATCH] restyle --- src/pages/queryBuilder/queryBuilder.css | 130 +++++++++--------- .../textEditorRow/QualifiersSelector.jsx | 87 ++++++++---- .../textEditorRow/TextEditorRow.jsx | 40 +++++- .../textEditorRow/textEditorRow.css | 46 ++++++- 4 files changed, 199 insertions(+), 104 deletions(-) diff --git a/src/pages/queryBuilder/queryBuilder.css b/src/pages/queryBuilder/queryBuilder.css index 644156c3..5af754e4 100644 --- a/src/pages/queryBuilder/queryBuilder.css +++ b/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%; + } } \ No newline at end of file diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/QualifiersSelector.jsx b/src/pages/queryBuilder/textEditor/textEditorRow/QualifiersSelector.jsx index 13330041..262c7d88 100644 --- a/src/pages/queryBuilder/textEditor/textEditorRow/QualifiersSelector.jsx +++ b/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 ( -
- Qualifiers -
+
+
{ @@ -86,31 +94,56 @@ export default function QualifiersSelector({ id, associations }) { renderInput={(params) => } /> -
- - { - value.qualifiers.map(({ name, options }) => ( - { - 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) => } - size="small" - /> - )) - } + {otherQualifiers.length > 0 &&
} + +
-
+ + + + + ); +} + +function QualifiersList({ value, qualifiers, setQualifiers }) { + if (value.length === 0) return null; + return ( +
+ {value.map(({ name, options }) => ( + { + if (newValue === null) { + setQualifiers((prev) => { + const next = { ...prev }; + delete next[name]; + return next; + }); + } else { setQualifiers((prev) => ({ ...prev, [name]: newValue || null })); } + }} + options={options} + renderInput={(params) => } + size="small" + /> + ))} +
); } diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/TextEditorRow.jsx b/src/pages/queryBuilder/textEditor/textEditorRow/TextEditorRow.jsx index 83dd545c..f5fe8786 100644 --- a/src/pages/queryBuilder/textEditor/textEditorRow/TextEditorRow.jsx +++ b/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 }) { - + +
+ +
+ + + ); } diff --git a/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css b/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css index 8957ab63..04901f23 100644 --- a/src/pages/queryBuilder/textEditor/textEditorRow/textEditorRow.css +++ b/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; } \ No newline at end of file