semiotic 2.0.3 → 3.0.0-beta.1

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

@@ -0,0 +1,395 @@
+"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;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = VisualizationLayer;
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const batchWork_1 = require("./batchWork");
+const TooltipStore_1 = require("./store/TooltipStore");
+const updateVisualizationLayer = (props, handleKeyDown, voronoiHover) => {
+    const { xScale, yScale, dataVersion, projectedCoordinateNames, renderPipeline = {}, renderOrder = [], sketchyRenderingEngine, transition } = props;
+    const canvasDrawing = [];
+    const piecesGroup = {};
+    const renderedElements = [];
+    const renderVizKeys = Object.keys(renderPipeline);
+    const renderKeys = renderOrder.concat(renderVizKeys.filter((d) => renderOrder.indexOf(d) === -1));
+    renderKeys.forEach((k) => {
+        const pipe = renderPipeline[k];
+        if (pipe &&
+            ((pipe.data &&
+                typeof pipe.data === "object" &&
+                !Array.isArray(pipe.data)) ||
+                (pipe.data && pipe.data.length > 0))) {
+            const additionalMarkProps = {
+                sketchyGenerator: sketchyRenderingEngine && sketchyRenderingEngine.generator,
+                "aria-label": (pipe.ariaLabel && pipe.ariaLabel.items) || "dataviz-element",
+                role: "img",
+                tabIndex: -1
+            };
+            const renderedPipe = pipe.behavior({
+                xScale,
+                yScale,
+                canvasDrawing,
+                projectedCoordinateNames,
+                ...pipe
+            });
+            if (renderedPipe && renderedPipe.length > 0) {
+                renderedElements.push(React.createElement("g", { key: k, className: k, "data-testid": k, role: "group", tabIndex: 0, ...(transition ? { "data-semiotic-transition": "" } : undefined), "aria-label": (pipe.ariaLabel &&
+                        `${renderedPipe.length} ${pipe.ariaLabel.items}s in a ${pipe.ariaLabel.chart}`) ||
+                        k, onKeyDown: (e) => handleKeyDown({ e, k, props, piecesGroup }), onBlur: () => {
+                        voronoiHover(undefined);
+                    }, ref: (thisNode) => thisNode && (piecesGroup[k] = thisNode.childNodes) }, renderedPipe));
+            }
+        }
+    });
+    return {
+        renderedElements,
+        dataVersion,
+        canvasDrawing,
+        piecesGroup
+    };
+};
+const handleKeyDown = ({ focusedPieceIndex, changeFocusedPieceIndex, changeFocusedVisualizationGroup }) => ({ e: { keyCode }, vizgroup, props, piecesGroup }) => {
+    // If enter, focus on the first element
+    const { renderPipeline, voronoiHover } = props;
+    const pushed = keyCode;
+    if (pushed !== 37 && pushed !== 39 && pushed !== 13)
+        return;
+    let newPieceIndex = 0;
+    const vizGroupSetting = {};
+    // If a user pressed enter, highlight the first one
+    // Let a user move up and down in stacked bar by getting keys of bars?
+    if (focusedPieceIndex === null || pushed === 13) {
+        vizGroupSetting.focusedVisualizationGroup = vizgroup;
+    }
+    else if (pushed === 37) {
+        newPieceIndex = focusedPieceIndex - 1;
+    }
+    else if (pushed === 39) {
+        newPieceIndex = focusedPieceIndex + 1;
+    }
+    newPieceIndex =
+        newPieceIndex < 0
+            ? piecesGroup[vizgroup].length + newPieceIndex
+            : newPieceIndex % piecesGroup[vizgroup].length;
+    const piece = renderPipeline[vizgroup].accessibleTransform(renderPipeline[vizgroup].data, newPieceIndex, piecesGroup[vizgroup][newPieceIndex]);
+    voronoiHover(piece);
+    changeFocusedPieceIndex(newPieceIndex);
+    changeFocusedVisualizationGroup(vizGroupSetting.focusedVisualizationGroup);
+};
+function buildTransitionStyle(transition) {
+    if (!transition)
+        return null;
+    const duration = typeof transition === "object" && transition.duration != null
+        ? transition.duration
+        : 300;
+    const ease = typeof transition === "object" && transition.ease != null
+        ? transition.ease
+        : "ease";
+    const dur = `${duration}ms`;
+    const css = `
+@keyframes semiotic-enter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+g[data-semiotic-transition] > rect,
+g[data-semiotic-transition] > circle,
+g[data-semiotic-transition] > path,
+g[data-semiotic-transition] > line,
+g[data-semiotic-transition] > g > rect,
+g[data-semiotic-transition] > g > circle,
+g[data-semiotic-transition] > g > path,
+g[data-semiotic-transition] > g > line {
+  transition: fill ${dur} ${ease},
+              stroke ${dur} ${ease},
+              opacity ${dur} ${ease},
+              transform ${dur} ${ease};
+  animation: semiotic-enter ${dur} ${ease};
+}
+`;
+    return React.createElement("style", { key: "semiotic-transition-style" }, css);
+}
+function VisualizationLayer(props) {
+    const { matte, matteClip, axes, frameKey = "", margin = { left: 0, right: 0, bottom: 0, top: 0 }, title, ariaTitle, axesTickLines, frameRenderOrder, additionalVizElements, transition } = props;
+    let changeTooltip = (0, TooltipStore_1.useTooltip)((state) => state.changeTooltip);
+    const voronoiHover = (0, react_1.useCallback)((d) => {
+        changeTooltip(d);
+    }, [changeTooltip]);
+    const [focusedPieceIndex, changeFocusedPieceIndex] = (0, react_1.useState)(null);
+    const [focusedVisualizationGroup, changeFocusedVisualizationGroup] = (0, react_1.useState)(null);
+    const decoratedKeydown = (0, react_1.useMemo)(() => handleKeyDown({
+        focusedPieceIndex,
+        changeFocusedPieceIndex,
+        changeFocusedVisualizationGroup
+    }), [focusedPieceIndex, changeFocusedPieceIndex, changeFocusedVisualizationGroup]);
+    const vizState = updateVisualizationLayer(props, decoratedKeydown, voronoiHover);
+    const { renderedElements } = vizState;
+    (0, react_1.useEffect)(() => {
+        const canvasContext = props.canvasContext?.current;
+        let updateCtrl = new AbortController();
+        if (props.disableContext || !canvasContext)
+            return;
+        const { sketchyRenderingEngine, width, height, margin, disableProgressiveRendering = false } = props;
+        const size = [
+            width + margin.left + margin.right,
+            height + margin.top + margin.bottom
+        ];
+        let rc;
+        canvasContext.width = size[0];
+        canvasContext.height = size[1];
+        canvasContext.style.width = size[0];
+        canvasContext.style.height = size[1];
+        const context = canvasContext.getContext("2d");
+        context.scale(devicePixelRatio, devicePixelRatio);
+        context.setTransform(1, 0, 0, 1, margin.left, margin.top);
+        context.clearRect(-margin.left, -margin.top, size[0], size[1]);
+        const renderCanvasPiece = renderCanvas(canvasContext, context, margin, props, sketchyRenderingEngine, rc);
+        context.clearRect(-margin.left, -margin.top, size[0], size[1]);
+        if (disableProgressiveRendering) {
+            for (const piece of vizState.canvasDrawing) {
+                renderCanvasPiece(piece);
+            }
+        }
+        else {
+            updateCtrl = new AbortController();
+            batchCollectionWork(renderCanvasPiece, vizState.canvasDrawing, {
+                signal: updateCtrl.signal
+            });
+        }
+        context.setTransform(1, 0, 0, 1, 0, 0);
+        context.globalAlpha = 1;
+        if (props.canvasPostProcess) {
+            props.canvasPostProcess(props.canvasContext?.current, context, size);
+        }
+        if (focusedVisualizationGroup !== null &&
+            vizState.piecesGroup[focusedVisualizationGroup] &&
+            focusedPieceIndex !== null) {
+            const focusElParent = vizState.piecesGroup[focusedVisualizationGroup][focusedPieceIndex];
+            const focusEl = (focusElParent &&
+                [...focusElParent.childNodes].find((child) => child.getAttribute("aria-label"))) ||
+                focusElParent;
+            focusEl && focusEl.focus && focusEl.focus();
+        }
+        return function cleanup() {
+            updateCtrl.abort();
+        };
+    }, [
+        matte,
+        matteClip,
+        axes,
+        frameKey,
+        margin,
+        ariaTitle,
+        axesTickLines,
+        frameRenderOrder,
+        additionalVizElements
+    ]);
+    const transitionStyle = buildTransitionStyle(transition);
+    const renderHash = {
+        ["axes-tick-lines"]: axesTickLines && (React.createElement("g", { key: "visualization-tick-lines", className: "axis axis-tick-lines", "aria-hidden": true }, axesTickLines)),
+        ["axes-labels"]: axes && (React.createElement("g", { key: "visualization-axis-labels", className: "axis axis-labels" }, axes)),
+        matte: matte,
+        ["viz-layer"]: renderedElements && renderedElements.length > 0
+            ? (React.createElement(React.Fragment, { key: "viz-layer" },
+                transitionStyle,
+                renderedElements))
+            : null,
+        ...additionalVizElements
+    };
+    let ariaLabel = "";
+    const finalTitle = (title && ariaTitle) || title
+        ? typeof title !== "string" &&
+            title.props &&
+            typeof title.props.children === "string"
+            ? `titled ${title.props.children}`
+            : "with a complex title"
+        : "with no title";
+    ariaLabel = `Visualization ${finalTitle}. Use arrow keys to navigate elements.`;
+    const orderedElements = [];
+    frameRenderOrder.forEach((r) => {
+        if (renderHash[r]) {
+            orderedElements.push(renderHash[r]);
+        }
+    });
+    const renderedDataVisualization = (orderedElements.length > 0 && (React.createElement("g", { className: "data-visualization", "data-testid": "data-visualization", key: "visualization-clip-path", "aria-label": ariaLabel, role: "group", clipPath: matteClip && matte ? `url(#matte-clip${frameKey})` : undefined, transform: `translate(${margin.left},${margin.top})` }, orderedElements))) ||
+        null;
+    return renderedDataVisualization;
+}
+function renderCanvas(canvasContext, context, margin, np, sketchyRenderingEngine, rc) {
+    const defaultStyle = {
+        fill: "black",
+        stroke: "black",
+        opacity: 1,
+        fillOpacity: 1,
+        strokeOpacity: 1,
+        strokeWidth: 1
+    };
+    const { position = [0, 0] } = np;
+    return (piece) => {
+        const combinedDatum = { ...piece.d, ...piece.d.data };
+        const style = piece.styleFn
+            ? piece.styleFn(combinedDatum, piece.i) || defaultStyle
+            : defaultStyle;
+        const fill = style.fill ? style.fill : "black";
+        const stroke = style.stroke ? style.stroke : "black";
+        context.setTransform(1, 0, 0, 1, margin.left, margin.top);
+        context.translate(position[0], position[1]);
+        context.translate(piece.tx, piece.ty);
+        context.fillStyle = fill;
+        context.strokeStyle = stroke;
+        context.lineWidth = style.strokeWidth ? style.strokeWidth : 0;
+        let rcSettings = {};
+        const renderObject = piece.renderFn && piece.renderFn(combinedDatum, piece.i);
+        let actualRenderMode = (renderObject && renderObject.renderMode) || renderObject;
+        if (actualRenderMode) {
+            if (!sketchyRenderingEngine) {
+                console.error("You cannot render sketchy graphics without specifying a Rough.js-like library as the sketchyRenderingEngine prop of your frame");
+                actualRenderMode = undefined;
+            }
+            else {
+                const RoughCanvas = sketchyRenderingEngine.canvas;
+                if (!RoughCanvas) {
+                    console.error("The sketchyRenderingEngine you specify does not expose a prop `RoughCanvas` and so cannot render sketchy HTML5 Canvas graphics");
+                }
+                else {
+                    rc = rc || RoughCanvas(canvasContext);
+                    const rcExtension = (typeof renderObject === "object" && renderObject) || {};
+                    rcSettings = {
+                        fill,
+                        stroke,
+                        strokeWidth: context.lineWidth,
+                        ...rcExtension
+                    };
+                }
+            }
+        }
+        if (piece.markProps.markType === "circle" ||
+            (piece.markProps.markType === "rect" && piece.markProps.rx > 0)) {
+            let vizX = piece.markProps.cx ?? 0, vizY = piece.markProps.cy ?? 0, r = style.r ?? piece.markProps.r;
+            if (piece.markProps.width) {
+                const halfWidth = piece.markProps.width / 2;
+                vizX = piece.markProps.x + halfWidth;
+                vizY = piece.markProps.y + halfWidth;
+                r = halfWidth;
+            }
+            if (actualRenderMode === "sketchy") {
+                if (context.globalAlpha !== 0)
+                    rc.circle(vizX, vizY, r, rcSettings);
+            }
+            else {
+                context.beginPath();
+                context.arc(vizX, vizY, r, 0, 2 * Math.PI);
+                context.globalAlpha = style.fillOpacity || style.opacity || 1;
+                if (style.fill && style.fill !== "none" && context.globalAlpha !== 0) {
+                    context.fill();
+                }
+                context.globalAlpha = style.strokeOpacity || style.opacity || 1;
+                if (style.stroke &&
+                    style.stroke !== "none" &&
+                    context.globalAlpha !== 0)
+                    context.stroke();
+            }
+        }
+        else if (piece.markProps.markType === "rect") {
+            if (actualRenderMode === "sketchy") {
+                context.globalAlpha = style.opacity || 1;
+                if (context.globalAlpha !== 0)
+                    rc.rectangle(piece.markProps.x, piece.markProps.y, piece.markProps.width, piece.markProps.height, rcSettings);
+            }
+            else {
+                context.globalAlpha = style.fillOpacity || style.opacity || 1;
+                if (style.fill && style.fill !== "none" && context.globalAlpha !== 0)
+                    context.fillRect(piece.markProps.x, piece.markProps.y, piece.markProps.width, piece.markProps.height);
+                context.globalAlpha = style.strokeOpacity || style.opacity || 1;
+                if (style.stroke &&
+                    style.stroke !== "none" &&
+                    context.globalAlpha !== 0)
+                    context.strokeRect(piece.markProps.x, piece.markProps.y, piece.markProps.width, piece.markProps.height);
+            }
+        }
+        else if (piece.markProps.markType === "path") {
+            if (actualRenderMode === "sketchy") {
+                context.globalAlpha = style.opacity || 1;
+                rc.path(piece.markProps.d, rcSettings);
+            }
+            else {
+                const p = new Path2D(piece.markProps.d);
+                context.globalAlpha = style.strokeOpacity || style.opacity || 1;
+                if (style.stroke &&
+                    style.stroke !== "none" &&
+                    context.globalAlpha !== 0)
+                    context.stroke(p);
+                context.globalAlpha = style.fillOpacity || style.opacity || 1;
+                if (style.fill && style.fill !== "none" && context.globalAlpha !== 0)
+                    context.fill(p);
+            }
+        }
+        else if (piece.markProps.markType === "line") {
+            if (actualRenderMode === "sketchy") {
+                context.globalAlpha = style.opacity || 1;
+                rc.line(piece.markProps.x1, piece.markProps.y1, piece.markProps.x2, piece.markProps.y2, rcSettings);
+            }
+            else {
+                context.globalAlpha = style.strokeOpacity || style.opacity || 1;
+                context.beginPath();
+                context.moveTo(piece.markProps.x1, piece.markProps.y1);
+                context.lineTo(piece.markProps.x2, piece.markProps.y2);
+                if (style.stroke &&
+                    style.stroke !== "none" &&
+                    context.globalAlpha !== 0) {
+                    context.stroke();
+                }
+            }
+        }
+        else {
+            console.error("CURRENTLY UNSUPPORTED MARKTYPE FOR CANVAS RENDERING");
+        }
+    };
+}
+// using batchWork utility, this function iterates over a collection of data
+// in batches of 1000 and invokes `process` function for each data point
+function batchCollectionWork(process, data, options) {
+    let pointer = 0;
+    let batchSize = 1000;
+    return (0, batchWork_1.batchWork)(() => {
+        let limit = Math.min(pointer + batchSize, data.length);
+        for (let i = pointer; i < limit; i++) {
+            process(data[i]);
+        }
+        pointer = pointer + batchSize;
+        return data.length > pointer;
+    }, options);
+}