semiotic 2.0.3 → 3.0.0-beta.1

package/ai/dist/src/components/NetworkFrame.js

@@ -0,0 +1,335 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NetworkFrameInner = NetworkFrameInner;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const Frame_1 = __importDefault(require("./Frame"));
+const dataFunctions_1 = require("./data/dataFunctions");
+const frame_props_1 = require("./constants/frame_props");
+const networkframeRules_1 = require("./annotationRules/networkframeRules");
+const baseRules_1 = require("./annotationRules/baseRules");
+const functions_1 = require("./generic_utilities/functions");
+const d3_scale_1 = require("d3-scale");
+const network_1 = require("./processing/network");
+const networkPipelineCache_1 = require("./data/networkPipelineCache");
+const layouts_1 = require("./processing/layouts");
+const blankArray = [];
+const matrixRenderOrder = ["nodes", "edges"];
+const generalRenderOrder = ["edges", "nodes"];
+const projectedCoordinateNames = { y: "y", x: "x" };
+const xScale = (0, d3_scale_1.scaleLinear)();
+const yScale = (0, d3_scale_1.scaleLinear)();
+const useDerivedStateFromProps_1 = require("./useDerivedStateFromProps");
+const useLegacyUnmountCallback_1 = require("./useLegacyUnmountCallback");
+const defaultProps = {
+    annotations: [],
+    foregroundGraphics: [],
+    size: [500, 500],
+    className: "",
+    name: "networkframe",
+    networkType: { type: "force", iterations: 500 },
+    filterRenderedNodes: (d) => d.id !== "root-generated"
+};
+function NetworkFrameInner(allProps) {
+    const props = { ...defaultProps, ...allProps };
+    const pipelineCacheRef = (0, react_1.useRef)((0, networkPipelineCache_1.createNetworkPipelineCache)());
+    const baseState = {
+        dataVersion: undefined,
+        nodeData: [],
+        edgeData: [],
+        adjustedPosition: [],
+        adjustedSize: [],
+        backgroundGraphics: null,
+        foregroundGraphics: null,
+        projectedNodes: [],
+        projectedEdges: [],
+        renderNumber: 0,
+        nodeLabelAnnotations: [],
+        graphSettings: {
+            type: "empty-start",
+            nodes: [],
+            edges: [],
+            nodeHash: new Map(),
+            edgeHash: new Map(),
+            hierarchicalNetwork: false
+        },
+        edgeWidthAccessor: (0, dataFunctions_1.stringToFn)("weight"),
+        legendSettings: undefined,
+        margin: { top: 0, left: 0, right: 0, bottom: 0 },
+        networkFrameRender: {},
+        nodeIDAccessor: (0, dataFunctions_1.stringToFn)("id"),
+        nodeSizeAccessor: (0, functions_1.genericFunction)(5),
+        overlay: [],
+        projectedXYPoints: [],
+        sourceAccessor: (0, dataFunctions_1.stringToFn)("source"),
+        targetAccessor: (0, dataFunctions_1.stringToFn)("target"),
+        title: { title: undefined },
+        props: props
+    };
+    const initialState = (0, react_1.useMemo)(() => ({
+        ...baseState,
+        ...(0, network_1.calculateNetworkFrame)(props, baseState, pipelineCacheRef.current, props._layoutMap || layouts_1.allNetworkLayouts)
+    }), []);
+    const state = (0, useDerivedStateFromProps_1.useDerivedStateFromProps)((nextProps, prevState) => deriveNetworkFrameState(nextProps, prevState, pipelineCacheRef.current, nextProps._layoutMap || layouts_1.allNetworkLayouts), props, initialState);
+    (0, useLegacyUnmountCallback_1.useLegacyUnmountCallback)(props, state);
+    const propsRef = (0, react_1.useRef)(props);
+    propsRef.current = props;
+    const stateRef = (0, react_1.useRef)(state);
+    stateRef.current = state;
+    const defaultSVGRuleCb = (0, react_1.useCallback)((args) => defaultNetworkSVGRule(propsRef.current, stateRef.current, args), []);
+    const defaultHTMLRuleCb = (0, react_1.useCallback)((args) => defaultNetworkHTMLRule(propsRef.current, stateRef.current, args), []);
+    const { annotations = [], annotationSettings, className, customClickBehavior, customDoubleClickBehavior, customHoverBehavior, size, matte, hoverAnnotation, beforeElements, afterElements, interaction, disableContext, canvasPostProcess, canvasNodes, canvasEdges, additionalDefs, renderOrder = state.graphSettings && state.graphSettings.type === "matrix"
+        ? matrixRenderOrder
+        : generalRenderOrder, sketchyRenderingEngine, frameRenderOrder, disableCanvasInteraction, interactionSettings, disableProgressiveRendering, transition } = props;
+    const { backgroundGraphics, foregroundGraphics, projectedXYPoints, margin, legendSettings, adjustedPosition, adjustedSize, networkFrameRender, nodeLabelAnnotations, overlay, title } = state;
+    // Memoize overlay formatting
+    const formattedOverlay = (0, react_1.useMemo)(() => (overlay && overlay.length > 0 ? overlay : undefined), [overlay]);
+    // Memoize active hover annotation logic
+    const activeHoverAnnotation = (0, react_1.useMemo)(() => {
+        if (Array.isArray(hoverAnnotation)) {
+            return hoverAnnotation;
+        }
+        else if ((customClickBehavior ||
+            customDoubleClickBehavior ||
+            customHoverBehavior) &&
+            (hoverAnnotation === undefined || hoverAnnotation === false)) {
+            return blankArray;
+        }
+        else {
+            return !!hoverAnnotation;
+        }
+    }, [
+        hoverAnnotation,
+        customClickBehavior,
+        customDoubleClickBehavior,
+        customHoverBehavior
+    ]);
+    // Memoize merged annotations to prevent unnecessary array creation
+    const mergedAnnotations = (0, react_1.useMemo)(() => [...annotations, ...nodeLabelAnnotations], [annotations, nodeLabelAnnotations]);
+    // Memoize canvas rendering flag
+    const canvasRendering = (0, react_1.useMemo)(() => !!(canvasNodes || canvasEdges), [canvasNodes, canvasEdges]);
+    return (React.createElement(Frame_1.default, { name: "networkframe", renderPipeline: networkFrameRender, adjustedPosition: adjustedPosition, adjustedSize: adjustedSize, size: size, xScale: xScale, yScale: yScale, title: title, matte: matte, className: className, additionalDefs: additionalDefs, frameKey: "none", projectedCoordinateNames: projectedCoordinateNames, defaultSVGRule: defaultSVGRuleCb, defaultHTMLRule: defaultHTMLRuleCb, hoverAnnotation: activeHoverAnnotation, annotations: mergedAnnotations, annotationSettings: annotationSettings, legendSettings: legendSettings, interaction: interaction, customClickBehavior: customClickBehavior, customHoverBehavior: customHoverBehavior, customDoubleClickBehavior: customDoubleClickBehavior, points: projectedXYPoints, margin: margin, overlay: formattedOverlay, backgroundGraphics: backgroundGraphics, foregroundGraphics: foregroundGraphics, beforeElements: beforeElements, afterElements: afterElements, disableContext: disableContext, canvasPostProcess: canvasPostProcess, canvasRendering: canvasRendering, renderOrder: renderOrder, disableCanvasInteraction: disableCanvasInteraction, sketchyRenderingEngine: sketchyRenderingEngine, frameRenderOrder: frameRenderOrder, interactionSettings: interactionSettings, disableProgressiveRendering: disableProgressiveRendering, transition: transition }));
+}
+function deriveNetworkFrameState(nextProps, prevState, cache, layoutMap) {
+    const { props } = prevState;
+    // Check which category of props changed
+    const dataPropsChanged = !prevState.dataVersion && frame_props_1.networkFrameDataAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const scalePropsChanged = !prevState.dataVersion && frame_props_1.networkFrameScaleAffectingProps.some((prop) => props[prop] !== nextProps[prop]);
+    const sizeChanged = props.size[0] !== nextProps.size[0] || props.size[1] !== nextProps.size[1];
+    // Force full recalc if dataVersion changed or no projected data exists
+    if ((prevState.dataVersion && prevState.dataVersion !== nextProps.dataVersion) ||
+        (!prevState.projectedNodes && !prevState.projectedEdges)) {
+        return {
+            ...(0, network_1.calculateNetworkFrame)(nextProps, prevState, cache, layoutMap),
+            props: nextProps
+        };
+    }
+    // Full data recalculation needed if data-affecting props changed
+    if (dataPropsChanged) {
+        return {
+            ...(0, network_1.calculateNetworkFrame)(nextProps, prevState, cache, layoutMap),
+            props: nextProps
+        };
+    }
+    // Scale/layout recalculation needed if size or scale-affecting props changed
+    // Note: For network layouts (especially force), size changes might affect positioning
+    if (sizeChanged || scalePropsChanged) {
+        return {
+            ...(0, network_1.calculateNetworkFrame)(nextProps, prevState, cache, layoutMap),
+            props: nextProps
+        };
+    }
+    // Only styling changed - no recalc needed, React will re-render with existing state
+    return { props: nextProps };
+}
+const annotationTypeStrings = new Set([
+    "label", "callout", "callout-circle", "callout-rect",
+    "callout-custom", "xy-threshold", "bracket"
+]);
+function defaultNetworkSVGRule(props, state, { d: baseD, i, annotationLayer }) {
+    const { projectedNodes, projectedEdges, nodeIDAccessor, nodeSizeAccessor, networkFrameRender, adjustedSize, adjustedPosition } = state;
+    //TODO PASS FRAME STYLE FNs TO HIGHLIGHT
+    const { svgAnnotationRules } = props;
+    const d = baseD.ids
+        ? baseD
+        : baseD.edge
+            ? {
+                ...(projectedEdges.find((p) => {
+                    return (nodeIDAccessor(p.source) === nodeIDAccessor(baseD.edge.source) &&
+                        nodeIDAccessor(p.target) === nodeIDAccessor(baseD.edge.target));
+                }) || {}),
+                ...baseD
+            }
+            : {
+                ...(projectedNodes.find((p) => nodeIDAccessor(p) === baseD.id) || {}),
+                ...baseD
+            };
+    const { voronoiHover } = annotationLayer;
+    if (svgAnnotationRules) {
+        const customAnnotation = svgAnnotationRules({
+            d,
+            i,
+            networkFrameProps: props,
+            networkFrameState: state,
+            nodes: projectedNodes,
+            edges: projectedEdges,
+            voronoiHover,
+            screenCoordinates: [d.x, d.y],
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer
+        });
+        if (customAnnotation !== null) {
+            return customAnnotation;
+        }
+    }
+    if (d.type === "node") {
+        return (0, networkframeRules_1.svgNodeRule)({
+            d,
+            i,
+            nodeSizeAccessor
+        });
+    }
+    else if (d.type === "desaturation-layer") {
+        return (0, baseRules_1.desaturationLayer)({
+            style: d.style instanceof Function ? d.style(d, i) : d.style,
+            size: adjustedSize,
+            i,
+            key: d.key
+        });
+    }
+    else if (d.type === "basic-node-label") {
+        return (React.createElement("g", { key: d.key || `basic-${i}`, transform: `translate(${d.x},${d.y})` }, (baseD.element || baseD.label)));
+    }
+    else if (typeof d.type === "function" || annotationTypeStrings.has(d.type)) {
+        return (0, networkframeRules_1.svgReactAnnotationRule)({
+            d,
+            i,
+            projectedNodes,
+            nodeIDAccessor
+        });
+    }
+    else if (d.type === "enclose") {
+        return (0, networkframeRules_1.svgEncloseRule)({
+            d,
+            i,
+            projectedNodes,
+            nodeIDAccessor,
+            nodeSizeAccessor
+        });
+    }
+    else if (d.type === "enclose-rect") {
+        return (0, networkframeRules_1.svgRectEncloseRule)({
+            d,
+            i,
+            projectedNodes,
+            nodeIDAccessor,
+            nodeSizeAccessor
+        });
+    }
+    else if (d.type === "enclose-hull") {
+        return (0, networkframeRules_1.svgHullEncloseRule)({
+            d,
+            i,
+            projectedNodes,
+            nodeIDAccessor,
+            nodeSizeAccessor
+        });
+    }
+    else if (d.type === "highlight") {
+        return (0, networkframeRules_1.svgHighlightRule)({
+            d,
+            i,
+            networkFrameRender
+        });
+    }
+    return null;
+}
+function defaultNetworkHTMLRule(props, state, { d: baseD, i, annotationLayer }) {
+    const { tooltipContent, optimizeCustomTooltipPosition, htmlAnnotationRules } = props;
+    const { projectedNodes, projectedEdges, nodeIDAccessor, adjustedSize, adjustedPosition } = state;
+    const { voronoiHover } = annotationLayer;
+    const d = baseD.ids
+        ? baseD
+        : baseD.edge
+            ? {
+                ...(projectedEdges.find((p) => nodeIDAccessor(p.source) === nodeIDAccessor(baseD.source) &&
+                    nodeIDAccessor(p.target) === nodeIDAccessor(baseD.target)) || {}),
+                ...baseD
+            }
+            : {
+                ...(projectedNodes.find((p) => nodeIDAccessor(p) === baseD.id) || {}),
+                ...baseD
+            };
+    if (htmlAnnotationRules) {
+        const customAnnotation = htmlAnnotationRules({
+            d,
+            i,
+            networkFrameProps: props,
+            networkFrameState: state,
+            nodes: projectedNodes,
+            edges: projectedEdges,
+            voronoiHover,
+            screenCoordinates: [d.x, d.y],
+            adjustedPosition,
+            adjustedSize,
+            annotationLayer
+        });
+        if (customAnnotation !== null) {
+            return customAnnotation;
+        }
+    }
+    if (d.type === "frame-hover") {
+        return (0, networkframeRules_1.htmlFrameHoverRule)({
+            d,
+            i,
+            tooltipContent,
+            optimizeCustomTooltipPosition,
+            nodes: projectedNodes,
+            edges: projectedEdges,
+            nodeIDAccessor,
+            adjustedSize
+        });
+    }
+    return null;
+}
+NetworkFrameInner.displayName = "NetworkFrame";
+const NetworkFrame = React.memo(NetworkFrameInner);
+exports.default = NetworkFrame;