@performant-software/visualize 1.0.7-beta.1 → 1.0.7-beta.3

package/build/index.js

@@ -1,2 +1,2 @@
-!function(){"use strict";var e={n:function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,{a:n}),n},d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{TreeGraph:function(){return L},withZoom:function(){return v}});var n=require("@visx/group"),r=require("@visx/hierarchy"),o=require("@visx/responsive"),a=require("@visx/shape"),i=require("d3-shape"),l=require("react"),s=e.n(l),c=require("underscore"),u=e.n(c),m=require("@visx/event"),p=require("@visx/zoom"),d=require("i18next"),f=e.n(d);const g={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},h=f().createInstance();h.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:g});var b=h;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},y.apply(this,arguments)}const k={scaleX:1,scaleY:1,translateX:0,translateY:0,skewX:0,skewY:0};var v=e=>t=>{const{parentWidth:n,parentHeight:r}=t,{scaleXMin:o=.5,scaleXMax:a=4}=t,{scaleYMin:i=.5,scaleYMax:c=4}=t,{initialTransform:u=k}=t,d=(0,l.useCallback)((e=>s().createElement("rect",{width:n,height:r,rx:14,fill:"transparent",onTouchStart:e.dragStart,onTouchMove:e.dragMove,onTouchEnd:e.dragEnd,onMouseDown:e.dragStart,onMouseMove:e.dragMove,onMouseUp:e.dragEnd,onMouseLeave:()=>{e.isDragging&&e.dragEnd()},onDoubleClick:t=>{const n=(0,m.localPoint)(t)||{x:0,y:0};e.scale({scaleX:1.1,scaleY:1.1,point:n})}})),[n,r]);return s().createElement(p.Zoom,{width:n,height:r,scaleXMin:o,scaleXMax:a,scaleYMin:i,scaleYMax:c,initialTransformMatrix:u},(n=>s().createElement("div",{className:"zoom"},s().createElement(e,y({},t,{renderZoomContainer:d.bind(void 0,n),zoom:n})),s().createElement("div",{className:"controls"},s().createElement("button",{type:"button",className:"btn btn-zoom",onClick:()=>n.scale({scaleX:1.2,scaleY:1.2})},b.t("Zoom.buttons.zoomIn")),s().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:()=>n.scale({scaleX:.8,scaleY:.8})},b.t("Zoom.buttons.zoomOut")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},b.t("Zoom.buttons.center")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},b.t("Zoom.buttons.reset")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},b.t("Zoom.buttons.clear"))))))};const E="polar",x="curve",M="line",T="step",z="vertical",C=e=>{const t=(0,l.useRef)(),o=e.parentWidth-e.margin.left-e.margin.right,c=e.parentHeight-e.margin.top-e.margin.bottom,m=(0,l.useMemo)((()=>{let t;return t=e.layout===E?e.linkType===T?a.LinkRadialStep:e.linkType===x?a.LinkRadialCurve:e.linkType===M?a.LinkRadialLine:a.LinkRadial:e.orientation===z?e.linkType===T?a.LinkVerticalStep:e.linkType===x?a.LinkVerticalCurve:e.linkType===M?a.LinkVerticalLine:a.LinkVertical:e.linkType===T?a.LinkHorizontalStep:e.linkType===x?a.LinkHorizontalCurve:e.linkType===M?a.LinkHorizontalLine:a.LinkHorizontal,t}),[e.layout,e.linkType,e.orientation]),p=(0,l.useCallback)(((e,t)=>{let n=t;return e.isExpanded&&(n=u().max(u().map(e.children,(e=>p(e,t+1))))),n}),[]),d=(0,l.useCallback)(((t,n)=>{let r,o;if(e.layout===E){const[e,a]=(0,i.pointRadial)(t,n);r=a,o=e}else e.orientation===z?(r=n,o=t):(r=t,o=n);return{top:r,left:o}}),[e.layout,e.orientation]),f=(0,l.useMemo)((()=>{let t,n,r;const a=p(e.data,1);return e.layout===E?(r={x:o/2,y:c/2},t=2*Math.PI,n=Math.min(o,c)/2*(a/2)):(r={x:0,y:0},e.orientation===z?(t=o,n=c):(t=c,n=o)),{sizeWidth:t,sizeHeight:n,origin:r}}),[p,c,o,e.data,e.layout,e.orientation]),g=(0,l.useCallback)((t=>s().createElement("foreignObject",{width:"100%",height:"100%"},e.renderNode(t.data))),[e.renderNode]),h=(0,l.useCallback)(((e,t)=>{const{top:r,left:o}=d(e.x,e.y);return s().createElement(n.Group,{top:r,left:o,key:t},g(e))}),[g,e.layout,e.orientation,e.linkType]);return(0,l.useEffect)((()=>{const{current:e}=t;if(e){const t=e.getElementsByTagName("g");u().each(t,(e=>{const t=u().first(e.getElementsByTagName("foreignObject")),{offsetWidth:n,offsetHeight:r}=t.firstChild,o=window.getComputedStyle(e),a=new DOMMatrixReadOnly(o.transform),{m41:i,m42:l}=a,s=`translate(${i-n/2}, ${l-r/2})`;e.setAttribute("transform",s)}))}}),[e.data,e.layout,e.orientation,e.linkType]),s().createElement("div",{className:"tree-graph",ref:t,style:{display:"flex",flexGrow:"1"}},s().createElement("svg",{width:e.parentWidth,height:e.parentHeight-e.offset,ref:e.zoom.containerRef},e.renderZoomContainer(),s().createElement(n.Group,{top:e.margin.top,left:e.margin.left,transform:e.zoom.toString()},s().createElement(r.Tree,{root:(0,r.hierarchy)(e.data,(e=>e.isExpanded?e.children:null)),size:[f.sizeWidth,f.sizeHeight],separation:(e,t)=>(e.parent===t.parent?1:2)/e.depth},(t=>s().createElement(n.Group,{left:f.origin.x,top:f.origin.y},t.links().map(((t,n)=>s().createElement(m,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"}))),u().map(t.descendants(),h)))))))};C.defaultProps={fontSize:12,layout:"cartesian",linkColor:"#B2B09B",linkType:M,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},nodeWidth:75,offset:0,orientation:"horizontal",stepPercent:.5,textColor:"#FFFFFF"};var L=(0,o.withParentSize)(v(C));module.exports=t}();
+!function(){"use strict";var e={n:function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,{a:n}),n},d:function(t,n){for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},o:function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r:function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{TreeGraph:function(){return L},withZoom:function(){return v}});var n=require("@visx/group"),r=require("@visx/hierarchy"),o=require("@visx/responsive"),a=require("@visx/shape"),i=require("d3-shape"),l=require("react"),s=e.n(l),c=require("underscore"),u=e.n(c),p=require("@visx/event"),d=require("@visx/zoom"),m=require("i18next"),f=e.n(m);const g={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},b=f().createInstance();b.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:g});var h=b;function y(){return y=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},y.apply(this,arguments)}const k={scaleX:1,scaleY:1,translateX:0,translateY:0,skewX:0,skewY:0};var v=e=>t=>{const{parentWidth:n,parentHeight:r}=t,{scaleXMin:o=.5,scaleXMax:a=4}=t,{scaleYMin:i=.5,scaleYMax:c=4}=t,{initialTransform:u=k}=t,m=(0,l.useCallback)((e=>s().createElement("rect",{width:n,height:r,rx:14,fill:"transparent",onTouchStart:e.dragStart,onTouchMove:e.dragMove,onTouchEnd:e.dragEnd,onMouseDown:e.dragStart,onMouseMove:e.dragMove,onMouseUp:e.dragEnd,onMouseLeave:()=>{e.isDragging&&e.dragEnd()},onDoubleClick:t=>{const n=(0,p.localPoint)(t)||{x:0,y:0};e.scale({scaleX:1.1,scaleY:1.1,point:n})}})),[n,r]);return s().createElement(d.Zoom,{width:n,height:r,scaleXMin:o,scaleXMax:a,scaleYMin:i,scaleYMax:c,initialTransformMatrix:u},(n=>s().createElement("div",{className:"zoom"},s().createElement(e,y({},t,{renderZoomContainer:m.bind(void 0,n),zoom:n})),s().createElement("div",{className:"controls"},s().createElement("button",{type:"button",className:"btn btn-zoom",onClick:()=>n.scale({scaleX:1.2,scaleY:1.2})},h.t("Zoom.buttons.zoomIn")),s().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:()=>n.scale({scaleX:.8,scaleY:.8})},h.t("Zoom.buttons.zoomOut")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},h.t("Zoom.buttons.center")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},h.t("Zoom.buttons.reset")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},h.t("Zoom.buttons.clear"))))))};const E="polar",x="curve",M="line",T="step",z="vertical",C=e=>{const t=(0,l.useRef)(),o=e.parentWidth-e.margin.left-e.margin.right,c=e.parentHeight-e.margin.top-e.margin.bottom,p=(0,l.useMemo)((()=>{let t;return t=e.layout===E?e.linkType===T?a.LinkRadialStep:e.linkType===x?a.LinkRadialCurve:e.linkType===M?a.LinkRadialLine:a.LinkRadial:e.orientation===z?e.linkType===T?a.LinkVerticalStep:e.linkType===x?a.LinkVerticalCurve:e.linkType===M?a.LinkVerticalLine:a.LinkVertical:e.linkType===T?a.LinkHorizontalStep:e.linkType===x?a.LinkHorizontalCurve:e.linkType===M?a.LinkHorizontalLine:a.LinkHorizontal,t}),[e.layout,e.linkType,e.orientation]),d=(0,l.useCallback)(((e,t)=>{let n=t;return e.isExpanded&&(n=u().max(u().map(e.children,(e=>d(e,t+1))))),n}),[]),m=(0,l.useCallback)(((t,n)=>{let r,o;if(e.layout===E){const[e,a]=(0,i.pointRadial)(t,n);r=a,o=e}else e.orientation===z?(r=n,o=t):(r=t,o=n);return{top:r,left:o}}),[e.layout,e.orientation]),f=(0,l.useMemo)((()=>{let t,n,r;const a=d(e.data,1);return e.layout===E?(r={x:o/2,y:c/2},t=2*Math.PI,n=Math.min(o,c)/2*(a/2)):(r={x:0,y:0},e.orientation===z?(t=o,n=c):(t=c,n=o)),{sizeWidth:t,sizeHeight:n,origin:r}}),[d,c,o,e.data,e.layout,e.orientation]),g=(0,l.useCallback)((t=>s().createElement("foreignObject",null,e.renderNode(t.data))),[e.renderNode]),b=(0,l.useCallback)(((e,t)=>{const{top:r,left:o}=m(e.x,e.y);return s().createElement(n.Group,{nodeleft:o,nodetop:r,top:r,left:o,key:t},g(e))}),[g,e.layout,e.orientation,e.linkType]);return(0,l.useEffect)((()=>{const{current:e}=t;if(e){const t=e.getElementsByTagName("g");u().each(t,(e=>{const t=u().first(e.getElementsByTagName("foreignObject"));if(t&&t.firstChild){const{offsetWidth:n,offsetHeight:r}=t.firstChild;t.setAttribute("width",n),t.setAttribute("height",r);const o=`translate(${parseFloat(e.getAttribute("nodeleft"))-n/2}, ${parseFloat(e.getAttribute("nodetop"))-r/2})`;e.setAttribute("transform",o)}}))}}),[e.data,e.layout,e.orientation,e.linkType]),s().createElement("div",{className:"tree-graph",style:{display:"flex",flexGrow:"1"}},s().createElement("svg",{width:e.parentWidth,height:e.parentHeight-e.offset,ref:e.zoom.containerRef},e.renderZoomContainer(),s().createElement(n.Group,{top:e.margin.top,left:e.margin.left,transform:e.zoom.toString()},s().createElement(r.Tree,{root:(0,r.hierarchy)(e.data,(e=>e.isExpanded?e.children:null)),size:[f.sizeWidth,f.sizeHeight],separation:(e,t)=>(e.parent===t.parent?1:2)/e.depth},(r=>s().createElement(n.Group,{innerRef:t,left:f.origin.x,top:f.origin.y},r.links().map(((t,n)=>s().createElement(p,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"}))),u().map(r.descendants(),b)))))))};C.defaultProps={layout:"cartesian",linkColor:"#B2B09B",linkType:M,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},offset:0,orientation:"horizontal",stepPercent:.5};var L=(0,o.withParentSize)(v(C));module.exports=t}();
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/visualize/webpack/bootstrap","webpack://@performant-software/visualize/webpack/runtime/compat get default export","webpack://@performant-software/visualize/webpack/runtime/define property getters","webpack://@performant-software/visualize/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/visualize/webpack/runtime/make namespace object","webpack://@performant-software/visualize/external commonjs \"@visx/group\"","webpack://@performant-software/visualize/external commonjs \"@visx/hierarchy\"","webpack://@performant-software/visualize/external commonjs \"@visx/responsive\"","webpack://@performant-software/visualize/external commonjs \"@visx/shape\"","webpack://@performant-software/visualize/external commonjs \"d3-shape\"","webpack://@performant-software/visualize/external commonjs2 \"react\"","webpack://@performant-software/visualize/external commonjs \"underscore\"","webpack://@performant-software/visualize/external commonjs \"@visx/event\"","webpack://@performant-software/visualize/external commonjs \"@visx/zoom\"","webpack://@performant-software/visualize/external commonjs \"i18next\"","webpack://@performant-software/visualize/./src/i18n/i18n.js","webpack://@performant-software/visualize/./src/hooks/Zoom.js","webpack://@performant-software/visualize/./src/components/TreeGraph.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/group\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/hierarchy\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/responsive\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"d3-shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/event\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/zoom\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"i18next\");","import i18next from 'i18next';\n\nimport en from './en.json';\n\nconst resources = {\n  en: {\n    translation: en\n  }\n};\n\nconst i18n = i18next.createInstance();\n\ni18n\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    lng: 'en',\n    interpolation: {\n      escapeValue: false,\n    },\n    resources\n  });\n\nexport default i18n;\n","// @flow\n\nimport React, { useCallback, type ComponentType, type Element } from 'react';\nimport { localPoint } from '@visx/event';\nimport { Zoom } from '@visx/zoom';\nimport i18n from '../i18n/i18n';\nimport './Zoom.css';\n\ntype Props = {\n  initialTransform?: {\n    skewX: number,\n    skewY: number,\n    scaleX: number,\n    scaleY: number,\n    translateX: number,\n    translateY: number\n  },\n  parentHeight: number,\n  parentWidth: number,\n  scaleXMax?: number,\n  scaleXMin?: number,\n  scaleYMax?: number,\n  scaleYMin?: number\n};\n\ntype WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => Element<any>;\n\nconst DEFAULT_INITIAL_TRANSFORM = {\n  scaleX: 1,\n  scaleY: 1,\n  translateX: 0,\n  translateY: 0,\n  skewX: 0,\n  skewY: 0,\n};\n\nconst withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {\n  const { parentWidth: width, parentHeight: height } = props;\n  const { scaleXMin = 1 / 2, scaleXMax = 4 } = props;\n  const { scaleYMin = 1 / 2, scaleYMax = 4 } = props;\n  const { initialTransform = DEFAULT_INITIAL_TRANSFORM } = props;\n\n  /**\n   * Renders the container with zoom controls.\n   *\n   * @type {unknown}\n   */\n  const renderZoomContainer = useCallback((zoom) => (\n    <rect\n      width={width}\n      height={height}\n      rx={14}\n      fill='transparent'\n      onTouchStart={zoom.dragStart}\n      onTouchMove={zoom.dragMove}\n      onTouchEnd={zoom.dragEnd}\n      onMouseDown={zoom.dragStart}\n      onMouseMove={zoom.dragMove}\n      onMouseUp={zoom.dragEnd}\n      onMouseLeave={() => {\n        if (zoom.isDragging) zoom.dragEnd();\n      }}\n      onDoubleClick={(event) => {\n        const point = localPoint(event) || { x: 0, y: 0 };\n        zoom.scale({ scaleX: 1.1, scaleY: 1.1, point });\n      }}\n    />\n  ), [width, height]);\n\n  return (\n    <Zoom\n      width={width}\n      height={height}\n      scaleXMin={scaleXMin}\n      scaleXMax={scaleXMax}\n      scaleYMin={scaleYMin}\n      scaleYMax={scaleYMax}\n      initialTransformMatrix={initialTransform}\n    >\n      { (zoom) => (\n        <div\n          className='zoom'\n        >\n          <WrappedComponent\n            {...props}\n            renderZoomContainer={renderZoomContainer.bind(this, zoom)}\n            zoom={zoom}\n          />\n          <div\n            className='controls'\n          >\n            <button\n              type='button'\n              className='btn btn-zoom'\n              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}\n            >\n              { i18n.t('Zoom.buttons.zoomIn') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-zoom btn-bottom'\n              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}\n            >\n              { i18n.t('Zoom.buttons.zoomOut') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.center}\n            >\n              { i18n.t('Zoom.buttons.center') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.reset}\n            >\n              { i18n.t('Zoom.buttons.reset') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.clear}\n            >\n              { i18n.t('Zoom.buttons.clear') }\n            </button>\n          </div>\n        </div>\n      )}\n    </Zoom>\n  );\n};\n\nexport default withZoom;\n\nexport type ZoomProps = {\n  renderZoomContainer: () => Element<any>,\n  zoom: typeof Zoom\n};\n","// @flow\n\nimport { Group } from '@visx/group';\nimport { hierarchy, Tree } from '@visx/hierarchy';\nimport { withParentSize } from '@visx/responsive';\nimport {\n  LinkHorizontal,\n  LinkHorizontalCurve,\n  LinkHorizontalLine,\n  LinkHorizontalStep,\n  LinkRadial,\n  LinkRadialCurve,\n  LinkRadialLine,\n  LinkRadialStep,\n  LinkVertical,\n  LinkVerticalCurve,\n  LinkVerticalLine,\n  LinkVerticalStep\n} from '@visx/shape';\nimport { pointRadial } from 'd3-shape';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentType,\n  type Element\n} from 'react';\nimport _ from 'underscore';\nimport withZoom, { type ZoomProps } from '../hooks/Zoom';\nimport './TreeGraph.css';\n\ntype Props = ZoomProps & {\n  data: any,\n  fontSize: number,\n  layout: string,\n  linkType: string,\n  offset: number,\n  orientation: string,\n  parentHeight: number,\n  parentWidth: number,\n  linkColor: string,\n  linkWidth: number,\n  margin: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number\n  },\n  nodeWidth: number,\n  onClick?: (data: any) => void,\n  renderNode?: (data: any) => Element<any>,\n  renderText?: (data: any) => Element<any>,\n  stepPercent: number,\n  textColor: string\n};\n\nconst Layout = {\n  cartesian: 'cartesian',\n  polar: 'polar'\n};\n\nconst LinkType = {\n  curve: 'curve',\n  line: 'line',\n  step: 'step'\n};\n\nconst Orientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical'\n};\n\nconst TreeGraph = (props: Props) => {\n  const ref = useRef();\n\n  const innerWidth = props.parentWidth - props.margin.left - props.margin.right;\n  const innerHeight = props.parentHeight - props.margin.top - props.margin.bottom;\n\n  /**\n   * Sets the link component based on the layout, linkType, and orientation props.\n   *\n   * @type {*}\n   */\n  const LinkComponent = useMemo(() => {\n    let value;\n\n    if (props.layout === Layout.polar) {\n      if (props.linkType === LinkType.step) {\n        value = LinkRadialStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkRadialCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkRadialLine;\n      } else {\n        value = LinkRadial;\n      }\n    } else if (props.orientation === Orientation.vertical) {\n      if (props.linkType === LinkType.step) {\n        value = LinkVerticalStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkVerticalCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkVerticalLine;\n      } else {\n        value = LinkVertical;\n      }\n    } else if (props.linkType === LinkType.step) {\n      value = LinkHorizontalStep;\n    } else if (props.linkType === LinkType.curve) {\n      value = LinkHorizontalCurve;\n    } else if (props.linkType === LinkType.line) {\n      value = LinkHorizontalLine;\n    } else {\n      value = LinkHorizontal;\n    }\n\n    return value;\n  }, [props.layout, props.linkType, props.orientation]);\n\n  /**\n   * Returns the depth of the last expanded node.\n   *\n   * @type {function(*, *): *}\n   */\n  const getMaxDepth = useCallback((node, depth) => {\n    let max = depth;\n\n    if (node.isExpanded) {\n      max = _.max(_.map(node.children, (child) => getMaxDepth(child, depth + 1)));\n    }\n\n    return max;\n  }, []);\n\n  /**\n   * Returns the node position for the passed coordinates.\n   *\n   * @type {function(*, *): {top: *, left: *}}\n   */\n  const getNodePosition = useCallback((x, y) => {\n    let top;\n    let left;\n\n    if (props.layout === Layout.polar) {\n      const [radialX, radialY] = pointRadial(x, y);\n      top = radialY;\n      left = radialX;\n    } else if (props.orientation === Orientation.vertical) {\n      top = y;\n      left = x;\n    } else {\n      top = x;\n      left = y;\n    }\n\n    return {\n      top,\n      left\n    };\n  }, [props.layout, props.orientation]);\n\n  /**\n   * Returns the position and size of the root node.\n   *\n   * @type {{sizeWidth: *, origin: *, sizeHeight: *}}\n   */\n  const root = useMemo(() => {\n    let sizeWidth;\n    let sizeHeight;\n    let origin;\n\n    const depth = getMaxDepth(props.data, 1);\n\n    if (props.layout === Layout.polar) {\n      origin = {\n        x: innerWidth / 2,\n        y: innerHeight / 2,\n      };\n      sizeWidth = 2 * Math.PI;\n      sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);\n    } else {\n      origin = { x: 0, y: 0 };\n      if (props.orientation === Orientation.vertical) {\n        sizeWidth = innerWidth;\n        sizeHeight = innerHeight;\n      } else {\n        sizeWidth = innerHeight;\n        sizeHeight = innerWidth;\n      }\n    }\n\n    return {\n      sizeWidth,\n      sizeHeight,\n      origin\n    };\n  }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);\n\n  const renderNode = useCallback((node) => (\n    <foreignObject\n      width='100%'\n      height='100%'\n    >\n      { props.renderNode(node.data) }\n    </foreignObject>\n  ), [props.renderNode]);\n\n  /**\n   * Renders the group element for the passed node.\n   *\n   * @type {unknown}\n   */\n  const renderGroup = useCallback((node, key) => {\n    const { top, left } = getNodePosition(node.x, node.y);\n\n    return (\n      <Group\n        top={top}\n        left={left}\n        key={key}\n      >\n        { renderNode(node) }\n      </Group>\n    );\n  }, [renderNode, props.layout, props.orientation, props.linkType]);\n\n  /**\n   * Resizes the \"circle\" and \"rect\" elements based on the text contained in the group. This effect will also\n   * convert text into multiple lines.\n   */\n  useEffect(() => {\n    const { current } = ref;\n    if (current) {\n      const groups = current.getElementsByTagName('g');\n      _.each(groups, (group) => {\n        const object = _.first(group.getElementsByTagName('foreignObject'));\n        const { offsetWidth: width, offsetHeight: height } = object.firstChild;\n\n        const style = window.getComputedStyle(group);\n        const matrix = new DOMMatrixReadOnly(style.transform);\n        const { m41: translateX, m42: translateY } = matrix;\n\n        const transform = `translate(${translateX - (width / 2.0)}, ${translateY - (height / 2.0)})`;\n        group.setAttribute('transform', transform);\n      });\n    }\n  }, [props.data, props.layout, props.orientation, props.linkType]);\n\n  return (\n    <div\n      className='tree-graph'\n      ref={ref}\n      style={{\n        display: 'flex',\n        flexGrow: '1'\n      }}\n    >\n      <svg\n        width={props.parentWidth}\n        height={props.parentHeight - props.offset}\n        ref={props.zoom.containerRef}\n      >\n        { props.renderZoomContainer() }\n        <Group\n          top={props.margin.top}\n          left={props.margin.left}\n          transform={props.zoom.toString()}\n        >\n          <Tree\n            root={hierarchy(props.data, (d) => (d.isExpanded ? d.children : null))}\n            size={[root.sizeWidth, root.sizeHeight]}\n            separation={(a, b) => (a.parent === b.parent ? 1 : 2) / a.depth}\n          >\n            { (tree) => (\n              <Group\n                left={root.origin.x}\n                top={root.origin.y}\n              >\n                { tree.links().map((link, i) => (\n                  <LinkComponent\n                    key={i}\n                    data={link}\n                    percent={props.stepPercent}\n                    stroke={props.linkColor}\n                    strokeWidth={props.linkWidth}\n                    fill='none'\n                  />\n                ))}\n                { _.map(tree.descendants(), renderGroup) }\n              </Group>\n            )}\n          </Tree>\n        </Group>\n      </svg>\n    </div>\n  );\n};\n\nTreeGraph.defaultProps = {\n  fontSize: 12,\n  layout: Layout.cartesian,\n  linkColor: '#B2B09B',\n  linkType: LinkType.line,\n  linkWidth: 1,\n  margin: {\n    top: 30,\n    left: 30,\n    right: 30,\n    bottom: 70\n  },\n  nodeWidth: 75,\n  offset: 0,\n  orientation: Orientation.horizontal,\n  stepPercent: 0.5,\n  textColor: '#FFFFFF'\n};\n\nconst TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));\nexport default TreeGraphComponent;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","resources","en","translation","i18n","i18next","init","debug","fallbackLng","lng","interpolation","escapeValue","DEFAULT_INITIAL_TRANSFORM","scaleX","scaleY","translateX","translateY","skewX","skewY","WrappedComponent","props","parentWidth","width","parentHeight","height","scaleXMin","scaleXMax","scaleYMin","scaleYMax","initialTransform","renderZoomContainer","useCallback","zoom","rx","fill","onTouchStart","dragStart","onTouchMove","dragMove","onTouchEnd","dragEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","isDragging","onDoubleClick","event","point","localPoint","x","y","scale","Zoom","initialTransformMatrix","className","bind","type","onClick","center","reset","clear","Layout","LinkType","Orientation","TreeGraph","ref","useRef","innerWidth","margin","left","right","innerHeight","top","bottom","LinkComponent","useMemo","layout","linkType","LinkRadialStep","LinkRadialCurve","LinkRadialLine","LinkRadial","orientation","LinkVerticalStep","LinkVerticalCurve","LinkVerticalLine","LinkVertical","LinkHorizontalStep","LinkHorizontalCurve","LinkHorizontalLine","LinkHorizontal","getMaxDepth","node","depth","max","isExpanded","_","children","child","getNodePosition","radialX","radialY","pointRadial","root","sizeWidth","sizeHeight","origin","data","Math","PI","min","renderNode","renderGroup","Group","useEffect","current","groups","getElementsByTagName","group","object","offsetWidth","offsetHeight","firstChild","style","window","getComputedStyle","matrix","DOMMatrixReadOnly","transform","m41","m42","setAttribute","display","flexGrow","offset","containerRef","toString","Tree","hierarchy","size","separation","b","parent","tree","links","map","link","i","percent","stepPercent","stroke","linkColor","strokeWidth","linkWidth","descendants","defaultProps","fontSize","nodeWidth","textColor","withParentSize","withZoom"],"sourceRoot":""}
+{"version":3,"file":"index.js","mappings":"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","sources":["webpack://@performant-software/visualize/webpack/bootstrap","webpack://@performant-software/visualize/webpack/runtime/compat get default export","webpack://@performant-software/visualize/webpack/runtime/define property getters","webpack://@performant-software/visualize/webpack/runtime/hasOwnProperty shorthand","webpack://@performant-software/visualize/webpack/runtime/make namespace object","webpack://@performant-software/visualize/external commonjs \"@visx/group\"","webpack://@performant-software/visualize/external commonjs \"@visx/hierarchy\"","webpack://@performant-software/visualize/external commonjs \"@visx/responsive\"","webpack://@performant-software/visualize/external commonjs \"@visx/shape\"","webpack://@performant-software/visualize/external commonjs \"d3-shape\"","webpack://@performant-software/visualize/external commonjs2 \"react\"","webpack://@performant-software/visualize/external commonjs \"underscore\"","webpack://@performant-software/visualize/external commonjs \"@visx/event\"","webpack://@performant-software/visualize/external commonjs \"@visx/zoom\"","webpack://@performant-software/visualize/external commonjs \"i18next\"","webpack://@performant-software/visualize/./src/i18n/i18n.js","webpack://@performant-software/visualize/./src/hooks/Zoom.js","webpack://@performant-software/visualize/./src/components/TreeGraph.js"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// define __esModule on exports\n__webpack_require__.r = function(exports) {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/group\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/hierarchy\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/responsive\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"d3-shape\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"react\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"underscore\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/event\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"@visx/zoom\");","var __WEBPACK_NAMESPACE_OBJECT__ = require(\"i18next\");","import i18next from 'i18next';\n\nimport en from './en.json';\n\nconst resources = {\n  en: {\n    translation: en\n  }\n};\n\nconst i18n = i18next.createInstance();\n\ni18n\n  .init({\n    debug: true,\n    fallbackLng: 'en',\n    lng: 'en',\n    interpolation: {\n      escapeValue: false,\n    },\n    resources\n  });\n\nexport default i18n;\n","// @flow\n\nimport React, { useCallback, type ComponentType, type Element } from 'react';\nimport { localPoint } from '@visx/event';\nimport { Zoom } from '@visx/zoom';\nimport i18n from '../i18n/i18n';\nimport './Zoom.css';\n\ntype Props = {\n  initialTransform?: {\n    skewX: number,\n    skewY: number,\n    scaleX: number,\n    scaleY: number,\n    translateX: number,\n    translateY: number\n  },\n  parentHeight: number,\n  parentWidth: number,\n  scaleXMax?: number,\n  scaleXMin?: number,\n  scaleYMax?: number,\n  scaleYMin?: number\n};\n\ntype WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => Element<any>;\n\nconst DEFAULT_INITIAL_TRANSFORM = {\n  scaleX: 1,\n  scaleY: 1,\n  translateX: 0,\n  translateY: 0,\n  skewX: 0,\n  skewY: 0,\n};\n\nconst withZoom: WithZoomType = (WrappedComponent: ComponentType<any>) => (props: Props) => {\n  const { parentWidth: width, parentHeight: height } = props;\n  const { scaleXMin = 1 / 2, scaleXMax = 4 } = props;\n  const { scaleYMin = 1 / 2, scaleYMax = 4 } = props;\n  const { initialTransform = DEFAULT_INITIAL_TRANSFORM } = props;\n\n  /**\n   * Renders the container with zoom controls.\n   *\n   * @type {unknown}\n   */\n  const renderZoomContainer = useCallback((zoom) => (\n    <rect\n      width={width}\n      height={height}\n      rx={14}\n      fill='transparent'\n      onTouchStart={zoom.dragStart}\n      onTouchMove={zoom.dragMove}\n      onTouchEnd={zoom.dragEnd}\n      onMouseDown={zoom.dragStart}\n      onMouseMove={zoom.dragMove}\n      onMouseUp={zoom.dragEnd}\n      onMouseLeave={() => {\n        if (zoom.isDragging) zoom.dragEnd();\n      }}\n      onDoubleClick={(event) => {\n        const point = localPoint(event) || { x: 0, y: 0 };\n        zoom.scale({ scaleX: 1.1, scaleY: 1.1, point });\n      }}\n    />\n  ), [width, height]);\n\n  return (\n    <Zoom\n      width={width}\n      height={height}\n      scaleXMin={scaleXMin}\n      scaleXMax={scaleXMax}\n      scaleYMin={scaleYMin}\n      scaleYMax={scaleYMax}\n      initialTransformMatrix={initialTransform}\n    >\n      { (zoom) => (\n        <div\n          className='zoom'\n        >\n          <WrappedComponent\n            {...props}\n            renderZoomContainer={renderZoomContainer.bind(this, zoom)}\n            zoom={zoom}\n          />\n          <div\n            className='controls'\n          >\n            <button\n              type='button'\n              className='btn btn-zoom'\n              onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}\n            >\n              { i18n.t('Zoom.buttons.zoomIn') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-zoom btn-bottom'\n              onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}\n            >\n              { i18n.t('Zoom.buttons.zoomOut') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.center}\n            >\n              { i18n.t('Zoom.buttons.center') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.reset}\n            >\n              { i18n.t('Zoom.buttons.reset') }\n            </button>\n            <button\n              type='button'\n              className='btn btn-lg'\n              onClick={zoom.clear}\n            >\n              { i18n.t('Zoom.buttons.clear') }\n            </button>\n          </div>\n        </div>\n      )}\n    </Zoom>\n  );\n};\n\nexport default withZoom;\n\nexport type ZoomProps = {\n  renderZoomContainer: () => Element<any>,\n  zoom: typeof Zoom\n};\n","// @flow\n\nimport { Group } from '@visx/group';\nimport { hierarchy, Tree } from '@visx/hierarchy';\nimport { withParentSize } from '@visx/responsive';\nimport {\n  LinkHorizontal,\n  LinkHorizontalCurve,\n  LinkHorizontalLine,\n  LinkHorizontalStep,\n  LinkRadial,\n  LinkRadialCurve,\n  LinkRadialLine,\n  LinkRadialStep,\n  LinkVertical,\n  LinkVerticalCurve,\n  LinkVerticalLine,\n  LinkVerticalStep\n} from '@visx/shape';\nimport { pointRadial } from 'd3-shape';\nimport React, {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentType,\n  type Element\n} from 'react';\nimport _ from 'underscore';\nimport withZoom, { type ZoomProps } from '../hooks/Zoom';\nimport './TreeGraph.css';\n\ntype Props = ZoomProps & {\n  data: any,\n  layout: string,\n  linkType: string,\n  offset: number,\n  orientation: string,\n  parentHeight: number,\n  parentWidth: number,\n  linkColor: string,\n  linkWidth: number,\n  margin: {\n    top: number,\n    right: number,\n    bottom: number,\n    left: number\n  },\n  renderNode?: (data: any) => Element<any>,\n  stepPercent: number,\n};\n\nconst Layout = {\n  cartesian: 'cartesian',\n  polar: 'polar'\n};\n\nconst LinkType = {\n  curve: 'curve',\n  line: 'line',\n  step: 'step'\n};\n\nconst Orientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical'\n};\n\nconst TreeGraph = (props: Props) => {\n  const ref = useRef();\n\n  const innerWidth = props.parentWidth - props.margin.left - props.margin.right;\n  const innerHeight = props.parentHeight - props.margin.top - props.margin.bottom;\n\n  /**\n   * Sets the link component based on the layout, linkType, and orientation props.\n   *\n   * @type {*}\n   */\n  const LinkComponent = useMemo(() => {\n    let value;\n\n    if (props.layout === Layout.polar) {\n      if (props.linkType === LinkType.step) {\n        value = LinkRadialStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkRadialCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkRadialLine;\n      } else {\n        value = LinkRadial;\n      }\n    } else if (props.orientation === Orientation.vertical) {\n      if (props.linkType === LinkType.step) {\n        value = LinkVerticalStep;\n      } else if (props.linkType === LinkType.curve) {\n        value = LinkVerticalCurve;\n      } else if (props.linkType === LinkType.line) {\n        value = LinkVerticalLine;\n      } else {\n        value = LinkVertical;\n      }\n    } else if (props.linkType === LinkType.step) {\n      value = LinkHorizontalStep;\n    } else if (props.linkType === LinkType.curve) {\n      value = LinkHorizontalCurve;\n    } else if (props.linkType === LinkType.line) {\n      value = LinkHorizontalLine;\n    } else {\n      value = LinkHorizontal;\n    }\n\n    return value;\n  }, [props.layout, props.linkType, props.orientation]);\n\n  /**\n   * Returns the depth of the last expanded node.\n   *\n   * @type {function(*, *): *}\n   */\n  const getMaxDepth = useCallback((node, depth) => {\n    let max = depth;\n\n    if (node.isExpanded) {\n      max = _.max(_.map(node.children, (child) => getMaxDepth(child, depth + 1)));\n    }\n\n    return max;\n  }, []);\n\n  /**\n   * Returns the node position for the passed coordinates.\n   *\n   * @type {function(*, *): {top: *, left: *}}\n   */\n  const getNodePosition = useCallback((x, y) => {\n    let top;\n    let left;\n\n    if (props.layout === Layout.polar) {\n      const [radialX, radialY] = pointRadial(x, y);\n      top = radialY;\n      left = radialX;\n    } else if (props.orientation === Orientation.vertical) {\n      top = y;\n      left = x;\n    } else {\n      top = x;\n      left = y;\n    }\n\n    return {\n      top,\n      left\n    };\n  }, [props.layout, props.orientation]);\n\n  /**\n   * Returns the position and size of the root node.\n   *\n   * @type {{sizeWidth: *, origin: *, sizeHeight: *}}\n   */\n  const root = useMemo(() => {\n    let sizeWidth;\n    let sizeHeight;\n    let origin;\n\n    const depth = getMaxDepth(props.data, 1);\n\n    if (props.layout === Layout.polar) {\n      origin = {\n        x: innerWidth / 2,\n        y: innerHeight / 2,\n      };\n      sizeWidth = 2 * Math.PI;\n      sizeHeight = (Math.min(innerWidth, innerHeight) / 2) * (depth / 2);\n    } else {\n      origin = { x: 0, y: 0 };\n      if (props.orientation === Orientation.vertical) {\n        sizeWidth = innerWidth;\n        sizeHeight = innerHeight;\n      } else {\n        sizeWidth = innerHeight;\n        sizeHeight = innerWidth;\n      }\n    }\n\n    return {\n      sizeWidth,\n      sizeHeight,\n      origin\n    };\n  }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);\n\n  const renderNode = useCallback((node) => (\n    <foreignObject>\n      { props.renderNode(node.data) }\n    </foreignObject>\n  ), [props.renderNode]);\n\n  /**\n   * Renders the group element for the passed node.\n   *\n   * @type {unknown}\n   */\n  const renderGroup = useCallback((node, key) => {\n    const { top, left } = getNodePosition(node.x, node.y);\n\n    return (\n      <Group\n        nodeleft={left}\n        nodetop={top}\n        top={top}\n        left={left}\n        key={key}\n      >\n        { renderNode(node) }\n      </Group>\n    );\n  }, [renderNode, props.layout, props.orientation, props.linkType]);\n\n  /**\n   * Resizes the \"circle\" and \"rect\" elements based on the text contained in the group. This effect will also\n   * convert text into multiple lines.\n   */\n  useEffect(() => {\n    const { current } = ref;\n    if (current) {\n      const groups = current.getElementsByTagName('g');\n      _.each(groups, (group) => {\n        const object = _.first(group.getElementsByTagName('foreignObject'));\n        if (object && object.firstChild) {\n          const { offsetWidth: width, offsetHeight: height } = object.firstChild;\n\n          // Set the width and height of the foreignObject element\n          object.setAttribute('width', width);\n          object.setAttribute('height', height);\n\n          // Transform the position of the group element based on the width and height of the contents\n          const leftPosition = parseFloat(group.getAttribute('nodeleft'));\n          const topPosition = parseFloat(group.getAttribute('nodetop'));\n\n          const transform = `translate(${leftPosition - (width / 2.0)}, ${topPosition - (height / 2.0)})`;\n          group.setAttribute('transform', transform);\n        }\n      });\n    }\n  }, [props.data, props.layout, props.orientation, props.linkType]);\n\n  return (\n    <div\n      className='tree-graph'\n      style={{\n        display: 'flex',\n        flexGrow: '1'\n      }}\n    >\n      <svg\n        width={props.parentWidth}\n        height={props.parentHeight - props.offset}\n        ref={props.zoom.containerRef}\n      >\n        { props.renderZoomContainer() }\n        <Group\n          top={props.margin.top}\n          left={props.margin.left}\n          transform={props.zoom.toString()}\n        >\n          <Tree\n            root={hierarchy(props.data, (d) => (d.isExpanded ? d.children : null))}\n            size={[root.sizeWidth, root.sizeHeight]}\n            separation={(a, b) => (a.parent === b.parent ? 1 : 2) / a.depth}\n          >\n            { (tree) => (\n              <Group\n                innerRef={ref}\n                left={root.origin.x}\n                top={root.origin.y}\n              >\n                { tree.links().map((link, i) => (\n                  <LinkComponent\n                    key={i}\n                    data={link}\n                    percent={props.stepPercent}\n                    stroke={props.linkColor}\n                    strokeWidth={props.linkWidth}\n                    fill='none'\n                  />\n                ))}\n                { _.map(tree.descendants(), renderGroup) }\n              </Group>\n            )}\n          </Tree>\n        </Group>\n      </svg>\n    </div>\n  );\n};\n\nTreeGraph.defaultProps = {\n  layout: Layout.cartesian,\n  linkColor: '#B2B09B',\n  linkType: LinkType.line,\n  linkWidth: 1,\n  margin: {\n    top: 30,\n    left: 30,\n    right: 30,\n    bottom: 70\n  },\n  offset: 0,\n  orientation: Orientation.horizontal,\n  stepPercent: 0.5\n};\n\nconst TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));\nexport default TreeGraphComponent;\n"],"names":["__webpack_require__","module","getter","__esModule","d","a","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","require","resources","en","translation","i18n","i18next","init","debug","fallbackLng","lng","interpolation","escapeValue","DEFAULT_INITIAL_TRANSFORM","scaleX","scaleY","translateX","translateY","skewX","skewY","WrappedComponent","props","parentWidth","width","parentHeight","height","scaleXMin","scaleXMax","scaleYMin","scaleYMax","initialTransform","renderZoomContainer","useCallback","zoom","rx","fill","onTouchStart","dragStart","onTouchMove","dragMove","onTouchEnd","dragEnd","onMouseDown","onMouseMove","onMouseUp","onMouseLeave","isDragging","onDoubleClick","event","point","localPoint","x","y","scale","Zoom","initialTransformMatrix","className","bind","type","onClick","center","reset","clear","Layout","LinkType","Orientation","TreeGraph","ref","useRef","innerWidth","margin","left","right","innerHeight","top","bottom","LinkComponent","useMemo","layout","linkType","LinkRadialStep","LinkRadialCurve","LinkRadialLine","LinkRadial","orientation","LinkVerticalStep","LinkVerticalCurve","LinkVerticalLine","LinkVertical","LinkHorizontalStep","LinkHorizontalCurve","LinkHorizontalLine","LinkHorizontal","getMaxDepth","node","depth","max","isExpanded","_","children","child","getNodePosition","radialX","radialY","pointRadial","root","sizeWidth","sizeHeight","origin","data","Math","PI","min","renderNode","renderGroup","Group","nodeleft","nodetop","useEffect","current","groups","getElementsByTagName","group","object","firstChild","offsetWidth","offsetHeight","setAttribute","transform","parseFloat","getAttribute","style","display","flexGrow","offset","containerRef","toString","Tree","hierarchy","size","separation","b","parent","tree","innerRef","links","map","link","i","percent","stepPercent","stroke","linkColor","strokeWidth","linkWidth","descendants","defaultProps","withParentSize","withZoom"],"sourceRoot":""}

package/build/main.css

@@ -1,3 +1,6 @@
+.zoom {
+  position: relative;
+}
 .zoom .btn {
   margin: 0;
   text-align: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@performant-software/visualize",
-  "version": "1.0.7-beta.1",
+  "version": "1.0.7-beta.3",
   "description": "A package of components used for data visualization",
   "license": "MIT",
   "main": "./build/index.js",

package/src/components/TreeGraph.js

@@ -32,7 +32,6 @@ import './TreeGraph.css';
 
 type Props = ZoomProps & {
   data: any,
-  fontSize: number,
   layout: string,
   linkType: string,
   offset: number,
@@ -47,12 +46,8 @@ type Props = ZoomProps & {
     bottom: number,
     left: number
   },
-  nodeWidth: number,
-  onClick?: (data: any) => void,
   renderNode?: (data: any) => Element<any>,
-  renderText?: (data: any) => Element<any>,
   stepPercent: number,
-  textColor: string
 };
 
 const Layout = {
@@ -198,10 +193,7 @@ const TreeGraph = (props: Props) => {
   }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);
 
   const renderNode = useCallback((node) => (
-    <foreignObject
-      width='100%'
-      height='100%'
-    >
+    <foreignObject>
       { props.renderNode(node.data) }
     </foreignObject>
   ), [props.renderNode]);
@@ -216,6 +208,8 @@ const TreeGraph = (props: Props) => {
 
     return (
       <Group
+        nodeleft={left}
+        nodetop={top}
         top={top}
         left={left}
         key={key}
@@ -235,14 +229,20 @@ const TreeGraph = (props: Props) => {
       const groups = current.getElementsByTagName('g');
       _.each(groups, (group) => {
         const object = _.first(group.getElementsByTagName('foreignObject'));
-        const { offsetWidth: width, offsetHeight: height } = object.firstChild;
+        if (object && object.firstChild) {
+          const { offsetWidth: width, offsetHeight: height } = object.firstChild;
+
+          // Set the width and height of the foreignObject element
+          object.setAttribute('width', width);
+          object.setAttribute('height', height);
 
-        const style = window.getComputedStyle(group);
-        const matrix = new DOMMatrixReadOnly(style.transform);
-        const { m41: translateX, m42: translateY } = matrix;
+          // Transform the position of the group element based on the width and height of the contents
+          const leftPosition = parseFloat(group.getAttribute('nodeleft'));
+          const topPosition = parseFloat(group.getAttribute('nodetop'));
 
-        const transform = `translate(${translateX - (width / 2.0)}, ${translateY - (height / 2.0)})`;
-        group.setAttribute('transform', transform);
+          const transform = `translate(${leftPosition - (width / 2.0)}, ${topPosition - (height / 2.0)})`;
+          group.setAttribute('transform', transform);
+        }
       });
     }
   }, [props.data, props.layout, props.orientation, props.linkType]);
@@ -250,7 +250,6 @@ const TreeGraph = (props: Props) => {
   return (
     <div
       className='tree-graph'
-      ref={ref}
       style={{
         display: 'flex',
         flexGrow: '1'
@@ -274,6 +273,7 @@ const TreeGraph = (props: Props) => {
           >
             { (tree) => (
               <Group
+                innerRef={ref}
                 left={root.origin.x}
                 top={root.origin.y}
               >
@@ -298,7 +298,6 @@ const TreeGraph = (props: Props) => {
 };
 
 TreeGraph.defaultProps = {
-  fontSize: 12,
   layout: Layout.cartesian,
   linkColor: '#B2B09B',
   linkType: LinkType.line,
@@ -309,11 +308,9 @@ TreeGraph.defaultProps = {
     right: 30,
     bottom: 70
   },
-  nodeWidth: 75,
   offset: 0,
   orientation: Orientation.horizontal,
-  stepPercent: 0.5,
-  textColor: '#FFFFFF'
+  stepPercent: 0.5
 };
 
 const TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));

package/src/hooks/Zoom.css

@@ -1,3 +1,7 @@
+.zoom {
+  position: relative;
+}
+
 .zoom .btn {
   margin: 0;
   text-align: center;

package/types/components/TreeGraph.js.flow

@@ -32,7 +32,6 @@ import './TreeGraph.css';
 
 type Props = ZoomProps & {
   data: any,
-  fontSize: number,
   layout: string,
   linkType: string,
   offset: number,
@@ -47,12 +46,8 @@ type Props = ZoomProps & {
     bottom: number,
     left: number
   },
-  nodeWidth: number,
-  onClick?: (data: any) => void,
   renderNode?: (data: any) => Element<any>,
-  renderText?: (data: any) => Element<any>,
   stepPercent: number,
-  textColor: string
 };
 
 const Layout = {
@@ -198,10 +193,7 @@ const TreeGraph = (props: Props) => {
   }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);
 
   const renderNode = useCallback((node) => (
-    <foreignObject
-      width='100%'
-      height='100%'
-    >
+    <foreignObject>
       { props.renderNode(node.data) }
     </foreignObject>
   ), [props.renderNode]);
@@ -216,6 +208,8 @@ const TreeGraph = (props: Props) => {
 
     return (
       <Group
+        nodeleft={left}
+        nodetop={top}
         top={top}
         left={left}
         key={key}
@@ -235,14 +229,20 @@ const TreeGraph = (props: Props) => {
       const groups = current.getElementsByTagName('g');
       _.each(groups, (group) => {
         const object = _.first(group.getElementsByTagName('foreignObject'));
-        const { offsetWidth: width, offsetHeight: height } = object.firstChild;
+        if (object && object.firstChild) {
+          const { offsetWidth: width, offsetHeight: height } = object.firstChild;
+
+          // Set the width and height of the foreignObject element
+          object.setAttribute('width', width);
+          object.setAttribute('height', height);
 
-        const style = window.getComputedStyle(group);
-        const matrix = new DOMMatrixReadOnly(style.transform);
-        const { m41: translateX, m42: translateY } = matrix;
+          // Transform the position of the group element based on the width and height of the contents
+          const leftPosition = parseFloat(group.getAttribute('nodeleft'));
+          const topPosition = parseFloat(group.getAttribute('nodetop'));
 
-        const transform = `translate(${translateX - (width / 2.0)}, ${translateY - (height / 2.0)})`;
-        group.setAttribute('transform', transform);
+          const transform = `translate(${leftPosition - (width / 2.0)}, ${topPosition - (height / 2.0)})`;
+          group.setAttribute('transform', transform);
+        }
       });
     }
   }, [props.data, props.layout, props.orientation, props.linkType]);
@@ -250,7 +250,6 @@ const TreeGraph = (props: Props) => {
   return (
     <div
       className='tree-graph'
-      ref={ref}
       style={{
         display: 'flex',
         flexGrow: '1'
@@ -274,6 +273,7 @@ const TreeGraph = (props: Props) => {
           >
             { (tree) => (
               <Group
+                innerRef={ref}
                 left={root.origin.x}
                 top={root.origin.y}
               >
@@ -298,7 +298,6 @@ const TreeGraph = (props: Props) => {
 };
 
 TreeGraph.defaultProps = {
-  fontSize: 12,
   layout: Layout.cartesian,
   linkColor: '#B2B09B',
   linkType: LinkType.line,
@@ -309,11 +308,9 @@ TreeGraph.defaultProps = {
     right: 30,
     bottom: 70
   },
-  nodeWidth: 75,
   offset: 0,
   orientation: Orientation.horizontal,
-  stepPercent: 0.5,
-  textColor: '#FFFFFF'
+  stepPercent: 0.5
 };
 
 const TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));