@truedat/core 5.6.2 → 5.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "5.6.2",
+  "version": "5.6.4",
   "description": "Truedat Web Core",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -35,7 +35,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "@truedat/test": "5.6.2",
+    "@truedat/test": "5.6.4",
     "babel-jest": "^28.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-lodash": "^3.3.4",
@@ -117,5 +117,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 2.0.3 < 2.2"
   },
-  "gitHead": "a667767fbb979e9c12142aabad58f49d3fb68fea"
+  "gitHead": "fbecd33735354811f674678337ae16aaa15b4794"
 }

package/src/components/HierarchyFilterDropdown.js

@@ -0,0 +1,116 @@
+import _ from "lodash/fp";
+import React from "react";
+import PropTypes from "prop-types";
+import { useHierarchy } from "@truedat/df/hooks/useHierarchies";
+import {
+  getHierarchyOptions,
+  getKeyAndParents,
+} from "../services/getHierarchyOptions";
+import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+
+const PopulatedHierarchyFilterDropdown = (props) => {
+  const {
+    activeValues,
+    closeFilter,
+    filter,
+    loading,
+    openFilter,
+    options,
+    removeFilter,
+    toggleFilterValue,
+  } = props;
+  const hierarchyId = _.flow(
+    _.first,
+    _.prop("value"),
+    (value) => value.split("_"),
+    _.first
+  )(options);
+
+  const { data, error, loading: hierarchyLoading } = useHierarchy(hierarchyId);
+  if (error) return null;
+  if (hierarchyLoading) return null;
+
+  const hierarchyOptions = getHierarchyOptions(data?.nodes);
+
+  const includedKeys = _.flow(
+    _.map("value"),
+    _.flatMap(getKeyAndParents(hierarchyOptions)),
+    _.uniq
+  )(options);
+
+  const filterIncludedKeys = _.filter(({ key }) =>
+    _.includes(key)(includedKeys)
+  );
+
+  const filteredChildren = _.flow(_.prop("children"), filterIncludedKeys);
+
+  const filteredOptions = _.flow(
+    filterIncludedKeys,
+    _.map((node) => ({ ...node, children: filteredChildren(node) }))
+  )(hierarchyOptions);
+
+  const idActiveValues = _.map((key) =>
+    _.flow(_.find({ key }), _.prop("id"))(filteredOptions)
+  )(activeValues);
+
+  const handleToggleFilterValue = ({ filter, value }) => {
+    const getChildrenKeys = (id) => {
+      const { key, descendents } = _.flow(
+        _.find({ id }),
+        _.pick(["key", "descendents"])
+      )(filteredOptions);
+      const descendentKeys = _.map("key")(descendents);
+      return [key, ...descendentKeys];
+    };
+    const newValue = _.flow(
+      _.flatMap(getChildrenKeys),
+      _.uniq,
+      _.reject(_.isNil)
+    )(value);
+    toggleFilterValue({ filter, value: newValue });
+  };
+
+  return (
+    <FilterMultilevelDropdown
+      activeValues={idActiveValues}
+      closeFilter={closeFilter}
+      filter={filter}
+      loading={loading}
+      openFilter={openFilter}
+      options={filteredOptions}
+      removeFilter={removeFilter}
+      toggleFilterValue={handleToggleFilterValue}
+    />
+  );
+};
+
+PopulatedHierarchyFilterDropdown.propTypes = {
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  loading: PropTypes.bool,
+  openFilter: PropTypes.func,
+  options: PropTypes.array,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+};
+
+const HierarchyFilterDropdown = (props) =>
+  _.isEmpty(props.options) ? (
+    <FilterMultilevelDropdown {...props} />
+  ) : (
+    <PopulatedHierarchyFilterDropdown {...props} />
+  );
+
+HierarchyFilterDropdown.propTypes = {
+  activeValues: PropTypes.array,
+  closeFilter: PropTypes.func,
+  filter: PropTypes.string,
+  loading: PropTypes.bool,
+  openFilter: PropTypes.func,
+  options: PropTypes.array,
+  removeFilter: PropTypes.func,
+  toggleFilterValue: PropTypes.func,
+};
+
+export default HierarchyFilterDropdown;

package/src/components/SelectedFilters.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import FilterDropdown from "./FilterDropdown";
 import FilterMultilevelDropdown from "./FilterMultilevelDropdown";
+import HierarchyFilterDropdown from "./HierarchyFilterDropdown";
 import ModalSaveFilter from "./ModalSaveFilter";
 import UserFilters from "./UserFilters";
 
@@ -19,6 +20,7 @@ export const SelectedFilters = ({
   saveFilters,
   selectedFilter,
   selectedFilters,
+  filterTypes,
   selectedFilterActiveValues: activeValues,
   selectedFilterValues,
   selectedUserFilter,
@@ -45,9 +47,11 @@ export const SelectedFilters = ({
             <FormattedMessage id="search.applied_filters" />
           </div>
           {selectedFilters.map((filter) => {
+            const filterType = _.prop(filter)(filterTypes);
             const options = _.isEqual(filter, selectedFilter)
               ? selectedFilterValues
               : null;
+
             const props = {
               key: filter,
               activeValues,
@@ -59,8 +63,10 @@ export const SelectedFilters = ({
               removeFilter,
               toggleFilterValue,
             };
-            return selectedFilter === "taxonomy" ? (
+            return filterType === "domain" ? (
               <FilterMultilevelDropdown {...props} />
+            ) : filterType === "hierarchy" ? (
+              <HierarchyFilterDropdown {...props} />
             ) : (
               <FilterDropdown {...props} />
             );
@@ -95,6 +101,7 @@ SelectedFilters.propTypes = {
   selectedFilterActiveValues: PropTypes.array,
   selectedFilterValues: PropTypes.array,
   selectedFilters: PropTypes.array,
+  filterTypes: PropTypes.object,
   selectedUserFilter: PropTypes.string,
   toggleFilterValue: PropTypes.func,
   userFilters: PropTypes.array,

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

@@ -0,0 +1,190 @@
+import React from "react";
+import { waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { render } from "@truedat/test/render";
+import HierarchyFilterDropdown from "../HierarchyFilterDropdown";
+
+const hierarchy = {
+  id: 123,
+  nodes: [
+    {
+      id: 1,
+      key: "123_1",
+      parentId: null,
+      name: "foo",
+    },
+    {
+      id: 2,
+      key: "123_2",
+      parentId: 1,
+      name: "bar",
+    },
+    {
+      id: 3,
+      key: "123_3",
+      parentId: null,
+      name: "baz",
+    },
+  ],
+};
+
+jest.mock("@truedat/df/hooks/useHierarchies", () => {
+  const originalModule = jest.requireActual("@truedat/df/hooks/useHierarchies");
+
+  return {
+    __esModule: true,
+    ...originalModule,
+    useHierarchy: jest.fn(() => ({
+      data: hierarchy,
+      loading: false,
+    })),
+  };
+});
+
+describe("<HierarchyFilterDropdown />", () => {
+  const toggleFilterValue = jest.fn();
+  const openFilter = jest.fn();
+  const closeFilter = jest.fn();
+  const removeFilter = jest.fn();
+  const options = [
+    {
+      value: "123_2",
+      text: "bar",
+    },
+  ];
+  const filter = "hierarchy_field";
+  const props = {
+    filter,
+    closeFilter,
+    options,
+    openFilter,
+    toggleFilterValue,
+    loading: false,
+    removeFilter,
+    filterTypes: { hierarchy_field: "hierarchy" },
+  };
+
+  const messages = {
+    en: {
+      "filter.hierarchy_field": "Hierarchy Field",
+    },
+  };
+
+  it("matches the latest snapshot", () => {
+    const { container } = render(<HierarchyFilterDropdown {...props} />, {
+      messages,
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("matches the latest snapshot for empty options", () => {
+    const customProps = {
+      ...props,
+      options: [],
+    };
+    const { container } = render(<HierarchyFilterDropdown {...customProps} />, {
+      messages,
+    });
+    expect(container).toMatchSnapshot();
+  });
+
+  it("handles the selection of a colapsed element", async () => {
+    const { rerender, getByRole, container, queryByText } = render(
+      <HierarchyFilterDropdown {...props} />,
+      {
+        messages,
+      }
+    );
+
+    userEvent.click(getByRole("listbox"));
+
+    userEvent.click(container.querySelector('[class="plus icon"]'));
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+    userEvent.click(container.querySelector('[class="minus icon"]'));
+    await waitFor(() => {
+      expect(queryByText(/bar/)).toBeFalsy();
+    });
+    userEvent.click(container.querySelector('[class="plus icon"]'));
+    // Select value
+    userEvent.click(getByRole("option", { name: /bar/i }));
+    await waitFor(() => {
+      expect(toggleFilterValue).toHaveBeenCalledWith({
+        filter,
+        value: ["123_2"],
+      });
+    });
+    rerender(
+      <HierarchyFilterDropdown {...{ ...props, activeValues: ["123_2"] }} />
+    );
+    // Unselect
+    userEvent.click(getByRole("option", { name: /bar/i }));
+    await waitFor(() => {
+      expect(toggleFilterValue).toHaveBeenCalledWith({ filter, value: [] });
+    });
+    // Select parent
+    rerender(<HierarchyFilterDropdown {...{ ...props, activeValues: [] }} />);
+    userEvent.click(getByRole("option", { name: /foo/i }));
+    await waitFor(() => {
+      expect(toggleFilterValue).toHaveBeenCalledWith({
+        filter,
+        value: ["123_1", "123_2"],
+      });
+    });
+    // Unselect parent by selecting children
+    rerender(
+      <HierarchyFilterDropdown
+        {...{ ...props, activeValues: ["123_1", "123_2"] }}
+      />
+    );
+    userEvent.click(getByRole("option", { name: /bar/i }));
+    await waitFor(() => {
+      expect(toggleFilterValue).toHaveBeenCalledWith({
+        filter,
+        value: ["123_2"],
+      });
+    });
+    // Delete filter
+    userEvent.click(container.querySelector('[class="delete icon"]'));
+    await waitFor(() => {
+      expect(removeFilter).toBeCalledTimes(1);
+    });
+  });
+
+  it("handles the selection of searched elements", async () => {
+    const customProps = {
+      ...props,
+      options: [
+        {
+          value: "123_2",
+          text: "bar",
+        },
+        {
+          value: "123_3",
+          text: "baz",
+        },
+      ],
+    };
+    const { container, getByRole } = render(
+      <HierarchyFilterDropdown {...customProps} />,
+      {
+        messages,
+      }
+    );
+
+    userEvent.click(getByRole("listbox"));
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /foo/i })).toBeTruthy();
+      expect(getByRole("option", { name: /baz/i })).toBeTruthy();
+    });
+
+    const input = container.querySelector('[type="text"]');
+    userEvent.type(input, "bar");
+
+    await waitFor(() => {
+      expect(getByRole("option", { name: /bar/i })).toBeTruthy();
+    });
+  });
+});

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

@@ -5,6 +5,9 @@ import { SelectedFilters } from "../SelectedFilters";
 describe("<SelectedFilters/>", () => {
   const getProps = () => ({
     resetFilters: jest.fn(),
+    filterTypes: {
+      foo: "fooType",
+    },
     selectedFilter: "foo",
     selectedFilters: ["foo", "bar"],
     selectedFilterActiveValues: ["value2"],
@@ -56,15 +59,29 @@ describe("<SelectedFilters/>", () => {
     expect(wrapper.find("UserFilters")).toHaveLength(1);
   });
 
-  it("renders FilterMultilevelDropdown if filter is taxonomy", () => {
+  it("renders FilterMultilevelDropdown if filter is of type domain", () => {
     const props = getProps();
     const customProps = {
       ...props,
       selectedFilters: ["taxonomy"],
       selectedFilter: "taxonomy",
+      filterTypes: { taxonomy: "domain" },
       selectedFilterValues: [{ id: 1, name: "foo", level: 0 }],
     };
     const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
     expect(wrapper.find("FilterMultilevelDropdown")).toHaveLength(1);
   });
+
+  it("renders HierarchyFilterDropdown if filter is of type hierarchy", () => {
+    const props = getProps();
+    const customProps = {
+      ...props,
+      selectedFilters: ["hierarchy_field"],
+      selectedFilter: "hierarchy_field",
+      filterTypes: { hierarchy_field: "hierarchy" },
+      selectedFilterValues: [{ key: "2_1", id: 1, name: "foo", level: 0 }],
+    };
+    const wrapper = shallowWithIntl(<SelectedFilters {...customProps} />);
+    expect(wrapper.find("HierarchyFilterDropdown")).toHaveLength(1);
+  });
 });

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

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<HierarchyFilterDropdown /> matches the latest snapshot 1`] = `
+<div>
+  <div
+    aria-expanded="true"
+    class="ui active visible floating item dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="ui label"
+    >
+      hierarchy_field
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable visible"
+    >
+      <div
+        class="ui left icon input search"
+      >
+        <input
+          type="text"
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="scrolling menu transition"
+      >
+        <div
+          aria-selected="false"
+          class="item"
+          role="option"
+        >
+          <div
+            style="margin-left: 0px;"
+          >
+            <i
+              aria-hidden="true"
+              class="plus icon"
+            />
+            <i
+              aria-hidden="true"
+              class="square outline icon"
+            />
+            foo
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<HierarchyFilterDropdown /> matches the latest snapshot for empty options 1`] = `
+<div>
+  <div
+    aria-expanded="false"
+    class="ui floating item dropdown"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="ui label"
+    >
+      hierarchy_field
+      <i
+        aria-hidden="true"
+        class="delete icon"
+      />
+    </div>
+    <div
+      class="menu transition dimmable"
+    >
+      <div
+        class="ui left icon input search"
+      >
+        <input
+          type="text"
+        />
+        <i
+          aria-hidden="true"
+          class="search icon"
+        />
+      </div>
+      <div
+        class="scrolling menu transition"
+      />
+    </div>
+  </div>
+</div>
+`;

package/src/services/filters.js

@@ -30,8 +30,8 @@ export const getSearchPayload = (searchQuery, props) => {
 
 export const isEmbedded = _.overEvery(_.has("id"), _.has("name"));
 
-export const formatFilterValues = (selectedFilter) => (values) =>
-  selectedFilter === "taxonomy"
+export const formatFilterValues = ({ values, type }) =>
+  type === "domain"
     ? getDomainSelectorOptions({ domains: values })
     : _.any(isEmbedded)(values)
     ? _.map(({ id, name }) => ({ value: id, text: name }))(values)

package/src/services/getHierarchyOptions.js

@@ -0,0 +1,71 @@
+import _ from "lodash/fp";
+import { accentInsensitivePathOrder } from "@truedat/core/services/sort";
+
+const isChildOf =
+  ({ id }) =>
+  ({ parentId }) =>
+    parentId === id;
+const isParentOf =
+  ({ parentId }) =>
+  ({ id }) =>
+    parentId === id;
+
+const hasNoParentIn = (domains) => (domain) =>
+  !_.some(isParentOf(domain))(domains);
+
+const findParentsIn = (domains) => (child) =>
+  _.filter(isParentOf(child))(domains);
+const findChildrenIn = (domains) => (parent) =>
+  _.filter(isChildOf(parent))(domains);
+
+const findDescendents = (parents) => (domains) => {
+  const children = _.flatMap(findChildrenIn(domains))(parents);
+  return _.isEmpty(children)
+    ? children
+    : _.concat(children, findDescendents(children)(domains));
+};
+
+const findAncestorsIn = (domains) => (children) => {
+  const parents = _.flatMap(findParentsIn(domains))(children);
+  return _.isEmpty(parents)
+    ? parents
+    : _.concat(findAncestorsIn(domains)(parents), parents);
+};
+
+const reduceTaxonomy = (domains) => (domainsInLevel, level) => {
+  if (domains)
+    return _.reduce((acc, domain) => {
+      const children = _.sortBy(["name"])(findChildrenIn(domains)(domain));
+      return [
+        ...acc,
+        {
+          ...domain,
+          ancestors: findAncestorsIn(domains)([domain]),
+          descendents: _.sortBy(["name"])(findDescendents([domain])(domains)),
+          children,
+          level,
+        },
+        ...reduceTaxonomy(domains)(children, level + 1),
+      ];
+    }, [])(domainsInLevel);
+  return [];
+};
+
+const getHierarchyOptions = (nodes) => {
+  const roots = _.flow(
+    _.filter(hasNoParentIn(nodes)),
+    _.sortBy(accentInsensitivePathOrder("name"))
+  )(nodes);
+  return reduceTaxonomy(nodes)(roots, 0);
+};
+
+const getKeyAndParents = (hierarchyOptions) => (key) => {
+  const parentKeys = _.flow(
+    _.find({ key }),
+    _.getOr([], "ancestors"),
+    _.flatMap(({ key }) => getKeyAndParents(hierarchyOptions)(key))
+  )(hierarchyOptions);
+  return [...parentKeys, key];
+};
+
+export { getHierarchyOptions, getKeyAndParents };