From f49b9fa1b56e38aaa98cef4c33cdc9257b7a6cd9 Mon Sep 17 00:00:00 2001
From: Lauri Himanen <lauri.himanen@gmail.com>
Date: Mon, 7 Oct 2024 05:55:12 +0000
Subject: [PATCH] Fixed an issue with creating and reading URLs with queries
containing custom quantities.
Changelog: Fixed
---
gui/src/components/search/Query.js | 42 ++++++++++++++++++----
gui/src/components/search/SearchContext.js | 2 +-
2 files changed, 36 insertions(+), 8 deletions(-)
diff --git a/gui/src/components/search/Query.js b/gui/src/components/search/Query.js
index 2dc722de8d..c2938193d8 100644
--- a/gui/src/components/search/Query.js
+++ b/gui/src/components/search/Query.js
@@ -22,7 +22,7 @@ import clsx from 'clsx'
import { isNil, isEmpty, isPlainObject } from 'lodash'
import { useSearchContext } from './SearchContext'
import { useUnitContext } from '../units/UnitContext'
-import { Typography, Box, Chip } from '@material-ui/core'
+import { Typography, Box, Chip, Tooltip } from '@material-ui/core'
import FilterTitle from './FilterTitle'
import Ellipsis from '../visualization/Ellipsis'
import ClearIcon from '@material-ui/icons/Clear'
@@ -148,29 +148,54 @@ QueryChipGroup.defaultProps = {
*/
const useQueryOpStyles = makeStyles(theme => ({
root: {
+ cursor: 'default'
+ },
+ inside: {
fontSize: '0.6rem',
marginLeft: theme.spacing(0.2),
marginRight: theme.spacing(0),
color: 'white'
+ },
+ outside: {
+ fontSize: '1.5rem',
+ marginLeft: theme.spacing(0.1),
+ marginRight: theme.spacing(0.1),
+ marginBottom: theme.spacing(-0.4)
}
}))
-export const QueryOp = React.memo(({className, children}) => {
+export const QueryOp = React.memo(({className, children, tooltip, variant}) => {
const styles = useQueryOpStyles()
- return <Typography variant="caption" className={clsx(className, styles.root)}>{children}</Typography>
+ return <Tooltip title={tooltip || ''}>
+ <Typography
+ variant="caption"
+ className={clsx(className, styles.root, styles[variant])}
+ >{children}
+ </Typography>
+ </Tooltip>
})
QueryOp.propTypes = {
className: PropTypes.string,
- children: PropTypes.node
+ tooltip: PropTypes.string,
+ children: PropTypes.node,
+ variant: PropTypes.string
+}
+QueryOp.defaultProps = {
+ variant: 'inside'
}
export const QueryAnd = React.memo(() => {
return <QueryOp>AND</QueryOp>
})
-
export const QueryOr = React.memo(() => {
return <QueryOp>OR</QueryOp>
})
+export const QueryCurlyBracketLeft = React.memo((props) => {
+ return <QueryOp tooltip="Starts a nested query" {...props}>{'{'}</QueryOp>
+})
+export const QueryCurlyBracketRight = React.memo((props) => {
+ return <QueryOp tooltip="Ends a nested query" {...props}>{'}'}</QueryOp>
+})
// Custom function for chip creation
const createChips = (name, filterValue, onDelete, filterData, units) => {
@@ -283,14 +308,17 @@ const QueryChips = React.memo(({ className, classes }) => {
newChips.push(
<React.Fragment key={`${quantity}.${key}`}>
{createChips(`${quantity}.${key}`, value, onDelete, filterData, units)}
- {index < Object.entries(data).length - 1 && <QueryAnd/>}
</React.Fragment>
)
})
return newChips
}
const newChips = addChipsForSection(filterValue)
- newChips.length && chips.push(newChips)
+ if (newChips.length) {
+ chips.push(<QueryCurlyBracketLeft variant='outside'/>)
+ chips.push(newChips)
+ chips.push(<QueryCurlyBracketRight variant='outside'/>)
+ }
// Regular chips get their own group
} else {
const onDelete = (newValue) => updateFilter([quantity, newValue])
diff --git a/gui/src/components/search/SearchContext.js b/gui/src/components/search/SearchContext.js
index ebcdc52944..d7af692aaa 100644
--- a/gui/src/components/search/SearchContext.js
+++ b/gui/src/components/search/SearchContext.js
@@ -1939,7 +1939,7 @@ function convertQueryGUIToQS(query, filtersData, filterAbbreviations) {
}
}
- return qs.stringify(queryStringQuery, {indices: false, encode: false})
+ return qs.stringify(queryStringQuery, {indices: false})
}
/**
--
GitLab