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

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 O},withZoom:function(){return x}});var n=require("@visx/group"),r=require("@visx/hierarchy"),a=require("@visx/responsive"),o=require("@visx/shape"),i=require("d3-shape"),l=require("react"),s=e.n(l),c=require("underscore"),d=e.n(c),u=require("@visx/event"),p=require("@visx/zoom"),m=require("i18next"),h=e.n(m);const g={en:{translation:JSON.parse('{"Zoom":{"buttons":{"center":"Center","clear":"Clear","reset":"Reset","zoomIn":"+","zoomOut":"-"}}}')}},b=h().createInstance();b.init({debug:!0,fallbackLng:"en",lng:"en",interpolation:{escapeValue:!1},resources:g});var f=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 x=e=>t=>{const{parentWidth:n,parentHeight:r}=t,{scaleXMin:a=.5,scaleXMax:o=4}=t,{scaleYMin:i=.5,scaleYMax:c=4}=t,{initialTransform:d=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,u.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:a,scaleXMax:o,scaleYMin:i,scaleYMax:c,initialTransformMatrix:d},(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})},f.t("Zoom.buttons.zoomIn")),s().createElement("button",{type:"button",className:"btn btn-zoom btn-bottom",onClick:()=>n.scale({scaleX:.8,scaleY:.8})},f.t("Zoom.buttons.zoomOut")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.center},f.t("Zoom.buttons.center")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.reset},f.t("Zoom.buttons.reset")),s().createElement("button",{type:"button",className:"btn btn-lg",onClick:n.clear},f.t("Zoom.buttons.clear"))))))};function v(){return v=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},v.apply(this,arguments)}const E="polar",C="curve",T="line",M="step",z="vertical",w=e=>s().createElement("circle",v({r:e.radius},e)),N=e=>s().createElement("rect",e),L=e=>{const t=(0,l.useRef)(),a=e.parentWidth-e.margin.left-e.margin.right,c=e.parentHeight-e.margin.top-e.margin.bottom,u=(0,l.useMemo)((()=>{let t;return t=e.layout===E?e.linkType===M?o.LinkRadialStep:e.linkType===C?o.LinkRadialCurve:e.linkType===T?o.LinkRadialLine:o.LinkRadial:e.orientation===z?e.linkType===M?o.LinkVerticalStep:e.linkType===C?o.LinkVerticalCurve:e.linkType===T?o.LinkVerticalLine:o.LinkVertical:e.linkType===M?o.LinkHorizontalStep:e.linkType===C?o.LinkHorizontalCurve:e.linkType===T?o.LinkHorizontalLine:o.LinkHorizontal,t}),[e.layout,e.linkType,e.orientation]),p=(0,l.useCallback)(((e,t)=>{let n=t;return e.isExpanded&&(n=d().max(d().map(e.children,(e=>p(e,t+1))))),n}),[]),m=(0,l.useCallback)(((t,n)=>{let r,a;if(e.layout===E){const[e,o]=(0,i.pointRadial)(t,n);r=o,a=e}else e.orientation===z?(r=n,a=t):(r=t,a=n);return{top:r,left:a}}),[e.layout,e.orientation]),h=(0,l.useMemo)((()=>{let t,n,r;const o=p(e.data,1);return e.layout===E?(r={x:a/2,y:c/2},t=2*Math.PI,n=Math.min(a,c)/2*(o/2)):(r={x:0,y:0},e.orientation===z?(t=a,n=c):(t=c,n=a)),{sizeWidth:t,sizeHeight:n,origin:r}}),[p,c,a,e.data,e.layout,e.orientation]),g=(0,l.useCallback)((t=>e.renderNode?e.renderNode(t.data):0===t.depth?s().createElement(w,{fill:"#FF4A4A",onClick:e.onClick&&e.onClick.bind(void 0,t.data)}):s().createElement(N,{fill:"#272b4d",stroke:t.data.children?"#03c0dc":"#26deb0",strokeWidth:1,strokeDasharray:t.data.children?"0":"2,2",strokeOpacity:t.data.children?1:.6,rx:t.data.children?0:10,onClick:e.onClick&&e.onClick.bind(void 0,t.data)})),[e.onClick,e.renderNode]),b=(0,l.useCallback)((t=>e.renderText?e.renderText(t.data):s().createElement("text",{dy:"0.33em",fontSize:e.fontSize,textAnchor:"middle",fill:e.textColor},t.data.name)),[e.renderText]),f=(0,l.useCallback)(((e,t)=>{const{top:r,left:a}=m(e.x,e.y);return s().createElement(n.Group,{top:r,left:a,key:t},g(e),b(e))}),[g,b,e.layout,e.orientation]);return(0,l.useEffect)((()=>{const{current:n}=t;if(n){const t=15,r=n.getElementsByTagName("g");d().each(r,(n=>{const r=d().first(n.getElementsByTagName("circle")),a=d().first(n.getElementsByTagName("rect")),o=d().first(n.getElementsByTagName("text"));if(o){const{height:i}=o.getBBox();if(!o.getElementsByTagName("tspan").length){const l=o.innerHTML.split(/\s+/),s=[];let c=0;for(let t=0;t<l.length;t+=1)if(s[c]||(s[c]=[]),s[c].push(l[t]),t<l.length-1){const r=o.cloneNode();r.innerHTML=[...s[c],l[t+1]].join(" "),n.append(r),r.getBBox().width>e.nodeWidth&&(c+=1),r.remove()}d().each(s,((e,t)=>{const n=document.createElementNS("http://www.w3.org/2000/svg","tspan");n.setAttribute("x","0"),t>0&&n.setAttribute("dy",`${i}px`),n.appendChild(document.createTextNode(e.join(" "))),0===t?o.replaceChildren(n):o.appendChild(n)}));const u=o.getBBox();r&&o?(r.setAttribute("x",u.x-t),r.setAttribute("y",u.y-t),r.setAttribute("r",u.width/2+t)):a&&o&&(a.setAttribute("x",u.x-t),a.setAttribute("y",u.y-t),a.setAttribute("width",u.width+2*t),a.setAttribute("height",u.height+2*t))}}}))}}),[e.data]),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:[h.sizeWidth,h.sizeHeight],separation:(e,t)=>(e.parent===t.parent?1:2)/e.depth},(t=>s().createElement(n.Group,{top:h.origin.y,left:h.origin.x},t.links().map(((t,n)=>s().createElement(u,{key:n,data:t,percent:e.stepPercent,stroke:e.linkColor,strokeWidth:e.linkWidth,fill:"none"}))),d().map(t.descendants(),f)))))))};L.defaultProps={fontSize:12,layout:"cartesian",linkColor:"#B2B09B",linkType:T,linkWidth:1,margin:{top:30,left:30,right:30,bottom:70},nodeWidth:75,offset:0,orientation:"horizontal",stepPercent:.5,textColor:"#FFFFFF"};const S=(0,a.withParentSize)(x(L));S.Circle=w,S.Rectangle=N;var O=S;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),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}();
 //# 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 Circle: ComponentType<any> = (props: any) => (\n  <circle\n    r={props.radius}\n    {...props}\n  />\n);\n\nconst Rectangle: ComponentType<any> = (props: any) => (\n  <rect\n    {...props}\n  />\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  /**\n   * Renders the passed node. If provided, only the \"renderNode\" prop is called.\n   *\n   * @type {(function(*): (*))|*}\n   */\n  const renderNode = useCallback((node) => {\n    if (props.renderNode) {\n      return props.renderNode(node.data);\n    }\n\n    if (node.depth === 0) {\n      return (\n        <Circle\n          fill='#FF4A4A'\n          onClick={props.onClick && props.onClick.bind(this, node.data)}\n        />\n      );\n    }\n\n    return (\n      <Rectangle\n        fill='#272b4d'\n        stroke={node.data.children ? '#03c0dc' : '#26deb0'}\n        strokeWidth={1}\n        strokeDasharray={node.data.children ? '0' : '2,2'}\n        strokeOpacity={node.data.children ? 1 : 0.6}\n        rx={node.data.children ? 0 : 10}\n        onClick={props.onClick && props.onClick.bind(this, node.data)}\n      />\n    );\n  }, [props.onClick, props.renderNode]);\n\n  /**\n   * Renders the text for the passed node.\n   *\n   * @type {(function(*): (*))|*}\n   */\n  const renderText = useCallback((node) => {\n    if (props.renderText) {\n      return props.renderText(node.data);\n    }\n\n    return (\n      <text\n        dy='0.33em'\n        fontSize={props.fontSize}\n        textAnchor='middle'\n        fill={props.textColor}\n      >\n        { node.data.name }\n      </text>\n    );\n  }, [props.renderText]);\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        { renderText(node) }\n      </Group>\n    );\n  }, [renderNode, renderText, props.layout, props.orientation]);\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 padding = 15;\n      const groups = current.getElementsByTagName('g');\n      _.each(groups, (group) => {\n        const circle = _.first(group.getElementsByTagName('circle'));\n        const rect = _.first(group.getElementsByTagName('rect'));\n        const text = _.first(group.getElementsByTagName('text'));\n\n        if (text) {\n          const { height } = text.getBBox();\n\n          if (!text.getElementsByTagName('tspan').length) {\n            const words = text.innerHTML.split(/\\s+/);\n\n            const lines = [];\n            let lineIndex = 0;\n\n            for (let i = 0; i < words.length; i += 1) {\n              // Initialize the line array for the current line\n              if (!lines[lineIndex]) {\n                lines[lineIndex] = [];\n              }\n\n              // Add the current word to the current line\n              lines[lineIndex].push(words[i]);\n\n              // Look ahead to the next word and increment the line index if necessary\n              if (i < words.length - 1) {\n                const testElement = text.cloneNode();\n                testElement.innerHTML = [...lines[lineIndex], words[i + 1]].join(' ');\n                group.append(testElement);\n\n                if (testElement.getBBox().width > props.nodeWidth) {\n                  lineIndex += 1;\n                }\n\n                testElement.remove();\n              }\n            }\n\n            // Append the lines to the text element\n            _.each(lines, (line, index) => {\n              const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');\n              tspan.setAttribute('x', '0');\n              if (index > 0) {\n                tspan.setAttribute('dy', `${height}px`);\n              }\n              tspan.appendChild(document.createTextNode(line.join(' ')));\n\n              if (index === 0) {\n                text.replaceChildren(tspan);\n              } else {\n                text.appendChild(tspan);\n              }\n            });\n\n            // Set the shape attributes based on the text size\n            const bbox = text.getBBox();\n            if (circle && text) {\n              circle.setAttribute('x', bbox.x - padding);\n              circle.setAttribute('y', bbox.y - padding);\n              circle.setAttribute('r', (bbox.width / 2) + padding);\n            } else if (rect && text) {\n              rect.setAttribute('x', bbox.x - padding);\n              rect.setAttribute('y', bbox.y - padding);\n              rect.setAttribute('width', bbox.width + 2 * padding);\n              rect.setAttribute('height', bbox.height + 2 * padding);\n            }\n          }\n        }\n      });\n    }\n  }, [props.data]);\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                top={root.origin.y}\n                left={root.origin.x}\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\ntype TreeGraphType = ComponentType<any> & {\n  Circle: typeof Circle,\n  Rectangle: typeof Rectangle\n};\n\nconst TreeGraphComponent: TreeGraphType = withParentSize(withZoom(TreeGraph));\nTreeGraphComponent.Circle = Circle;\nTreeGraphComponent.Rectangle = Rectangle;\n\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","Circle","r","radius","Rectangle","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","stroke","strokeWidth","strokeDasharray","strokeOpacity","renderText","dy","fontSize","textAnchor","textColor","name","renderGroup","Group","useEffect","current","padding","groups","getElementsByTagName","group","circle","rect","text","getBBox","length","words","innerHTML","split","lines","lineIndex","i","push","testElement","cloneNode","join","append","nodeWidth","remove","line","index","tspan","document","createElementNS","setAttribute","appendChild","createTextNode","replaceChildren","bbox","style","display","flexGrow","offset","containerRef","transform","toString","Tree","hierarchy","size","separation","b","parent","tree","links","map","link","percent","stepPercent","linkColor","linkWidth","descendants","defaultProps","TreeGraphComponent","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  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":""}

package/package.json

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

package/src/components/TreeGraph.js

@@ -71,19 +71,6 @@ const Orientation = {
   vertical: 'vertical'
 };
 
-const Circle: ComponentType<any> = (props: any) => (
-  <circle
-    r={props.radius}
-    {...props}
-  />
-);
-
-const Rectangle: ComponentType<any> = (props: any) => (
-  <rect
-    {...props}
-  />
-);
-
 const TreeGraph = (props: Props) => {
   const ref = useRef();
 
@@ -210,59 +197,14 @@ const TreeGraph = (props: Props) => {
     };
   }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);
 
-  /**
-   * Renders the passed node. If provided, only the "renderNode" prop is called.
-   *
-   * @type {(function(*): (*))|*}
-   */
-  const renderNode = useCallback((node) => {
-    if (props.renderNode) {
-      return props.renderNode(node.data);
-    }
-
-    if (node.depth === 0) {
-      return (
-        <Circle
-          fill='#FF4A4A'
-          onClick={props.onClick && props.onClick.bind(this, node.data)}
-        />
-      );
-    }
-
-    return (
-      <Rectangle
-        fill='#272b4d'
-        stroke={node.data.children ? '#03c0dc' : '#26deb0'}
-        strokeWidth={1}
-        strokeDasharray={node.data.children ? '0' : '2,2'}
-        strokeOpacity={node.data.children ? 1 : 0.6}
-        rx={node.data.children ? 0 : 10}
-        onClick={props.onClick && props.onClick.bind(this, node.data)}
-      />
-    );
-  }, [props.onClick, props.renderNode]);
-
-  /**
-   * Renders the text for the passed node.
-   *
-   * @type {(function(*): (*))|*}
-   */
-  const renderText = useCallback((node) => {
-    if (props.renderText) {
-      return props.renderText(node.data);
-    }
-
-    return (
-      <text
-        dy='0.33em'
-        fontSize={props.fontSize}
-        textAnchor='middle'
-        fill={props.textColor}
-      >
-        { node.data.name }
-      </text>
-    );
-  }, [props.renderText]);
+  const renderNode = useCallback((node) => (
+    <foreignObject
+      width='100%'
+      height='100%'
+    >
+      { props.renderNode(node.data) }
+    </foreignObject>
+  ), [props.renderNode]);
 
   /**
    * Renders the group element for the passed node.
@@ -279,10 +221,9 @@ const TreeGraph = (props: Props) => {
         key={key}
       >
         { renderNode(node) }
-        { renderText(node) }
       </Group>
     );
-  }, [renderNode, renderText, props.layout, props.orientation]);
+  }, [renderNode, props.layout, props.orientation, props.linkType]);
 
   /**
    * Resizes the "circle" and "rect" elements based on the text contained in the group. This effect will also
@@ -291,78 +232,20 @@ const TreeGraph = (props: Props) => {
   useEffect(() => {
     const { current } = ref;
     if (current) {
-      const padding = 15;
       const groups = current.getElementsByTagName('g');
       _.each(groups, (group) => {
-        const circle = _.first(group.getElementsByTagName('circle'));
-        const rect = _.first(group.getElementsByTagName('rect'));
-        const text = _.first(group.getElementsByTagName('text'));
-
-        if (text) {
-          const { height } = text.getBBox();
-
-          if (!text.getElementsByTagName('tspan').length) {
-            const words = text.innerHTML.split(/\s+/);
-
-            const lines = [];
-            let lineIndex = 0;
-
-            for (let i = 0; i < words.length; i += 1) {
-              // Initialize the line array for the current line
-              if (!lines[lineIndex]) {
-                lines[lineIndex] = [];
-              }
-
-              // Add the current word to the current line
-              lines[lineIndex].push(words[i]);
-
-              // Look ahead to the next word and increment the line index if necessary
-              if (i < words.length - 1) {
-                const testElement = text.cloneNode();
-                testElement.innerHTML = [...lines[lineIndex], words[i + 1]].join(' ');
-                group.append(testElement);
+        const object = _.first(group.getElementsByTagName('foreignObject'));
+        const { offsetWidth: width, offsetHeight: height } = object.firstChild;
 
-                if (testElement.getBBox().width > props.nodeWidth) {
-                  lineIndex += 1;
-                }
+        const style = window.getComputedStyle(group);
+        const matrix = new DOMMatrixReadOnly(style.transform);
+        const { m41: translateX, m42: translateY } = matrix;
 
-                testElement.remove();
-              }
-            }
-
-            // Append the lines to the text element
-            _.each(lines, (line, index) => {
-              const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-              tspan.setAttribute('x', '0');
-              if (index > 0) {
-                tspan.setAttribute('dy', `${height}px`);
-              }
-              tspan.appendChild(document.createTextNode(line.join(' ')));
-
-              if (index === 0) {
-                text.replaceChildren(tspan);
-              } else {
-                text.appendChild(tspan);
-              }
-            });
-
-            // Set the shape attributes based on the text size
-            const bbox = text.getBBox();
-            if (circle && text) {
-              circle.setAttribute('x', bbox.x - padding);
-              circle.setAttribute('y', bbox.y - padding);
-              circle.setAttribute('r', (bbox.width / 2) + padding);
-            } else if (rect && text) {
-              rect.setAttribute('x', bbox.x - padding);
-              rect.setAttribute('y', bbox.y - padding);
-              rect.setAttribute('width', bbox.width + 2 * padding);
-              rect.setAttribute('height', bbox.height + 2 * padding);
-            }
-          }
-        }
+        const transform = `translate(${translateX - (width / 2.0)}, ${translateY - (height / 2.0)})`;
+        group.setAttribute('transform', transform);
       });
     }
-  }, [props.data]);
+  }, [props.data, props.layout, props.orientation, props.linkType]);
 
   return (
     <div
@@ -391,8 +274,8 @@ const TreeGraph = (props: Props) => {
           >
             { (tree) => (
               <Group
-                top={root.origin.y}
                 left={root.origin.x}
+                top={root.origin.y}
               >
                 { tree.links().map((link, i) => (
                   <LinkComponent
@@ -433,13 +316,5 @@ TreeGraph.defaultProps = {
   textColor: '#FFFFFF'
 };
 
-type TreeGraphType = ComponentType<any> & {
-  Circle: typeof Circle,
-  Rectangle: typeof Rectangle
-};
-
-const TreeGraphComponent: TreeGraphType = withParentSize(withZoom(TreeGraph));
-TreeGraphComponent.Circle = Circle;
-TreeGraphComponent.Rectangle = Rectangle;
-
+const TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));
 export default TreeGraphComponent;

package/types/components/TreeGraph.js.flow

@@ -71,19 +71,6 @@ const Orientation = {
   vertical: 'vertical'
 };
 
-const Circle: ComponentType<any> = (props: any) => (
-  <circle
-    r={props.radius}
-    {...props}
-  />
-);
-
-const Rectangle: ComponentType<any> = (props: any) => (
-  <rect
-    {...props}
-  />
-);
-
 const TreeGraph = (props: Props) => {
   const ref = useRef();
 
@@ -210,59 +197,14 @@ const TreeGraph = (props: Props) => {
     };
   }, [getMaxDepth, innerHeight, innerWidth, props.data, props.layout, props.orientation]);
 
-  /**
-   * Renders the passed node. If provided, only the "renderNode" prop is called.
-   *
-   * @type {(function(*): (*))|*}
-   */
-  const renderNode = useCallback((node) => {
-    if (props.renderNode) {
-      return props.renderNode(node.data);
-    }
-
-    if (node.depth === 0) {
-      return (
-        <Circle
-          fill='#FF4A4A'
-          onClick={props.onClick && props.onClick.bind(this, node.data)}
-        />
-      );
-    }
-
-    return (
-      <Rectangle
-        fill='#272b4d'
-        stroke={node.data.children ? '#03c0dc' : '#26deb0'}
-        strokeWidth={1}
-        strokeDasharray={node.data.children ? '0' : '2,2'}
-        strokeOpacity={node.data.children ? 1 : 0.6}
-        rx={node.data.children ? 0 : 10}
-        onClick={props.onClick && props.onClick.bind(this, node.data)}
-      />
-    );
-  }, [props.onClick, props.renderNode]);
-
-  /**
-   * Renders the text for the passed node.
-   *
-   * @type {(function(*): (*))|*}
-   */
-  const renderText = useCallback((node) => {
-    if (props.renderText) {
-      return props.renderText(node.data);
-    }
-
-    return (
-      <text
-        dy='0.33em'
-        fontSize={props.fontSize}
-        textAnchor='middle'
-        fill={props.textColor}
-      >
-        { node.data.name }
-      </text>
-    );
-  }, [props.renderText]);
+  const renderNode = useCallback((node) => (
+    <foreignObject
+      width='100%'
+      height='100%'
+    >
+      { props.renderNode(node.data) }
+    </foreignObject>
+  ), [props.renderNode]);
 
   /**
    * Renders the group element for the passed node.
@@ -279,10 +221,9 @@ const TreeGraph = (props: Props) => {
         key={key}
       >
         { renderNode(node) }
-        { renderText(node) }
       </Group>
     );
-  }, [renderNode, renderText, props.layout, props.orientation]);
+  }, [renderNode, props.layout, props.orientation, props.linkType]);
 
   /**
    * Resizes the "circle" and "rect" elements based on the text contained in the group. This effect will also
@@ -291,78 +232,20 @@ const TreeGraph = (props: Props) => {
   useEffect(() => {
     const { current } = ref;
     if (current) {
-      const padding = 15;
       const groups = current.getElementsByTagName('g');
       _.each(groups, (group) => {
-        const circle = _.first(group.getElementsByTagName('circle'));
-        const rect = _.first(group.getElementsByTagName('rect'));
-        const text = _.first(group.getElementsByTagName('text'));
-
-        if (text) {
-          const { height } = text.getBBox();
-
-          if (!text.getElementsByTagName('tspan').length) {
-            const words = text.innerHTML.split(/\s+/);
-
-            const lines = [];
-            let lineIndex = 0;
-
-            for (let i = 0; i < words.length; i += 1) {
-              // Initialize the line array for the current line
-              if (!lines[lineIndex]) {
-                lines[lineIndex] = [];
-              }
-
-              // Add the current word to the current line
-              lines[lineIndex].push(words[i]);
-
-              // Look ahead to the next word and increment the line index if necessary
-              if (i < words.length - 1) {
-                const testElement = text.cloneNode();
-                testElement.innerHTML = [...lines[lineIndex], words[i + 1]].join(' ');
-                group.append(testElement);
+        const object = _.first(group.getElementsByTagName('foreignObject'));
+        const { offsetWidth: width, offsetHeight: height } = object.firstChild;
 
-                if (testElement.getBBox().width > props.nodeWidth) {
-                  lineIndex += 1;
-                }
+        const style = window.getComputedStyle(group);
+        const matrix = new DOMMatrixReadOnly(style.transform);
+        const { m41: translateX, m42: translateY } = matrix;
 
-                testElement.remove();
-              }
-            }
-
-            // Append the lines to the text element
-            _.each(lines, (line, index) => {
-              const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
-              tspan.setAttribute('x', '0');
-              if (index > 0) {
-                tspan.setAttribute('dy', `${height}px`);
-              }
-              tspan.appendChild(document.createTextNode(line.join(' ')));
-
-              if (index === 0) {
-                text.replaceChildren(tspan);
-              } else {
-                text.appendChild(tspan);
-              }
-            });
-
-            // Set the shape attributes based on the text size
-            const bbox = text.getBBox();
-            if (circle && text) {
-              circle.setAttribute('x', bbox.x - padding);
-              circle.setAttribute('y', bbox.y - padding);
-              circle.setAttribute('r', (bbox.width / 2) + padding);
-            } else if (rect && text) {
-              rect.setAttribute('x', bbox.x - padding);
-              rect.setAttribute('y', bbox.y - padding);
-              rect.setAttribute('width', bbox.width + 2 * padding);
-              rect.setAttribute('height', bbox.height + 2 * padding);
-            }
-          }
-        }
+        const transform = `translate(${translateX - (width / 2.0)}, ${translateY - (height / 2.0)})`;
+        group.setAttribute('transform', transform);
       });
     }
-  }, [props.data]);
+  }, [props.data, props.layout, props.orientation, props.linkType]);
 
   return (
     <div
@@ -391,8 +274,8 @@ const TreeGraph = (props: Props) => {
           >
             { (tree) => (
               <Group
-                top={root.origin.y}
                 left={root.origin.x}
+                top={root.origin.y}
               >
                 { tree.links().map((link, i) => (
                   <LinkComponent
@@ -433,13 +316,5 @@ TreeGraph.defaultProps = {
   textColor: '#FFFFFF'
 };
 
-type TreeGraphType = ComponentType<any> & {
-  Circle: typeof Circle,
-  Rectangle: typeof Rectangle
-};
-
-const TreeGraphComponent: TreeGraphType = withParentSize(withZoom(TreeGraph));
-TreeGraphComponent.Circle = Circle;
-TreeGraphComponent.Rectangle = Rectangle;
-
+const TreeGraphComponent: ComponentType<any> = withParentSize(withZoom(TreeGraph));
 export default TreeGraphComponent;