@truedat/dd 6.0.1 → 6.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "6.0.1",
+  "version": "6.0.2",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -34,7 +34,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "6.0.1",
+    "@truedat/test": "6.0.2",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.7.1",
-    "@truedat/auth": "6.0.1",
-    "@truedat/core": "6.0.1",
-    "@truedat/df": "6.0.1",
+    "@truedat/auth": "6.0.2",
+    "@truedat/core": "6.0.2",
+    "@truedat/df": "6.0.2",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "path-to-regexp": "^1.7.0",
@@ -115,5 +115,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "2ce73d263401e0a7959f9111ba3370b6810b5420"
+  "gitHead": "dab67cd6f569ca6de2fd8e0b5de260cb5ee261c3"
 }

package/src/api.js

@@ -1,4 +1,5 @@
 const API_BUCKET_STRUCTURES = "/api/buckets/structures";
+const API_BUCKET_PATHS = "/api/buckets/paths";
 const API_BUCKET_STRUCTURE = "/api/buckets/structures/:id";
 const API_DATA_STRUCTURE = "/api/data_structures/:id";
 const API_DATA_STRUCTURES_BULK_UPDATE = "/api/data_structures/bulk_update";
@@ -54,6 +55,7 @@ const API_STRUCTURE_NOTES = "/api/data_structures/:data_structure_id/notes";
 
 export {
   API_BUCKET_STRUCTURES,
+  API_BUCKET_PATHS,
   API_BUCKET_STRUCTURE,
   API_DATA_STRUCTURE,
   API_DATA_STRUCTURES_BULK_UPDATE,

package/src/components/BucketView.js

@@ -7,7 +7,6 @@ import { useParams, useLocation } from "react-router-dom";
 import searchImage from "assets/searching.png";
 import { FormattedMessage, useIntl } from "react-intl";
 import { saveNavFilter as saveNavFilterRoutine } from "../routines";
-import { isBucketFilter } from "../utils/bucketNav";
 import FilteredNav from "./FilteredNav";
 import StructureCrumbs from "./StructureCrumbs";
 import StructureGrantCart from "./StructureGrantCart";
@@ -53,6 +52,7 @@ export const BucketView = ({
       getNavFilterURLParams,
       _.values,
       (keyValue) => Object.fromEntries(new Map([keyValue]).entries()),
+      (filter) => ({ view: "BUCKET_VIEW", filter }),
       saveNavFilter
     )(location);
   }, [location, saveNavFilter]);
@@ -68,8 +68,8 @@ export const BucketView = ({
           </Grid.Row>
           <Grid.Column width={4}>
             <Segment>
-              {isBucketFilter(navFilter) ? (
-                <FilteredNav filter={navFilter} />
+              {navFilter?.view === "BUCKET_VIEW" ? (
+                <FilteredNav navFilter={navFilter} />
               ) : null}
             </Segment>
           </Grid.Column>
@@ -90,6 +90,7 @@ export const BucketView = ({
                     {navFilterOneProp?.propertyPath
                       ? `${formatMessage({
                           id: navFilterOneProp.propertyPath,
+                          defaultMessage: navFilterOneProp.propertyPath,
                         })} > ${navFilterOneProp?.propertyValue}`
                       : null}
                   </Header>

package/src/components/CatalogCustomViewCards.js

@@ -9,6 +9,7 @@ import { FormattedNumber } from "react-intl";
 import { CardGroupsAccordion } from "@truedat/core/components";
 import { linkTo } from "@truedat/core/routes";
 import { fetchStructureFilters as fetchStructureFiltersRoutine } from "@truedat/dd/routines";
+import { Loading } from "@truedat/core/components";
 
 const moveMissingBucketToTheEnd = (buckets) =>
   _.sortBy(({ key }) => (key === "_missing" || key === "" ? 1 : 0))(buckets);
@@ -29,7 +30,9 @@ export const CatalogCustomViewCards = ({
   const { propertyPath } = useParams();
   const groups = [];
 
-  return Object.keys(groups).length > 1 ? (
+  return _.isEmpty(structureFilters) ? (
+    <Loading />
+  ) : Object.keys(groups).length > 1 ? (
     <CardGroupsAccordion
       groups={groups}
       cardComponent={CatalogCustomViewCard}

package/src/components/FilteredNav.js

@@ -1,19 +1,23 @@
 import _ from "lodash/fp";
-import React, { useState, useEffect } from "react";
+import React, { useState, useRef } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import { lowerDeburrTrim } from "@truedat/core/services/sort";
-import { Button, Icon, Loader } from "semantic-ui-react";
+import { Button, Icon } from "semantic-ui-react";
 import { useIntl } from "react-intl";
-import { useBucketStructures } from "../hooks/useBucketStructures";
-import { toggleStructuresAliasNameMode } from "../routines";
+
 import { getStructureParent } from "../selectors";
+import { toggleStructuresAliasNameMode } from "../routines";
+import { useBucketStructures } from "../hooks/useBucketStructures";
+import { useBucketPaths } from "../hooks/useBucketPaths";
 import StructureNav from "./StructureNav";
 import StructureSearch from "./StructureSearch";
 
 export const FilteredNav = ({
   childStructures,
+  fnHasCatalogViewProp,
+  isLoading,
   parentStructure,
+  setSearchValue,
   structuresAliasNameMode,
   toggleStructuresAliasNameMode,
   totalStructures,
@@ -22,15 +26,6 @@ export const FilteredNav = ({
     _.has("original_name")(structure)
   )(childStructures);
   const { formatMessage } = useIntl();
-  const [searchValue, setSearchValue] = useState("");
-  const onChange = (searchValue) => setSearchValue(searchValue);
-
-  const filteredStructures = (collection) => {
-    const normalizedSearchValue = lowerDeburrTrim(searchValue);
-    return _.filter((structure) =>
-      _.contains(normalizedSearchValue)(lowerDeburrTrim(structure.name))
-    )(collection);
-  };
 
   return (
     <>
@@ -46,6 +41,7 @@ export const FilteredNav = ({
             icon
             data-tooltip={formatMessage({
               id: "structures.props.functional_name",
+              defaultMessage: "structures.props.functional_name",
             })}
             onClick={() => toggleStructuresAliasNameMode(true)}
           >
@@ -64,12 +60,14 @@ export const FilteredNav = ({
           </Button>
         </Button.Group>
       </div>
-      <StructureSearch onChange={onChange} />
+      <StructureSearch onChange={setSearchValue} isLoading={isLoading} />
       <StructureNav
-        childStructures={filteredStructures(childStructures)}
+        childStructures={childStructures}
         parentStructure={parentStructure}
         totalChildStructures={totalStructures}
         structuresAliasNameMode={structuresAliasNameMode}
+        fnHasCatalogViewProp={fnHasCatalogViewProp}
+        isLoading={isLoading}
       />
     </>
   );
@@ -77,48 +75,105 @@ export const FilteredNav = ({
 
 FilteredNav.propTypes = {
   childStructures: PropTypes.array,
+  isLoading: PropTypes.bool,
   parentStructure: PropTypes.object,
+  setSearchValue: PropTypes.func,
   structuresAliasNameMode: PropTypes.bool,
   toggleStructuresAliasNameMode: PropTypes.func,
   totalStructures: PropTypes.number,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
+// ElasticSearch identifier null_value
+// It is also the root ID.
+const ES_ID_NULL_VALUE = 0;
+
 export const FilteredNavLoader = ({
-  filter,
+  navFilter,
   parentStructure,
   structure,
   structuresAliasNameMode,
   toggleStructuresAliasNameMode,
 }) => {
-  const { trigger, data, error } = useBucketStructures();
-
-  useEffect(() => {
-    const parentFilter = _.isObject(structure)
-      ? {
-          parent_id: _.isEmpty(structure.children)
-            ? _.pathOr("", "parents[0].data_structure_id")(structure)
-            : _.pathOr("", "id")(structure),
-        }
-      : { parent_id: "" };
-
-    trigger({ ...filter, ...parentFilter });
-  }, [trigger, structure, filter]);
-
-  return !data && !error ? (
-    <Loader />
-  ) : (
+  const { data: dataBucketPaths, isLoading: isLoadingBucketPaths } =
+    useBucketPaths(navFilter);
+
+  const bucketPaths = dataBucketPaths?.data;
+
+  const initialTotalRef = useRef();
+
+  const subTreeChildren = (ancestry, dsid) =>
+    ancestry
+      ? _.flow(
+          _.map(({ data_structure_id }) => data_structure_id),
+          (ancestryDsIds) => [...ancestryDsIds, dsid],
+          (idPath) => _.get(idPath, bucketPaths?.forest),
+          _.keys,
+          (keys) => keys || []
+        )(ancestry)
+      : _.keys(bucketPaths?.forest);
+
+  const children =
+    navFilter.view === "SYSTEM_STRUCTURES"
+      ? structure?.children
+      : [
+          ...subTreeChildren(structure?.ancestry, structure?.id),
+          ...(bucketPaths?.filtered_children[structure?.id || 0] || []),
+        ];
+
+  const parentId =
+    structure?.parents?.[0]?.data_structure_id || ES_ID_NULL_VALUE;
+
+  const childrenOrSiblings = !_.isEmpty(children)
+    ? children
+    : [
+        ...subTreeChildren(structure?.ancestry.slice(0, -1), structure?.id),
+        ...(bucketPaths?.filtered_children[parentId] || []),
+      ];
+
+  // If there are children, show children (next parent_id is structure id)
+  // If there are no children, show siblings (next parent_id is structure parent id)
+  const parentOrCurrentId = _.isEmpty(children)
+    ? parentId
+    : structure?.id || ES_ID_NULL_VALUE;
+
+  const initialSearchValue = "";
+  const [searchValue, setSearchValue] = useState(initialSearchValue);
+
+  const { data: dataBucketStructures, isLoading } = useBucketStructures({
+    navFilter,
+    parentFilter: { parent_id: parentOrCurrentId },
+    ids: childrenOrSiblings,
+    query: searchValue,
+  });
+  if (searchValue === initialSearchValue) {
+    initialTotalRef.current = dataBucketStructures?.headers["x-total-count"];
+  }
+  const bucketStructures = dataBucketStructures?.data?.data;
+
+  const fnHasCatalogViewProp = (structure) =>
+    navFilter?.view === "BUCKET_VIEW"
+      ? bucketPaths?.filtered_children[parentOrCurrentId]?.includes(
+          structure?.id
+        ) || false
+      : undefined;
+
+  return (
     <FilteredNav
-      childStructures={data.data.data}
+      childStructures={bucketStructures || []}
       parentStructure={parentStructure}
-      totalStructures={data.headers["x-total-count"]}
+      totalStructures={initialTotalRef.current}
+      fnHasCatalogViewProp={fnHasCatalogViewProp}
       structuresAliasNameMode={structuresAliasNameMode}
       toggleStructuresAliasNameMode={toggleStructuresAliasNameMode}
+      setSearchValue={setSearchValue}
+      isLoading={isLoading || isLoadingBucketPaths}
     />
   );
 };
 
 FilteredNavLoader.propTypes = {
-  filter: PropTypes.object,
+  navFilter: PropTypes.object,
   parentStructure: PropTypes.object,
   structure: PropTypes.object,
   structuresAliasNameMode: PropTypes.bool,

package/src/components/StructureCrumbs.js

@@ -18,21 +18,21 @@ export const StructuresCrumb = () => (
 
 const filterQueryParams = _.flow(
   Object.entries,
-  _.first,
+  _.first, // only works for one filter
   ([propertyPath, propertyValue]) => ({
     propertyPath,
     propertyValue,
   }),
-  (queryParams) => new URLSearchParams(queryParams)
+  (queryParams) => new URLSearchParams(queryParams),
 );
 
 export const SystemCrumb = ({ id, name, navFilter }) => {
-  const [propertyPath, propertyValue] = !_.isEmpty(navFilter)
-    ? _.toPairs(navFilter)[0]
+  const [propertyPath, propertyValue] = !_.isEmpty(navFilter.filter)
+    ? _.toPairs(navFilter.filter)[0]
     : [null, null];
   return (
     <>
-      {_.isEmpty(navFilter) || navFilter?.system_id ? (
+      {navFilter.view === "SYSTEM_STRUCTURES" ? (
         <Breadcrumb.Section
           as={Link}
           to={linkTo.SYSTEM_STRUCTURES({ id })}
@@ -40,25 +40,25 @@ export const SystemCrumb = ({ id, name, navFilter }) => {
         >
           {name}
         </Breadcrumb.Section>
-      ) : (
+      ) : navFilter.view === "BUCKET_VIEW" ? (
         <>
           <Breadcrumb.Section
             as={Link}
             to={`${linkTo.BUCKETS_VIEW({ propertyPath })}`}
             active={false}
           >
-            <FormattedMessage id={propertyPath} />
+            <FormattedMessage id={propertyPath} defaultMessage={propertyPath} />
           </Breadcrumb.Section>
           <Breadcrumb.Divider icon="right angle" />
           <Breadcrumb.Section
             as={Link}
-            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`}
+            to={`${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter.filter)}`}
             active={false}
           >
             {propertyValue}
           </Breadcrumb.Section>
         </>
-      )}
+      ) : undefined}
       <Breadcrumb.Divider icon="right angle" />
     </>
   );

package/src/components/StructureItem.js

@@ -23,9 +23,12 @@ const filterQueryParams = _.flow(
   (queryParams) => new URLSearchParams(queryParams)
 );
 
-const bucketToBreadcrumbs = ({ navFilter, formatMessage }) => {
-  const [propertyPath, propertyValue] = _.toPairs(navFilter)[0];
-  return `${formatMessage({ id: propertyPath })} > ${propertyValue}`;
+const bucketToBreadcrumbs = ({ filter, formatMessage }) => {
+  const [propertyPath, propertyValue] = _.toPairs(filter)[0];
+  return `${formatMessage({
+    id: propertyPath,
+    defaultMessage: propertyPath,
+  })} > ${propertyValue}`;
 };
 
 export const StructureItem = ({
@@ -37,11 +40,44 @@ export const StructureItem = ({
   navFilter,
   original_name,
   type,
+  /* hasCatalogViewProp can be:
+   *   - true/false in bucket view (catalog view)
+   *   - undefined in regular structure view
+   */
+  hasCatalogViewProp,
 }) => {
   const { formatMessage } = useIntl();
 
   const displayName = structuresAliasNameMode ? name : original_name || name;
 
+  const truthyToClassName = {
+    deleted_at: "deleted",
+    hasCatalogViewProp: "has-catalog-view-prop",
+  };
+
+  const notUndefinedToClassName = {
+    hasCatalogViewProp: "has-no-catalog-view-prop",
+  };
+
+  const toClassNames = _.flow(
+    Object.entries,
+    _.reduce(
+      (acc, [key, value]) =>
+        value
+          ? [truthyToClassName[key], ...acc]
+          : value !== undefined
+          ? [
+              ...(notUndefinedToClassName[key]
+                ? [notUndefinedToClassName[key]]
+                : []),
+              ...acc,
+            ]
+          : acc,
+      []
+    ),
+    _.join(" ")
+  );
+
   return (
     <List.Item
       as={active ? "a" : Link}
@@ -52,19 +88,19 @@ export const StructureItem = ({
           : type == "system" && id
           ? linkTo.SYSTEM_STRUCTURES({ id })
           : type == "bucket"
-          ? `${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter)}`
+          ? `${linkTo.BUCKET_VIEW()}?${filterQueryParams(navFilter.filter)}`
           : id
           ? linkTo.STRUCTURE({ id })
           : STRUCTURES
       }
-      className={deleted_at ? "deleted" : undefined}
+      className={toClassNames({ deleted_at, hasCatalogViewProp })}
       active={active}
     >
       <List.Icon name={getIcon(formatMessage, type)} verticalAlign="middle" />
       <List.Content>
         <List.Description>
           {type == "bucket"
-            ? bucketToBreadcrumbs({ navFilter, formatMessage })
+            ? bucketToBreadcrumbs({ filter: navFilter.filter, formatMessage })
             : displayName}
         </List.Description>
       </List.Content>
@@ -81,6 +117,7 @@ StructureItem.propTypes = {
   original_name: PropTypes.string,
   structuresAliasNameMode: PropTypes.bool,
   type: PropTypes.string,
+  hasCatalogViewProp: PropTypes.bool,
 };
 
 export const mapStateToProps = (

package/src/components/StructureItemRoot.js

@@ -6,7 +6,6 @@ import { useHistory } from "react-router-dom";
 import PropTypes from "prop-types";
 import { List } from "semantic-ui-react";
 import { STRUCTURES, linkTo } from "@truedat/core/routes";
-import { isBucketFilter } from "../utils/bucketNav";
 
 const filterParams = _.flow(
   Object.entries,
@@ -19,9 +18,9 @@ const filterParams = _.flow(
 
 export const StructureItemRoot = ({ navFilter }) => {
   const history = useHistory();
-  const url = isBucketFilter(navFilter)
+  const url = navFilter?.view === "BUCKET_VIEW"
     ? linkTo.BUCKETS_VIEW({
-        propertyPath: filterParams(navFilter)?.propertyPath,
+        propertyPath: filterParams(navFilter.filter)?.propertyPath,
       })
     : STRUCTURES;
   return (

package/src/components/StructureItems.js

@@ -3,13 +3,16 @@ import PropTypes from "prop-types";
 import StructureItem from "./StructureItem";
 
 export const StructureItems = ({
-  bucketChildStructures,
   structures,
   structuresAliasNameMode,
+  fnHasCatalogViewProp,
 }) => {
-  return (bucketChildStructures || structures).map((structure, index) => (
+  return structures.map((structure, index) => (
     <StructureItem
       key={index}
+      hasCatalogViewProp={
+        fnHasCatalogViewProp ? fnHasCatalogViewProp(structure) : undefined
+      }
       structuresAliasNameMode={structuresAliasNameMode}
       {...structure}
     />
@@ -19,6 +22,7 @@ export const StructureItems = ({
 StructureItems.propTypes = {
   structures: PropTypes.array,
   structuresAliasNameMode: PropTypes.bool,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export default StructureItems;

package/src/components/StructureNav.js

@@ -2,6 +2,7 @@ import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { List, Divider } from "semantic-ui-react";
+import { Loading } from "@truedat/core/components";
 import { useIntl } from "react-intl";
 import StructureItemRoot from "./StructureItemRoot";
 import StructureItem from "./StructureItem";
@@ -20,6 +21,8 @@ export const StructureNav = ({
   parentStructure,
   structuresAliasNameMode,
   totalChildStructures,
+  fnHasCatalogViewProp,
+  isLoading,
 }) => {
   const { formatMessage } = useIntl();
   const firstWithClasses = _.find(hasNavClass)(childStructures);
@@ -27,7 +30,9 @@ export const StructureNav = ({
     ? _.flow(navClasses, _.head)(firstWithClasses)
     : undefined;
 
-  return (
+  return isLoading ? (
+    <Loading />
+  ) : (
     <>
       <List relaxed selection className="structure-nav">
         <StructureItemRoot />
@@ -42,11 +47,13 @@ export const StructureNav = ({
           <StructureNavClassified
             classifier={classifier}
             structures={childStructures}
+            fnHasCatalogViewProp={fnHasCatalogViewProp}
           />
         ) : (
           <StructureItems
             structures={childStructures}
             structuresAliasNameMode={structuresAliasNameMode}
+            fnHasCatalogViewProp={fnHasCatalogViewProp}
           />
         )}
       </List>
@@ -67,9 +74,11 @@ export const StructureNav = ({
 
 StructureNav.propTypes = {
   childStructures: PropTypes.array,
+  isLoading: PropTypes.bool,
   parentStructure: PropTypes.object,
   structuresAliasNameMode: PropTypes.bool,
   totalChildStructures: PropTypes.number,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export default StructureNav;

package/src/components/StructureNavClassified.js

@@ -11,6 +11,7 @@ export const StructureNavClassified = ({
   classifier,
   structures,
   leafClasses,
+  fnHasCatalogViewProp,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -43,7 +44,12 @@ export const StructureNavClassified = ({
           className: "noselect",
         }}
       />
-      {expanded[label] ? <StructureItems structures={children} /> : null}
+      {expanded[label] ? (
+        <StructureItems
+          structures={children}
+          fnHasCatalogViewProp={fnHasCatalogViewProp}
+        />
+      ) : null}
     </React.Fragment>
   ));
 };
@@ -52,6 +58,7 @@ StructureNavClassified.propTypes = {
   classifier: PropTypes.string,
   structures: PropTypes.array,
   leafClasses: PropTypes.object,
+  fnHasCatalogViewProp: PropTypes.func,
 };
 
 export const mapStateToProps = (state) => ({

package/src/components/StructureSearch.js

@@ -1,20 +1,29 @@
+import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
 import { Input } from "semantic-ui-react";
 
-export const StructureSearch = ({ onChange, loading = false }) => {
-  const { formatMessage } = useIntl();
-  const handleChange = (e) => {
-    onChange(e.target.value);
+// https://stackoverflow.com/a/37312154
+const debounceEventHandler = (...args) => {
+  const debounced = _.debounce(...args);
+  return (e) => {
+    e.persist();
+    return debounced(e);
   };
+};
+
+export const StructureSearch = ({ onChange, isLoading = false }) => {
+  const { formatMessage } = useIntl();
+  const handleChange = (e) => onChange(e.target.value);
+
   return (
     <Input
-      onChange={handleChange}
+      onChange={debounceEventHandler(500, handleChange)}
       icon={{ name: "search", link: true }}
       iconPosition="left"
       fluid
-      loading={loading}
+      loading={isLoading}
       placeholder={formatMessage({ id: "structure.search.placeholder" })}
     />
   );
@@ -22,7 +31,7 @@ export const StructureSearch = ({ onChange, loading = false }) => {
 
 StructureSearch.propTypes = {
   onChange: PropTypes.func,
-  loading: PropTypes.bool,
+  isLoading: PropTypes.bool,
 };
 
 export default StructureSearch;

package/src/components/StructureView.js

@@ -34,7 +34,7 @@ export const StructureView = ({
           <Grid.Row stretched>
             <Grid.Column width={4}>
               <Segment id="filter-nav-container">
-                <FilteredNav filter={navFilter} structure={structure} />
+                <FilteredNav navFilter={navFilter} structure={structure} />
               </Segment>
             </Grid.Column>
             <Grid.Column width={showGrantRequestCart ? 8 : 12}>

package/src/components/StructuresView.js

@@ -19,6 +19,9 @@ import CatalogCustomViewCards from "./CatalogCustomViewCards";
 
 const StructuresHeader = () => {
   const match = useRouteMatch(BUCKETS_VIEW);
+  const propertyPathMessage = !match?.params?.propertyPath
+    ? "structures.subheader"
+    : match?.params?.propertyPath;
 
   return (
     <Header as="h2">
@@ -33,11 +36,8 @@ const StructuresHeader = () => {
         />
         <Header.Subheader>
           <FormattedMessage
-            id={
-              !match?.params?.propertyPath
-                ? "structures.subheader"
-                : match?.params?.propertyPath
-            }
+            id={propertyPathMessage}
+            defaultMessage={propertyPathMessage}
           />
         </Header.Subheader>
       </Header.Content>

package/src/components/SystemStructures.js

@@ -21,7 +21,10 @@ export const SystemStructures = ({
   const { id: systemId } = useParams();
 
   useEffect(() => {
-    saveNavFilter({ system_id: systemId });
+    saveNavFilter({
+      view: "SYSTEM_STRUCTURES",
+      filter: { system_id: systemId },
+    });
   }, [systemId, saveNavFilter]);
 
   return (
@@ -35,7 +38,7 @@ export const SystemStructures = ({
         <Grid.Row stretched>
           <Grid.Column width={4}>
             <Segment>
-              {navFilter?.system_id ? <FilteredNav filter={navFilter} /> : null}
+              {navFilter?.filter?.system_id ? <FilteredNav navFilter={navFilter} /> : null}
             </Segment>
           </Grid.Column>
           <Grid.Column width={12}>

package/src/components/__tests__/BucketView.spec.js

@@ -49,7 +49,8 @@ describe("<BucketView />", () => {
        * mock store from "@truedat/test/render"
        */
       expect(saveNavFilter).toHaveBeenCalledWith({
-        "metadata.region": "eu-west-1",
+        view: "BUCKET_VIEW",
+        filter: { "metadata.region": "eu-west-1" },
       })
     );
   });

package/src/components/__tests__/FilteredNav.spec.js

@@ -1,112 +1,132 @@
 import React from "react";
 import userEvent from "@testing-library/user-event";
 import { render } from "@truedat/test/render";
+import { act } from "react-dom/test-utils";
 
 import FilteredNavLoader, { FilteredNav } from "../FilteredNav";
 
 jest.mock("../../hooks/useBucketStructures", () => {
   const originalModule = jest.requireActual("../../hooks/useBucketStructures");
+  const _ = require("lodash/fp");
+  const { lowerDeburrTrim } = require("@truedat/core/services/sort");
 
   const data = [
     { id: 1, name: "bank_capital" },
     { id: 2, name: "consumorenovables" },
   ];
 
+  const elasticSearchMock = (collection, searchValue) => {
+    const normalizedSearchValue = lowerDeburrTrim(searchValue);
+    return _.filter((structure) =>
+      _.contains(normalizedSearchValue)(lowerDeburrTrim(structure.name))
+    )(collection);
+  };
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useBucketStructures: jest.fn(({ query }) => {
+      const elasticSearchResult = elasticSearchMock(data, query);
+      return {
+        data: {
+          data: { data: elasticSearchResult },
+          headers: { "x-total-count": elasticSearchResult.length },
+        },
+        error: false,
+        isLoading: false,
+      };
+    }),
+  };
+});
+
+jest.mock("../../hooks/useBucketPaths", () => {
+  const originalModule = jest.requireActual("../../hooks/useBucketPaths");
+
+  const data = {
+    forest: {},
+    filtered_children: {},
+  };
+
   return {
     __esModule: true,
     ...originalModule,
-    useBucketStructures: jest.fn(() => ({
-      data: { data: { data }, headers: { "x-total-count": 2 } },
+    useBucketPaths: jest.fn(() => ({
+      data: { data, headers: { "x-total-count": 2 } },
       error: false,
-      trigger: jest.fn(),
+      isLoading: false,
     })),
   };
 });
 
+const navFilter = { view: "SYSTEM_STRUCTURES", filter: {} };
+
 const renderOpts = {
   state: {
-    navFilter: {},
+    navFilter,
   },
 };
 
 describe("<FilteredNav />", () => {
-  it("matches the latest snapshot", () => {
-    const childStructures = [
-      { id: 1, name: "bank_capital" },
-      { id: 2, name: "consumorenovables" },
-    ];
-    const parentStructures = [];
-    const props = { childStructures, parentStructures };
-
-    const { getByText } = render(<FilteredNav {...props} />, renderOpts);
+  it("FilterNavLoader loads from useBucketStructures and shows structures", () => {
+    const { getByText } = render(
+      <FilteredNavLoader navFilter={navFilter} />,
+      renderOpts
+    );
     expect(getByText("bank_capital")).toBeInTheDocument();
     expect(getByText("consumorenovables")).toBeInTheDocument();
   });
 
-  it("ChildStructures prop in StructureNav component  should rendered with one item when inputSearch value change", () => {
-    const childStructures = [
-      { id: 1, name: "bank_capital" },
-      { id: 2, name: "consumorenovables" },
-    ];
-    const parentStructures = [];
-    const props = { childStructures, parentStructures };
-
+  it("StructureSearch: one element matching", async () => {
     const { getByRole, getByText, queryByText } = render(
-      <FilteredNav {...props} />,
+      <FilteredNavLoader navFilter={navFilter} />,
       renderOpts
     );
     expect(getByText("bank_capital")).toBeInTheDocument();
     expect(getByText("consumorenovables")).toBeInTheDocument();
 
+    jest.useFakeTimers();
     const inputSearch = getByRole("textbox");
     userEvent.type(inputSearch, "bank");
+    act(() => jest.runAllTimers());
     expect(getByText("bank_capital")).toBeInTheDocument();
     expect(queryByText("consumorenovables")).not.toBeInTheDocument();
   });
 
-  it("ChildStructures prop in StructureNav component  should rendered without items when inputSearch value change", () => {
-    const childStructures = [
-      { id: 1, name: "bank_capital" },
-      { id: 2, name: "consumorenovables" },
-    ];
-    const parentStructures = [];
-    const props = { childStructures, parentStructures };
-
+  it("StructureSearch: no elements matching", () => {
     const { getByRole, getByText, queryByText } = render(
-      <FilteredNav {...props} />,
+      <FilteredNavLoader navFilter={navFilter} />,
       renderOpts
     );
     expect(getByText("bank_capital")).toBeInTheDocument();
     expect(getByText("consumorenovables")).toBeInTheDocument();
 
+    jest.useFakeTimers();
     const inputSearch = getByRole("textbox");
     userEvent.type(inputSearch, "renovabless");
-
+    act(() => jest.runAllTimers());
     expect(queryByText("bank_capital")).not.toBeInTheDocument();
     expect(queryByText("consumorenovables")).not.toBeInTheDocument();
   });
 
-  it("FilterNavLoader loads from useBucketStructures and shows structures", () => {
-    const { getByText } = render(<FilteredNavLoader />, renderOpts);
-    expect(getByText("bank_capital")).toBeInTheDocument();
-    expect(getByText("consumorenovables")).toBeInTheDocument();
-  });
-
-  it("FilterNavLoader shows displayed/total structures message", () => {
-    const { queryByText, getByText, getByRole } = render(
-      <FilteredNavLoader />,
-      renderOpts
-    );
+  // it("FilterNavLoader shows displayed/total structures message", () => {
+  //   const { queryByText, getByText, getByRole } = render(
+  //     <FilteredNavLoader navFilter={navFilter} />,
+  //     renderOpts
+  //   );
 
-    const inputSearch = getByRole("textbox");
-    expect(queryByText("1 from a total of 2")).not.toBeInTheDocument();
-    userEvent.type(inputSearch, "bank");
-    expect(getByText("1 from a total of 2")).toBeInTheDocument();
-  });
+  //   const inputSearch = getByRole("textbox");
+  //   expect(queryByText("1 from a total of 2")).not.toBeInTheDocument();
+  //   userEvent.type(inputSearch, "bank");
+  //   expect(getByText("1 from a total of 2")).toBeInTheDocument();
+  // });
 
   it("test Alias Name Mode functionality", async () => {
+    const childStructures = [
+      { id: 1, name: "bank_capital" },
+      { id: 2, name: "consumorenovables" },
+    ];
     const toggleStructuresAliasNameMode = jest.fn();
-    const props = { toggleStructuresAliasNameMode };
+    const props = { toggleStructuresAliasNameMode, childStructures };
     const { getByRole } = render(<FilteredNav {...props} />, renderOpts);
 
     userEvent.click(getByRole("button", { name: /enable/i }));

package/src/components/__tests__/StructureItems.spec.js

@@ -5,7 +5,7 @@ import { StructureItems } from "../StructureItems";
 describe("<StructureItems />", () => {
   it("matches the latest snapshot", () => {
     const structures = [{ id: 1, name: "some structure" }];
-    const props = { structures };
+    const props = { structures, fnHasCatalogViewProp: jest.fn(), };
 
     const { container } = render(<StructureItems {...props} />);
     expect(container).toMatchSnapshot();
@@ -13,7 +13,7 @@ describe("<StructureItems />", () => {
 
   it("matches the latest snapshot with alias", () => {
     const structures = [{ id: 1, name: "some structure", alias: "alias" }];
-    const props = { structures };
+    const props = { structures, fnHasCatalogViewProp: jest.fn(), };
 
     const { container } = render(<StructureItems {...props} />);
     expect(container).toMatchSnapshot();

package/src/components/__tests__/StructureNav.spec.js

@@ -17,7 +17,7 @@ const renderOpts = {
 describe("<StructureNav />", () => {
   it("matches the latest snapshot", () => {
     const childStructures = [{ id: 1 }];
-    const props = { childStructures };
+    const props = { childStructures, fnHasCatalogViewProp: jest.fn(),};
 
     const { container } = render(<StructureNav {...props} />, renderOpts);
     expect(container).toMatchSnapshot();

package/src/components/__tests__/StructureNavClassified.spec.js

@@ -6,7 +6,11 @@ const structure1 = { id: 1, classes: { foo: "bar" } };
 const structure2 = { id: 2, classes: null };
 const structures = [structure1, structure2];
 
-const props = { classifier: "foo", structures };
+const props = {
+  classifier: "foo",
+  structures,
+  fnHasCatalogViewProp: jest.fn(),
+};
 
 describe("<StructureNavClassified />", () => {
   it("matches the latest snapshot", () => {

package/src/components/__tests__/StructureStructureLinks.spec.js

@@ -1,3 +1,4 @@
+import _ from "lodash/fp";
 import React from "react";
 import { render } from "@truedat/test/render";
 import { waitFor } from "@testing-library/react";
@@ -161,13 +162,14 @@ describe("<StructureStructureLinks />", () => {
   const renderOpts = {
     routes: ["/structures/60217/structureLinks"],
     mocks: [linksMock],
+    state: { navFilter: { view: "SYSTEM_STRUCTURES", filter: {} } },
   };
 
   it("shows structure to structure links", async () => {
-    const { getByRole } = render(<StructureStructureLinks {...props} />, {
-      ...renderOpts,
-      state: { structureActions },
-    });
+    const { getByRole } = render(
+      <StructureStructureLinks {...props} />,
+      _.merge(renderOpts, { state: { structureActions } })
+    );
     await waitFor(() => {
       expect(getByRole("link", { name: /STRUCTURE_2/i })).toBeInTheDocument();
       expect(getByRole("link", { name: /STRUCTURE_3/i })).toBeInTheDocument();
@@ -203,11 +205,10 @@ describe("<StructureStructureLinks />", () => {
     const dispatch = jest.fn();
     const { getByText, getByRole } = render(
       <StructureStructureLinks {...props} />,
-      {
-        ...renderOpts,
+      _.merge(renderOpts, {
         state: { structureActions },
         dispatch,
-      }
+      })
     );
     await waitFor(() => {
       expect(getByRole("link", { name: /STRUCTURE_2/i })).toBeInTheDocument();

package/src/components/__tests__/StructureView.spec.js

@@ -44,6 +44,7 @@ describe("<StructureView />", () => {
           name: "some_db",
           type: "Database",
           description: "some description",
+          ancestry: [],
         },
       },
     };

package/src/components/__tests__/SystemFilteredNav.spec.js

@@ -26,7 +26,7 @@ const renderOpts = {
 
 describe("<SystemFilteredNav />", () => {
   it("matches the latest snapshot", () => {
-    const { container } = render(<SystemFilteredNav />, renderOpts);
+    const { container } = render(<SystemFilteredNav fnHasCatalogViewProp={jest.fn()}/>, renderOpts);
     expect(container).toMatchSnapshot();
   });
 });

package/src/hooks/useBucketPaths.js

@@ -0,0 +1,11 @@
+import useSWR from "swr";
+import { apiJsonPost } from "@truedat/core/services/api";
+import { API_BUCKET_PATHS } from "../api";
+
+export const useBucketPaths = (navFilter) =>
+  useSWR(
+    navFilter.view === "BUCKET_VIEW"
+      ? { url: API_BUCKET_PATHS, filters: navFilter.filter }
+      : null,
+    ({ url }) => apiJsonPost(url, { filters: navFilter.filter })
+  );

package/src/hooks/useBucketStructures.js

@@ -1,10 +1,17 @@
-import useSWRMutations from "swr/mutation";
+import useSWR from "swr";
 import { apiJsonPost } from "@truedat/core/services/api";
 import { API_BUCKET_STRUCTURES } from "../api";
 
-export const useBucketStructures = () => {
-  const mutation = useSWRMutations(API_BUCKET_STRUCTURES, (url, { arg }) =>
-    apiJsonPost(url, arg)
+export const useBucketStructures = ({ navFilter, parentFilter, ids, query }) => {
+  const params =
+    navFilter?.view === "SYSTEM_STRUCTURES"
+      ? { filters: { ...navFilter.filter, ...parentFilter }, query }
+      : // BUCKET_VIEW searches by ids directly instead of navFilter and parentFilter
+      navFilter?.view === "BUCKET_VIEW"
+      ? { filters: { ids }, query }
+      : undefined;
+
+  return useSWR({ url: API_BUCKET_STRUCTURES, params }, ({ url }) =>
+    apiJsonPost(url, params)
   );
-  return mutation;
 };

package/src/reducers/navFilter.js

@@ -1,6 +1,9 @@
 import { clearNavFilter, saveNavFilter } from "../routines";
 
-export const initialState = {};
+export const initialState = {
+  view: "SYSTEM_STRUCTURES",
+  filter: {},
+};
 
 export const navFilter = (state = initialState, { type, payload }) => {
   switch (type) {

package/src/reducers/structure.js

@@ -19,6 +19,7 @@ const structureFields = (fn) =>
   );
 
 const structureVersionFields = _.pick([
+  "ancestry",
   "class",
   "classes",
   "data_structure_link_count",

package/src/reducers/structureFilters.js

@@ -6,6 +6,7 @@ const initialState = {};
 const structureFilters = (state = initialState, { type, payload }) => {
   switch (type) {
     case clearStructureFilters.TRIGGER:
+    case fetchStructureFilters.TRIGGER:
       return initialState;
     case fetchStructureFilters.SUCCESS:
       return _.flow(

package/src/selectors/getStructureParent.js

@@ -1,6 +1,5 @@
 import _ from "lodash/fp";
 import { createSelector } from "reselect";
-import { isBucketFilter } from "../utils/bucketNav";
 
 const defaultName = "..";
 
@@ -23,7 +22,7 @@ export const getStructureParent = createSelector(
   ],
   (structure, structureParents, navFilter) =>
     _.isEmpty(structureParents)
-      ? !_.isEmpty(structure) && isBucketFilter(navFilter)
+      ? !_.isEmpty(structure) && navFilter?.view === "BUCKET_VIEW"
         ? { type: "bucket" }
         : _.has("system")(structure)
         ? rootNavItem(structure)

package/src/components/__tests__/StructureSearch.spec.js

@@ -1,34 +0,0 @@
-import React from "react";
-import { shallow } from "enzyme";
-import { Input } from "semantic-ui-react";
-import { intl } from "@truedat/test/intl-stub";
-import { StructureSearch } from "../StructureSearch";
-
-// workaround for enzyme issue with React.useContext
-// see https://github.com/airbnb/enzyme/issues/2176#issuecomment-532361526
-jest.spyOn(React, "useContext").mockImplementation(() => intl);
-
-describe("<StructureSearch/>", () => {
-  it("matches the latest snapshot", () => {
-    const onChange = jest.fn();
-    const props = { onChange };
-    const wrapper = shallow(<StructureSearch {...props} />);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it("dispatches onChange when Input changes", () => {
-    const onChange = jest.fn();
-    const props = { onChange };
-    const eventMock = {
-      target: {
-        value: {
-          toLowerCase: jest.fn()
-        }
-      }
-    };
-    const wrapper = shallow(<StructureSearch {...props} />);
-    expect(props.onChange.mock.calls.length).toBe(0);
-    wrapper.find(Input).simulate("change", eventMock);
-    expect(props.onChange.mock.calls.length).toBe(1);
-  });
-});

package/src/components/__tests__/__snapshots__/StructureSearch.spec.js.snap

@@ -1,18 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<StructureSearch/> matches the latest snapshot 1`] = `
-<Input
-  fluid={true}
-  icon={
-    {
-      "link": true,
-      "name": "search",
-    }
-  }
-  iconPosition="left"
-  loading={false}
-  onChange={[Function]}
-  placeholder="structure.search.placeholder"
-  type="text"
-/>
-`;

package/src/utils/bucketNav.js

@@ -1,9 +0,0 @@
-import _ from "lodash/fp";
-
-export const isBucketFilter = _.flow(
-  Object.keys,
-  // Both metadata and mutable_metadata are "metadata"
-  _.some((key) =>
-    ["metadata", "note"].some((searchedKey) => key.startsWith(searchedKey))
-  )
-);