@truedat/dd 8.4.6 → 8.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.4.6",
+  "version": "8.4.8",
   "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.6",
+    "@truedat/test": "8.4.8",
     "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": "958ab0a57f628c19a7aee905a8f4ae624a3cdf59"
+  "gitHead": "7829e377f78c3cfc66e449f5dc31a8b03c0f5f00"
 }

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/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;
 }