@truedat/dd 8.4.7 → 8.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.4.7",
+  "version": "8.4.9",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.4.7",
+    "@truedat/test": "8.4.9",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "71fcf487f24eb0b3e5a6962547e0e946c59033ce"
+  "gitHead": "9fd4bd2126a33342009194c8ae1829cd3c617a48"
 }

package/src/components/LineageGraph.js

@@ -1,5 +1,5 @@
 import _ from "lodash/fp";
-import { useRef, useEffect, useReducer, useState } from "react";
+import { useRef, useEffect, useReducer, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import {
@@ -39,9 +39,6 @@ const enablePanZoom = (svg) => {
 const togglePanZoom = (svg) => (selectedNode) => {
   _.isEmpty(selectedNode) ? enablePanZoom(svg) : disablePanZoom(svg);
 };
-const resetPan = (svg) => {
-  svg && svg.resetPan();
-};
 
 const initialState = {
   hover: {},
@@ -70,29 +67,120 @@ export const LineageGraph = ({
   cancelPoll,
 }) => {
   const ref = useRef(null);
+  const canvasRef = useRef(null);
+  const fitFrameRef = useRef(null);
+  const isAliveRef = useRef(true);
   const [state, dispatch] = useReducer(reducer, initialState);
   const { selectedNode, hover, svg } = state;
 
   const [metadata, setMetadata] = useState(null);
   const [selectedLink, selectLink] = useState(null);
 
+  const fitAndCenterGraph = useCallback((instance) => {
+    if (!instance || !isAliveRef.current) return;
+    if (fitFrameRef.current) {
+      cancelAnimationFrame(fitFrameRef.current);
+    }
+
+    fitFrameRef.current = requestAnimationFrame(() => {
+      if (!isAliveRef.current) {
+        fitFrameRef.current = null;
+        return;
+      }
+      try {
+        const initialScale = 0.8;
+        const topMargin = 16;
+        instance.resize();
+        instance.fit();
+        instance.zoomBy(initialScale);
+        const currentPan = instance.getPan();
+        instance.pan({ x: currentPan.x, y: topMargin });
+      } catch (_error) {
+      } finally {
+        fitFrameRef.current = null;
+      }
+    });
+  }, []);
+
   useEffect(() => {
     // Anything in here is fired on component mount.
-    return () => cancelPoll();
+    return () => {
+      isAliveRef.current = false;
+      cancelPoll();
+    };
   }, []);
 
   useEffect(() => {
-    if (!_.isEmpty(resources)) {
-      const svg = svgPanZoom(ref.current, svgOptions);
+    if (!_.isEmpty(resources) && ref.current) {
+      isAliveRef.current = true;
+      const svg = svgPanZoom(ref.current, {
+        ...svgOptions,
+        eventsListenerElement: canvasRef.current || ref.current,
+      });
       dispatch(initSvg.trigger(svg));
+
+      return () => {
+        isAliveRef.current = false;
+        if (fitFrameRef.current) {
+          cancelAnimationFrame(fitFrameRef.current);
+          fitFrameRef.current = null;
+        }
+        try {
+          svg.destroy();
+        } catch (_error) {
+        }
+      };
     }
   }, [resources]);
   useEffect(() => togglePanZoom(svg)(selectedNode), [selectedNode]);
-  useEffect(() => resetPan(svg), [resources]);
+  useEffect(() => fitAndCenterGraph(svg), [svg, resources]);
+  useEffect(() => {
+    if (!svg) return;
+
+    let isResizeEffectActive = true;
+    const onResize = () => {
+      if (!isResizeEffectActive || !isAliveRef.current) return;
+      fitAndCenterGraph(svg);
+    };
+    window.addEventListener("resize", onResize);
+
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined" && canvasRef.current
+        ? new ResizeObserver(onResize)
+        : null;
+
+    if (resizeObserver && canvasRef.current) {
+      resizeObserver.observe(canvasRef.current);
+    }
+
+    return () => {
+      isResizeEffectActive = false;
+      window.removeEventListener("resize", onResize);
+      if (resizeObserver) resizeObserver.disconnect();
+      if (fitFrameRef.current) {
+        cancelAnimationFrame(fitFrameRef.current);
+        fitFrameRef.current = null;
+      }
+    };
+  }, [svg]);
 
   const onSelect = (g) => () => dispatch(selectNode.trigger(g));
   const onHover = (g) =>
     selectedNode ? undefined : () => dispatch(hoverNode.trigger(g));
+  const onPointerDown = (event) => {
+    if (event.currentTarget.setPointerCapture && event.pointerId !== undefined) {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    }
+  };
+
+  const onPointerUp = (event) => {
+    if (
+      event.currentTarget.releasePointerCapture &&
+      event.pointerId !== undefined
+    ) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
   const { formatMessage } = useIntl();
 
   return (
@@ -104,7 +192,7 @@ export const LineageGraph = ({
             _.isNull(metadata) || _.isEmpty(metadata) ? {} : { paddingRight: 0 }
           }
         >
-          <Dimmer.Dimmable dimmed={loading} className="dl">
+          <Dimmer.Dimmable dimmed={loading} className="dl" ref={canvasRef}>
             {loading ? (
               <Dimmer active inverted>
                 <Loader size="large">
@@ -149,6 +237,9 @@ export const LineageGraph = ({
               height={height}
               ref={ref}
               onClick={() => dispatch(selectNode.trigger(null))}
+              onPointerDown={onPointerDown}
+              onPointerUp={onPointerUp}
+              onPointerCancel={onPointerUp}
               style={{ border: "1px solid #d4d4d5", borderRadius: "5px" }}
             >
               <LineageDefs />

package/src/components/StructureGraph.js

@@ -13,6 +13,7 @@ export const StructureGraph = ({
   graph,
   id,
   graphId,
+  height,
   type,
 }) => {
   useEffect(() => {
@@ -24,7 +25,7 @@ export const StructureGraph = ({
   return degree ? (
     <>
       <GraphRedirector />
-      <LineageGraph height="50vh" graph={graph} />
+      <LineageGraph height={height || "640px"} graph={graph} />
     </>
   ) : null;
 };
@@ -36,6 +37,7 @@ StructureGraph.propTypes = {
   graph: PropTypes.object,
   id: PropTypes.string,
   graphId: PropTypes.number,
+  height: PropTypes.string,
   type: PropTypes.string,
 };
 

package/src/components/StructureLineage.js

@@ -1,21 +1,18 @@
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
-import { Grid } from "semantic-ui-react";
 import StructureGraph from "./StructureGraph";
 import LineageDownloadButton from "./LineageDownloadButton";
 
-export const StructureLineage = (props) => (
-  <>
-    <Grid>
-      <Grid.Row>
-        <Grid.Column width={1} floated="right">
-          <LineageDownloadButton graph={props.graph} />
-        </Grid.Column>
-      </Grid.Row>
-    </Grid>
-    <StructureGraph {...props} />
-  </>
-);
+export const StructureLineage = (props) => {
+  return (
+    <div className="structure-lineage">
+      <div className="structure-lineage__download-button">
+        <LineageDownloadButton graph={props.graph} />
+      </div>
+      <StructureGraph {...props} height="100%" />
+    </div>
+  );
+};
 
 const mapStateToProps = ({
   structureLineageId: graphId,

package/src/components/StructureTabs.js

@@ -211,7 +211,7 @@ export const StructureTabs = ({ path }) => {
         items={sortedItems}
         className="tab-overflow"
       />
-      <Divider hidden />
+      {activeTab === "lineage" ? null : <Divider hidden />}
     </>
   );
 };

package/src/components/StructureVersions.js

@@ -19,8 +19,12 @@ export const StructureVersions = () =>{
   return (
   !_.isEmpty(versions) && (
     <List selection>
-      {versions.map((v, i) => (
-        <StructureVersionListItem key={i} id={id} {...v} />
+      {versions.map((v) => (
+        <StructureVersionListItem
+          key={v?.id ?? `${v?.version}-${v?.inserted_at}`}
+          id={id}
+          {...v}
+        />
       ))}
     </List>
   ));

package/src/messages/en.js

@@ -397,7 +397,11 @@ export default {
   "structure.rule.props.name": "Name",
   "structure.rule_implementation.props.key": "Implementation",
   "structure.rule_implementation.props.result": "Quality",
+  "structure.reason": "Reason",
   "structure.search.placeholder": "Enter a search...",
+  "structure.similarity": "Similarity",
+  "suggestions.similarity.cosine.popup":
+    "Similarity score (cosine). Higher values indicate a closer match.",
   "structure.share.title": "Share structure",
   "structure.system": "System",
   "structure.system.create": "Create system",

package/src/messages/es.js

@@ -407,7 +407,11 @@ export default {
   "structure.rule.props.name": "Nombre",
   "structure.rule_implementation.props.key": "Implementación",
   "structure.rule_implementation.props.result": "Calidad",
+  "structure.reason": "Motivo",
   "structure.search.placeholder": "Introduce una busqueda...",
+  "structure.similarity": "Similitud",
+  "suggestions.similarity.cosine.popup":
+    "Puntuación de similitud (coseno). Valores más altos indican mayor coincidencia.",
   "structure.share.title": "Compartir estructura",
   "structure.system": "Sistema",
   "structure.system.create": "Crear sistema",

package/src/selectors/getLineageLevels.js

@@ -1,10 +1,7 @@
 import _ from "lodash/fp";
 import { createSelector } from "reselect";
 
-export const lineageLevels = createSelector(
-  _.prop("lineageLevels"),
-  (lineageLevels) => lineageLevels
-);
+export const lineageLevels = _.prop("lineageLevels");
 
 export const levelsSelection = createSelector(lineageLevels, (lineageLevels) =>
   _.negate(_.isNil)(lineageLevels) ? "select" : "all"

package/src/styles/lineageGraph.less

@@ -1,3 +1,68 @@
 .graph-hash {
   font-family: monospace;
+}
+
+.structure-lineage {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.structure-lineage__download-button {
+  position: absolute;
+  top: 4%;
+  right: 1%;
+  z-index: 5;
+}
+
+.structure-lineage__download-button span,
+.structure-lineage__download-button .ui.button,
+.structure-lineage__download-button .ui.popup {
+  pointer-events: auto;
+}
+
+.structure-lineage .ui.grid {
+  margin: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.structure-lineage .ui.grid > .row {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  margin-right: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.structure-lineage .ui.grid > * {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.structure-lineage .ui.grid > .row > .column {
+  padding-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.structure-lineage .dl {
+  padding: 0;
+  margin: 0;
+}
+
+.structure-lineage .dl svg {
+  height: clamp(340px, 52vw, 640px) !important;
+  max-height: 640px;
+  background-color: #f7f8fa;
+  padding: 0;
+  margin: 0;
+  display: block;
+  margin-left: 0;
+  margin-right: 0;
 }

package/src/components/StructureSuggestions.js

@@ -1,88 +0,0 @@
-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: "suggestions.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/__tests__/StructureSuggestions.spec.js

@@ -1,93 +0,0 @@
-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);
-    });
-});