semiotic 2.0.2 → 3.0.0-beta.1

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

@@ -0,0 +1,259 @@
+"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.default = FacetController;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const memoize_one_1 = __importDefault(require("memoize-one"));
+const framePropHash = {
+    NetworkFrame: true,
+    XYFrame: true,
+    OrdinalFrame: true,
+    ResponsiveNetworkFrame: true,
+    ResponsiveXYFrame: true,
+    ResponsiveOrdinalFrame: true,
+    SparkNetworkFrame: true,
+    SparkXYFrame: true,
+    SparkOrdinalFrame: true
+};
+const invertKeys = {
+    rExtent: "invertR",
+    xExtent: "invertX",
+    yExtent: "invertY"
+};
+const buildNewState = (prevState, extentValue, extentType, extentPosition, invertedExtent) => {
+    const oldExtents = prevState.rawExtents[extentType] || {};
+    oldExtents[extentPosition] = extentValue;
+    const extentMinMaxValues = Object.values(oldExtents)
+        .flat()
+        .filter((d) => d !== undefined && d !== null && !isNaN(d));
+    let baseExtent = [
+        Math.min(...extentMinMaxValues),
+        Math.max(...extentMinMaxValues)
+    ];
+    if (invertedExtent) {
+        baseExtent = baseExtent.reverse();
+    }
+    return {
+        extents: {
+            ...prevState.extents,
+            [extentType]: extentMinMaxValues.length === 0 ? undefined : baseExtent
+        },
+        rawExtents: {
+            ...prevState.rawExtents,
+            [extentType]: oldExtents
+        }
+    };
+};
+function validFrameProps(originalProps) {
+    const newProps = { ...originalProps };
+    return newProps;
+}
+const processFacetController = (0, memoize_one_1.default)((props, state) => {
+    return React.Children.map(props.children, (child, index) => {
+        if (!child)
+            return null;
+        return mapChildrenWithAppropriateProps({
+            child,
+            index,
+            originalAnnotations: child.props.annotations || [],
+            props,
+            state
+        });
+    });
+});
+/**
+ * Helper for creating extent if we have a  min/max value
+ * use that else use the onChange version so we can in return
+ * normalize all of the facets to have the same extents
+ */
+const createExtent = (extentType, props, state, index) => {
+    return state.extents && state.extents[extentType]
+        ? {
+            onChange: extentHandler(extentType, props, state, index),
+            extent: state.extents[extentType]
+        }
+        : { onChange: extentHandler(extentType, props, state, index) };
+};
+/**
+ * Whenever the extent changes, create the min/max values for each extentType
+ * so this could be rExtent for OrdinalFrame or x/yExtent for the XYFrame
+ */
+const extentHandler = (extentType, props, state, extentPosition) => {
+    const invertedExtent = props[invertKeys[extentType]] || false;
+    return (extentValue) => {
+        const newState = buildNewState(state, extentValue, extentType, extentPosition, invertedExtent);
+        state.changeRawExtents(newState.rawExtents);
+        state.changeExtents(newState.extents);
+        return extentValue;
+    };
+};
+/**
+ * Map hover annotations and extent to child. Initially the extent is an object with
+ * an onChange handler however once each of those resolve we then create an
+ * extent that matches between all of them. This logic can be found in createExtent and also
+ * extentHandler
+ */
+const mapChildrenWithAppropriateProps = ({ child, index, originalAnnotations, props, state }) => {
+    const childType = child.type;
+    const frameType = childType.displayName;
+    const annotations = generateChildAnnotations({
+        state,
+        props,
+        originalAnnotations
+    });
+    const customProps = { ...props, annotations };
+    if (!framePropHash[frameType]) {
+        return React.cloneElement(child, { facetprops: customProps });
+    }
+    // pieceHoverAnnotation could be an object, so we need to be explicit in checking for true
+    if (props.hoverAnnotation || props.pieceHoverAnnotation) {
+        customProps.customHoverBehavior = (d) => {
+            state.changeFacetHover(d);
+            state.changeFacetHoverAnnotations(props.hoverAnnotation || props.pieceHoverAnnotation);
+        };
+    }
+    if ((frameType === "OrdinalFrame" ||
+        frameType === "ResponsiveOrdinalFrame" ||
+        frameType === "SparkOrdinalFrame") &&
+        props.sharedRExtent === true) {
+        const invertedExtent = customProps[invertKeys["rExtent"]] || false;
+        customProps.rExtent = createExtent("rExtent", props, state, index);
+        customProps.onUnmount = () => {
+            const newState = buildNewState(state, [], "rExtent", index, invertedExtent);
+            state.changeRawExtents(newState.rawExtents);
+            state.changeExtents(newState.extents);
+        };
+    }
+    if ((frameType === "XYFrame" ||
+        frameType === "ResponsiveXYFrame" ||
+        frameType === "SparkXYFrame") &&
+        props.sharedXExtent === true) {
+        const invertedExtent = customProps[invertKeys["xExtent"]] || false;
+        customProps.xExtent = createExtent("xExtent", props, state, index);
+        customProps.onUnmount = () => {
+            const newState = buildNewState(state, [], "xExtent", index, invertedExtent);
+            state.changeRawExtents(newState.rawExtents);
+            state.changeExtents(newState.extents);
+        };
+    }
+    if ((frameType === "XYFrame" ||
+        frameType === "ResponsiveXYFrame" ||
+        frameType === "SparkXYFrame") &&
+        props.sharedYExtent === true) {
+        const invertedExtent = customProps[invertKeys["yExtent"]] || false;
+        customProps.yExtent = createExtent("yExtent", props, state, index);
+        customProps.onUnmount = () => {
+            const newState = buildNewState(state, [], "yExtent", index, invertedExtent);
+            state.changeRawExtents(newState.rawExtents);
+            state.changeExtents(newState.extents);
+        };
+    }
+    if (customProps.pieceHoverAnnotation) {
+        customProps.pieceHoverAnnotation = [];
+    }
+    else if (customProps.hoverAnnotation) {
+        customProps.hoverAnnotation = [];
+    }
+    return React.cloneElement(child, validFrameProps(customProps));
+};
+/**
+ * Remove and add required annotation props for specific annotation types.
+ */
+const generateChildAnnotations = ({ originalAnnotations, state, props }) => {
+    let annotationBase = state.facetHoverAnnotations;
+    const { hoverAnnotation, pieceHoverAnnotation } = props;
+    const annotationSettings = hoverAnnotation || pieceHoverAnnotation;
+    if (!annotationSettings || !annotationBase) {
+        return originalAnnotations;
+    }
+    if (state.facetHover) {
+        const annotations = [...originalAnnotations];
+        if (annotationSettings === true) {
+            annotationBase = [{ ...state.facetHover }];
+        }
+        else {
+            const annotationMap = annotationSettings;
+            annotationBase = annotationMap.map((annotation) => {
+                const decoratedAnnotation = typeof annotation === "function"
+                    ? annotation(state.facetHover)
+                    : { ...state.facetHover, ...annotation };
+                return decoratedAnnotation;
+            });
+        }
+        if (Array.isArray(annotationBase)) {
+            annotationBase.forEach((annotation) => {
+                if (typeof annotation !== "function") {
+                    if (annotation.type === "column-hover") {
+                        annotation.facetColumn = annotation.column.name;
+                        annotation.column = undefined;
+                    }
+                    else {
+                        if (!annotation.type) {
+                            annotation.type = "frame-hover";
+                        }
+                        annotation.y = undefined;
+                        annotation.yBottom = undefined;
+                        annotation.yMiddle = undefined;
+                        annotation.yTop = undefined;
+                    }
+                }
+            });
+            annotations.push(...annotationBase);
+        }
+        return annotations;
+    }
+    return originalAnnotations;
+};
+function FacetController(props) {
+    const [extents, changeExtents] = (0, react_1.useState)({});
+    const [rawExtents, changeRawExtents] = (0, react_1.useState)({});
+    const [facetHover, changeFacetHover] = (0, react_1.useState)(undefined);
+    const [facetHoverAnnotations, changeFacetHoverAnnotations] = (0, react_1.useState)(undefined);
+    return (React.createElement(React.Fragment, null, processFacetController(props, {
+        extents,
+        rawExtents,
+        facetHover,
+        facetHoverAnnotations,
+        changeFacetHoverAnnotations,
+        changeExtents,
+        changeRawExtents,
+        changeFacetHover
+    })));
+}

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

@@ -0,0 +1,139 @@
+"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.default = Frame;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const AnnotationLayer_1 = __importDefault(require("./AnnotationLayer"));
+const InteractionLayer_1 = __importDefault(require("./InteractionLayer"));
+const VisualizationLayer_1 = __importDefault(require("./VisualizationLayer"));
+const frameFunctions_1 = require("./svg/frameFunctions");
+const jsx_1 = require("./constants/jsx");
+const TooltipStore_1 = require("./store/TooltipStore");
+const blankArray = [];
+const blankObject = {};
+const defaultPosition = [0, 0];
+const defaultCoordinateNames = { x: "x", y: "y" };
+const defaultFrameRenderOrder = [
+    "axes-tick-lines",
+    "viz-layer",
+    "matte",
+    "axes-labels",
+    "labels"
+];
+const defaultZeroMargin = { top: 0, bottom: 0, left: 0, right: 0 };
+function Frame(props) {
+    const { axes, axesTickLines, className = "", name = "", frameKey, projectedCoordinateNames = defaultCoordinateNames, renderPipeline, size, adjustedSize = size, title, xScale, yScale, dataVersion, annotations, projectedYMiddle, interaction, customClickBehavior, customHoverBehavior, customDoubleClickBehavior, points, margin = defaultZeroMargin, backgroundGraphics, foregroundGraphics, beforeElements, afterElements, defaultSVGRule, defaultHTMLRule, adjustedPosition = defaultPosition, legendSettings, annotationSettings = blankObject, overlay, columns, rScale, projection, interactionOverflow, canvasPostProcess, canvasRendering, renderOrder = blankArray, showLinePoints, disableCanvasInteraction = false, sketchyRenderingEngine, disableContext, frameRenderOrder = defaultFrameRenderOrder, additionalVizElements = blankObject, interactionSettings, disableProgressiveRendering, additionalDefs, transition } = props;
+    let { hoverAnnotation } = props;
+    const canvasContext = (0, react_1.useRef)(null);
+    const [finalDefs, changeFinalDefs] = (0, react_1.useState)(null);
+    const [matte, changeMatte] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const generatedDefs = (0, jsx_1.generateFinalDefs)({
+            matte,
+            size,
+            margin,
+            frameKey,
+            additionalDefs,
+            name
+        });
+        changeFinalDefs(generatedDefs.defs);
+        changeMatte(generatedDefs.matte);
+    }, [
+        size[0],
+        size[1],
+        margin.top,
+        margin.bottom,
+        margin.right,
+        margin.left,
+        margin.top,
+        matte,
+        additionalDefs
+    ]);
+    if (!hoverAnnotation &&
+        (customClickBehavior || customHoverBehavior || customDoubleClickBehavior)) {
+        hoverAnnotation = blankArray;
+    }
+    const areaAnnotations = [];
+    const totalAnnotations = annotations
+        ? [...annotations, ...areaAnnotations]
+        : areaAnnotations;
+    const defaultSVGRuleRef = (0, react_1.useRef)(defaultSVGRule);
+    defaultSVGRuleRef.current = defaultSVGRule;
+    const defaultHTMLRuleRef = (0, react_1.useRef)(defaultHTMLRule);
+    defaultHTMLRuleRef.current = defaultHTMLRule;
+    const renderPipelineRef = (0, react_1.useRef)(renderPipeline);
+    renderPipelineRef.current = renderPipeline;
+    const svgAnnotationRuleCb = (0, react_1.useCallback)((d, i, thisALayer) => defaultSVGRuleRef.current({ d, i, annotationLayer: thisALayer, ...renderPipelineRef.current }), []);
+    const htmlAnnotationRuleCb = (0, react_1.useCallback)((d, i, thisALayer) => defaultHTMLRuleRef.current({ d, i, annotationLayer: thisALayer, ...renderPipelineRef.current }), []);
+    const annotationLayer = (React.createElement(AnnotationLayer_1.default, { legendSettings: legendSettings, margin: margin, axes: axes, annotationHandling: annotationSettings, pointSizeFunction: annotationSettings.layout && annotationSettings.layout.pointSizeFunction, labelSizeFunction: annotationSettings.layout && annotationSettings.layout.labelSizeFunction, annotations: totalAnnotations, svgAnnotationRule: svgAnnotationRuleCb, htmlAnnotationRule: htmlAnnotationRuleCb, size: adjustedSize, position: [
+            adjustedPosition[0] + margin.left,
+            adjustedPosition[1] + margin.top
+        ] }));
+    const generatedTitle = (0, frameFunctions_1.generateFrameTitle)({
+        title: title,
+        size: size
+    });
+    const finalBackgroundGraphics = typeof backgroundGraphics === "function"
+        ? backgroundGraphics({ size, margin })
+        : backgroundGraphics;
+    const finalForegroundGraphics = typeof foregroundGraphics === "function"
+        ? foregroundGraphics({ size, margin })
+        : foregroundGraphics;
+    return (React.createElement("div", { className: `${className} frame ${name}`, style: {
+            background: "none"
+        } },
+        beforeElements && (React.createElement("div", { className: `${name} frame-before-elements` }, beforeElements)),
+        React.createElement("div", { className: "frame-elements", style: { height: `${size[1]}px`, width: `${size[0]}px` } },
+            React.createElement(TooltipStore_1.TooltipProvider, null,
+                React.createElement("div", { className: "visualization-layer", style: { position: "absolute" } },
+                    backgroundGraphics && (React.createElement("svg", { className: "background-graphics", style: { position: "absolute" }, width: size[0], height: size[1] }, backgroundGraphics && (React.createElement("g", { "aria-hidden": true, className: "background-graphics" }, finalBackgroundGraphics)))),
+                    React.createElement("svg", { className: "visualization-layer", style: { position: "absolute" }, width: size[0], height: size[1] },
+                        finalDefs,
+                        React.createElement(VisualizationLayer_1.default, { disableContext: disableContext, renderPipeline: renderPipeline, position: adjustedPosition, width: adjustedSize[0], height: adjustedSize[1], projectedCoordinateNames: projectedCoordinateNames, xScale: xScale, yScale: yScale, axes: axes, title: generatedTitle, frameKey: frameKey, canvasContext: canvasContext, dataVersion: dataVersion, matte: matte, margin: margin, canvasPostProcess: canvasPostProcess, renderOrder: renderOrder, sketchyRenderingEngine: sketchyRenderingEngine, axesTickLines: axesTickLines, additionalVizElements: additionalVizElements, frameRenderOrder: frameRenderOrder, disableProgressiveRendering: disableProgressiveRendering, transition: transition }),
+                        generatedTitle && (React.createElement("g", { className: "frame-title" }, generatedTitle)),
+                        foregroundGraphics && (React.createElement("g", { "aria-hidden": true, className: "foreground-graphics" }, finalForegroundGraphics)))),
+                canvasRendering && (React.createElement("canvas", { className: "frame-canvas", ref: canvasContext, style: {
+                        pointerEvents: "none",
+                        position: "absolute"
+                    }, width: size[0] / 2, height: size[1] / 2 })),
+                React.createElement(InteractionLayer_1.default, { hoverAnnotation: hoverAnnotation, projectedX: projectedCoordinateNames.x, projectedY: projectedCoordinateNames.y, projectedYMiddle: projectedYMiddle, interaction: interaction, customClickBehavior: customClickBehavior, customHoverBehavior: customHoverBehavior, customDoubleClickBehavior: customDoubleClickBehavior, points: points, showLinePoints: showLinePoints, canvasRendering: canvasRendering, position: adjustedPosition, margin: margin, size: adjustedSize, svgSize: size, xScale: xScale, yScale: yScale, enabled: true, overlay: overlay, oColumns: columns, rScale: rScale, projection: projection, interactionOverflow: interactionOverflow, disableCanvasInteraction: disableCanvasInteraction, renderPipeline: renderPipeline, advancedSettings: interactionSettings }),
+                annotationLayer)),
+        afterElements && (React.createElement("div", { className: `${name} frame-after-elements` }, afterElements))));
+}