@truedat/bg 7.10.2 → 7.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/bg",
-  "version": "7.10.2",
+  "version": "7.10.4",
   "description": "Truedat Web Business Glossary",
   "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.10.2",
+    "@truedat/test": "7.10.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -81,5 +81,5 @@
     "semantic-ui-react": "^3.0.0-beta.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "913c4f16345d35e38b0ed09c58d73b88955356f0"
+  "gitHead": "0dcedbfaed3964ee02a3d2c175e0f96e2fbc9316"
 }

package/src/concepts/api.js

@@ -20,8 +20,10 @@ const API_BUSINESS_CONCEPT_BULK_UPLOAD =
   "/api/business_concepts/bulk_upload_event";
 const API_BUSINESS_CONCEPT_SET_CONFIDENTIAL =
   "/api/business_concept_versions/:id/set_confidential";
+const API_CONCEPT_SUGGESTIONS = "/api/business_concept_versions/suggestions"
 
 export {
+  API_CONCEPT_SUGGESTIONS,
   API_BUSINESS_CONCEPT_VERSION,
   API_BUSINESS_CONCEPT_VERSIONS_ACTIONS,
   API_BUSINESS_CONCEPT_VERSIONS_CSV,

package/src/concepts/components/ConceptSuggestions.js

@@ -0,0 +1,71 @@
+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 { useConceptSuggestions } from "../hooks/useConcepts";
+import { ConceptSelectorTable } from "../relations/components/ConceptSelector";
+
+const SimilarityColumn = (similarity) => {
+    const { formatMessage } = useIntl();
+    return (
+        <Popup
+            content={formatMessage({ id: "suggestions.similarity.cosine.popup" })}
+            trigger={<span>{similarity.toFixed(3)}</span>}
+        />
+    );
+};
+
+const similarityColumnDefinition = {
+    name: "similarity",
+    fieldSelector: _.prop("similarity"),
+    fieldDecorator: SimilarityColumn,
+    width: 1,
+};
+
+export const ConceptSuggestions = ({
+    selectedConcept,
+    handleConceptSelected,
+}) => {
+    const { id } = useParams();
+    const structureLinks = useSelector((state) => state.structureLinks);
+
+    const {
+        trigger: fetchSuggestions,
+        data,
+    } = useConceptSuggestions();
+
+    useEffect(() => {
+        if (id && structureLinks) {
+            fetchSuggestions({
+                resource: {
+                    id,
+                    type: "structures",
+                    links: _.filter(
+                        ({ resource_type }) => resource_type == "concept"
+                    )(structureLinks),
+                },
+            });
+        }
+    }, [id, structureLinks]);
+
+    const concepts = data?.data?.data || [];
+
+    return (
+        <ConceptSelectorTable
+            concepts={concepts}
+            selectedConcept={selectedConcept}
+            handleConceptSelected={handleConceptSelected}
+            extraColumns={[similarityColumnDefinition]}
+        />
+    );
+};
+
+ConceptSuggestions.propTypes = {
+    handleSelectedStructure: PropTypes.func,
+    selectedStructure: PropTypes.object,
+};
+
+export default ConceptSuggestions;

package/src/concepts/components/__tests__/ConceptSuggestions.spec.js

@@ -0,0 +1,74 @@
+import React from "react";
+import { render, waitForLoad } from "@truedat/test/render";
+import { useParams } from "react-router";
+import { ConceptSuggestions } from "../ConceptSuggestions";
+import { ConceptSelectorTable } from "../../relations/components/ConceptSelector";
+import { useConceptSuggestions } from "../../hooks/useConcepts";
+
+jest.mock("react-router", () => ({
+    ...jest.requireActual("react-router"),
+    useParams: jest.fn(),
+}));
+
+jest.mock("../../hooks/useConcepts", () => ({
+    useConceptSuggestions: jest.fn(),
+}));
+
+jest.mock("../../relations/components/ConceptSelector", () => {
+    return {
+        __esModule: true,
+        ConceptSelectorTable: jest.fn(() => <div>MockSearchResults</div>),
+    };
+});
+
+describe("ConceptSuggestions", () => {
+    const mockFetchSuggestions = jest.fn();
+
+    const structureLinks = [
+        { resource_type: "concept", id: "c1" },
+        { resource_type: "other", id: "not-c" }
+    ];
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        useParams.mockReturnValue({ id: "123" });
+
+        useConceptSuggestions.mockReturnValue({
+            trigger: mockFetchSuggestions,
+            data: {
+                data: {
+                    data: [
+                        { id: "concept1", similarity: 0.89 },
+                        { id: "concept2", similarity: 0.77 },
+                    ],
+                },
+            },
+            isMutating: false,
+        });
+    });
+
+    const state = { structureLinks };
+
+    it("calls fetchSuggestions on mount with correct parameters", async () => {
+        const rendered = render(<ConceptSuggestions selectedConcept={null} handleConceptSelected={jest.fn()} />, { state });
+        await waitForLoad(rendered);
+        expect(mockFetchSuggestions).toHaveBeenCalledWith({
+            resource: {
+                id: "123",
+                type: "structures",
+                links: [{ resource_type: "concept", id: "c1" }],
+            },
+        });
+    });
+
+    it("renders ConceptSelectorTable with props", async () => {
+        const rendered = render(<ConceptSuggestions selectedConcept={{}} handleConceptSelected={jest.fn()} />, { state });
+        await waitForLoad(rendered);
+        expect(rendered.getByText("MockSearchResults")).toBeInTheDocument();
+        const props = ConceptSelectorTable.mock.calls[0][0];
+        expect(props.concepts).toEqual([
+            { id: "concept1", similarity: 0.89 },
+            { id: "concept2", similarity: 0.77 },
+        ]);
+    });
+});

package/src/concepts/hooks/useConcepts.js

@@ -4,6 +4,7 @@ import FileSaver from "file-saver";
 import { apiJson, apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 
 import {
+  API_CONCEPT_SUGGESTIONS,
   API_CONCEPT_FILTERS,
   API_CONCEPT_LINKS_DOWNLOAD,
   API_BUSINESS_CONCEPT_VERSIONS_SEARCH,
@@ -62,6 +63,12 @@ export const useConceptsUpload = () => {
   );
 };
 
+export const useConceptSuggestions = () => {
+  return useSWRMutations(API_CONCEPT_SUGGESTIONS, (url, { arg }) => {
+    return apiJsonPost(url, arg);
+  });
+};
+
 export const useConceptLinksUpload = () => {
   return useSWRMutations(API_CONCEPT_LINKS_UPLOAD, (url, { arg }) =>
     apiJsonPost(url, arg)

package/src/concepts/relations/components/ConceptSelector.js

@@ -1,14 +1,7 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
-import {
-  Button,
-  Table,
-  Message,
-  Label,
-  Icon,
-  Segment,
-} from "semantic-ui-react";
+import { Button, Table, Message, Label, Segment } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import SearchWidget from "@truedat/core/search/SearchWidget";
 import {
@@ -44,6 +37,7 @@ const ConceptSelectorRow = ({
   onClick,
   disabled,
   positive,
+  extraColumns = [],
 }) => {
   const { name, status, domain } = concept;
   return (
@@ -65,6 +59,12 @@ const ConceptSelectorRow = ({
           </Label>
         }
       />
+      {extraColumns.map((column, key) => (
+        <Table.Cell
+          key={key}
+          content={column.fieldDecorator(column.fieldSelector(concept))}
+        />
+      ))}
     </Table.Row>
   );
 };
@@ -77,20 +77,14 @@ ConceptSelectorRow.propTypes = {
   positive: PropTypes.bool,
 };
 
-export function ConceptSelectorContent({
+export const ConceptSelectorTable = ({
   businessConceptId,
-  handleConceptSelected,
+  concepts,
   selectedConcept,
-  showTitle = true,
+  handleConceptSelected,
   links,
-}) {
-  const { searchData, filterParams: searchParams } = useSearchContext();
-  const { trigger: triggerDownload, isMutating: downloading } =
-    useConceptLinksDownload();
-  const { formatMessage } = useIntl();
-  const concepts = searchData?.data;
-  const conceptsActions = _.propOr({}, "_actions")(searchData);
-
+  extraColumns = [],
+}) => {
   const selectedConceptIsFiltered = !_.reduce(
     (acc, c) => (selectedConcept && c.id == selectedConcept.id) || acc,
     false
@@ -104,7 +98,85 @@ export function ConceptSelectorContent({
         )(concept)
       : false;
   };
- 
+
+  return !_.isEmpty(concepts) || selectedConcept ? (
+    <Table selectable size="small">
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell
+            content={<FormattedMessage id="concepts.props.name" />}
+          />
+          <Table.HeaderCell
+            content={<FormattedMessage id="concepts.props.domain" />}
+          />
+          <Table.HeaderCell
+            content={<FormattedMessage id="concepts.props.status" />}
+          />
+          {extraColumns.map((column, key) => (
+            <Table.HeaderCell
+              key={key}
+              content={
+                <FormattedMessage id={`concepts.props.${column.name}`} />
+              }
+            />
+          ))}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {concepts.map((s, i) => (
+          <ConceptSelectorRow
+            disabled={
+              businessConceptId == s.business_concept_id || isDisabled(s)
+            }
+            key={i}
+            concept={s}
+            active={selectedConcept && selectedConcept.id == s.id}
+            onClick={handleConceptSelected}
+            positive={isPositive(
+              links,
+              s.business_concept_id,
+              businessConceptId
+            )}
+            extraColumns={extraColumns}
+          />
+        ))}
+        {selectedConcept && selectedConceptIsFiltered && (
+          <ConceptSelectorRow
+            concept={selectedConcept}
+            extraColumns={extraColumns}
+            active
+          />
+        )}
+      </Table.Body>
+    </Table>
+  ) : (
+    <Message header={<FormattedMessage id="concepts.search.results.empty" />} />
+  );
+};
+
+ConceptSelectorTable.propTypes = {
+  businessConceptId: PropTypes.number,
+  concepts: PropTypes.array,
+  selectedConcept: PropTypes.object,
+  handleConceptSelected: PropTypes.func,
+  links: PropTypes.array,
+  extraColumns: PropTypes.array,
+};
+
+export function ConceptSelectorContent({
+  businessConceptId,
+  handleConceptSelected,
+  selectedConcept,
+  showTitle = true,
+  links,
+}) {
+  const { formatMessage } = useIntl();
+  const { searchData, filterParams: searchParams } = useSearchContext();
+  const { trigger: triggerDownload, isMutating: downloading } =
+    useConceptLinksDownload();
+  const concepts = searchData?.data;
+  const conceptsActions = _.propOr({}, "_actions")(searchData);
+
   return (
     <>
       {showTitle && (
@@ -113,64 +185,34 @@ export function ConceptSelectorContent({
         </label>
       )}
       <Segment>
-        {conceptsActions?.downloadLinks && ( 
-         <>
-          <Button
-            icon="download"
-            floated="right"
-            secondary
-            loading={downloading}
-            onClick={() => triggerDownload(searchParams)}
-            data-tooltip={formatMessage({
-              id: "concepts.actions.downloadLinks.tooltip",
-            })}
-          />        
+        {conceptsActions?.downloadLinks && (
+          <>
+            <Button
+              icon="download"
+              floated="right"
+              secondary
+              loading={downloading}
+              onClick={() => triggerDownload(searchParams)}
+              data-tooltip={formatMessage({
+                id: "concepts.actions.downloadLinks.tooltip",
+              })}
+            />
             <ConceptLinksUploadButton />
-         </>
+          </>
         )}
         <SearchWidget />
-        {!_.isEmpty(concepts) || selectedConcept ? (
-          <Table selectable size="small">
-            <Table.Header>
-              <Table.Row>
-                <Table.HeaderCell
-                  content={<FormattedMessage id="concepts.props.name" />}
-                />
-                <Table.HeaderCell
-                  content={<FormattedMessage id="concepts.props.domain" />}
-                />
-                <Table.HeaderCell
-                  content={<FormattedMessage id="concepts.props.status" />}
-                />
-              </Table.Row>
-            </Table.Header>
-            <Table.Body>
-              {concepts.map((s, i) => (
-                <ConceptSelectorRow
-                  disabled={
-                    businessConceptId == s.business_concept_id || isDisabled(s)
-                  }
-                  key={i}
-                  concept={s}
-                  active={selectedConcept && selectedConcept.id == s.id}
-                  onClick={handleConceptSelected}
-                  positive={isPositive(
-                    links,
-                    s.business_concept_id,
-                    businessConceptId
-                  )}
-                />
-              ))}
-              {selectedConcept && selectedConceptIsFiltered && (
-                <ConceptSelectorRow concept={selectedConcept} active />
-              )}
-            </Table.Body>
-          </Table>
-        ) : (
-          <Message
-            header={<FormattedMessage id="concepts.search.results.empty" />}
-          />
-        )}
+        <ConceptSelectorTable
+          concepts={concepts}
+          showTitle={showTitle}
+          downloading={downloading}
+          selectedConcept={selectedConcept}
+          handleConceptSelected={handleConceptSelected}
+          links={links}
+          businessConceptId={businessConceptId}
+          triggerDownload={triggerDownload}
+          downloadLinks={conceptsActions?.downloadLinks}
+          searchParams={searchParams}
+        />
         <ConceptsPagination size="small" />
       </Segment>
     </>

package/src/concepts/relations/components/__tests__/ConceptSelector.spec.js

@@ -1,7 +1,8 @@
-import { waitFor } from "@testing-library/react";
+import { waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { render, waitForLoad } from "@truedat/test/render";
 import ConceptSelector from "../ConceptSelector";
+import { ConceptSelectorTable } from "../ConceptSelector";
 
 const concept = {
   id: 1,
@@ -116,3 +117,91 @@ describe("<ConceptSelector />", () => {
     );
   });
 });
+
+describe("<ConceptSelectorTable />", () => {
+  jest.mock("react-intl", () => ({
+    FormattedMessage: ({ id }) => <span data-testid="fm">{id}</span>,
+  }));
+
+  const concept = {
+    id: 1,
+    name: "foo",
+    domain: { id: 1, name: "bar" },
+    status: "draft",
+    business_concept_id: 1,
+    last_change_at: "2020-01-01T00:00:00.000Z",
+    similarity: 0.5,
+  };
+
+  const links = [
+    {
+      target_id: 1,
+      target_type: "business_concept",
+    },
+  ];
+
+  const selectedConcept = { id: 2 };
+
+  const extraColumns = [
+    {
+      name: "similarity",
+      fieldSelector: (concept) => concept.similarity,
+      fieldDecorator: (similarity) => (
+        <span data-testid="similarity">{similarity}</span>
+      ),
+    },
+  ];
+
+  const props = {
+    businessConceptId: 1,
+    concepts: [concept],
+    selectedConcept,
+    handleConceptSelected: jest.fn(),
+    extraColumns,
+    links,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("matches the latest snapshot", async () => {
+    const rendered = render(<ConceptSelectorTable {...props} />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  test("renders Message when there are no concepts and no selectedConcept", () => {
+    const rendered = render(
+      <ConceptSelectorTable
+        {...{ ...props, concepts: [], selectedConcept: null }}
+      />
+    );
+    // It should render the Message with the empty results header id
+    expect(
+      rendered.getByText("concepts.search.results.empty")
+    ).toBeInTheDocument();
+  });
+
+  test("renders Table when there are concepts", async () => {
+    const rendered = render(
+      <ConceptSelectorTable {...{ ...props, selectedConcept: { id: 1 } }} />
+    );
+    await waitForLoad(rendered);
+
+    // Header labels via FormattedMessage
+    expect(rendered.getByText("concepts.props.name")).toBeInTheDocument();
+    expect(rendered.getByText("concepts.props.domain")).toBeInTheDocument();
+    expect(rendered.getByText("concepts.props.status")).toBeInTheDocument();
+    expect(rendered.getByText("concepts.props.similarity")).toBeInTheDocument();
+    // Rows exist
+    const rowgroups = rendered.getAllByRole("rowgroup");
+    const tbody = rowgroups[1];
+    const rows = within(tbody).getAllByRole("row");
+    expect(rows).toHaveLength(1);
+
+    expect(rows[0]).toHaveTextContent("bar");
+    expect(rows[0]).toHaveTextContent("draft");
+    expect(rows[0]).toHaveTextContent("0.5");
+  });
+});

package/src/concepts/relations/components/__tests__/__snapshots__/ConceptSelector.spec.js.snap

@@ -201,3 +201,102 @@ exports[`<ConceptSelector /> matches the latest snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<ConceptSelectorTable /> matches the latest snapshot 1`] = `
+<div>
+  <table
+    class="ui small selectable table"
+  >
+    <thead
+      class=""
+    >
+      <tr
+        class=""
+      >
+        <th
+          class=""
+        >
+          concepts.props.name
+        </th>
+        <th
+          class=""
+        >
+          concepts.props.domain
+        </th>
+        <th
+          class=""
+        >
+          concepts.props.status
+        </th>
+        <th
+          class=""
+        >
+          concepts.props.similarity
+        </th>
+      </tr>
+    </thead>
+    <tbody
+      class=""
+    >
+      <tr
+        class="disabled"
+      >
+        <td
+          class=""
+        >
+          foo
+        </td>
+        <td
+          class=""
+        >
+          bar
+        </td>
+        <td
+          class=""
+        >
+          <div
+            class="ui olive label"
+          >
+            draft
+          </div>
+        </td>
+        <td
+          class=""
+        >
+          <span
+            data-testid="similarity"
+          >
+            0.5
+          </span>
+        </td>
+      </tr>
+      <tr
+        class="active"
+      >
+        <td
+          class=""
+        />
+        <td
+          class=""
+        />
+        <td
+          class=""
+        >
+          <div
+            class="ui label"
+          >
+            concepts.status.undefined
+          </div>
+        </td>
+        <td
+          class=""
+        >
+          <span
+            data-testid="similarity"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/concepts/relations/sagas/linkConcept.js

@@ -13,6 +13,7 @@ export function* linkConceptSaga({ payload }) {
       "target_id",
       "target_type",
       "tag_ids",
+      "origin",
     ])(payload);
 
     const redirectUrl = _.prop("redirectUrl")(payload);