@hpcc-js/react 2.51.1 → 2.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hpcc-js/react",
-    "version": "2.51.1",
+    "version": "2.52.0",
     "description": "hpcc-js - Viz React",
     "main": "dist/index.js",
     "module": "dist/index.es6",
@@ -56,5 +56,5 @@
         "url": "https://github.com/hpcc-systems/Visualization/issues"
     },
     "homepage": "https://github.com/hpcc-systems/Visualization",
-    "gitHead": "e2724f0154c334e8d4cb5a29533b70131ab58938"
+    "gitHead": "3a4f1ba7a59e2e7f5283830e0a884187a6c42fe7"
 }

package/src/__package__.ts

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

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,6 +60,18 @@ 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;
@@ -82,7 +95,7 @@ export const Vertex3: React.FunctionComponent<IVertex3> = ({
         fullAnnotationWidth += annoShapeWidth + annotationGutter;
         const annoOffsetX = fullAnnotationWidth - (annoShapeWidth / 2);
         annotationArr.push(
-            <g key={idx} 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"
@@ -98,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}
@@ -124,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
@@ -139,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 ({
@@ -172,7 +185,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
     annotations = [],
     cornerRadius,
     icon = {},
-    subText = {}
+    subText = {},
+    expansionIcon
 }) {
     icon = {
         height: 91,
@@ -206,7 +220,8 @@ export const CentroidVertex3: React.FunctionComponent<IVertex3> = function ({
         annotations,
         cornerRadius,
         icon,
-        subText
+        subText,
+        expansionIcon
     };
     return <Vertex3
         {...props}

package/src/vertex4.tsx

@@ -58,8 +58,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     iconBackgroundColor = "#fff",
 
     iconFontColor = "#000",
-    iconFontSize=20,
-    iconFontFamily="FontAwesome",
+    iconFontSize = 20,
+    iconFontFamily = "FontAwesome",
 
     shapeOffsetX = 0,
     shapeOffsetY = 0,
@@ -67,8 +67,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     iconOffsetY = 0,
 
     iconPadding = 4,
-    iconText="?",
-    shapeRendering="auto"
+    iconText = "?",
+    shapeRendering = "auto"
 }) => {
     icon = {
         height: 50,
@@ -97,8 +97,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     }
     let fullAnnotationWidth = labelShapeWidth + annotationGutter;
     const textOffsetX = fullAnnotationWidth - (labelShapeWidth / 2);
-    
-    const textShapeHeight = textHeight + (annotationGutter*2) + (textboxStrokeWidth * 2);
+
+    const textShapeHeight = textHeight + (annotationGutter * 2) + (textboxStrokeWidth * 2);
     const annoWidthArr = annotations.map((anno, i) => {
         return Utility.textSize(anno.imageChar, anno.imageFontFamily, anno.height, false).width;
     });
@@ -110,7 +110,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         _labelAnnoOffsetX += annoWidthArr[i] + annotationGutter;
         const annoOffsetX = _labelAnnoOffsetX - (annoWidthArr[i] / 2);
         annotationArr.push(
-            <g key={i} class="vertex3-anno" data-anno={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
+            <g key={i} class="vertex3-anno" data-click={"annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${annoOffsetX} ${annoOffsetY})`}>
                 <Icon
                     {...anno}
                     shape="rectangle"
@@ -124,7 +124,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
             </g>
         );
     });
-    
+
     if (annotations.length > 0) {
         fullAnnotationWidth += annotationGutter * (annotations.length - 1);
     }
@@ -133,7 +133,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         const x = anno.shapeOffsetX;
         const y = anno.shapeOffsetY;
         iconAnnotationArr.push(
-            <g key={i} class="vertex3-iconAnno" data-anno={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
+            <g key={i} class="vertex3-iconAnno" data-click={"icon-annotation"} data-click-data={JSON.stringify(anno)} transform={`translate(${x} ${y})`}>
                 <Icon
                     {...anno}
                     shape={anno.shape ?? "square"}
@@ -146,8 +146,8 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
             </g>
         );
     });
-    
-    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}
@@ -164,7 +164,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
     const subTextOffsetX = 0;
     const subTextOffsetY = textShapeHeight + (annotationGutter * 2);
 
-    const subtextElement = subText.text === "" ? null : <g
+    const subtextElement = subText.text === "" ? null : <g data-click={"subtext"}
         transform={`translate(${subTextOffsetX} ${subTextOffsetY})`}
     >
         <TextBox
@@ -180,7 +180,7 @@ export const Vertex4: React.FunctionComponent<IVertex4> = ({
         />
     </g>;
     return <g>
-        <g
+        <g data-click={"icon"}
             transform={`translate(${shapeOffsetX} ${shapeOffsetY})`}
         >
             <Icon
@@ -237,8 +237,8 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
     iconBackgroundColor = "#fff",
 
     iconFontColor = "#000",
-    iconFontSize=20,
-    iconFontFamily="FontAwesome",
+    iconFontSize = 20,
+    iconFontFamily = "FontAwesome",
 
     shapeOffsetX = 0,
     shapeOffsetY = 0,
@@ -246,8 +246,8 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
     iconOffsetY = 0,
 
     iconPadding = 4,
-    iconText="?",
-    shapeRendering="auto"
+    iconText = "?",
+    shapeRendering = "auto"
 }) {
     icon = {
         height: 91,
@@ -279,7 +279,7 @@ export const CentroidVertex4: React.FunctionComponent<IVertex4> = function ({
         textFontFamily,
         annotationGutter,
         annotations,
-        iconAnnotations, 
+        iconAnnotations,
         cornerRadius,
         icon,
         subText,

package/types/__package__.d.ts

@@ -1,4 +1,4 @@
 export declare const PKG_NAME = "@hpcc-js/react";
-export declare const PKG_VERSION = "2.51.1";
-export declare const BUILD_VERSION = "2.104.2";
+export declare const PKG_VERSION = "2.52.0";
+export declare const BUILD_VERSION = "2.104.3";
 //# sourceMappingURL=__package__.d.ts.map

package/types/vertex3.d.ts

@@ -24,6 +24,7 @@ export interface IVertex3 extends Vertex {
     }) => void;
     showLabel?: boolean;
     noLabelRadius?: number;
+    expansionIcon?: Icon;
 }
 export declare const Vertex3: React.FunctionComponent<IVertex3>;
 export declare const CentroidVertex3: React.FunctionComponent<IVertex3>;

package/types/vertex3.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vertex3.d.ts","sourceRoot":"","sources":["../src/vertex3.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,QAAS,SAAQ,MAAM;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAmIrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAuD7D,CAAC"}
+{"version":3,"file":"vertex3.d.ts","sourceRoot":"","sources":["../src/vertex3.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,WAAW,QAAS,SAAQ,MAAM;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CA+IrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,QAAQ,CAyD7D,CAAC"}

package/types-3.4/__package__.d.ts

@@ -1,4 +1,4 @@
 export declare const PKG_NAME = "@hpcc-js/react";
-export declare const PKG_VERSION = "2.51.1";
-export declare const BUILD_VERSION = "2.104.2";
+export declare const PKG_VERSION = "2.52.0";
+export declare const BUILD_VERSION = "2.104.3";
 //# sourceMappingURL=__package__.d.ts.map

package/types-3.4/vertex3.d.ts

@@ -24,6 +24,7 @@ export interface IVertex3 extends Vertex {
     }) => void;
     showLabel?: boolean;
     noLabelRadius?: number;
+    expansionIcon?: Icon;
 }
 export declare const Vertex3: React.FunctionComponent<IVertex3>;
 export declare const CentroidVertex3: React.FunctionComponent<IVertex3>;