@truedat/dd 7.5.12 → 7.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "7.5.12",
+  "version": "7.5.13",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -48,7 +48,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "7.5.12",
+    "@truedat/test": "7.5.13",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -84,5 +84,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "1476061ceb9ed15e0bacec71e20d695a0cd57986"
+  "gitHead": "83de799e59c0d13d4d52812070d232d24f0b5f82"
 }

package/src/api.js

@@ -7,6 +7,7 @@ const API_DATA_STRUCTURES_EDITABLE_CSV = "/api/data_structures/editable_csv";
 const API_DATA_STRUCTURES_XLSX_DOWNLOAD = "/api/data_structures/xlsx/download";
 const API_DATA_STRUCTURES_XLSX_UPLOAD = "/api/data_structures/xlsx/upload";
 const API_DATA_STRUCTURES_SEARCH = "/api/data_structures/search";
+const API_DATA_STRUCTURES_SUGGESTIONS = "/api/data_structures/suggestions";
 const API_DATA_STRUCTURE_FILTERS_SEARCH = "/api/data_structure_filters/search";
 const API_DATA_STRUCTURE_VERSION = "/api/data_structures/:id/versions/:version";
 const API_GRANT_FILTERS_SEARCH = "/api/grant_filters/search";
@@ -63,6 +64,7 @@ export {
   API_DATA_STRUCTURES_XLSX_DOWNLOAD,
   API_DATA_STRUCTURES_XLSX_UPLOAD,
   API_DATA_STRUCTURES_SEARCH,
+  API_DATA_STRUCTURES_SUGGESTIONS,
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURE_VERSION,
   API_PROFILE_EXECUTION,

package/src/components/StructureSuggestions.js

@@ -0,0 +1,88 @@
+import _ from "lodash/fp";
+import React, { useEffect } from "react";
+import { Popup } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useParams } from "react-router";
+import { useSelector } from "react-redux";
+import PropTypes from "prop-types";
+import { useDataStructureSuggestions } from "../hooks/useStructures";
+import { defaultColumnsForStructureSelector } from "../selectors";
+import StructuresSearchResults from "./StructuresSearchResults";
+
+const SimilarityColumn = (similarity) => {
+  const { formatMessage } = useIntl();
+  return (
+    <Popup
+      content={formatMessage({ id: "structure.similarity.cosine.popup" })}
+      trigger={<span>{similarity.toFixed(3)}</span>}
+    />
+  );
+};
+
+const similarityColumnDefinition = {
+  name: "similarity",
+  fieldSelector: _.prop("similarity"),
+  fieldDecorator: SimilarityColumn,
+  width: 1,
+};
+const suggestionColumns = (state) =>
+  _.concat(defaultColumnsForStructureSelector(state))([
+    similarityColumnDefinition,
+  ]);
+
+export const StructureSuggestions = ({
+  selectedStructure,
+  handleSelectedStructure,
+  selectable,
+}) => {
+  const { business_concept_id: id, id: version } = useParams();
+  const { conceptLinks, columns } = useSelector((state) => ({
+    conceptLinks: state.conceptLinks,
+    columns: suggestionColumns(state),
+  }));
+
+  const {
+    trigger: fetchSuggestions,
+    data,
+    isMutating,
+  } = useDataStructureSuggestions();
+
+  useEffect(() => {
+    if (id && version && conceptLinks) {
+      fetchSuggestions({
+        resource: {
+          id,
+          version,
+          type: "concepts",
+          links: _.filter(
+            ({ resource_type }) => resource_type == "data_structure"
+          )(conceptLinks),
+        },
+      });
+    }
+  }, [id, version, conceptLinks]);
+
+  const structures = data?.data?.data || [];
+
+  return (
+    <StructuresSearchResults
+      loading={isMutating}
+      columns={columns}
+      size="small"
+      structures={structures}
+      selectedStructure={selectedStructure}
+      onSelect={handleSelectedStructure}
+      labelResults={false}
+      pagination={false}
+      selectable={selectable}
+    />
+  );
+};
+
+StructureSuggestions.propTypes = {
+  handleSelectedStructure: PropTypes.func,
+  selectedStructure: PropTypes.object,
+  selectable: PropTypes.bool,
+};
+
+export default StructureSuggestions;

package/src/components/StructuresSearchResults.js

@@ -18,6 +18,8 @@ export const StructuresSearchResults = ({
   links,
   placeToTop,
   selectable,
+  labelResults = true,
+  pagination = true,
 }) => (
   <Dimmer.Dimmable dimmed={loading} className="structure-table-overflow">
     {loading ? (
@@ -27,7 +29,7 @@ export const StructuresSearchResults = ({
     ) : null}
     {!_.isEmpty(structures) || !_.isEmpty(selectedStructure) ? (
       <>
-        <StructuresLabelResults />
+        {labelResults && <StructuresLabelResults />}
         <StructuresTable
           columns={columns}
           grantable={grantable}
@@ -39,7 +41,7 @@ export const StructuresSearchResults = ({
           placeToTop={placeToTop}
           selectable={selectable}
         />
-        <StructuresPagination size={size} />
+        {pagination && <StructuresPagination size={size} />}
       </>
     ) : (
       <Message icon info>
@@ -64,8 +66,10 @@ StructuresSearchResults.propTypes = {
   onSelect: PropTypes.func,
   structures: PropTypes.array,
   selectedStructure: PropTypes.object,
+  labelResults: PropTypes.bool,
   loading: PropTypes.bool,
   links: PropTypes.array,
+  pagination: PropTypes.bool,
   placeToTop: PropTypes.bool,
   selectable: PropTypes.bool,
 };

package/src/components/StructuresTable.js

@@ -25,20 +25,21 @@ export const StructuresTable = ({
   links = [],
   placeToTop = true,
   selectable = false,
+  structures: overwriteStructures,
 }) => {
-  const {
-    searchData,
-    sortColumn,
-    sortDirection,
-    defaultFilters,
-    handleSortSelection,
-  } = useSearchContext();
+  const searchContext = useSearchContext();
+
+  const searchData = searchContext?.searchData;
+  const sortColumn = searchContext?.sortColumn;
+  const sortDirection = searchContext?.sortDirection;
+  const defaultFilters = searchContext?.defaultFilters;
+  const handleSortSelection = searchContext?.handleSortSelection;
 
   const columns = useSelector((state) =>
     structureColumnsSelector(state, defaultFilters, overwriteColumns)
   );
 
-  const structures = searchData?.data || [];
+  const structures = overwriteStructures || searchData?.data || [];
 
   if (_.isEmpty(columns)) {
     return null;
@@ -103,6 +104,7 @@ StructuresTable.propTypes = {
   size: PropTypes.string,
   links: PropTypes.array,
   placeToTop: PropTypes.bool,
+  structures: PropTypes.arrayOf(PropTypes.object),
 };
 
 export default StructuresTable;

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { useSelector } from "react-redux";
+import { useParams } from "react-router";
+import { useDataStructureSuggestions } from "../../hooks/useStructures";
+import StructureSuggestions from "../StructureSuggestions";
+import StructuresSearchResults from "../StructuresSearchResults";
+import * as selectors from "../../selectors";
+
+jest.mock("react-router", () => ({
+    useParams: jest.fn(),
+}));
+
+jest.mock("react-redux", () => ({
+    useSelector: jest.fn(),
+}));
+
+jest.mock("../../hooks/useStructures", () => ({
+    useDataStructureSuggestions: jest.fn(),
+}));
+
+jest.mock("../StructuresSearchResults", () => jest.fn(() => <div>MockSearchResults</div>));
+
+jest.mock("../../selectors", () => ({
+    defaultColumnsForStructureSelector: jest.fn(),
+}));
+
+describe("StructureSuggestions", () => {
+    const mockFetchSuggestions = jest.fn();
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+
+        selectors.defaultColumnsForStructureSelector.mockReturnValue([
+            { name: "name", fieldSelector: (x) => x.name },
+        ]);
+
+        useParams.mockReturnValue({ business_concept_id: "123", id: "456" });
+
+        useSelector.mockImplementation((selectorFn) =>
+            selectorFn({
+                conceptLinks: [
+                    { resource_type: "data_structure", id: "ds1" },
+                    { resource_type: "other", id: "not-ds" },
+                ],
+                // mock of defaultColumnsForStructureSelector + similarity column
+                columns: [
+                    { name: "name", fieldSelector: (x) => x.name },
+                    { name: "similarity", fieldSelector: (x) => x.similarity },
+                ],
+            })
+        );
+
+        useDataStructureSuggestions.mockReturnValue({
+            trigger: mockFetchSuggestions,
+            data: {
+                data: {
+                    data: [
+                        { id: "structure1", similarity: 0.89 },
+                        { id: "structure2", similarity: 0.77 },
+                    ],
+                },
+            },
+            isMutating: false,
+        });
+    });
+
+    it("calls fetchSuggestions on mount with correct parameters", () => {
+        render(<StructureSuggestions selectedStructure={null} handleSelectedStructure={jest.fn()} selectable={true} />);
+
+        expect(mockFetchSuggestions).toHaveBeenCalledWith({
+            resource: {
+                id: "123",
+                version: "456",
+                type: "concepts",
+                links: [{ resource_type: "data_structure", id: "ds1" }],
+            },
+        });
+    });
+
+    it("renders StructuresSearchResults with props", () => {
+        render(<StructureSuggestions selectedStructure={{}} handleSelectedStructure={jest.fn()} selectable={false} />);
+
+        expect(screen.getByText("MockSearchResults")).toBeInTheDocument();
+        const props = StructuresSearchResults.mock.calls[0][0];
+        expect(props.structures).toEqual([
+            { id: "structure1", similarity: 0.89 },
+            { id: "structure2", similarity: 0.77 },
+        ]);
+        expect(props.loading).toBe(false);
+        expect(props.selectable).toBe(false);
+    });
+});

package/src/hooks/useStructures.js

@@ -12,6 +12,7 @@ import {
 import {
   API_SYSTEM_STRUCTURES,
   API_DATA_STRUCTURES_SEARCH,
+  API_DATA_STRUCTURES_SUGGESTIONS,
   API_DATA_STRUCTURE_FILTERS_SEARCH,
   API_DATA_STRUCTURES_XLSX_DOWNLOAD,
   API_DATA_STRUCTURES_XLSX_UPLOAD,
@@ -88,3 +89,9 @@ export const useDataStructureUpload = () => {
     return apiJsonPost(url, arg, UPLOAD_JSON_OPTS);
   });
 };
+
+export const useDataStructureSuggestions = () => {
+  return useSWRMutations(API_DATA_STRUCTURES_SUGGESTIONS, (url, { arg }) => {
+    return apiJsonPost(url, arg);
+  });
+};