Skip to content

Commit

Permalink
Revert "Catalog, Search: add help dropdown to the index landing page (#…
Browse files Browse the repository at this point in the history 
…1838)"

This reverts commit 243d088.
  • Loading branch information
@fiskus
fiskus authored Nov 2, 2020
1 parent 243d088 commit 0c15ca0
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 128 deletions.
45 changes: 25 additions & 20 deletions catalog/app/containers/NavBar/Help.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import cx from 'classnames'
import * as React from 'react'
import * as M from '@material-ui/core'
import * as Lab from '@material-ui/lab'
Expand All @@ -8,6 +9,14 @@ const ES_V = '6.7'
const ES_REF = `https://www.elastic.co/guide/en/elasticsearch/reference/${ES_V}/query-dsl-query-string-query.html#query-string-syntax`

const useStyles = M.makeStyles((t) => ({
root: {
padding: `0 ${t.spacing(4)}px`,
overflowY: 'auto',

[t.breakpoints.down('xs')]: {
padding: `0 ${t.spacing(1)}px`,
},
},
group: {
marginTop: t.spacing(2),
},
Expand All @@ -34,57 +43,57 @@ const syntaxHelpRows = [
namespace: 'Fields',
rows: [
{
example: 'comment:TODO',
example: 'comment: TODO',
syntax: 'comment:',
title: 'Package comment',
},
{
example: 'content:Hello',
example: 'content: Hello',
syntax: 'content:',
title: 'Object content',
},
{
example: 'ext:*.fastq.gz',
example: 'ext: *.fastq.gz',
syntax: 'ext:',
title: 'Object extension',
},
{
example: 'handle:"user/*"',
example: 'handle: "user/*"',
syntax: 'handle:',
title: 'Package name',
},
{
example: 'hash:3192ac1*',
example: 'hash: 3192ac1*',
syntax: 'hash:',
title: 'Package hash',
},
{
example: 'key:"bar/"',
example: 'key: "bar/"',
syntax: 'key:',
title: 'Object key',
},
{
example: 'metadata:dapi',
example: 'metadata: dapi',
syntax: 'metadata:',
title: 'Package metadata',
},
{
example: 'size:>=4096',
example: 'size: >=4096',
syntax: 'size:',
title: 'Object size in bytes',
},
{
example: 'version_id:t.LVVCx*',
example: 'version_id: t.LVVCx*',
syntax: 'version_id:',
title: 'Object version id',
},
{
example: 'package_stats\n  .total_files:>100',
example: 'package_stats\n  .total_files: >100',
syntax: 'package_stats\n  .total_files:',
title: 'Package total files',
},
{
example: 'package_stats\n  .total_bytes:<100',
example: 'package_stats\n  .total_bytes: <100',
syntax: 'package_stats\n  .total_bytes:',
title: 'Package total bytes',
},
Expand All @@ -110,7 +119,7 @@ const syntaxHelpRows = [
title: 'Negation',
},
{
example: '_exists_:content',
example: '_exists_: content',
syntax: '_exists_:',
title: 'Matches any non-null value for the given field',
},
Expand Down Expand Up @@ -238,15 +247,11 @@ function DocsExternalLink() {
)
}

function normalizeSyntaxItem(s) {
return s.replace(/\s/g, '')
}

export default function Help({ className, onQuery }) {
export default function Help({ className, onQuery, ...props }) {
const classes = useStyles()

return (
<div className={className}>
<M.Paper className={cx(classes.root, className)} {...props}>
<Lab.TreeView
defaultCollapseIcon={<M.Icon>arrow_drop_down</M.Icon>}
defaultExpandIcon={<M.Icon>arrow_right</M.Icon>}
Expand All @@ -272,7 +277,7 @@ export default function Help({ className, onQuery }) {
key={item.syntax}
className={classes.item}
button
onClick={() => onQuery(normalizeSyntaxItem(item.syntax))}
onClick={() => onQuery(item.syntax)}
>
<Item item={item} />
</M.ListItem>
Expand All @@ -283,6 +288,6 @@ export default function Help({ className, onQuery }) {
</Lab.TreeView>

<DocsExternalLink />
</div>
</M.Paper>
)
}
19 changes: 5 additions & 14 deletions catalog/app/containers/NavBar/Search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,16 +46,9 @@ const useStyles = M.makeStyles((t) => ({
opacity: 0.8,
},
help: {
maxHeight: t.spacing(50),
overflowY: 'auto',
padding: t.spacing(0, 4),

[t.breakpoints.down('xs')]: {
padding: t.spacing(0, 1),
},
},
helpWrapper: {
left: 0,
maxHeight: '400px',
overflowY: 'auto',
position: 'absolute',
right: 0,
top: t.spacing(5),
Expand Down Expand Up @@ -116,7 +109,6 @@ function SearchBox({
const {
disabled: disabledCls,
expanded: expandedCls,
helpWrapper: helpWrapperCls,
help: helpCls,
hidden: hiddenCls,
iconized: iconizedCls,
Expand All @@ -137,9 +129,7 @@ function SearchBox({
<div className={wrapperCls}>
<M.MuiThemeProvider theme={style.appTheme}>
<M.Fade in={helpOpened}>
<M.Paper className={helpWrapperCls}>
<SearchHelp className={helpCls} onQuery={onQuery} />
</M.Paper>
<SearchHelp className={helpCls} onQuery={onQuery} />
</M.Fade>
</M.MuiThemeProvider>

Expand Down Expand Up @@ -218,7 +208,8 @@ function State({ query, makeUrl, children, onFocus, onBlur }) {

const handleQuery = React.useCallback(
(strPart) => {
change(`${value} ${strPart}`)
const normalized = strPart.replace(/\s/g, '')
change(`${value} ${normalized}`)
},
[value],
)
Expand Down
127 changes: 34 additions & 93 deletions catalog/app/website/pages/OpenLanding/Search/Search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,12 @@ import { push } from 'connected-react-router/esm/immutable'
import * as React from 'react'
import * as redux from 'react-redux'
import * as M from '@material-ui/core'
import * as Lab from '@material-ui/lab'
import { fade } from '@material-ui/core/styles'

import * as style from 'constants/style'
import * as BucketConfig from 'utils/BucketConfig'
import * as NamedRoutes from 'utils/NamedRoutes'
import img2x from 'utils/img2x'

import SearchHelp from 'containers/NavBar/Help'
import Dots from 'website/components/Backgrounds/Dots'

import bg from './search-bg.png'
Expand All @@ -32,24 +30,6 @@ const useStyles = M.makeStyles((t) => ({
top: 0,
},
},
help: {
maxHeight: '490px',
overflowY: 'auto',
padding: t.spacing(0, 2),

[t.breakpoints.down('xs')]: {
maxHeight: '400px',
padding: t.spacing(0, 2),
},
},
helpWrapper: {
borderRadius: t.spacing(0.5),
marginTop: t.spacing(8),
maxWidth: 690,
position: 'absolute',
width: '100%',
zIndex: 1,
},
inner: {
alignItems: 'center',
display: 'flex',
Expand All @@ -68,40 +48,34 @@ const useStyles = M.makeStyles((t) => ({
fontSize: t.typography.pxToRem(20),
lineHeight: t.typography.pxToRem(60),
maxWidth: 750,
overflow: 'hidden',
paddingLeft: 0,
width: '100%',
},
inputInput: {
height: 'auto',
paddingBottom: 0,
paddingLeft: t.spacing(15),
paddingLeft: t.spacing(9),
paddingRight: t.spacing(4),
paddingTop: 0,
},
inputOptions: {
borderColor: t.palette.grey[300],
borderRadius: 0,
borderWidth: '0 1px 0 0',
adornment: {
color: t.palette.grey[600],
paddingBottom: t.spacing(1.5),
paddingLeft: t.spacing(3),
paddingRight: t.spacing(1.5),
paddingTop: t.spacing(1.5),
},
inputOptionsSelected: {
boxShadow: 'inset -1px 0 4px rgba(0, 0, 0, 0.2)',
},
inputWrapper: {
display: 'flex',
justifyContent: 'center',
left: t.spacing(3),
pointerEvents: 'none',
position: 'absolute',
},
hintContainer: {
maxWidth: 750,
position: 'relative',
width: '100%',
},
adornment: {
justifyContent: 'center',
hint: {
...t.typography.body2,
color: fade(t.palette.common.white, 0.6),
lineHeight: 1,
position: 'absolute',
height: 'auto',
maxHeight: '100%',
right: 30,
top: 12,
},
stats: {
display: 'flex',
Expand Down Expand Up @@ -149,23 +123,11 @@ export default function Search() {
const bucketCount = BucketConfig.useRelevantBucketConfigs().length

const [value, change] = React.useState('')
const [helpOpened, setHelpOpened] = React.useState(false)

const onChange = React.useCallback((evt) => {
change(evt.target.value)
}, [])

const onQuery = React.useCallback(
(strPart) => {
change(`${value} ${strPart}`)
},
[value],
)

const onToggleOptions = React.useCallback(() => setHelpOpened(!helpOpened), [
helpOpened,
])

const onKeyDown = React.useCallback(
(evt) => {
// eslint-disable-next-line default-case
Expand All @@ -186,45 +148,24 @@ export default function Search() {
<Dots />
<M.Container maxWidth="lg" className={classes.container}>
<div className={classes.inner}>
<M.ClickAwayListener onClickAway={() => setHelpOpened(false)}>
<div className={classes.inputWrapper}>
<M.InputBase
{...{ value, onChange, onKeyDown }}
startAdornment={
<M.InputAdornment className={classes.adornment}>
<M.MuiThemeProvider theme={style.appTheme}>
<Lab.ToggleButton
className={classes.inputOptions}
size="large"
value="help"
selected={helpOpened}
onChange={onToggleOptions}
classes={{
selected: classes.inputOptionsSelected,
}}
>
<M.Icon fontSize="large">search</M.Icon>
<M.Icon fontSize="large">
{helpOpened ? 'arrow_drop_up' : 'arrow_drop_down'}
</M.Icon>
</Lab.ToggleButton>
</M.MuiThemeProvider>
</M.InputAdornment>
}
classes={{ root: classes.inputRoot, input: classes.inputInput }}
placeholder="Search"
/>

<M.MuiThemeProvider theme={style.appTheme}>
<M.Fade in={helpOpened}>
<M.Paper className={classes.helpWrapper}>
<SearchHelp className={classes.help} onQuery={onQuery} />
</M.Paper>
</M.Fade>
</M.MuiThemeProvider>
</div>
</M.ClickAwayListener>

<M.InputBase
{...{ value, onChange, onKeyDown }}
startAdornment={
<M.InputAdornment className={classes.adornment}>
<M.Icon fontSize="large">search</M.Icon>
</M.InputAdornment>
}
classes={{ root: classes.inputRoot, input: classes.inputInput }}
placeholder="Search"
/>
<div className={classes.hintContainer}>
<a
className={classes.hint}
href="https://www.elastic.co/guide/en/elasticsearch/reference/6.8/query-dsl-simple-query-string-query.html#_simple_query_string_syntax"
>
Search syntax
</a>
</div>
<div className={classes.stats}>
<div className={classes.stat}>
<div className={classes.statValue}>10.2 Billion</div>
Expand Down
1 change: 0 additions & 1 deletion docs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@

## Catalog, Lambdas
* [Added] Retry logic for failed queries, minimize load on ES for sample, images
* [Added] Search help dropdown for the index landing page ([#1838](https://github.com/quiltdata/quilt/pull/1838))
overviews ([#1864](https://github.com/quiltdata/quilt/pull/1864/))
* [Fixed] Incomplete package stats for empty packages in es/indexer Lambda ([#1869](https://github.com/quiltdata/quilt/pull/1869))

Expand Down

0 comments on commit 0c15ca0

Please sign in to comment.