Tjmadonna/search UI update

src/components/custom/edit/dataset/AncestorIds.jsx

@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {Form} from 'react-bootstrap';
 import {Results, SearchBox} from "@elastic/react-search-ui";
 import {Layout} from "@elastic/react-search-ui-views";
@@ -16,11 +16,13 @@ import {getUBKGFullName} from "../../js/functions";
 import SenNetPopover from "../../../SenNetPopover";
 import SearchUIContainer from 'search-ui/components/core/SearchUIContainer';
 import FacetsContent from '../../search/FacetsContent';
-import SearchUIContext from 'search-ui/components/core/SearchUIContext';
 import AppContext from "../../../../context/AppContext";
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 
 function BodyContent({ handleChangeAncestor, data }) {
-    const { wasSearched, filters } = useContext(SearchUIContext)
+
+    const { wasSearched, filters } = useSearchUIContext();
+
     const {hasAuthenticationCookie, isUnauthorized } = useContext(AppContext)
     const addConditional = (key, entity) => {
         valid_dataset_ancestor_config['searchQuery']['conditionalFacets'][key] = ({filters}) => {

src/components/custom/edit/sample/AncestorId.jsx

@@ -13,13 +13,13 @@ import SelectedFilters from "../../layout/SelectedFilters";
 import {getUBKGFullName} from "../../js/functions";
 import SenNetPopover from "../../../SenNetPopover";
 import SearchUIContainer from 'search-ui/components/core/SearchUIContainer';
-import SearchUIContext from 'search-ui/components/core/SearchUIContext';
 import FacetsContent from '../../search/FacetsContent';
 import AppContext from "../../../../context/AppContext";
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 
 function BodyContent({ handleChangeSource, data }) {
     const {hasAuthenticationCookie, isUnauthorized } = useContext(AppContext)
-    const { filters } = useContext(SearchUIContext)
+    const { filters } = useSearchUIContext();
     const includedExclude = useRef(false)
 
     exclude_dataset_config['searchQuery']['conditionalFacets']['rui_location'] = ({filters}) => {
@@ -51,6 +51,12 @@ function BodyContent({ handleChangeSource, data }) {
 }
 
 const AncestorId = ({fetchSource, onChange, source, data}) => {
+    const {
+        adminGroup,
+        authorized,
+        hasAuthenticationCookie
+    } = useContext(AppContext);
+
     const [showHideModal, setShowHideModal] = useState(false)
 
     const handleSearchFormSubmit = (event, onSubmit) => {
@@ -77,6 +83,12 @@ const AncestorId = ({fetchSource, onChange, source, data}) => {
         hideModal();
     }
 
+    const authState = {
+        isAuthenticated: hasAuthenticationCookie() === true,
+        isAuthorized: authorized === true,
+        isAdmin: adminGroup === true
+    }
+
     return (
         <>
             <Form.Label>Ancestor ID <span
@@ -106,7 +118,7 @@ const AncestorId = ({fetchSource, onChange, source, data}) => {
                 keyboard={false}
             >
                 <Modal.Body>
-                    <SearchUIContainer config={exclude_dataset_config} name={undefined}>
+                    <SearchUIContainer config={exclude_dataset_config} name={undefined} authState={authState}>
                         <Layout
                             header={
                                 <div className="search-box-header js-gtm--search">

src/components/custom/layout/CustomClearSearchBox.js

@@ -1,9 +1,9 @@
-import React, { useContext } from "react";
+import React from "react";
 import {withSearch} from "@elastic/react-search-ui";
-import SearchUIContext from "search-ui/components/core/SearchUIContext";
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 
 function CustomClearSearchBox({shouldClearFilters = true}) {
-    const { clearSearchTerm, setPageSize, setPageNumber } = useContext(SearchUIContext)
+    const { clearSearchTerm, setPageSize, setPageNumber } = useSearchUIContext();
 
     function handleClearFiltersClick() {
         setPageSize(20)

src/components/custom/search/BodyContent.jsx

@@ -1,10 +1,9 @@
-import { useContext } from 'react'
 import { Results } from '@elastic/react-search-ui'
-import SearchUIContext from 'search-ui/components/core/SearchUIContext'
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 import Spinner from '../Spinner'
 
 function BodyContent({ view }) {
-    const { wasSearched, filters, rawResponse } = useContext(SearchUIContext)
+    const { wasSearched, filters, rawResponse } = useSearchUIContext()
 
     return (
         <div

src/components/custom/search/FacetsContent.jsx

@@ -1,9 +1,8 @@
-import { useContext } from 'react'
 import Facets from 'search-ui/components/core/Facets'
-import SearchUIContext from 'search-ui/components/core/SearchUIContext'
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 
 function FacetsContent({ transformFunction }) {
-    const { wasSearched } = useContext(SearchUIContext)
+    const { wasSearched } = useSearchUIContext()
 
     return <>{wasSearched && <Facets transformFunction={transformFunction} />}</>
 }

src/components/custom/search/SelectedFacets.jsx

@@ -1,10 +1,9 @@
-import { useContext } from 'react'
 import { Chip } from '@mui/material'
 import { getUBKGFullName } from '../js/functions'
-import SearchUIContext from 'search-ui/components/core/SearchUIContext'
+import { useSearchUIContext } from "search-ui/components/core/SearchUIContext";
 
 function SelectedFacets() {
-    const { filters, setFilter, removeFilter } = useContext(SearchUIContext)
+    const { facetConfig, filters, setFilter, removeFilter } = useSearchUIContext()
 
     const getSelector = (pre, label, value) => {
         return `sui-${pre}--${formatVal(label)}-${formatVal(value)}`
@@ -14,94 +13,105 @@ function SelectedFacets() {
         return `${id}`.replace(/\W+/g, '')
     }
 
-    const convertToDisplayLabel = (filter, key) => {
-        switch (filter.uiType) {
+    const convertToDisplayLabel = (facet, key) => {
+        switch (facet.facetType) {
             case 'daterange':
                 const datePrefix = key === 'from' ? 'Start' : 'End'
-                return `${datePrefix} ${filter.label}`
-            case 'numrange':
+                return `${datePrefix} ${facet.label}`
+            case 'histogram':
                 const numPrefix = key === 'from' ? 'Min' : 'Max'
-                return `${numPrefix} ${filter.label}`
+                return `${numPrefix} ${facet.label}`
             default:
-                return filter.label
+                return facet.label
         }
     }
 
-    const convertToDisplayValue = (filter, value) => {
-        switch (filter.uiType) {
+    const convertToDisplayValue = (facet, value) => {
+        switch (facet.facetType) {
             case 'daterange':
                 return new Date(value).toLocaleDateString('en-US', { timeZone: 'UTC' })
-            case 'numrange':
+            case 'histogram':
                 return value
             default:
                 return getUBKGFullName(value)
         }
     }
 
-    const handleDelete = (e, filter, value, key) => {
+    const handleDelete = (e, filter, facet, value, key) => {
         e.preventDefault()
-        if (filter.type === 'range') {
-            const newValue = { ...value }
-            delete newValue[key]
-            if (!newValue.from && !newValue.to) {
-                removeFilter(filter.field, value, 'SelectedFacets')
-            } else {
-                setFilter(filter.field, newValue, 'SelectedFacets')
-            }
-        } else {
-            removeFilter(filter.field, value, 'SelectedFacets')
+        switch (facet.facetType) {
+            case 'daterange':
+            case 'histogram':
+                const newValue = { ...value }
+                delete newValue[key]
+                if (!newValue.from && !newValue.to) {
+                    removeFilter(filter.field, value)
+                } else {
+                    setFilter(filter.field, newValue)
+                }
+                break;
+            default:
+                removeFilter(filter.field, value)
+                break;
         }
     }
 
-    const buildRangeFacetChip = (filter, value) => {
+    const buildRangeFacetChip = (filter, facet, value) => {
         const chips = []
         Array('from', 'to').forEach((key) => {
-            if (!value[key]) return
+            if (!value[key])
+                return
+
             chips.push(
                 <Chip
                     key={`${filter.field}_${key}`}
                     className={`${getSelector('chipToggle', filter.field, key)}`}
                     label={
                         <>
                             {' '}
-                            <span className='chip-title'>{convertToDisplayLabel(filter, key)}</span>:{' '}
-                            {convertToDisplayValue(filter, value[key])}
+                            <span className='chip-title'>{convertToDisplayLabel(facet, key)}</span>:{' '}
+                            {convertToDisplayValue(facet, value[key])}
                         </>
                     }
                     variant='outlined'
-                    onDelete={(e) => handleDelete(e, filter, value, key)}
+                    onDelete={(e) => handleDelete(e, filter, facet, value, key)}
                 />
             )
         })
         return chips
     }
 
-    const buildValueFacetChip = (filter, value) => {
+    const buildValueFacetChip = (filter, facet, value) => {
         return (
             <Chip
                 key={`${filter.field}_${formatVal(value)}`}
                 className={`${getSelector('chipToggle', filter.field, value)}`}
                 label={
                     <>
                         {' '}
-                        <span className='chip-title'>{convertToDisplayLabel(filter)}</span>:{' '}
-                        {convertToDisplayValue(filter, value)}
+                        <span className='chip-title'>{convertToDisplayLabel(facet)}</span>:{' '}
+                        {convertToDisplayValue(facet, value)}
                     </>
                 }
                 variant='outlined'
-                onDelete={(e) => handleDelete(e, filter, value)}
+                onDelete={(e) => handleDelete(e, filter, facet, value)}
             />
         )
     }
 
     return (
         <div className={`c-SelectedFacets`}>
             {filters.reduce((acc, filter) => {
+                const facet = facetConfig[filter.field]
                 for (const value of filter.values) {
-                    if (filter.type === 'range') {
-                        acc.push(...buildRangeFacetChip(filter, value))
-                    } else {
-                        acc.push(buildValueFacetChip(filter, value))
+                    switch (facet.facetType) {
+                    case 'daterange':
+                    case 'histogram':
+                        acc.push(...buildRangeFacetChip(filter, facet, value))
+                        break;
+                    default:
+                        acc.push(buildValueFacetChip(filter, facet, value))
+                        break;
                     }
                 }
                 return acc

src/config/config.js

@@ -140,27 +140,58 @@ export let valid_dataset_ancestor_config = _.cloneDeep(ancestor_config)
 export let exclude_dataset_config = _.cloneDeep(ancestor_config);
 exclude_dataset_config['searchQuery']['excludeFilters'].push(
     {
-        keyword: "entity_type.keyword",
-        value: "Dataset"
-    },
-    {
-        keyword: "entity_type.keyword",
-        value: "Upload"
-    },
-    {
-        keyword: "entity_type.keyword",
-        value: "Collection"
+        type: 'term',
+        field: 'entity_type.keyword',
+        values: ['Collection', 'Dataset', 'Upload']
     }
-);
+)
 
 export function FilterIsSelected(fieldName, value) {
-    return ({filters}) => {
-        return filters.some(
-            (f) => f.field === fieldName && (!value || f.values.includes(value))
-        );
-    };
+    return ({filters, aggregations}) => {
+        for (const filter of filters) {
+            if (filter.field === fieldName && filter.values.includes(value)) {
+                return true
+            }
+        }
+        return false
+    }
 }
 
 export const STORAGE_KEY = (key = '') => `sn-portal.${key}`
 
 export const COLS_ORDER_KEY = (context = '') => `${context}.columnsOrder`
+
+export function doesTermFilterContainValues(name, values) {
+    return (filters, auth) => {
+        const filter = filters.find((f) => f.field === name)
+        return (
+            filter != undefined && values.some((v) => filter.values.includes(v))
+        )
+    }
+}
+
+export function doFiltersContainField(field) {
+    return (filters, auth) => {
+        return filters.some((f) => f.field === field)
+    }
+}
+
+export function doesAggregationHaveBuckets(field) {
+    return (filters, aggregations, auth) => {
+        try {
+            return (
+                aggregations[field] !== undefined && aggregations[field].buckets.length > 0
+            )
+        } catch {
+            return false
+        }
+    }
+}
+
+export function doesTermOptionHaveDocCount(option, filters, aggregations, auth) {
+    return option.doc_count > 0
+}
+
+export function isDateFacetVisible(filters, aggregations, auth) {
+    return Object.keys(aggregations).length > 0
+}