@hpcc-js/react 2.50.0 → 2.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/react",
-    "version": "2.50.0",
+    "version": "2.52.0",
     "description": "hpcc-js - Viz React",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -35,15 +35,15 @@
         "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
         "lint": "eslint ./src",
         "docs": "typedoc --options tdoptions.json .",
-        "update": "npx npm-check-updates -u -t minor"
+        "update": "npx --yes npm-check-updates -u -t minor"
     },
     "dependencies": {
-        "@hpcc-js/common": "^2.71.0",
-        "@hpcc-js/preact-shim": "^2.15.0"
+        "@hpcc-js/common": "^2.71.1",
+        "@hpcc-js/preact-shim": "^2.16.1"
     },
     "devDependencies": {
-        "@hpcc-js/bundle": "^2.11.1",
-        "tslib": "2.3.1"
+        "@hpcc-js/bundle": "^2.11.2",
+        "tslib": "2.4.0"
     },
     "repository": {
         "type": "git",
@@ -56,5 +56,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "62cc2d8321326a26647c5ab7e408ece836bfe193"
+    "gitHead": "3a4f1ba7a59e2e7f5283830e0a884187a6c42fe7"
 }

package/src/ImageChar.tsx

@@ -20,7 +20,13 @@ export const ImageChar: React.FunctionComponent<ImageChar> = ({
     stroke,
     fontFamily = "FontAwesome",
     char = ""
-}) => <text
+}) => {
+
+    const renderChar = React.useMemo(() => {
+        return fontFamily === "FontAwesome" ? Utility.faChar(char) : char;
+    }, [char, fontFamily]);
+
+    return <text
         x={x}
         y={y}
         fill={fill}
@@ -29,4 +35,5 @@ export const ImageChar: React.FunctionComponent<ImageChar> = ({
         font-size={`${height}px`}
         dominant-baseline="middle"
         style="text-anchor: middle;alignment-baseline:middle;"
-    >{fontFamily === "FontAwesome" ? Utility.faChar(char) : char}</text>;
+    >{renderChar}</text>;
+};

package/src/__package__.ts

@@ -1,3 +1,3 @@
 export const PKG_NAME = "@hpcc-js/react";
-export const PKG_VERSION = "2.50.0";
-export const BUILD_VERSION = "2.104.0";
+export const PKG_VERSION = "2.52.0";
+export const BUILD_VERSION = "2.104.3";

package/src/edge.tsx

@@ -37,5 +37,8 @@ export const Edge: React.FunctionComponent<Edge> = ({
     stroke = "black",
     strokeDasharray
 }) => {
-    return <path stroke={stroke} stroke-dasharray={strokeDasharray} d={line(calcArc(points, curveDepth))}></path>;
+    const d = React.useMemo(() => {
+        return line(calcArc(points, curveDepth));
+    }, [curveDepth, points]);
+    return <path stroke={stroke} stroke-dasharray={strokeDasharray} d={d}></path>;
 };

package/src/icon.tsx

@@ -4,7 +4,8 @@ import { ImageChar } from "./ImageChar";
 import { Shape } from "./shape";
 
 export interface Icon {
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | "rectangle";
+    width?: number;
     height?: number;
     padding?: number;
     fill?: string;
@@ -13,6 +14,7 @@ export interface Icon {
     imageFontFamily?: string;
     imageChar?: string;
     imageCharFill?: string;
+    xOffset?: number;
     yOffset?: number;
     cornerRadius?: number;
     shapeRendering?: "auto" | "optimizeSpeed" | "crispEdges" | "geometricPrecision";
@@ -20,6 +22,7 @@ export interface Icon {
 
 export const Icon: React.FunctionComponent<Icon> = ({
     shape = "circle",
+    width,
     height = 32,
     fill,
     stroke,
@@ -28,6 +31,7 @@ export const Icon: React.FunctionComponent<Icon> = ({
     imageChar = "",
     imageCharFill = Palette.textColor(fill),
     padding = height / 5,
+    xOffset = 0,
     yOffset = 0,
     cornerRadius,
     shapeRendering
@@ -35,6 +39,7 @@ export const Icon: React.FunctionComponent<Icon> = ({
     return <>
         <Shape
             shape={shape}
+            width={width}
             height={height}
             fill={fill}
             stroke={stroke}
@@ -43,6 +48,7 @@ export const Icon: React.FunctionComponent<Icon> = ({
             cornerRadius={cornerRadius}
         />
         <ImageChar
+            x={xOffset}
             y={yOffset}
             height={height - padding}
             fontFamily={imageFontFamily}

package/src/index.ts

@@ -9,6 +9,7 @@ export * from "./text";
 export * from "./vertex";
 export * from "./vertex2";
 export * from "./vertex3";
+export * from "./vertex4";
 export * from "./subgraph";
 
 import * as React from "@hpcc-js/preact-shim";

package/src/shape.tsx

@@ -85,8 +85,9 @@ export const Rectangle: React.FunctionComponent<Rectangle> = ({
 };
 
 interface Shape {
-    shape?: "circle" | "square";
+    shape?: "circle" | "square" | "rectangle";
     height?: number;
+    width?: number;
     fill?: string;
     stroke?: string;
     strokeWidth?: number;
@@ -97,6 +98,7 @@ interface Shape {
 export const Shape: React.FunctionComponent<Shape> = ({
     shape = "circle",
     height = 128,
+    width,
     fill,
     stroke,
     strokeWidth = 1,
@@ -113,6 +115,16 @@ export const Shape: React.FunctionComponent<Shape> = ({
                 shapeRendering={shapeRendering}
                 cornerRadius={cornerRadius}
             />;
+        case "rectangle":
+            return <Rectangle
+                width={width ?? height}
+                height={height}
+                fill={fill}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                shapeRendering={shapeRendering}
+                cornerRadius={cornerRadius}
+            />;
         case "circle":
         default:
             return <Circle

package/src/text.tsx

@@ -44,28 +44,37 @@ export const Text: React.FunctionComponent<Text> = ({
     fill = "black",
     onSizeUpdate
 }) => {
-    const [totalWidth, onTotalWidthUpdate] = React.useState(0);
-    const [totalHeight, onTotalHeightUpdate] = React.useState(0);
+    const [totalWidth, setTotalWidthUpdate] = React.useState(0);
+    const [totalHeight, setTotalHeightUpdate] = React.useState(0);
+
     React.useEffect(() => {
         onSizeUpdate && onSizeUpdate({ width: totalWidth, height: totalHeight });
     }, [totalWidth, totalHeight, onSizeUpdate]);
 
-    const parts = text.split("\n");
-    const ts = Utility.textSize(parts, fontFamily, height);
-    onTotalWidthUpdate(ts.width);
-    onTotalHeightUpdate(parts.length * (height + 2) - 2);
+    const parts = React.useMemo(() => {
+        return text.split("\n");
+    }, [text]);
+
+    const ts = React.useMemo(() => {
+        return Utility.textSize(parts, fontFamily, height);
+    }, [fontFamily, height, parts]);
+
+    setTotalWidthUpdate(ts.width);
+    setTotalHeightUpdate(parts.length * (height + 2) - 2);
 
     const yOffset = -(totalHeight / 2) + (height / 2);
-    const TextLines = parts.map((p, i) => {
-        return <g transform={`translate(0 ${yOffset + i * (height + 2)})`}>
-            <TextLine
-                text={p}
-                height={height}
-                fontFamily={fontFamily}
-                fill={fill}
-            />
-        </g>;
-    });
+    const TextLines = React.useMemo(() => {
+        return parts.map((p, i) => {
+            return <g key={i} transform={`translate(0 ${yOffset + i * (height + 2)})`}>
+                <TextLine
+                    text={p}
+                    height={height}
+                    fontFamily={fontFamily}
+                    fill={fill}
+                />
+            </g>;
+        });
+    }, [fill, fontFamily, height, parts, yOffset]);
 
     return <>{TextLines}</>;
 };
@@ -96,15 +105,22 @@ export const TextBox: React.FunctionComponent<TextBox> = ({
     cornerRadius = 0,
     onSizeUpdate
 }) => {
-    const [textWidth, onTextWidthUpdate] = React.useState(0);
-    const [textHeight, onTextHeightUpdate] = React.useState(0);
+    const [textWidth, setTextWidthUpdate] = React.useState(0);
+    const [textHeight, setTextHeightUpdate] = React.useState(0);
+
     React.useEffect(() => {
         onSizeUpdate && onSizeUpdate({ width: textWidth, height: textHeight });
     }, [textWidth, textHeight, onSizeUpdate]);
 
+    const onTextSizeUpdate = React.useCallback(size => {
+        setTextWidthUpdate(size.width);
+        setTextHeightUpdate(size.height);
+    }, []);
+
     const w = textWidth + padding * 2 + strokeWidth;
     const h = textHeight + padding * 2 + strokeWidth;
     const textOffsetY = Math.floor(height / 10);
+
     return <>
         <Rectangle
             width={w}
@@ -123,13 +139,7 @@ export const TextBox: React.FunctionComponent<TextBox> = ({
                 onSizeUpdate={onTextSizeUpdate}
             />
         </g>
-    </>
-        ;
-
-    function onTextSizeUpdate(size) {
-        onTextWidthUpdate(size.width);
-        onTextHeightUpdate(size.height);
-    }
+    </>;
 };
 
 export interface LabelledRect extends TextBox {
@@ -176,8 +186,7 @@ export const LabelledRect: React.FunctionComponent<LabelledRect> = ({
                 baseline="hanging"
             />
         </g>
-    </>
-        ;
+    </>;
 };
 
 export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
@@ -225,6 +234,5 @@ export const IconLabelledRect: React.FunctionComponent<IconLabelledRect> = ({
                 baseline="hanging"
             />
         </g>
-    </>
-        ;
+    </>;
 };

package/src/vertex.tsx

@@ -58,8 +58,9 @@ export const Vertex: React.FunctionComponent<Vertex> = ({
     onSizeUpdate,
     showLabel = true
 }) => {
-    const [textBoxWidth, onTextBoxWidthUpdate] = React.useState(0);
-    const [textBoxHeight, onTextBoxHeightUpdate] = React.useState(0);
+    const [textBoxWidth, setTextBoxWidthUpdate] = React.useState(0);
+    const [textBoxHeight, setTextBoxHeightUpdate] = React.useState(0);
+
     React.useEffect(() => {
         onSizeUpdate && onSizeUpdate({ width: 0, height: 0 });
     }, [textBoxWidth, textBoxHeight, onSizeUpdate]);
@@ -79,6 +80,12 @@ export const Vertex: React.FunctionComponent<Vertex> = ({
         offsetY += (textHeight + 8) / 2;
         annotationOffsetY -= textBoxHeight + textPadding;
     }
+
+    const onTextBoxSizeUpdate = React.useCallback(size => {
+        setTextBoxWidthUpdate(size.width);
+        setTextBoxHeightUpdate(size.height);
+    }, []);
+
     const label = showLabel ? <g transform={`translate(0 ${textboxOffsetY})`}>
         <TextBox
             text={text}
@@ -101,9 +108,4 @@ export const Vertex: React.FunctionComponent<Vertex> = ({
             <Icon {...icon} />
             {label}
         </g>;
-
-    function onTextBoxSizeUpdate(size) {
-        onTextBoxWidthUpdate(size.width);
-        onTextBoxHeightUpdate(size.height);
-    }
 };

package/src/vertex2.tsx

@@ -26,7 +26,9 @@ export const Vertex2: React.FunctionComponent<Vertex> = ({
         ...icon
     };
     const textBoxHeight = textHeight + textPadding * 2;
-    const { width } = Utility.textSize(text, textFontFamily, textHeight, false);
+    const { width } = React.useMemo(() => {
+        return Utility.textSize(text, textFontFamily, textHeight, false);
+    }, [text, textFontFamily, textHeight]);
 
     const stepSize = annotationsHeight;
     const textboxStrokeWidth = 1;

package/src/vertex3.tsx

@@ -23,6 +23,7 @@ export interface IVertex3 extends Vertex {
     onSizeUpdate?: (size: { width: number, height: number }) => void;
     showLabel?: boolean;
     noLabelRadius?: number;
+    expansionIcon?: Icon;
 }
 
 export const Vertex3: React.FunctionComponent<IVertex3> = ({
@@ -41,8 +42,8 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
     icon = {},
     subText = {},
     showLabel = true,
-    noLabelRadius = 5
-
+    noLabelRadius = 5,
+    expansionIcon
 }) => {
     icon = {
         height: 50,
@@ -59,11 +60,26 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
         textFill: "#555555",
         ...subText
     };
+    expansionIcon = expansionIcon ? {
+        height: 16,
+        shape: "circle",
+        padding: 6,
+        imageChar: "?",
+        imageFontFamily: "FontAwesome",
+        imageCharFill: "black",
+        fill: "whitesmoke",
+        stroke: "whitesmoke",
+        strokeWidth: 0,
+        ...expansionIcon
+    } : undefined;
     let fullAnnotationWidth = 0;
 
     const annoOffsetY = 0;
 
-    const labelWidth = Utility.textSize(text, textFontFamily, textHeight, false).width;
+    const labelWidth = React.useMemo(() => {
+        return Utility.textSize(text, textFontFamily, textHeight, false).width;
+    }, [text, textFontFamily, textHeight]);
+
     let labelShapeWidth = 0;
     if (text !== "") {
         labelShapeWidth = labelWidth + (textPadding * 2) + (textboxStrokeWidth * 2);
@@ -73,13 +89,13 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
 
     const textShapeHeight = textHeight + (textPadding * 2) + (textboxStrokeWidth * 2);
     const annotationArr = [];
-    annotations.forEach(anno => {
+    annotations.forEach((anno, idx) => {
         const annoText = anno.imageChar;
         const annoShapeWidth = textShapeHeight;
         fullAnnotationWidth += annoShapeWidth + annotationGutter;
         const annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
         annotationArr.push(
-            <g class="vertex3-anno" transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
+            <g key={idx} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
                 <Icon
                     {...anno}
                     shape="square"
@@ -95,7 +111,7 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
     if (annotations.length > 0) {
         fullAnnotationWidth += annotationGutter * (annotations.length - 1);
     }
-    const textElement = <g transform={`translate(${textOffsetX} ${annoOffsetY})`}>
+    const textElement = <g data-click={"text"} transform={`translate(${textOffsetX} ${annoOffsetY})`}>
         {!showLabel || text === "" ? <circle r={noLabelRadius} stroke={textboxStroke} fill={textFill} /> : <TextBox
             text={text}
             height={textHeight}
@@ -121,7 +137,8 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
     } else if (subText.text !== "") {
         subTextOffsetY = (iconHeight / 2) + iconStrokeWidth + (annotationGutter * 2);
     }
-    const subtextElement = subText.text === "" ? null : <g
+
+    const subtextElement = subText.text === "" ? null : <g data-click={"subtext"}
         transform={`translate(${subTextOffsetX} ${subTextOffsetY})`}
     >
         <TextBox
@@ -136,23 +153,22 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
             cornerRadius={cornerRadius}
         />
     </g>;
+
     return <g>
-        <g
-            transform={`translate(${iconOffsetX} ${iconOffsetY})`}
-        >
-            <Icon
-                {...icon}
-            />
+        <g data-click={"icon"} transform={`translate(${iconOffsetX} ${iconOffsetY})`}>
+            <Icon {...icon} />
+            {expansionIcon &&
+                <g data-click={"expanded-icon"} data-click-data={JSON.stringify(expansionIcon)} transform={`translate(${(icon.height + iconStrokeWidth) / 2 - expansionIcon.height / 2} ${-(icon.height + iconStrokeWidth) / 2 + expansionIcon.height / 2})`}>
+                    <Icon {...expansionIcon} />
+                </g>
+            }
         </g>
-        <g
-            transform={`translate(${-fullAnnotationWidth / 2} ${annoOffsetY})`}
-        >
+        <g transform={`translate(${-fullAnnotationWidth / 2} ${annoOffsetY})`} >
             {textElement}
             {annotationArr}
         </g>
         {subtextElement}
-    </g>
-        ;
+    </g >;
 };
 
 export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
@@ -169,7 +185,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
     annotations = [],
     cornerRadius,
     icon = {},
-    subText = {}
+    subText = {},
+    expansionIcon
 }) {
     icon = {
         height: 91,
@@ -203,7 +220,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
         annotations,
         cornerRadius,
         icon,
-        subText
+        subText,
+        expansionIcon
     };
     return <Vertex3
         {...props}