@corva/ui 3.73.0-7 → 3.73.0-rc.0

package/cjs-bundle/components/Drillstring/BHAList/BHAList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BHAList.js","sources":["../../../../../src/components/Drillstring/BHAList/BHAList.js"],"sourcesContent":["import { useState } from 'react';\nimport { shape, arrayOf, string, func, bool } from 'prop-types';\nimport classNames from 'classnames';\nimport { get } from 'lodash';\nimport { Accordion, AccordionDetails, AccordionSummary, Tooltip } from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nimport BHATile from '../BHATile';\n\nimport styles from './styles.css';\n\nimport Counter from '~/components/Counter';\n\nfunction BHAList({\n  isMobile,\n  drillstringsBySection,\n  selectedBha,\n  isMetricsHidden,\n  onSelectBha,\n  contentClassName,\n}) {\n  const [sectionsToggleState, setSectionsToggleState] = useState({});\n\n  const handleToggleSection = targetSection => {\n    setSectionsToggleState(prev => {\n      return {\n        ...prev,\n        [targetSection.name]: !prev[targetSection.name],\n      };\n    });\n  };\n\n  return (\n    <div className={styles.bhaListContainer}>\n      <div className={classNames(styles.bhaList, contentClassName)}>\n        {drillstringsBySection.map(section => (\n          <Tooltip\n            key={section.name}\n            title={section?.drillstrings?.length === 0 ? 'No BHA in section' : ''}\n            placement=\"bottom-start\"\n          >\n            <Accordion\n              expanded={!sectionsToggleState[section.name]}\n              disabled={section?.drillstrings?.length === 0}\n              classes={{ root: styles.accordionRoot }}\n              onChange={() => handleToggleSection(section)}\n            >\n              <AccordionSummary\n                expandIcon={<ExpandMoreIcon />}\n                classes={{\n                  root: styles.accordionSummaryRoot,\n                  content: styles.accordionSummaryContent,\n                }}\n              >\n                {section.name}\n                <Counter\n                  size=\"medium\"\n                  label={section?.drillstrings.length}\n                  className={styles.counter}\n                />\n              </AccordionSummary>\n              <AccordionDetails>\n                <div className={styles.sectionContent}>\n                  {section.drillstrings.map(drillstring => (\n                    <div key={get(drillstring, '_id')} className={styles.tileWrapper}>\n                      <BHATile\n                        drillstring={drillstring}\n                        isSelected={get(selectedBha, '_id') === get(drillstring, '_id')}\n                        isMetricsHidden={isMetricsHidden}\n                        onSelect={onSelectBha}\n                        isMobile={isMobile}\n                      />\n                    </div>\n                  ))}\n                </div>\n              </AccordionDetails>\n            </Accordion>\n          </Tooltip>\n        ))}\n      </div>\n      <div\n        className={classNames(styles.bottomGradient, { [styles.bottomGradientMobile]: isMobile })}\n      />\n    </div>\n  );\n}\n\nBHAList.propTypes = {\n  isMobile: bool,\n  drillstringsBySection: arrayOf(\n    shape({\n      name: string,\n      drillstrings: arrayOf(\n        shape({\n          _id: string,\n          data: shape({}),\n        })\n      ),\n    })\n  ),\n  selectedBha: shape({ _id: string }),\n  isMetricsHidden: bool,\n  onSelectBha: func.isRequired,\n  contentClassName: string,\n};\n\nBHAList.defaultProps = {\n  isMobile: false,\n  drillstringsBySection: [],\n  selectedBha: null,\n  isMetricsHidden: true,\n  contentClassName: null,\n};\n\nexport default BHAList;\n"],"names":["BHAList","_ref","isMobile","drillstringsBySection","selectedBha","isMetricsHidden","onSelectBha","contentClassName","_useState","useState","_useState2","_slicedToArray","sectionsToggleState","setSectionsToggleState","_jsxs","className","styles","bhaListContainer","children","_jsx","jsx","classNames","bhaList","map","section","_section$drillstrings","_section$drillstrings2","Tooltip","title","drillstrings","length","placement","Accordion","expanded","name","disabled","classes","root","accordionRoot","onChange","targetSection","prev","_objectSpread","_defineProperty","AccordionSummary","expandIcon","ExpandMoreIcon","accordionSummaryRoot","content","accordionSummaryContent","Counter","size","label","counter","AccordionDetails","sectionContent","drillstring","tileWrapper","BHATile","isSelected","get","onSelect","bottomGradient","bottomGradientMobile","propTypes","bool","arrayOf","shape","string","_id","data","func","isRequired","defaultProps"],"mappings":"ykCAaA,SAASA,EAONC,GAAA,IANDC,IAAAA,SACAC,IAAAA,sBACAC,IAAAA,YACAC,IAAAA,gBACAC,IAAAA,YACAC,IAAAA,iBAEAC,EAAsDC,EAAQA,SAAC,IAAGC,EAAAC,EAAAA,QAAAH,EAAA,GAA3DI,EAAmBF,EAAA,GAAEG,EAAsBH,EAAA,GAWlD,OACEI,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOC,iBAAiBC,SACtC,CAAAC,EAAAC,IAAA,MAAA,CAAKL,UAAWM,EAAU,QAACL,EAAOM,QAASf,GAAkBW,SAC1Df,EAAsBoB,KAAI,SAAAC,GAAO,IAAAC,EAAAC,EAAA,OAChCP,EAAAA,IAACQ,EAAAA,QAAO,CAENC,MAAyC,KAAlCJ,SAAqB,UAArBA,EAASK,oBAAY,IAAAJ,SAArBA,EAAuBK,QAAe,oBAAsB,GACnEC,UAAU,eAAcb,SAExBJ,OAACkB,YAAS,CACRC,UAAWrB,EAAoBY,EAAQU,MACvCC,SAA4C,KAAlCX,SAAqB,QAAdE,EAAPF,EAASK,oBAAY,IAAAH,OAAd,EAAPA,EAAuBI,QACjCM,QAAS,CAAEC,KAAMrB,EAAOsB,eACxBC,SAAU,WAAA,OAtBMC,EAsBoBhB,OArB9CX,GAAuB,SAAA4B,GACrB,OAAAC,EAAAA,EAAA,CAAA,EACKD,GAAI,CAAA,EAAAE,EAAA,QAAA,CAAA,EACNH,EAAcN,MAAQO,EAAKD,EAAcN,OAE9C,IAN0B,IAAAM,CAsB6B,EAAAtB,SAAA,CAE7CJ,OAAC8B,mBAAgB,CACfC,WAAY1B,EAAAA,IAAC2B,EAAc,QAAI,IAC/BV,QAAS,CACPC,KAAMrB,EAAO+B,qBACbC,QAAShC,EAAOiC,yBAChB/B,SAAA,CAEDM,EAAQU,KACTf,EAAAA,IAAC+B,EAAO,CACNC,KAAK,SACLC,MAAO5B,eAAAA,EAASK,aAAaC,OAC7Bf,UAAWC,EAAOqC,aAGtBlC,MAACmC,mBAAgB,CAAApC,SACfC,EAAAC,IAAA,MAAA,CAAKL,UAAWC,EAAOuC,eAAerC,SACnCM,EAAQK,aAAaN,KAAI,SAAAiC,GAAW,OACnCrC,EAAAA,IAAA,MAAA,CAAmCJ,UAAWC,EAAOyC,YAAYvC,SAC/DC,MAACuC,EAAO,CACNF,YAAaA,EACbG,WAAYC,EAAGA,IAACxD,EAAa,SAAWwD,EAAGA,IAACJ,EAAa,OACzDnD,gBAAiBA,EACjBwD,SAAUvD,EACVJ,SAAUA,KANJ0D,MAAIJ,EAAa,mBA3B9BhC,EAAQU,WA2CnBf,EAAAC,IAAA,MAAA,CACEL,UAAWM,EAAAA,QAAWL,EAAO8C,eAAcnB,EAAAA,QAAA,CAAA,EAAK3B,EAAO+C,qBAAuB7D,QAItF,CAEAF,EAAQgE,UAAY,CAClB9D,SAAU+D,EAAIA,KACd9D,sBAAuB+D,EAAOA,QAC5BC,QAAM,CACJjC,KAAMkC,EAAMA,OACZvC,aAAcqC,EAAOA,QACnBC,QAAM,CACJE,IAAKD,EAAMA,OACXE,KAAMH,EAAKA,MAAC,UAKpB/D,YAAa+D,EAAAA,MAAM,CAAEE,IAAKD,EAAAA,SAC1B/D,gBAAiB4D,EAAIA,KACrB3D,YAAaiE,EAAIA,KAACC,WAClBjE,iBAAkB6D,EAAAA,QAGpBpE,EAAQyE,aAAe,CACrBvE,UAAU,EACVC,sBAAuB,GACvBC,YAAa,KACbC,iBAAiB,EACjBE,iBAAkB"}
+{"version":3,"file":"BHAList.js","sources":["../../../../../src/components/Drillstring/BHAList/BHAList.js"],"sourcesContent":["import { useState } from 'react';\nimport { shape, arrayOf, string, func, bool } from 'prop-types';\nimport classNames from 'classnames';\nimport { get } from 'lodash';\nimport { Accordion, AccordionDetails, AccordionSummary, Tooltip } from '@material-ui/core';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\n\nimport BHATile from '../BHATile';\n\nimport styles from './styles.css';\n\nimport Counter from '~/components/Counter';\n\nfunction BHAList({\n  isMobile = false,\n  drillstringsBySection = DEFAULT_BHALIST_DRILLSTRINGS_BY_SECTION,\n  selectedBha = null,\n  isMetricsHidden = true,\n  onSelectBha,\n  contentClassName = null,\n}) {\n  const [sectionsToggleState, setSectionsToggleState] = useState({});\n\n  const handleToggleSection = targetSection => {\n    setSectionsToggleState(prev => {\n      return {\n        ...prev,\n        [targetSection.name]: !prev[targetSection.name],\n      };\n    });\n  };\n\n  return (\n    <div className={styles.bhaListContainer}>\n      <div className={classNames(styles.bhaList, contentClassName)}>\n        {drillstringsBySection.map(section => (\n          <Tooltip\n            key={section.name}\n            title={section?.drillstrings?.length === 0 ? 'No BHA in section' : ''}\n            placement=\"bottom-start\"\n          >\n            <Accordion\n              expanded={!sectionsToggleState[section.name]}\n              disabled={section?.drillstrings?.length === 0}\n              classes={{ root: styles.accordionRoot }}\n              onChange={() => handleToggleSection(section)}\n            >\n              <AccordionSummary\n                expandIcon={<ExpandMoreIcon />}\n                classes={{\n                  root: styles.accordionSummaryRoot,\n                  content: styles.accordionSummaryContent,\n                }}\n              >\n                {section.name}\n                <Counter\n                  size=\"medium\"\n                  label={section?.drillstrings.length}\n                  className={styles.counter}\n                />\n              </AccordionSummary>\n              <AccordionDetails>\n                <div className={styles.sectionContent}>\n                  {section.drillstrings.map(drillstring => (\n                    <div key={get(drillstring, '_id')} className={styles.tileWrapper}>\n                      <BHATile\n                        drillstring={drillstring}\n                        isSelected={get(selectedBha, '_id') === get(drillstring, '_id')}\n                        isMetricsHidden={isMetricsHidden}\n                        onSelect={onSelectBha}\n                        isMobile={isMobile}\n                      />\n                    </div>\n                  ))}\n                </div>\n              </AccordionDetails>\n            </Accordion>\n          </Tooltip>\n        ))}\n      </div>\n      <div\n        className={classNames(styles.bottomGradient, { [styles.bottomGradientMobile]: isMobile })}\n      />\n    </div>\n  );\n}\n\nBHAList.propTypes = {\n  isMobile: bool,\n  drillstringsBySection: arrayOf(\n    shape({\n      name: string,\n      drillstrings: arrayOf(\n        shape({\n          _id: string,\n          data: shape({}),\n        })\n      ),\n    })\n  ),\n  selectedBha: shape({ _id: string }),\n  isMetricsHidden: bool,\n  onSelectBha: func.isRequired,\n  contentClassName: string,\n};\n\nconst DEFAULT_BHALIST_DRILLSTRINGS_BY_SECTION = [];\n\nexport default BHAList;\n"],"names":["BHAList","_ref","_ref$isMobile","isMobile","_ref$drillstringsBySe","drillstringsBySection","DEFAULT_BHALIST_DRILLSTRINGS_BY_SECTION","_ref$selectedBha","selectedBha","_ref$isMetricsHidden","isMetricsHidden","onSelectBha","_ref$contentClassName","contentClassName","_useState","useState","_useState2","_slicedToArray","sectionsToggleState","setSectionsToggleState","_jsxs","className","styles","bhaListContainer","children","_jsx","jsx","classNames","bhaList","map","section","_section$drillstrings","_section$drillstrings2","Tooltip","title","drillstrings","length","placement","Accordion","expanded","name","disabled","classes","root","accordionRoot","onChange","targetSection","prev","_objectSpread","_defineProperty","AccordionSummary","expandIcon","ExpandMoreIcon","accordionSummaryRoot","content","accordionSummaryContent","Counter","size","label","counter","AccordionDetails","sectionContent","drillstring","tileWrapper","BHATile","isSelected","get","onSelect","bottomGradient","bottomGradientMobile","propTypes","bool","arrayOf","shape","string","_id","data","func","isRequired"],"mappings":"ykCAaA,SAASA,EAONC,GAAA,IAAAC,EAAAD,EANDE,SAAAA,cAAgBD,EAAAE,EAAAH,EAChBI,sBAAAA,aAAwBC,EAAuCF,EAAAG,EAAAN,EAC/DO,YAAAA,aAAc,KAAID,EAAAE,EAAAR,EAClBS,gBAAAA,cAAsBD,EACtBE,IAAAA,YAAWC,EAAAX,EACXY,iBAAAA,aAAmB,KAAID,EAEvBE,EAAsDC,EAAQA,SAAC,IAAGC,EAAAC,EAAAA,QAAAH,EAAA,GAA3DI,EAAmBF,EAAA,GAAEG,EAAsBH,EAAA,GAWlD,OACEI,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOC,iBAAiBC,SACtC,CAAAC,EAAAC,IAAA,MAAA,CAAKL,UAAWM,EAAU,QAACL,EAAOM,QAASf,GAAkBW,SAC1DnB,EAAsBwB,KAAI,SAAAC,GAAO,IAAAC,EAAAC,EAAA,OAChCP,EAAAA,IAACQ,EAAAA,QAAO,CAENC,MAAyC,KAAlCJ,SAAqB,UAArBA,EAASK,oBAAY,IAAAJ,SAArBA,EAAuBK,QAAe,oBAAsB,GACnEC,UAAU,eAAcb,SAExBJ,OAACkB,YAAS,CACRC,UAAWrB,EAAoBY,EAAQU,MACvCC,SAA4C,KAAlCX,SAAqB,QAAdE,EAAPF,EAASK,oBAAY,IAAAH,OAAd,EAAPA,EAAuBI,QACjCM,QAAS,CAAEC,KAAMrB,EAAOsB,eACxBC,SAAU,WAAA,OAtBMC,EAsBoBhB,OArB9CX,GAAuB,SAAA4B,GACrB,OAAAC,EAAAA,EAAA,CAAA,EACKD,GAAI,CAAA,EAAAE,EAAA,QAAA,CAAA,EACNH,EAAcN,MAAQO,EAAKD,EAAcN,OAE9C,IAN0B,IAAAM,CAsB6B,EAAAtB,SAAA,CAE7CJ,OAAC8B,mBAAgB,CACfC,WAAY1B,EAAAA,IAAC2B,EAAc,QAAI,IAC/BV,QAAS,CACPC,KAAMrB,EAAO+B,qBACbC,QAAShC,EAAOiC,yBAChB/B,SAAA,CAEDM,EAAQU,KACTf,EAAAA,IAAC+B,EAAO,CACNC,KAAK,SACLC,MAAO5B,eAAAA,EAASK,aAAaC,OAC7Bf,UAAWC,EAAOqC,aAGtBlC,MAACmC,mBAAgB,CAAApC,SACfC,EAAAC,IAAA,MAAA,CAAKL,UAAWC,EAAOuC,eAAerC,SACnCM,EAAQK,aAAaN,KAAI,SAAAiC,GAAW,OACnCrC,EAAAA,IAAA,MAAA,CAAmCJ,UAAWC,EAAOyC,YAAYvC,SAC/DC,MAACuC,EAAO,CACNF,YAAaA,EACbG,WAAYC,EAAGA,IAAC1D,EAAa,SAAW0D,EAAGA,IAACJ,EAAa,OACzDpD,gBAAiBA,EACjByD,SAAUxD,EACVR,SAAUA,KANJ+D,MAAIJ,EAAa,mBA3B9BhC,EAAQU,WA2CnBf,EAAAC,IAAA,MAAA,CACEL,UAAWM,EAAAA,QAAWL,EAAO8C,eAAcnB,EAAAA,QAAA,CAAA,EAAK3B,EAAO+C,qBAAuBlE,QAItF,CAEAH,EAAQsE,UAAY,CAClBnE,SAAUoE,EAAIA,KACdlE,sBAAuBmE,EAAOA,QAC5BC,QAAM,CACJjC,KAAMkC,EAAMA,OACZvC,aAAcqC,EAAOA,QACnBC,QAAM,CACJE,IAAKD,EAAMA,OACXE,KAAMH,EAAKA,MAAC,UAKpBjE,YAAaiE,EAAAA,MAAM,CAAEE,IAAKD,EAAAA,SAC1BhE,gBAAiB6D,EAAIA,KACrB5D,YAAakE,EAAIA,KAACC,WAClBjE,iBAAkB6D,EAAAA,QAGpB,IAAMpE,EAA0C"}

package/cjs-bundle/components/Drillstring/BHASchematic.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("react"),i=require("prop-types"),r=require("react/jsx-runtime");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),h=l(i),c="#239FE6",n="#085EDF",s="#C208DF",u="yellow",o="#8398A5",f="#dd375e",d="#44ff44";function p(e){var i=e.schematic,l=e.containerWidth,h=e.containerHeight,p=t.useRef(),y=t.useRef();t.useEffect((function(){var e=p.current,t=e.getContext("2d"),r=y.current,l=r.clientWidth,h=r.clientHeight;e.width=l-8,e.height=h,e.style.width="".concat(l-8,"px"),e.style.height="".concat(h,"px");var g=i.filter((function(e){return["bit","stabilizer","ags","ur"].includes(e.family)})).length,b=i.filter((function(e){return["pdm","rss"].includes(e.family)})).length,x=(l-6*g)/(i.filter((function(e){return"other"===e.family})).length+2*b),m=[],w=0;a.default(i).reverse().forEach((function(e){var t=0;switch(t=["bit","stabilizer","ags","ur"].includes(e.family)?6:["pdm","rss"].includes(e.family)?2*x:x,e.family){case"bit":m.push({type:"rect",x:w,y:h/2-6,width:t,height:12,fillColor:"pdc"===e.bitType?c:n});break;case"ur":m.push({type:"rect",x:w,y:h/2-6,width:t,height:12,fillColor:d});break;case"pdm":e.hasStabilizer?m.push({type:"rect",x:w+(t/2-3),y:h/2-6,width:6,height:12,fillColor:u},{type:"rect",x:w,y:h/2-2,width:t,height:4,fillColor:s}):m.push({type:"rect",x:w,y:h/2-2,width:t,height:4,fillColor:s});break;case"rss":m.push({type:"rect",x:w,y:h/2-2,width:t,height:4,fillColor:f});break;case"stabilizer":case"ags":m.push({type:"rect",x:w,y:h/2-6,width:t,height:12,fillColor:u});break;case"other":m.push({type:"rect",x:w,y:h/2-2,width:t,height:4,fillColor:o})}w+=t})),m.forEach((function(e){t.fillStyle=e.fillColor,t.fillRect(e.x,e.y,e.width,e.height)}))}));var g={width:l?"".concat(l,"px"):"100%",height:h?"".concat(h,"px"):"100%"};return r.jsx("div",{ref:y,style:g,children:r.jsx("canvas",{ref:p})})}p.propTypes={containerWidth:h.default.number,containerHeight:h.default.number,schematic:h.default.arrayOf(h.default.shape({})).isRequired},p.defaultProps={containerWidth:null,containerHeight:null},module.exports=p;
+"use strict";var e=require("@babel/runtime/helpers/toConsumableArray"),t=require("react"),i=require("prop-types"),r=require("react/jsx-runtime");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=l(e),a=l(i),c="#239FE6",n="#085EDF",s="#C208DF",u="yellow",o="#8398A5",f="#dd375e",d="#44ff44";function p(e){var i=e.schematic,l=e.containerWidth,a=void 0===l?null:l,p=e.containerHeight,y=void 0===p?null:p,g=t.useRef(),b=t.useRef();t.useEffect((function(){var e=g.current,t=e.getContext("2d"),r=b.current,l=r.clientWidth,a=r.clientHeight;e.width=l-8,e.height=a,e.style.width="".concat(l-8,"px"),e.style.height="".concat(a,"px");var p=i.filter((function(e){return["bit","stabilizer","ags","ur"].includes(e.family)})).length,y=i.filter((function(e){return["pdm","rss"].includes(e.family)})).length,x=(l-6*p)/(i.filter((function(e){return"other"===e.family})).length+2*y),m=[],w=0;h.default(i).reverse().forEach((function(e){var t=0;switch(t=["bit","stabilizer","ags","ur"].includes(e.family)?6:["pdm","rss"].includes(e.family)?2*x:x,e.family){case"bit":m.push({type:"rect",x:w,y:a/2-6,width:t,height:12,fillColor:"pdc"===e.bitType?c:n});break;case"ur":m.push({type:"rect",x:w,y:a/2-6,width:t,height:12,fillColor:d});break;case"pdm":e.hasStabilizer?m.push({type:"rect",x:w+(t/2-3),y:a/2-6,width:6,height:12,fillColor:u},{type:"rect",x:w,y:a/2-2,width:t,height:4,fillColor:s}):m.push({type:"rect",x:w,y:a/2-2,width:t,height:4,fillColor:s});break;case"rss":m.push({type:"rect",x:w,y:a/2-2,width:t,height:4,fillColor:f});break;case"stabilizer":case"ags":m.push({type:"rect",x:w,y:a/2-6,width:t,height:12,fillColor:u});break;case"other":m.push({type:"rect",x:w,y:a/2-2,width:t,height:4,fillColor:o})}w+=t})),m.forEach((function(e){t.fillStyle=e.fillColor,t.fillRect(e.x,e.y,e.width,e.height)}))}));var x={width:a?"".concat(a,"px"):"100%",height:y?"".concat(y,"px"):"100%"};return r.jsx("div",{ref:b,style:x,children:r.jsx("canvas",{ref:g})})}p.propTypes={containerWidth:a.default.number,containerHeight:a.default.number,schematic:a.default.arrayOf(a.default.shape({})).isRequired},module.exports=p;
 //# sourceMappingURL=BHASchematic.js.map

package/cjs-bundle/components/Drillstring/BHASchematic.js.map

@@ -1 +1 @@
-{"version":3,"file":"BHASchematic.js","sources":["../../../../src/components/Drillstring/BHASchematic.js"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst COLORS = {\n  pdcBit: '#239FE6',\n  triconeBit: '#085EDF',\n  pdm: '#C208DF',\n  stabilizer: 'yellow',\n  other: '#8398A5',\n  rss: '#dd375e',\n  ur: '#44ff44',\n};\n\nconst BIT_WIDTH = 6;\nconst PDM_HEIGHT = 4;\nconst HORIZONTAL_MARGIN = 8;\n\nfunction BHASchematic({ schematic, containerWidth, containerHeight }) {\n  const canvasRef = useRef();\n  const containerRef = useRef();\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const context = canvas.getContext('2d');\n\n    const { clientWidth: width, clientHeight: height } = containerRef.current;\n\n    canvas.width = width - HORIZONTAL_MARGIN;\n    canvas.height = height;\n    canvas.style.width = `${width - HORIZONTAL_MARGIN}px`;\n    canvas.style.height = `${height}px`;\n\n    // NOTE: Count each comonents by family\n    const bitStabCount = schematic.filter(item =>\n      ['bit', 'stabilizer', 'ags', 'ur'].includes(item.family)\n    ).length;\n    const pdmRssCount = schematic.filter(item => ['pdm', 'rss'].includes(item.family)).length;\n    const nonMagCount = schematic.filter(item => item.family === 'other').length;\n\n    // NOTE: Bit, Stabilizer --> width: 12px\n    // Pdm, rss length ---> Non mag length * 2\n    const nonMagLength = (width - BIT_WIDTH * bitStabCount) / (nonMagCount + pdmRssCount * 2);\n\n    const dataToDraw = [];\n    let x = 0;\n    [...schematic].reverse().forEach(item => {\n      let barWidth = 0;\n      if (['bit', 'stabilizer', 'ags', 'ur'].includes(item.family)) {\n        barWidth = BIT_WIDTH;\n      } else if (['pdm', 'rss'].includes(item.family)) {\n        barWidth = nonMagLength * 2;\n      } else {\n        barWidth = nonMagLength;\n      }\n\n      switch (item.family) {\n        case 'bit':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: item.bitType === 'pdc' ? COLORS.pdcBit : COLORS.triconeBit,\n          });\n          break;\n        case 'ur':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: COLORS.ur,\n          });\n          break;\n        case 'pdm':\n          if (item.hasStabilizer) {\n            dataToDraw.push(\n              {\n                type: 'rect',\n                x: x + (barWidth / 2 - BIT_WIDTH / 2),\n                y: height / 2 - BIT_WIDTH,\n                width: BIT_WIDTH,\n                height: BIT_WIDTH * 2,\n                fillColor: COLORS.stabilizer,\n              },\n              {\n                type: 'rect',\n                x,\n                y: height / 2 - PDM_HEIGHT / 2,\n                width: barWidth,\n                height: PDM_HEIGHT,\n                fillColor: COLORS.pdm,\n              }\n            );\n          } else {\n            dataToDraw.push({\n              type: 'rect',\n              x,\n              y: height / 2 - PDM_HEIGHT / 2,\n              width: barWidth,\n              height: PDM_HEIGHT,\n              fillColor: COLORS.pdm,\n            });\n          }\n          break;\n        case 'rss':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - PDM_HEIGHT / 2,\n            width: barWidth,\n            height: PDM_HEIGHT,\n            fillColor: COLORS.rss,\n          });\n          break;\n        case 'stabilizer':\n        case 'ags':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: COLORS.stabilizer,\n          });\n          break;\n        case 'other':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - PDM_HEIGHT / 2,\n            width: barWidth,\n            height: PDM_HEIGHT,\n            fillColor: COLORS.other,\n          });\n          break;\n        default:\n          break;\n      }\n\n      x += barWidth;\n    });\n\n    dataToDraw.forEach(item => {\n      context.fillStyle = item.fillColor;\n      context.fillRect(item.x, item.y, item.width, item.height);\n    });\n  });\n\n  const containerStyle = {\n    width: containerWidth ? `${containerWidth}px` : '100%',\n    height: containerHeight ? `${containerHeight}px` : '100%',\n  };\n\n  return (\n    <div ref={containerRef} style={containerStyle}>\n      <canvas ref={canvasRef} />\n    </div>\n  );\n}\n\nBHASchematic.propTypes = {\n  containerWidth: PropTypes.number,\n  containerHeight: PropTypes.number,\n  schematic: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n};\n\nBHASchematic.defaultProps = {\n  containerWidth: null,\n  containerHeight: null,\n};\n\nexport default BHASchematic;\n"],"names":["COLORS","BHASchematic","_ref","schematic","containerWidth","containerHeight","canvasRef","useRef","containerRef","useEffect","canvas","current","context","getContext","width","clientWidth","height","clientHeight","style","concat","bitStabCount","filter","item","includes","family","length","pdmRssCount","nonMagLength","dataToDraw","x","_toConsumableArray","reverse","forEach","barWidth","push","type","y","BIT_WIDTH","fillColor","bitType","hasStabilizer","PDM_HEIGHT","fillStyle","fillRect","containerStyle","_jsx","ref","children","jsx","propTypes","PropTypes","number","arrayOf","shape","isRequired","defaultProps"],"mappings":"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"}
+{"version":3,"file":"BHASchematic.js","sources":["../../../../src/components/Drillstring/BHASchematic.js"],"sourcesContent":["import { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst COLORS = {\n  pdcBit: '#239FE6',\n  triconeBit: '#085EDF',\n  pdm: '#C208DF',\n  stabilizer: 'yellow',\n  other: '#8398A5',\n  rss: '#dd375e',\n  ur: '#44ff44',\n};\n\nconst BIT_WIDTH = 6;\nconst PDM_HEIGHT = 4;\nconst HORIZONTAL_MARGIN = 8;\n\nfunction BHASchematic({ schematic, containerWidth = null, containerHeight = null }) {\n  const canvasRef = useRef();\n  const containerRef = useRef();\n\n  useEffect(() => {\n    const canvas = canvasRef.current;\n    const context = canvas.getContext('2d');\n\n    const { clientWidth: width, clientHeight: height } = containerRef.current;\n\n    canvas.width = width - HORIZONTAL_MARGIN;\n    canvas.height = height;\n    canvas.style.width = `${width - HORIZONTAL_MARGIN}px`;\n    canvas.style.height = `${height}px`;\n\n    // NOTE: Count each comonents by family\n    const bitStabCount = schematic.filter(item =>\n      ['bit', 'stabilizer', 'ags', 'ur'].includes(item.family)\n    ).length;\n    const pdmRssCount = schematic.filter(item => ['pdm', 'rss'].includes(item.family)).length;\n    const nonMagCount = schematic.filter(item => item.family === 'other').length;\n\n    // NOTE: Bit, Stabilizer --> width: 12px\n    // Pdm, rss length ---> Non mag length * 2\n    const nonMagLength = (width - BIT_WIDTH * bitStabCount) / (nonMagCount + pdmRssCount * 2);\n\n    const dataToDraw = [];\n    let x = 0;\n    [...schematic].reverse().forEach(item => {\n      let barWidth = 0;\n      if (['bit', 'stabilizer', 'ags', 'ur'].includes(item.family)) {\n        barWidth = BIT_WIDTH;\n      } else if (['pdm', 'rss'].includes(item.family)) {\n        barWidth = nonMagLength * 2;\n      } else {\n        barWidth = nonMagLength;\n      }\n\n      switch (item.family) {\n        case 'bit':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: item.bitType === 'pdc' ? COLORS.pdcBit : COLORS.triconeBit,\n          });\n          break;\n        case 'ur':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: COLORS.ur,\n          });\n          break;\n        case 'pdm':\n          if (item.hasStabilizer) {\n            dataToDraw.push(\n              {\n                type: 'rect',\n                x: x + (barWidth / 2 - BIT_WIDTH / 2),\n                y: height / 2 - BIT_WIDTH,\n                width: BIT_WIDTH,\n                height: BIT_WIDTH * 2,\n                fillColor: COLORS.stabilizer,\n              },\n              {\n                type: 'rect',\n                x,\n                y: height / 2 - PDM_HEIGHT / 2,\n                width: barWidth,\n                height: PDM_HEIGHT,\n                fillColor: COLORS.pdm,\n              }\n            );\n          } else {\n            dataToDraw.push({\n              type: 'rect',\n              x,\n              y: height / 2 - PDM_HEIGHT / 2,\n              width: barWidth,\n              height: PDM_HEIGHT,\n              fillColor: COLORS.pdm,\n            });\n          }\n          break;\n        case 'rss':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - PDM_HEIGHT / 2,\n            width: barWidth,\n            height: PDM_HEIGHT,\n            fillColor: COLORS.rss,\n          });\n          break;\n        case 'stabilizer':\n        case 'ags':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - BIT_WIDTH,\n            width: barWidth,\n            height: BIT_WIDTH * 2,\n            fillColor: COLORS.stabilizer,\n          });\n          break;\n        case 'other':\n          dataToDraw.push({\n            type: 'rect',\n            x,\n            y: height / 2 - PDM_HEIGHT / 2,\n            width: barWidth,\n            height: PDM_HEIGHT,\n            fillColor: COLORS.other,\n          });\n          break;\n        default:\n          break;\n      }\n\n      x += barWidth;\n    });\n\n    dataToDraw.forEach(item => {\n      context.fillStyle = item.fillColor;\n      context.fillRect(item.x, item.y, item.width, item.height);\n    });\n  });\n\n  const containerStyle = {\n    width: containerWidth ? `${containerWidth}px` : '100%',\n    height: containerHeight ? `${containerHeight}px` : '100%',\n  };\n\n  return (\n    <div ref={containerRef} style={containerStyle}>\n      <canvas ref={canvasRef} />\n    </div>\n  );\n}\n\nBHASchematic.propTypes = {\n  containerWidth: PropTypes.number,\n  containerHeight: PropTypes.number,\n  schematic: PropTypes.arrayOf(PropTypes.shape({})).isRequired,\n};\n\nexport default BHASchematic;\n"],"names":["COLORS","BHASchematic","_ref","schematic","_ref$containerWidth","containerWidth","_ref$containerHeight","containerHeight","canvasRef","useRef","containerRef","useEffect","canvas","current","context","getContext","width","clientWidth","height","clientHeight","style","concat","bitStabCount","filter","item","includes","family","length","pdmRssCount","nonMagLength","dataToDraw","x","_toConsumableArray","reverse","forEach","barWidth","push","type","y","BIT_WIDTH","fillColor","bitType","hasStabilizer","PDM_HEIGHT","fillStyle","fillRect","containerStyle","_jsx","ref","children","jsx","propTypes","PropTypes","number","arrayOf","shape","isRequired"],"mappings":"2OAGMA,EACI,UADJA,EAEQ,UAFRA,EAGC,UAHDA,EAIQ,SAJRA,EAKG,UALHA,EAMC,UANDA,EAOA,UAON,SAASC,EAA2EC,GAAA,IAA5DC,IAAAA,UAASC,EAAAF,EAAEG,eAAAA,aAAiB,KAAID,EAAAE,EAAAJ,EAAEK,gBAAAA,aAAkB,KAAID,EACxEE,EAAYC,EAAAA,SACZC,EAAeD,EAAAA,SAErBE,EAAAA,WAAU,WACR,IAAMC,EAASJ,EAAUK,QACnBC,EAAUF,EAAOG,WAAW,MAEmBL,EAAAA,EAAaG,QAA7CG,IAAbC,YAAkCC,IAAdC,aAE5BP,EAAOI,MAAQA,EAZO,EAatBJ,EAAOM,OAASA,EAChBN,EAAOQ,MAAMJ,gBAAWA,EAdF,EAc+B,MACrDJ,EAAOQ,MAAMF,OAAM,GAAAG,OAAMH,EAAU,MAGnC,IAAMI,EAAenB,EAAUoB,QAAO,SAAAC,GAAI,MACxC,CAAC,MAAO,aAAc,MAAO,MAAMC,SAASD,EAAKE,OAAO,IACxDC,OACIC,EAAczB,EAAUoB,QAAO,SAAAC,GAAI,MAAI,CAAC,MAAO,OAAOC,SAASD,EAAKE,OAAO,IAAEC,OAK7EE,GAAgBb,EA5BR,EA4B4BM,IAJtBnB,EAAUoB,QAAO,SAAAC,GAAI,MAAoB,UAAhBA,EAAKE,MAAkB,IAAEC,OAIiB,EAAdC,GAEnEE,EAAa,GACfC,EAAI,EACRC,EAAI7B,QAAAA,GAAW8B,UAAUC,SAAQ,SAAAV,GAC/B,IAAIW,EAAW,EASf,OAPEA,EADE,CAAC,MAAO,aAAc,MAAO,MAAMV,SAASD,EAAKE,QAlCzC,EAoCD,CAAC,MAAO,OAAOD,SAASD,EAAKE,QACZ,EAAfG,EAEAA,EAGLL,EAAKE,QACX,IAAK,MACHI,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EA/CN,EAgDNF,MAAOmB,EACPjB,OAAQqB,GACRC,UAA4B,QAAjBhB,EAAKiB,QAAoBzC,EAAgBA,IAEtD,MACF,IAAK,KACH8B,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EAzDN,EA0DNF,MAAOmB,EACPjB,OAAQqB,GACRC,UAAWxC,IAEb,MACF,IAAK,MACCwB,EAAKkB,cACPZ,EAAWM,KACT,CACEC,KAAM,OACNN,EAAGA,GAAKI,EAAW,EAAII,GACvBD,EAAGpB,EAAS,EArEV,EAsEFF,MAtEE,EAuEFE,OAAQqB,GACRC,UAAWxC,GAEb,CACEqC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EAAIyB,EAChB3B,MAAOmB,EACPjB,OA9EG,EA+EHsB,UAAWxC,IAIf8B,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EAAIyB,EAChB3B,MAAOmB,EACPjB,OAxFK,EAyFLsB,UAAWxC,IAGf,MACF,IAAK,MACH8B,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EAAIyB,EAChB3B,MAAOmB,EACPjB,OAnGO,EAoGPsB,UAAWxC,IAEb,MACF,IAAK,aACL,IAAK,MACH8B,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EA7GN,EA8GNF,MAAOmB,EACPjB,OAAQqB,GACRC,UAAWxC,IAEb,MACF,IAAK,QACH8B,EAAWM,KAAK,CACdC,KAAM,OACNN,EAAAA,EACAO,EAAGpB,EAAS,EAAIyB,EAChB3B,MAAOmB,EACPjB,OAxHO,EAyHPsB,UAAWxC,IAOjB+B,GAAKI,CACP,IAEAL,EAAWI,SAAQ,SAAAV,GACjBV,EAAQ8B,UAAYpB,EAAKgB,UACzB1B,EAAQ+B,SAASrB,EAAKO,EAAGP,EAAKc,EAAGd,EAAKR,MAAOQ,EAAKN,OACpD,GACF,IAEA,IAAM4B,EAAiB,CACrB9B,MAAOX,EAAoBA,GAAAA,OAAAA,QAAqB,OAChDa,OAAQX,EAAqBA,GAAAA,OAAAA,EAAsB,MAAA,QAGrD,OACEwC,EAAAA,IAAA,MAAA,CAAKC,IAAKtC,EAAcU,MAAO0B,EAAeG,SAC5CF,EAAAG,IAAA,SAAA,CAAQF,IAAKxC,KAGnB,CAEAP,EAAakD,UAAY,CACvB9C,eAAgB+C,EAAS,QAACC,OAC1B9C,gBAAiB6C,EAAS,QAACC,OAC3BlD,UAAWiD,EAAS,QAACE,QAAQF,EAAAA,QAAUG,MAAM,CAAA,IAAKC"}

package/cjs-bundle/components/Drillstring/BHATile/BHATile.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),i=require("prop-types"),l=require("classnames"),s=require("@material-ui/core"),t=require("../BHATileIcon.js"),a=require("./styles.css.js"),n=require("../../../utils/bha.js"),r=require("react/jsx-runtime");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=c(e),o=c(l),u=[{key:"tfa",label:"TFA"},{key:"cpl",label:"CPL at TD"},{key:"sp",label:"SP at TD"},{key:"ecd",label:"ECD at TD"}];function m(e){var i,l,c=e.isMobile,m=e.drillstring,h=e.isSelected,p=e.onSelect,b=e.height,f=e.isMetricsHidden,j=(null==m||null===(i=m.data)||void 0===i?void 0:i.components)||[],v=n.getBHASchematic(j);return r.jsxs("div",{className:o.default(a.tileContainer,d.default({},a.selected,h)),onClick:function(){return p(m)},children:[r.jsxs("div",{className:a.header,children:[r.jsxs("div",{className:a.bhaTile,children:[r.jsx(s.Chip,{label:null==m||null===(l=m.data)||void 0===l?void 0:l.id,classes:{root:o.default(a.rootChip,d.default({},a.selectedChip,h)),label:a.chipLabel}}),r.jsx("span",{className:a.bhaCaption,children:"BHA"})]}),r.jsxs("div",{className:a.componentsCount,children:["Components: ",j.length]})]}),j.length>0&&r.jsx("div",{className:o.default(a.schematic,d.default({},a.schematicMobile,c)),children:v.map((function(e,i){return r.jsx(t,{component:e,width:"calc(100% / ".concat(v.length," - 1px)"),height:b},"bha-tile-".concat(i))}))}),!f&&!c&&j.length>0&&r.jsx("div",{className:a.metricsContainer,children:u.map((function(e){return r.jsxs("div",{className:a.metricItem,children:[r.jsxs("div",{className:a.metricItemContent,children:[r.jsx("div",{className:a.metricItemLabel,children:e.label}),r.jsx("div",{className:a.metricItemValue,children:"0.0"})]}),"ecd"!==e.key&&r.jsx("div",{className:a.metricItemSplit})]},e.key)}))}),0===j.length&&r.jsx("div",{className:o.default(a.noComponents,d.default({},a.noComponentsMobile,c)),children:"No Components"})]})}m.propTypes={drillstring:i.shape({data:i.shape({components:i.arrayOf(i.shape({}))})}),isSelected:i.bool,onSelect:i.func.isRequired,height:i.number,isMetricsHidden:i.bool,isMobile:i.bool},m.defaultProps={drillstring:null,isSelected:!1,height:16,isMetricsHidden:!1,isMobile:!1},module.exports=m;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),i=require("prop-types"),l=require("classnames"),s=require("@material-ui/core"),t=require("../BHATileIcon.js"),a=require("./styles.css.js"),n=require("../../../utils/bha.js"),c=require("react/jsx-runtime");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e),d=r(l),u=[{key:"tfa",label:"TFA"},{key:"cpl",label:"CPL at TD"},{key:"sp",label:"SP at TD"},{key:"ecd",label:"ECD at TD"}];function m(e){var i,l,r=e.isMobile,m=void 0!==r&&r,h=e.drillstring,p=void 0===h?null:h,b=e.isSelected,v=void 0!==b&&b,f=e.onSelect,j=e.height,x=void 0===j?16:j,C=e.isMetricsHidden,N=void 0!==C&&C,y=(null==p||null===(i=p.data)||void 0===i?void 0:i.components)||[],g=n.getBHASchematic(y);return c.jsxs("div",{className:d.default(a.tileContainer,o.default({},a.selected,v)),onClick:function(){return f(p)},children:[c.jsxs("div",{className:a.header,children:[c.jsxs("div",{className:a.bhaTile,children:[c.jsx(s.Chip,{label:null==p||null===(l=p.data)||void 0===l?void 0:l.id,classes:{root:d.default(a.rootChip,o.default({},a.selectedChip,v)),label:a.chipLabel}}),c.jsx("span",{className:a.bhaCaption,children:"BHA"})]}),c.jsxs("div",{className:a.componentsCount,children:["Components: ",y.length]})]}),y.length>0&&c.jsx("div",{className:d.default(a.schematic,o.default({},a.schematicMobile,m)),children:g.map((function(e,i){return c.jsx(t,{component:e,width:"calc(100% / ".concat(g.length," - 1px)"),height:x},"bha-tile-".concat(i))}))}),!N&&!m&&y.length>0&&c.jsx("div",{className:a.metricsContainer,children:u.map((function(e){return c.jsxs("div",{className:a.metricItem,children:[c.jsxs("div",{className:a.metricItemContent,children:[c.jsx("div",{className:a.metricItemLabel,children:e.label}),c.jsx("div",{className:a.metricItemValue,children:"0.0"})]}),"ecd"!==e.key&&c.jsx("div",{className:a.metricItemSplit})]},e.key)}))}),0===y.length&&c.jsx("div",{className:d.default(a.noComponents,o.default({},a.noComponentsMobile,m)),children:"No Components"})]})}m.propTypes={drillstring:i.shape({data:i.shape({components:i.arrayOf(i.shape({}))})}),isSelected:i.bool,onSelect:i.func.isRequired,height:i.number,isMetricsHidden:i.bool,isMobile:i.bool},module.exports=m;
 //# sourceMappingURL=BHATile.js.map

package/cjs-bundle/components/Drillstring/BHATile/BHATile.js.map

@@ -1 +1 @@
-{"version":3,"file":"BHATile.js","sources":["../../../../../src/components/Drillstring/BHATile/BHATile.js"],"sourcesContent":["import { shape, bool, func, arrayOf, number } from 'prop-types';\nimport classNames from 'classnames';\nimport { Chip } from '@material-ui/core';\n\nimport BHATileIcon from '../BHATileIcon';\n\nimport styles from './styles.css';\n\nimport { getBHASchematic } from '~/utils/bha';\n\nconst MetricsColumns = [\n  { key: 'tfa', label: 'TFA' },\n  { key: 'cpl', label: 'CPL at TD' },\n  { key: 'sp', label: 'SP at TD' },\n  { key: 'ecd', label: 'ECD at TD' },\n];\n\nfunction BHATile({ isMobile, drillstring, isSelected, onSelect, height, isMetricsHidden }) {\n  const components = drillstring?.data?.components || [];\n  const schematicData = getBHASchematic(components);\n\n  return (\n    <div\n      className={classNames(styles.tileContainer, { [styles.selected]: isSelected })}\n      onClick={() => onSelect(drillstring)}\n    >\n      <div className={styles.header}>\n        <div className={styles.bhaTile}>\n          <Chip\n            label={drillstring?.data?.id}\n            classes={{\n              root: classNames(styles.rootChip, { [styles.selectedChip]: isSelected }),\n              label: styles.chipLabel,\n            }}\n          />\n          <span className={styles.bhaCaption}>BHA</span>\n        </div>\n        <div className={styles.componentsCount}>Components: {components.length}</div>\n      </div>\n\n      {components.length > 0 && (\n        <div className={classNames(styles.schematic, { [styles.schematicMobile]: isMobile })}>\n          {schematicData.map((component, index) => (\n            <BHATileIcon\n              // eslint-disable-next-line react/no-array-index-key\n              key={`bha-tile-${index}`}\n              component={component}\n              width={`calc(100% / ${schematicData.length} - 1px)`}\n              height={height}\n            />\n          ))}\n        </div>\n      )}\n\n      {!isMetricsHidden && !isMobile && components.length > 0 && (\n        <div className={styles.metricsContainer}>\n          {MetricsColumns.map(metric => (\n            <div key={metric.key} className={styles.metricItem}>\n              <div className={styles.metricItemContent}>\n                <div className={styles.metricItemLabel}>{metric.label}</div>\n                <div className={styles.metricItemValue}>0.0</div>\n              </div>\n              {metric.key !== 'ecd' && <div className={styles.metricItemSplit} />}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {components.length === 0 && (\n        <div className={classNames(styles.noComponents, { [styles.noComponentsMobile]: isMobile })}>\n          No Components\n        </div>\n      )}\n    </div>\n  );\n}\n\nBHATile.propTypes = {\n  drillstring: shape({\n    data: shape({ components: arrayOf(shape({})) }),\n  }),\n  isSelected: bool,\n  onSelect: func.isRequired,\n  height: number,\n  isMetricsHidden: bool,\n  isMobile: bool,\n};\n\nBHATile.defaultProps = {\n  drillstring: null,\n  isSelected: false,\n  height: 16,\n  isMetricsHidden: false,\n  isMobile: false,\n};\n\nexport default BHATile;\n"],"names":["MetricsColumns","key","label","BHATile","_ref","_drillstring$data","_drillstring$data2","isMobile","drillstring","isSelected","onSelect","height","isMetricsHidden","components","data","schematicData","getBHASchematic","_jsxs","className","classNames","styles","tileContainer","selected","onClick","children","jsxs","header","bhaTile","_jsx","Chip","id","classes","root","rootChip","selectedChip","chipLabel","jsx","bhaCaption","componentsCount","length","schematic","schematicMobile","map","component","index","BHATileIcon","width","concat","metricsContainer","metric","metricItem","metricItemContent","metricItemLabel","metricItemValue","metricItemSplit","noComponents","noComponentsMobile","propTypes","shape","arrayOf","bool","func","isRequired","number","defaultProps"],"mappings":"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"}
+{"version":3,"file":"BHATile.js","sources":["../../../../../src/components/Drillstring/BHATile/BHATile.js"],"sourcesContent":["import { shape, bool, func, arrayOf, number } from 'prop-types';\nimport classNames from 'classnames';\nimport { Chip } from '@material-ui/core';\n\nimport BHATileIcon from '../BHATileIcon';\n\nimport styles from './styles.css';\n\nimport { getBHASchematic } from '~/utils/bha';\n\nconst MetricsColumns = [\n  { key: 'tfa', label: 'TFA' },\n  { key: 'cpl', label: 'CPL at TD' },\n  { key: 'sp', label: 'SP at TD' },\n  { key: 'ecd', label: 'ECD at TD' },\n];\n\nfunction BHATile({\n  isMobile = false,\n  drillstring = null,\n  isSelected = false,\n  onSelect,\n  height = 16,\n  isMetricsHidden = false,\n}) {\n  const components = drillstring?.data?.components || [];\n  const schematicData = getBHASchematic(components);\n\n  return (\n    <div\n      className={classNames(styles.tileContainer, { [styles.selected]: isSelected })}\n      onClick={() => onSelect(drillstring)}\n    >\n      <div className={styles.header}>\n        <div className={styles.bhaTile}>\n          <Chip\n            label={drillstring?.data?.id}\n            classes={{\n              root: classNames(styles.rootChip, { [styles.selectedChip]: isSelected }),\n              label: styles.chipLabel,\n            }}\n          />\n          <span className={styles.bhaCaption}>BHA</span>\n        </div>\n        <div className={styles.componentsCount}>Components: {components.length}</div>\n      </div>\n\n      {components.length > 0 && (\n        <div className={classNames(styles.schematic, { [styles.schematicMobile]: isMobile })}>\n          {schematicData.map((component, index) => (\n            <BHATileIcon\n              // eslint-disable-next-line react/no-array-index-key\n              key={`bha-tile-${index}`}\n              component={component}\n              width={`calc(100% / ${schematicData.length} - 1px)`}\n              height={height}\n            />\n          ))}\n        </div>\n      )}\n\n      {!isMetricsHidden && !isMobile && components.length > 0 && (\n        <div className={styles.metricsContainer}>\n          {MetricsColumns.map(metric => (\n            <div key={metric.key} className={styles.metricItem}>\n              <div className={styles.metricItemContent}>\n                <div className={styles.metricItemLabel}>{metric.label}</div>\n                <div className={styles.metricItemValue}>0.0</div>\n              </div>\n              {metric.key !== 'ecd' && <div className={styles.metricItemSplit} />}\n            </div>\n          ))}\n        </div>\n      )}\n\n      {components.length === 0 && (\n        <div className={classNames(styles.noComponents, { [styles.noComponentsMobile]: isMobile })}>\n          No Components\n        </div>\n      )}\n    </div>\n  );\n}\n\nBHATile.propTypes = {\n  drillstring: shape({\n    data: shape({ components: arrayOf(shape({})) }),\n  }),\n  isSelected: bool,\n  onSelect: func.isRequired,\n  height: number,\n  isMetricsHidden: bool,\n  isMobile: bool,\n};\n\nexport default BHATile;\n"],"names":["MetricsColumns","key","label","BHATile","_ref","_drillstring$data","_drillstring$data2","_ref$isMobile","isMobile","_ref$drillstring","drillstring","_ref$isSelected","isSelected","onSelect","_ref$height","height","_ref$isMetricsHidden","isMetricsHidden","components","data","schematicData","getBHASchematic","_jsxs","className","classNames","styles","tileContainer","selected","onClick","children","jsxs","header","bhaTile","_jsx","Chip","id","classes","root","rootChip","selectedChip","chipLabel","jsx","bhaCaption","componentsCount","length","schematic","schematicMobile","map","component","index","BHATileIcon","width","concat","metricsContainer","metric","metricItem","metricItemContent","metricItemLabel","metricItemValue","metricItemSplit","noComponents","noComponentsMobile","propTypes","shape","arrayOf","bool","func","isRequired","number"],"mappings":"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"}

package/cjs-bundle/components/Drillstring/BhaIndicator/BhaIndicator.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("@babel/runtime/helpers/defineProperty"),e=require("prop-types"),i=require("classnames"),r=require("./styles.css.js"),s=require("react/jsx-runtime");function d(a){return a&&"object"==typeof a&&"default"in a?a:{default:a}}var l=d(a),c=d(i),t="left",n="right",o=function(a){var e,i=a.align;return s.jsxs("div",{className:c.default(r.bhaIndicator,(e={},l.default(e,r.bhaIndicatorLeft,i===t),l.default(e,r.bhaIndicatorRight,i===n),e)),children:[s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorBit}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Bit"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorUr}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Under Reamer"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorRss}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"RSS"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorPdm}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"PDM"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorOther}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Non-mag"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorStabilizer}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Stabilizer"})]})]})};o.propTypes={align:e.oneOf(["left","right"])},o.defaultProps={align:"right"},module.exports=o;
+"use strict";var a=require("@babel/runtime/helpers/defineProperty"),e=require("prop-types"),i=require("classnames"),r=require("./styles.css.js"),s=require("react/jsx-runtime");function d(a){return a&&"object"==typeof a&&"default"in a?a:{default:a}}var l=d(a),c=d(i),t="left",n="right",o=function(a){var e,i=a.align,d=void 0===i?"right":i;return s.jsxs("div",{className:c.default(r.bhaIndicator,(e={},l.default(e,r.bhaIndicatorLeft,d===t),l.default(e,r.bhaIndicatorRight,d===n),e)),children:[s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorBit}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Bit"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorUr}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Under Reamer"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorRss}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"RSS"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorPdm}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"PDM"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorOther}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Non-mag"})]}),s.jsxs("div",{children:[s.jsx("div",{className:r.bhaIndicatorColorStabilizer}),s.jsx("div",{className:r.bhaIndicatorLabel,children:"Stabilizer"})]})]})};o.propTypes={align:e.oneOf(["left","right"])},module.exports=o;
 //# sourceMappingURL=BhaIndicator.js.map

package/cjs-bundle/components/Drillstring/BhaIndicator/BhaIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"BhaIndicator.js","sources":["../../../../../src/components/Drillstring/BhaIndicator/BhaIndicator.js"],"sourcesContent":["import { oneOf } from 'prop-types';\nimport classNames from 'classnames';\n\nimport styles from './styles.css';\n\nconst ALIGNS = {\n  left: 'left',\n  right: 'right',\n};\n\nconst BhaIndicator = ({ align }) => (\n  <div\n    className={classNames(styles.bhaIndicator, {\n      [styles.bhaIndicatorLeft]: align === ALIGNS.left,\n      [styles.bhaIndicatorRight]: align === ALIGNS.right,\n    })}\n  >\n    <div>\n      <div className={styles.bhaIndicatorColorBit} />\n      <div className={styles.bhaIndicatorLabel}>Bit</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorUr} />\n      <div className={styles.bhaIndicatorLabel}>Under Reamer</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorRss} />\n      <div className={styles.bhaIndicatorLabel}>RSS</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorPdm} />\n      <div className={styles.bhaIndicatorLabel}>PDM</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorOther} />\n      <div className={styles.bhaIndicatorLabel}>Non-mag</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorStabilizer} />\n      <div className={styles.bhaIndicatorLabel}>Stabilizer</div>\n    </div>\n  </div>\n);\n\nBhaIndicator.propTypes = {\n  align: oneOf(['left', 'right']),\n};\n\nBhaIndicator.defaultProps = {\n  align: 'right',\n};\n\nexport default BhaIndicator;\n"],"names":["ALIGNS","BhaIndicator","_ref","_classNames","align","_jsxs","className","classNames","styles","bhaIndicator","_defineProperty","bhaIndicatorLeft","bhaIndicatorRight","children","jsxs","_jsx","jsx","bhaIndicatorColorBit","bhaIndicatorLabel","bhaIndicatorColorUr","bhaIndicatorColorRss","bhaIndicatorColorPdm","bhaIndicatorColorOther","bhaIndicatorColorStabilizer","propTypes","oneOf","defaultProps"],"mappings":"0QAKMA,EACE,OADFA,EAEG,QAGHC,EAAe,SAAHC,GAAA,IAAAC,EAAMC,IAAAA,MAAK,OAC3BC,EAAAA,KAAA,MAAA,CACEC,UAAWC,EAAAA,QAAWC,EAAOC,cAAYN,EAAA,CAAA,EAAAO,UAAAP,EACtCK,EAAOG,iBAAmBP,IAAUJ,GACpCQ,UAAAA,EAAAA,EAAOI,kBAAoBR,IAAUJ,GACrCG,IAAAU,SAEH,CAAAR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOS,uBACvBF,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOW,sBACvBJ,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,oBAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOY,uBACvBL,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOa,uBACvBN,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOc,yBACvBP,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,eAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOe,8BACvBR,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,oBAEvC,EAGRZ,EAAauB,UAAY,CACvBpB,MAAOqB,EAAKA,MAAC,CAAC,OAAQ,WAGxBxB,EAAayB,aAAe,CAC1BtB,MAAO"}
+{"version":3,"file":"BhaIndicator.js","sources":["../../../../../src/components/Drillstring/BhaIndicator/BhaIndicator.js"],"sourcesContent":["import { oneOf } from 'prop-types';\nimport classNames from 'classnames';\n\nimport styles from './styles.css';\n\nconst ALIGNS = {\n  left: 'left',\n  right: 'right',\n};\n\nconst BhaIndicator = ({ align = 'right' }) => (\n  <div\n    className={classNames(styles.bhaIndicator, {\n      [styles.bhaIndicatorLeft]: align === ALIGNS.left,\n      [styles.bhaIndicatorRight]: align === ALIGNS.right,\n    })}\n  >\n    <div>\n      <div className={styles.bhaIndicatorColorBit} />\n      <div className={styles.bhaIndicatorLabel}>Bit</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorUr} />\n      <div className={styles.bhaIndicatorLabel}>Under Reamer</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorRss} />\n      <div className={styles.bhaIndicatorLabel}>RSS</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorPdm} />\n      <div className={styles.bhaIndicatorLabel}>PDM</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorOther} />\n      <div className={styles.bhaIndicatorLabel}>Non-mag</div>\n    </div>\n    <div>\n      <div className={styles.bhaIndicatorColorStabilizer} />\n      <div className={styles.bhaIndicatorLabel}>Stabilizer</div>\n    </div>\n  </div>\n);\n\nBhaIndicator.propTypes = {\n  align: oneOf(['left', 'right']),\n};\n\nexport default BhaIndicator;\n"],"names":["ALIGNS","BhaIndicator","_ref","_classNames","_ref$align","align","_jsxs","className","classNames","styles","bhaIndicator","_defineProperty","bhaIndicatorLeft","bhaIndicatorRight","children","jsxs","_jsx","jsx","bhaIndicatorColorBit","bhaIndicatorLabel","bhaIndicatorColorUr","bhaIndicatorColorRss","bhaIndicatorColorPdm","bhaIndicatorColorOther","bhaIndicatorColorStabilizer","propTypes","oneOf"],"mappings":"0QAKMA,EACE,OADFA,EAEG,QAGHC,EAAe,SAAHC,GAAA,IAAAC,EAAAC,EAAAF,EAAMG,MAAAA,aAAQ,QAAOD,EAAA,OACrCE,EAAAA,KAAA,MAAA,CACEC,UAAWC,EAAAA,QAAWC,EAAOC,cAAYP,EAAA,CAAA,EAAAQ,UAAAR,EACtCM,EAAOG,iBAAmBP,IAAUL,GACpCS,UAAAA,EAAAA,EAAOI,kBAAoBR,IAAUL,GACrCG,IAAAW,SAEH,CAAAR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOS,uBACvBF,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOW,sBACvBJ,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,oBAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOY,uBACvBL,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOa,uBACvBN,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,WAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOc,yBACvBP,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,eAE3CR,EAAAS,KAAA,MAAA,CAAAD,SACE,CAAAE,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOe,8BACvBR,EAAAC,IAAA,MAAA,CAAKV,UAAWE,EAAOU,kBAAkBL,SAAA,oBAEvC,EAGRb,EAAawB,UAAY,CACvBpB,MAAOqB,EAAKA,MAAC,CAAC,OAAQ"}

package/cjs-bundle/components/Drillstring/DrillstringDetail/DrillstringDetail.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),n=require("prop-types"),i=require("react"),r=require("@material-ui/core"),t=require("../BHATable/index.js"),l=require("../BHAComponentDetail/index.js"),a=require("./styles.css.js"),s=require("../../../utils/index.js"),o=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(e),c=function(e){var n,d,c,p=e.onDone,h=e.drillStringInfo,j=e.holeDepth,m=e.unit,f=i.useState(),x=u.default(f,2),v=x[0],q=x[1],D=null===(n=h.data)||void 0===n?void 0:n.id,T=Math.floor(s.convertValue(null===(d=h.data)||void 0===d?void 0:d.start_depth,"length","ft")),N=(null===(c=h.data)||void 0===c?void 0:c.components)||[],g=i.useMemo((function(){return N.find((function(e){return e.id===v}))}),[N,v]);return o.jsxs("div",{className:a.detailsPane,children:[o.jsxs("header",{children:[o.jsx(r.Button,{variant:"contained",className:a.detailDone,onClick:p,children:"Close"}),o.jsxs("div",{className:a.detailTitleGroup,children:[o.jsx("span",{className:a.detailTitle,children:"BHA Details"}),o.jsx("span",{className:a.detailTitleSeparator,children:" · "}),o.jsxs("span",{className:a.detailTitleMore,children:["BHA # ",D]}),o.jsx("span",{className:a.detailTitleSeparator,children:" · "}),o.jsx("span",{className:a.detailTitleMore,children:"".concat(T," - ").concat(j," ").concat(m)})]})]}),o.jsx(t,{components:N,onSelectComponent:function(e){var n=e.id;return q(n)}}),o.jsx(r.Dialog,{open:!!v,onClose:function(){return q(null)},scroll:"paper",children:o.jsx(r.DialogContent,{children:o.jsx(l,{component:g,onDone:function(){return q(null)}})})})]})};c.propTypes={drillStringInfo:n.shape().isRequired,holeDepth:n.number,unit:n.string.isRequired,onDone:n.func.isRequired},c.defaultProps={holeDepth:void 0},module.exports=c;
+"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),n=require("prop-types"),i=require("react"),r=require("@material-ui/core"),t=require("../BHATable/index.js"),l=require("../BHAComponentDetail/index.js"),a=require("./styles.css.js"),s=require("../../../utils/index.js"),o=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(e),c=function(e){var n,d,c,p=e.onDone,h=e.drillStringInfo,j=e.holeDepth,m=e.unit,x=i.useState(),f=u.default(x,2),v=f[0],q=f[1],D=null===(n=h.data)||void 0===n?void 0:n.id,T=Math.floor(s.convertValue(null===(d=h.data)||void 0===d?void 0:d.start_depth,"length","ft")),N=(null===(c=h.data)||void 0===c?void 0:c.components)||[],g=i.useMemo((function(){return N.find((function(e){return e.id===v}))}),[N,v]);return o.jsxs("div",{className:a.detailsPane,children:[o.jsxs("header",{children:[o.jsx(r.Button,{variant:"contained",className:a.detailDone,onClick:p,children:"Close"}),o.jsxs("div",{className:a.detailTitleGroup,children:[o.jsx("span",{className:a.detailTitle,children:"BHA Details"}),o.jsx("span",{className:a.detailTitleSeparator,children:" · "}),o.jsxs("span",{className:a.detailTitleMore,children:["BHA # ",D]}),o.jsx("span",{className:a.detailTitleSeparator,children:" · "}),o.jsx("span",{className:a.detailTitleMore,children:"".concat(T," - ").concat(j," ").concat(m)})]})]}),o.jsx(t,{components:N,onSelectComponent:function(e){var n=e.id;return q(n)}}),o.jsx(r.Dialog,{open:!!v,onClose:function(){return q(null)},scroll:"paper",children:o.jsx(r.DialogContent,{children:o.jsx(l,{component:g,onDone:function(){return q(null)}})})})]})};c.propTypes={drillStringInfo:n.shape().isRequired,holeDepth:n.number,unit:n.string.isRequired,onDone:n.func.isRequired},module.exports=c;
 //# sourceMappingURL=DrillstringDetail.js.map

package/cjs-bundle/components/Drillstring/DrillstringDetail/DrillstringDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrillstringDetail.js","sources":["../../../../../src/components/Drillstring/DrillstringDetail/DrillstringDetail.js"],"sourcesContent":["import { string, number, shape, func } from 'prop-types';\nimport { useState, useMemo } from 'react';\nimport { Button, Dialog, DialogContent } from '@material-ui/core';\n\nimport BHATable from '../BHATable';\nimport BHAComponentDetail from '../BHAComponentDetail';\n\nimport styles from './styles.css';\n\nimport { convertValue } from '~/utils';\n\nconst DrillstringDetail = ({ onDone, drillStringInfo, holeDepth, unit }) => {\n  const [selectedComponentId, setSelectedComponentId] = useState();\n\n  const bhaId = drillStringInfo.data?.id;\n  const startDepth = Math.floor(convertValue(drillStringInfo.data?.start_depth, 'length', 'ft'));\n\n  const bhaComponents = drillStringInfo.data?.components || [];\n\n  const selectedBHAComponent = useMemo(() => {\n    return bhaComponents.find(component => component.id === selectedComponentId);\n  }, [bhaComponents, selectedComponentId]);\n\n  return (\n    <div className={styles.detailsPane}>\n      <header>\n        <Button variant=\"contained\" className={styles.detailDone} onClick={onDone}>\n          Close\n        </Button>\n        <div className={styles.detailTitleGroup}>\n          <span className={styles.detailTitle}>BHA Details</span>\n          <span className={styles.detailTitleSeparator}> &middot; </span>\n          <span className={styles.detailTitleMore}>BHA # {bhaId}</span>\n          <span className={styles.detailTitleSeparator}> &middot; </span>\n          <span className={styles.detailTitleMore}>{`${startDepth} - ${holeDepth} ${unit}`}</span>\n        </div>\n      </header>\n\n      <BHATable\n        components={bhaComponents}\n        onSelectComponent={({ id }) => setSelectedComponentId(id)}\n      />\n\n      <Dialog\n        open={!!selectedComponentId}\n        onClose={() => setSelectedComponentId(null)}\n        scroll=\"paper\"\n      >\n        <DialogContent>\n          <BHAComponentDetail\n            component={selectedBHAComponent}\n            onDone={() => setSelectedComponentId(null)}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n};\n\nDrillstringDetail.propTypes = {\n  drillStringInfo: shape().isRequired,\n  holeDepth: number,\n  unit: string.isRequired,\n  onDone: func.isRequired,\n};\n\nDrillstringDetail.defaultProps = {\n  holeDepth: undefined,\n};\n\nexport default DrillstringDetail;\n"],"names":["DrillstringDetail","_ref","_drillStringInfo$data","_drillStringInfo$data2","_drillStringInfo$data3","onDone","drillStringInfo","holeDepth","unit","_useState","useState","_useState2","_slicedToArray","selectedComponentId","setSelectedComponentId","bhaId","data","id","startDepth","Math","floor","convertValue","start_depth","bhaComponents","components","selectedBHAComponent","useMemo","find","component","_jsxs","className","styles","detailsPane","children","jsxs","_jsx","Button","variant","detailDone","onClick","detailTitleGroup","jsx","detailTitle","detailTitleSeparator","detailTitleMore","concat","BHATable","onSelectComponent","_ref2","Dialog","open","onClose","scroll","DialogContent","BHAComponentDetail","propTypes","shape","isRequired","number","string","func","defaultProps","undefined"],"mappings":"+YAWMA,EAAoB,SAAkDC,GAAA,IAAAC,EAAAC,EAAAC,EAA/CC,IAAAA,OAAQC,IAAAA,gBAAiBC,IAAAA,UAAWC,IAAAA,KAC/DC,EAAsDC,EAAAA,WAAUC,EAAAC,EAAAA,QAAAH,EAAA,GAAzDI,EAAmBF,EAAA,GAAEG,EAAsBH,EAAA,GAE5CI,EAA4B,QAApBT,EAAAA,EAAgBU,YAAI,IAAAd,OAAA,EAApBA,EAAsBe,GAC9BC,EAAaC,KAAKC,MAAMC,EAAYA,aAAqB,QAApBf,EAAAA,EAAgBU,YAAI,IAAAb,OAAA,EAApBA,EAAsBmB,YAAa,SAAU,OAElFC,GAAgB,QAAAnB,EAAAE,EAAgBU,YAAhB,IAAAZ,OAAA,EAAAA,EAAsBoB,aAAc,GAEpDC,EAAuBC,EAAAA,SAAQ,WACnC,OAAOH,EAAcI,MAAK,SAAAC,GAAS,OAAIA,EAAUX,KAAOJ,IAC1D,GAAG,CAACU,EAAeV,IAEnB,OACEgB,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOC,YAAYC,SACjC,CAAAJ,EAAAK,KAAA,SAAA,CAAAD,SAAA,CACEE,MAACC,SAAM,CAACC,QAAQ,YAAYP,UAAWC,EAAOO,WAAYC,QAASlC,EAAO4B,SAAA,UAG1EJ,EAAAK,KAAA,MAAA,CAAKJ,UAAWC,EAAOS,iBAAiBP,SACtC,CAAAE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOW,YAAYT,SAAA,gBACpCE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOY,qBAAqBV,SAAA,QAC7CJ,EAAAK,KAAA,OAAA,CAAMJ,UAAWC,EAAOa,gBAAgBX,SAAA,CAAA,SAAQlB,KAChDoB,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOY,qBAAqBV,SAAA,QAC7CE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOa,gBAAgBX,SAAA,GAAAY,OAAK3B,EAAU,OAAA2B,OAAMtC,EAAS,KAAAsC,OAAIrC,WAI9E2B,MAACW,EAAQ,CACPtB,WAAYD,EACZwB,kBAAmB,SAAAC,GAAA,IAAG/B,IAAAA,GAAE,OAAOH,EAAuBG,EAAG,IAG3DkB,MAACc,SAAM,CACLC,OAAQrC,EACRsC,QAAS,WAAA,OAAMrC,EAAuB,KAAM,EAC5CsC,OAAO,QAAOnB,SAEdE,MAACkB,gBAAa,CAAApB,SACZE,MAACmB,EAAkB,CACjB1B,UAAWH,EACXpB,OAAQ,WAAA,OAAMS,EAAuB,KAAK,UAMtD,EAEAd,EAAkBuD,UAAY,CAC5BjD,gBAAiBkD,EAAKA,QAAGC,WACzBlD,UAAWmD,EAAMA,OACjBlD,KAAMmD,EAAMA,OAACF,WACbpD,OAAQuD,EAAIA,KAACH,YAGfzD,EAAkB6D,aAAe,CAC/BtD,eAAWuD"}
+{"version":3,"file":"DrillstringDetail.js","sources":["../../../../../src/components/Drillstring/DrillstringDetail/DrillstringDetail.js"],"sourcesContent":["import { string, number, shape, func } from 'prop-types';\nimport { useState, useMemo } from 'react';\nimport { Button, Dialog, DialogContent } from '@material-ui/core';\n\nimport BHATable from '../BHATable';\nimport BHAComponentDetail from '../BHAComponentDetail';\n\nimport styles from './styles.css';\n\nimport { convertValue } from '~/utils';\n\nconst DrillstringDetail = ({ onDone, drillStringInfo, holeDepth, unit }) => {\n  const [selectedComponentId, setSelectedComponentId] = useState();\n\n  const bhaId = drillStringInfo.data?.id;\n  const startDepth = Math.floor(convertValue(drillStringInfo.data?.start_depth, 'length', 'ft'));\n\n  const bhaComponents = drillStringInfo.data?.components || [];\n\n  const selectedBHAComponent = useMemo(() => {\n    return bhaComponents.find(component => component.id === selectedComponentId);\n  }, [bhaComponents, selectedComponentId]);\n\n  return (\n    <div className={styles.detailsPane}>\n      <header>\n        <Button variant=\"contained\" className={styles.detailDone} onClick={onDone}>\n          Close\n        </Button>\n        <div className={styles.detailTitleGroup}>\n          <span className={styles.detailTitle}>BHA Details</span>\n          <span className={styles.detailTitleSeparator}> &middot; </span>\n          <span className={styles.detailTitleMore}>BHA # {bhaId}</span>\n          <span className={styles.detailTitleSeparator}> &middot; </span>\n          <span className={styles.detailTitleMore}>{`${startDepth} - ${holeDepth} ${unit}`}</span>\n        </div>\n      </header>\n\n      <BHATable\n        components={bhaComponents}\n        onSelectComponent={({ id }) => setSelectedComponentId(id)}\n      />\n\n      <Dialog\n        open={!!selectedComponentId}\n        onClose={() => setSelectedComponentId(null)}\n        scroll=\"paper\"\n      >\n        <DialogContent>\n          <BHAComponentDetail\n            component={selectedBHAComponent}\n            onDone={() => setSelectedComponentId(null)}\n          />\n        </DialogContent>\n      </Dialog>\n    </div>\n  );\n};\n\nDrillstringDetail.propTypes = {\n  drillStringInfo: shape().isRequired,\n  holeDepth: number,\n  unit: string.isRequired,\n  onDone: func.isRequired,\n};\n\nexport default DrillstringDetail;\n"],"names":["DrillstringDetail","_ref","_drillStringInfo$data","_drillStringInfo$data2","_drillStringInfo$data3","onDone","drillStringInfo","holeDepth","unit","_useState","useState","_useState2","_slicedToArray","selectedComponentId","setSelectedComponentId","bhaId","data","id","startDepth","Math","floor","convertValue","start_depth","bhaComponents","components","selectedBHAComponent","useMemo","find","component","_jsxs","className","styles","detailsPane","children","jsxs","_jsx","Button","variant","detailDone","onClick","detailTitleGroup","jsx","detailTitle","detailTitleSeparator","detailTitleMore","concat","BHATable","onSelectComponent","_ref2","Dialog","open","onClose","scroll","DialogContent","BHAComponentDetail","propTypes","shape","isRequired","number","string","func"],"mappings":"+YAWMA,EAAoB,SAAkDC,GAAA,IAAAC,EAAAC,EAAAC,EAA/CC,IAAAA,OAAQC,IAAAA,gBAAiBC,IAAAA,UAAWC,IAAAA,KAC/DC,EAAsDC,EAAAA,WAAUC,EAAAC,EAAAA,QAAAH,EAAA,GAAzDI,EAAmBF,EAAA,GAAEG,EAAsBH,EAAA,GAE5CI,EAA4B,QAApBT,EAAAA,EAAgBU,YAAI,IAAAd,OAAA,EAApBA,EAAsBe,GAC9BC,EAAaC,KAAKC,MAAMC,EAAYA,aAAqB,QAApBf,EAAAA,EAAgBU,YAAI,IAAAb,OAAA,EAApBA,EAAsBmB,YAAa,SAAU,OAElFC,GAAgB,QAAAnB,EAAAE,EAAgBU,YAAhB,IAAAZ,OAAA,EAAAA,EAAsBoB,aAAc,GAEpDC,EAAuBC,EAAAA,SAAQ,WACnC,OAAOH,EAAcI,MAAK,SAAAC,GAAS,OAAIA,EAAUX,KAAOJ,IAC1D,GAAG,CAACU,EAAeV,IAEnB,OACEgB,EAAAA,KAAA,MAAA,CAAKC,UAAWC,EAAOC,YAAYC,SACjC,CAAAJ,EAAAK,KAAA,SAAA,CAAAD,SAAA,CACEE,MAACC,SAAM,CAACC,QAAQ,YAAYP,UAAWC,EAAOO,WAAYC,QAASlC,EAAO4B,SAAA,UAG1EJ,EAAAK,KAAA,MAAA,CAAKJ,UAAWC,EAAOS,iBAAiBP,SACtC,CAAAE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOW,YAAYT,SAAA,gBACpCE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOY,qBAAqBV,SAAA,QAC7CJ,EAAAK,KAAA,OAAA,CAAMJ,UAAWC,EAAOa,gBAAgBX,SAAA,CAAA,SAAQlB,KAChDoB,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOY,qBAAqBV,SAAA,QAC7CE,EAAAM,IAAA,OAAA,CAAMX,UAAWC,EAAOa,gBAAgBX,SAAA,GAAAY,OAAK3B,EAAU,OAAA2B,OAAMtC,EAAS,KAAAsC,OAAIrC,WAI9E2B,MAACW,EAAQ,CACPtB,WAAYD,EACZwB,kBAAmB,SAAAC,GAAA,IAAG/B,IAAAA,GAAE,OAAOH,EAAuBG,EAAG,IAG3DkB,MAACc,SAAM,CACLC,OAAQrC,EACRsC,QAAS,WAAA,OAAMrC,EAAuB,KAAM,EAC5CsC,OAAO,QAAOnB,SAEdE,MAACkB,gBAAa,CAAApB,SACZE,MAACmB,EAAkB,CACjB1B,UAAWH,EACXpB,OAAQ,WAAA,OAAMS,EAAuB,KAAK,UAMtD,EAEAd,EAAkBuD,UAAY,CAC5BjD,gBAAiBkD,EAAKA,QAAGC,WACzBlD,UAAWmD,EAAMA,OACjBlD,KAAMmD,EAAMA,OAACF,WACbpD,OAAQuD,EAAIA,KAACH"}

package/cjs-bundle/components/EChartsWrapper/EChartsWrapper.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),n=require("react"),r=require("lodash"),o=require("@material-ui/core"),a=require("classnames"),s=require("./components/Toolbox/Toolbox.js"),i=require("react/jsx-runtime");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(e),d=u(t),c=u(a);function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){l.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var y=o.makeStyles((function(){return{container:{position:"relative",width:"100%",height:"100%"}}})),m=function(e){var t=e.containerClassName,r=e.customToolboxContainerClass,a=e.onDataZoom,u=e.toolboxProps,l=e.children,x=y(),m=n.useRef(null),h=m.current,v=o.useTheme(),p=n.useState(!1),b=d.default(p,2),M=b[0],g=b[1],O=n.useState(!1),A=d.default(O,2),Z=A[0],C=A[1],j=n.useState(!0),F=d.default(j,2),E=F[0],P=F[1],S=n.useState(!1),T=d.default(S,2),w=T[0],q=T[1],I=n.useRef(null),k=n.useState(null),D=d.default(k,2),R=D[0],W=D[1],z=function(e){var t,n;if(h&&I.current){var r=h.getOption(),o=r.series;if(!((null===(t=r.xAxis)||void 0===t?void 0:t.length)>1||(null===(n=r.yAxis)||void 0===n?void 0:n.length)>1))if(!(Array.isArray(o)?o.reduce((function(e,t){return e.concat(t.data)}),[]):o.data).some((function(t){return Array.isArray(t)?t[0]>e.x.start&&t[0]<e.x.end&&t[1]>e.y.start&&t[1]<e.y.end:t.x>e.x.start&&t.x<e.x.end&&t.y>e.y.start&&t.y<e.y.end})))return;var a=100*Math.abs(e.x.start-I.current.x.start),s=100*Math.abs(e.x.end-I.current.x.start),i=100*Math.abs(e.y.start-I.current.y.start),u=100*Math.abs(e.y.end-I.current.y.start),l=i/Math.abs(I.current.y.start-I.current.y.end),d=u/Math.abs(I.current.y.start-I.current.y.end),c=a/Math.abs(I.current.x.start-I.current.x.end),x=s/Math.abs(I.current.x.start-I.current.x.end);h.dispatchAction({type:"dataZoom",moveOnMouseMove:Z,filterMode:"none",rangeMode:["percent","percent"],batch:[{start:+c.toFixed(2),end:+x.toFixed(2),dataZoomIndex:0},{start:+l.toFixed(2),end:+d.toFixed(2),dataZoomIndex:1}]})}},B=function(){var e,t,n,r,o,a,s,i,u=null==h||null===(e=h.getModel())||void 0===e||null===(t=e.getComponent("xAxis",0))||void 0===t||null===(n=t.axis)||void 0===n||null===(r=n.scale)||void 0===r?void 0:r.getExtent(),l=null==h||null===(o=h.getModel())||void 0===o||null===(a=o.getComponent("yAxis",0))||void 0===a||null===(s=a.axis)||void 0===s||null===(i=s.scale)||void 0===i?void 0:i.getExtent();if(u&&l){var c=d.default(u,2),x=c[0],f=c[1],y=d.default(l,2),m=y[0],v=y[1];I.current={x:{start:+x.toFixed(2),end:+f.toFixed(2)},y:{start:+m.toFixed(2),end:+v.toFixed(2)}}}},N=function(){q(!1),C(!1),P(!0),null==h||h.dispatchAction({type:"dataZoom",start:0,end:100,rangeMode:["percent","percent"]})},G=function(e){var t,n,r=0===e.start&&100===e.end,o=null===(t=e.batch)||void 0===t||null===(n=t[0])||void 0===n?void 0:n.startValue;r&&B(),q(!!o||!r),function(){if(h){var e=h.getModel().getComponent("yAxis",0).axis.scale.getExtent(),t=d.default(e,2),n=t[0],r=t[1],o=h.getModel().getComponent("xAxis",0).axis.scale.getExtent(),s=d.default(o,2),i={x:{start:s[0],end:s[1]},y:{start:n,end:r}};W(i),null==a||a(i)}}()};n.useEffect((function(){h&&(w||B(),M&&(h.setOption({toolbox:{show:!0,width:0,height:0,feature:{dataZoom:{show:!0,icon:null,brushStyle:{borderWidth:0,opacity:.1,color:v.palette.primary.light}}}},dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1}]},{replaceMerge:"dataZoom"}),h.on("dataZoom",G),g(!1),h.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0})))}),[h,M,w]),n.useEffect((function(){var e=null==h?void 0:h.getZr();if(null!=e&&e.dom){var t=Array.from(e.dom.getElementsByTagName("canvas")).at(-1);t?t.style.cursor=Z?"grab":E?"crosshair":"default":console.error("Canvas not found")}}),[h,Z,E]),n.useEffect((function(){h&&h.setOption({dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:Z},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:Z}]})}),[Z]),n.useEffect((function(){null==h||h.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:E})}),[E]);return i.jsxs("div",{className:c.default(x.container,t),children:[n.Children.map(l,(function(e){if(!n.isValidElement(e))return e;var t,r=e.props.onChartReady;return n.cloneElement(e,{onChartReady:(t=r,function(e){t&&t(e),g(!0),m.current=e})})})),i.jsx(s.Toolbox,f(f({},u),{},{handleTogglePane:function(e){return C(e)},handleToggleBrush:function(e){return P(e)},isPaneEnabled:Z,isBrushEnabled:E,isZoomed:w,chart:h,handleZoomReset:N,handleZoomOut:function(){if(I.current&&R){var e=.05*Math.abs(I.current.x.start-I.current.x.end),t=.05*Math.abs(I.current.y.start-I.current.y.end),n=+(R.x.start-e).toFixed(2),r=+(R.x.end+e).toFixed(2),o=+(R.y.start-t).toFixed(2),a=+(R.y.end+t).toFixed(2),s=n<=I.current.x.start||r>=I.current.x.end,i=o<=I.current.y.start||a>=I.current.y.end;if(s&&i)return N();z({x:s?I.current.x:{start:n,end:r},y:i?I.current.y:{start:o,end:a}})}},handleZoomIn:function(){w||(B(),q(!0));var e=R||I.current;if(e){var t=.05*Math.abs(e.x.start-e.x.end),n=.05*Math.abs(e.y.start-e.y.end),r=+(e.x.start+t).toFixed(2),o=+(e.x.end-t).toFixed(2),a=+(e.y.start+n).toFixed(2),s=+(e.y.end-n).toFixed(2),i=r>=o,u=a>=s;z({x:{start:i?e.x.start:r,end:i?e.x.end:o},y:{start:u?e.y.start:a,end:u?e.y.end:s}})}},customToolboxContainerClass:c.default(null==u?void 0:u.customToolboxContainerClass,r)}))]})};m.defaultProps={onDataZoom:r.noop},module.exports=m;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),n=require("react"),r=require("lodash"),o=require("@material-ui/core"),a=require("classnames"),s=require("./components/Toolbox/Toolbox.js"),i=require("react/jsx-runtime");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=u(e),d=u(t),c=u(a);function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function f(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){l.default(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var y=o.makeStyles((function(){return{container:{position:"relative",width:"100%",height:"100%"}}})),m=r.noop;module.exports=function(e){var t=e.containerClassName,r=e.customToolboxContainerClass,a=e.onDataZoom,u=void 0===a?m:a,l=e.toolboxProps,x=e.children,h=y(),v=n.useRef(null),p=v.current,b=o.useTheme(),M=n.useState(!1),g=d.default(M,2),O=g[0],A=g[1],Z=n.useState(!1),C=d.default(Z,2),j=C[0],F=C[1],E=n.useState(!0),S=d.default(E,2),P=S[0],T=S[1],w=n.useState(!1),q=d.default(w,2),I=q[0],k=q[1],D=n.useRef(null),R=n.useState(null),W=d.default(R,2),z=W[0],B=W[1],N=function(e){var t,n;if(p&&D.current){var r=p.getOption(),o=r.series;if(!((null===(t=r.xAxis)||void 0===t?void 0:t.length)>1||(null===(n=r.yAxis)||void 0===n?void 0:n.length)>1))if(!(Array.isArray(o)?o.reduce((function(e,t){return e.concat(t.data)}),[]):o.data).some((function(t){return Array.isArray(t)?t[0]>e.x.start&&t[0]<e.x.end&&t[1]>e.y.start&&t[1]<e.y.end:t.x>e.x.start&&t.x<e.x.end&&t.y>e.y.start&&t.y<e.y.end})))return;var a=100*Math.abs(e.x.start-D.current.x.start),s=100*Math.abs(e.x.end-D.current.x.start),i=100*Math.abs(e.y.start-D.current.y.start),u=100*Math.abs(e.y.end-D.current.y.start),l=i/Math.abs(D.current.y.start-D.current.y.end),d=u/Math.abs(D.current.y.start-D.current.y.end),c=a/Math.abs(D.current.x.start-D.current.x.end),x=s/Math.abs(D.current.x.start-D.current.x.end);p.dispatchAction({type:"dataZoom",moveOnMouseMove:j,filterMode:"none",rangeMode:["percent","percent"],batch:[{start:+c.toFixed(2),end:+x.toFixed(2),dataZoomIndex:0},{start:+l.toFixed(2),end:+d.toFixed(2),dataZoomIndex:1}]})}},G=function(){var e,t,n,r,o,a,s,i,u=null==p||null===(e=p.getModel())||void 0===e||null===(t=e.getComponent("xAxis",0))||void 0===t||null===(n=t.axis)||void 0===n||null===(r=n.scale)||void 0===r?void 0:r.getExtent(),l=null==p||null===(o=p.getModel())||void 0===o||null===(a=o.getComponent("yAxis",0))||void 0===a||null===(s=a.axis)||void 0===s||null===(i=s.scale)||void 0===i?void 0:i.getExtent();if(u&&l){var c=d.default(u,2),x=c[0],f=c[1],y=d.default(l,2),m=y[0],h=y[1];D.current={x:{start:+x.toFixed(2),end:+f.toFixed(2)},y:{start:+m.toFixed(2),end:+h.toFixed(2)}}}},V=function(){k(!1),F(!1),T(!0),null==p||p.dispatchAction({type:"dataZoom",start:0,end:100,rangeMode:["percent","percent"]})},H=function(e){var t,n,r=0===e.start&&100===e.end,o=null===(t=e.batch)||void 0===t||null===(n=t[0])||void 0===n?void 0:n.startValue;r&&G(),k(!!o||!r),function(){if(p){var e=p.getModel().getComponent("yAxis",0).axis.scale.getExtent(),t=d.default(e,2),n=t[0],r=t[1],o=p.getModel().getComponent("xAxis",0).axis.scale.getExtent(),a=d.default(o,2),s={x:{start:a[0],end:a[1]},y:{start:n,end:r}};B(s),null==u||u(s)}}()};n.useEffect((function(){p&&(I||G(),O&&(p.setOption({toolbox:{show:!0,width:0,height:0,feature:{dataZoom:{show:!0,icon:null,brushStyle:{borderWidth:0,opacity:.1,color:b.palette.primary.light}}}},dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:!1}]},{replaceMerge:"dataZoom"}),p.on("dataZoom",H),A(!1),p.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0})))}),[p,O,I]),n.useEffect((function(){var e=null==p?void 0:p.getZr();if(null!=e&&e.dom){var t=Array.from(e.dom.getElementsByTagName("canvas")).at(-1);t?t.style.cursor=j?"grab":P?"crosshair":"default":console.error("Canvas not found")}}),[p,j,P]),n.useEffect((function(){p&&p.setOption({dataZoom:[{type:"inside",xAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:j},{type:"inside",yAxisIndex:"all",filterMode:"none",zoomOnMouseWheel:!1,moveOnMouseMove:j}]})}),[j]),n.useEffect((function(){null==p||p.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:P})}),[P]);return i.jsxs("div",{className:c.default(h.container,t),children:[n.Children.map(x,(function(e){if(!n.isValidElement(e))return e;var t,r=e.props.onChartReady;return n.cloneElement(e,{onChartReady:(t=r,function(e){t&&t(e),A(!0),v.current=e})})})),i.jsx(s.Toolbox,f(f({},l),{},{handleTogglePane:function(e){return F(e)},handleToggleBrush:function(e){return T(e)},isPaneEnabled:j,isBrushEnabled:P,isZoomed:I,chart:p,handleZoomReset:V,handleZoomOut:function(){if(D.current&&z){var e=.05*Math.abs(D.current.x.start-D.current.x.end),t=.05*Math.abs(D.current.y.start-D.current.y.end),n=+(z.x.start-e).toFixed(2),r=+(z.x.end+e).toFixed(2),o=+(z.y.start-t).toFixed(2),a=+(z.y.end+t).toFixed(2),s=n<=D.current.x.start||r>=D.current.x.end,i=o<=D.current.y.start||a>=D.current.y.end;if(s&&i)return V();N({x:s?D.current.x:{start:n,end:r},y:i?D.current.y:{start:o,end:a}})}},handleZoomIn:function(){I||(G(),k(!0));var e=z||D.current;if(e){var t=.05*Math.abs(e.x.start-e.x.end),n=.05*Math.abs(e.y.start-e.y.end),r=+(e.x.start+t).toFixed(2),o=+(e.x.end-t).toFixed(2),a=+(e.y.start+n).toFixed(2),s=+(e.y.end-n).toFixed(2),i=r>=o,u=a>=s;N({x:{start:i?e.x.start:r,end:i?e.x.end:o},y:{start:u?e.y.start:a,end:u?e.y.end:s}})}},customToolboxContainerClass:c.default(null==l?void 0:l.customToolboxContainerClass,r)}))]})};
 //# sourceMappingURL=EChartsWrapper.js.map

package/cjs-bundle/components/EChartsWrapper/EChartsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"EChartsWrapper.js","sources":["../../../../src/components/EChartsWrapper/EChartsWrapper.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { noop } from 'lodash';\nimport { EChartsType, SeriesOption } from 'echarts';\nimport { AxisRange, ChartWrapperProps, DataZoomEvent, SeriesDataItem } from './types';\nimport { XAXisOption, YAXisOption } from 'echarts/types/dist/shared';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport classnames from 'classnames';\n\nimport { Toolbox } from './components/Toolbox/Toolbox';\n\nconst AXIS_ZOOM_STEP_PERCENT = 0.05;\n\nconst useStyles = makeStyles(() => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n}));\n\nconst EChartsWrapper: FC<PropsWithChildren<ChartWrapperProps>> = ({\n  containerClassName,\n  customToolboxContainerClass,\n  onDataZoom: onDataZoomCustom,\n  toolboxProps,\n  children,\n}) => {\n  const classes = useStyles();\n  const chartRef = useRef<EChartsType | null>(null);\n  const chart = chartRef.current;\n  const theme = useTheme();\n  const [isNeedInitialOptions, setIsNeedInitialOptions] = useState(false);\n  const [isPaneEnabled, setIsPaneEnabled] = useState(false);\n  const [isBrushEnabled, setIsBrushEnabled] = useState(true);\n  const [isZoomed, setIsZoomed] = useState(false);\n  const axisRange = useRef<AxisRange | null>(null);\n  const [currentZoomRange, setCurrentZoomRange] = useState<AxisRange | null>(null);\n\n  const handleZoomChart = (range: AxisRange) => {\n    if (!chart || !axisRange.current) return;\n\n    const options = chart.getOption();\n    const series = options.series as SeriesOption[] | SeriesOption;\n    const isMultipleAxis =\n      (options.xAxis as XAXisOption[])?.length > 1 || (options.yAxis as YAXisOption[])?.length > 1;\n    if (!isMultipleAxis) {\n      const data = (\n        Array.isArray(series)\n          ? series.reduce<unknown[]>((acc, serie) => acc.concat(serie.data), [])\n          : series.data\n      ) as SeriesDataItem[];\n\n      const isDataExists = data.some((dataItem: SeriesDataItem) => {\n        // case when dot structure is [x,y]\n        if (Array.isArray(dataItem)) {\n          return (\n            dataItem[0] > range.x.start &&\n            dataItem[0] < range.x.end &&\n            dataItem[1] > range.y.start &&\n            dataItem[1] < range.y.end\n          );\n        }\n        return (\n          dataItem.x > range.x.start &&\n          dataItem.x < range.x.end &&\n          dataItem.y > range.y.start &&\n          dataItem.y < range.y.end\n        );\n      });\n\n      if (!isDataExists) return;\n    }\n\n    const absoluteXStart = Math.abs(range.x.start - axisRange.current.x.start) * 100;\n    const absoluteXEnd = Math.abs(range.x.end - axisRange.current.x.start) * 100;\n\n    const absoluteYStart = Math.abs(range.y.start - axisRange.current.y.start) * 100;\n    const absoluteYEnd = Math.abs(range.y.end - axisRange.current.y.start) * 100;\n\n    const yStartPercent =\n      absoluteYStart / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n    const yEndPercent =\n      absoluteYEnd / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n\n    const xStartPercent =\n      absoluteXStart / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n    const xEndPercent =\n      absoluteXEnd / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n\n    chart.dispatchAction({\n      type: 'dataZoom',\n      moveOnMouseMove: isPaneEnabled,\n      filterMode: 'none',\n      rangeMode: ['percent', 'percent'],\n      batch: [\n        { start: +xStartPercent.toFixed(2), end: +xEndPercent.toFixed(2), dataZoomIndex: 0 },\n        {\n          start: +yStartPercent.toFixed(2),\n          end: +yEndPercent.toFixed(2),\n          dataZoomIndex: 1,\n        },\n      ],\n    });\n  };\n\n  const handleSaveAxisRanges = () => {\n    // @ts-ignore\n    const xRange = chart?.getModel()?.getComponent('xAxis', 0)?.axis?.scale?.getExtent() as [\n      xMin: number,\n      xMax: number\n    ];\n    // @ts-ignore\n    const yRange = chart?.getModel()?.getComponent('yAxis', 0)?.axis?.scale?.getExtent() as [\n      yMin: number,\n      yMax: number\n    ];\n\n    if (xRange && yRange) {\n      const [xMin, xMax] = xRange;\n      const [yMin, yMax] = yRange;\n      axisRange.current = {\n        x: {\n          start: +xMin.toFixed(2),\n          end: +xMax.toFixed(2),\n        },\n        y: {\n          start: +yMin.toFixed(2),\n          end: +yMax.toFixed(2),\n        },\n      };\n    }\n  };\n\n  const handleSaveZoomRange = () => {\n    if (!chart) return;\n\n    // getModel is not standardized and documented\n    // https://github.com/apache/echarts/issues/16479#issuecomment-1033349403\n    // @ts-ignore\n    const [yMin, yMax] = chart.getModel().getComponent('yAxis', 0).axis.scale.getExtent();\n    // @ts-ignore\n    const [xMin, xMax] = chart.getModel().getComponent('xAxis', 0).axis.scale.getExtent();\n\n    const range = {\n      x: {\n        start: xMin,\n        end: xMax,\n      },\n      y: {\n        start: yMin,\n        end: yMax,\n      },\n    };\n    setCurrentZoomRange(range);\n    onDataZoomCustom?.(range);\n  };\n\n  const handleZoomIn = (): void => {\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n      setIsZoomed(true);\n    }\n    const targetRange = currentZoomRange || axisRange.current;\n    if (!targetRange) return;\n\n    const currentXStep = Math.abs(targetRange.x.start - targetRange.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep = Math.abs(targetRange.y.start - targetRange.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(targetRange.x.start + currentXStep).toFixed(2);\n    const XEnd = +(targetRange.x.end - currentXStep).toFixed(2);\n\n    const YStart = +(targetRange.y.start + currentYStep).toFixed(2);\n    const YEnd = +(targetRange.y.end - currentYStep).toFixed(2);\n    const isXExceeds = XStart >= XEnd;\n    const isYExceeds = YStart >= YEnd;\n\n    handleZoomChart({\n      x: {\n        start: isXExceeds ? targetRange.x.start : XStart,\n        end: isXExceeds ? targetRange.x.end : XEnd,\n      },\n      y: {\n        start: isYExceeds ? targetRange.y.start : YStart,\n        end: isYExceeds ? targetRange.y.end : YEnd,\n      },\n    });\n  };\n\n  const handleZoomOut = (): void => {\n    if (!axisRange.current || !currentZoomRange) return;\n\n    const currentXStep =\n      Math.abs(axisRange.current.x.start - axisRange.current.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep =\n      Math.abs(axisRange.current.y.start - axisRange.current.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(currentZoomRange.x.start - currentXStep).toFixed(2);\n    const XEnd = +(currentZoomRange.x.end + currentXStep).toFixed(2);\n\n    const YStart = +(currentZoomRange.y.start - currentYStep).toFixed(2);\n    const YEnd = +(currentZoomRange.y.end + currentYStep).toFixed(2);\n\n    const isXExceeds = XStart <= axisRange.current.x.start || XEnd >= axisRange.current.x.end;\n    const isYExceeds = YStart <= axisRange.current.y.start || YEnd >= axisRange.current.y.end;\n\n    if (isXExceeds && isYExceeds) {\n      return handleZoomReset();\n    }\n\n    handleZoomChart({\n      x: isXExceeds\n        ? axisRange.current.x\n        : {\n            start: XStart,\n            end: XEnd,\n          },\n      y: isYExceeds\n        ? axisRange.current.y\n        : {\n            start: YStart,\n            end: YEnd,\n          },\n    });\n  };\n\n  const handleZoomReset = () => {\n    setIsZoomed(false);\n    setIsPaneEnabled(false);\n    setIsBrushEnabled(true);\n    chart?.dispatchAction({\n      type: 'dataZoom',\n      start: 0,\n      end: 100,\n      rangeMode: ['percent', 'percent'],\n    });\n  };\n\n  const onDataZoom = (evt: DataZoomEvent) => {\n    const isResetEvent = evt.start === 0 && evt.end === 100;\n    const isNativeDataZoom = evt.batch?.[0]?.startValue;\n\n    if (isResetEvent) {\n      handleSaveAxisRanges();\n    }\n\n    setIsZoomed(isNativeDataZoom ? true : !isResetEvent);\n\n    handleSaveZoomRange();\n  };\n\n  useEffect(() => {\n    if (!chart) return;\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n    }\n\n    if (isNeedInitialOptions) {\n      chart.setOption(\n        {\n          toolbox: {\n            show: true,\n            width: 0,\n            height: 0,\n            feature: {\n              dataZoom: {\n                show: true,\n                icon: null,\n                brushStyle: {\n                  borderWidth: 0,\n                  opacity: 0.1,\n                  color: theme.palette.primary.light,\n                },\n              },\n            },\n          },\n          dataZoom: [\n            {\n              type: 'inside',\n              xAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n            {\n              type: 'inside',\n              yAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n          ],\n        },\n        { replaceMerge: 'dataZoom' }\n      );\n      chart.on('dataZoom', onDataZoom as (...args: unknown[]) => void);\n      setIsNeedInitialOptions(false);\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }, [chart, isNeedInitialOptions, isZoomed]);\n\n  useEffect(() => {\n    // cursor grab in pane mode works only for canvas renderer\n    const zRender = chart?.getZr();\n    if (zRender?.dom) {\n      const canvas = Array.from(zRender.dom.getElementsByTagName('canvas')).at(\n        -1\n      ) as HTMLCanvasElement;\n      if (canvas) {\n        canvas.style.cursor = isPaneEnabled ? 'grab' : isBrushEnabled ? 'crosshair' : 'default';\n      } else {\n        console.error('Canvas not found');\n      }\n    }\n  }, [chart, isPaneEnabled, isBrushEnabled]);\n\n  useEffect(() => {\n    if (!chart) return;\n    chart.setOption({\n      dataZoom: [\n        {\n          type: 'inside',\n          xAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n        {\n          type: 'inside',\n          yAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n      ],\n    });\n  }, [isPaneEnabled]);\n\n  useEffect(() => {\n    chart?.dispatchAction({\n      type: 'takeGlobalCursor',\n      key: 'dataZoomSelect',\n      dataZoomSelectActive: isBrushEnabled,\n    });\n  }, [isBrushEnabled]);\n\n  const onChartReadyExtended =\n    (childCallback?: (instance: EChartsType) => any) => (instance: EChartsType) => {\n      if (childCallback) {\n        childCallback(instance);\n      }\n      setIsNeedInitialOptions(true);\n      chartRef.current = instance;\n    };\n\n  return (\n    <div className={classnames(classes.container, containerClassName)}>\n      {Children.map(children, child => {\n        if (!isValidElement(child)) return child;\n\n        const { onChartReady } = child.props;\n\n        return cloneElement(child, {\n          onChartReady: onChartReadyExtended(onChartReady),\n        });\n      })}\n      <Toolbox\n        {...toolboxProps}\n        handleTogglePane={isEnabled => setIsPaneEnabled(isEnabled)}\n        handleToggleBrush={isEnabled => setIsBrushEnabled(isEnabled)}\n        isPaneEnabled={isPaneEnabled}\n        isBrushEnabled={isBrushEnabled}\n        isZoomed={isZoomed}\n        chart={chart}\n        handleZoomReset={handleZoomReset}\n        handleZoomOut={handleZoomOut}\n        handleZoomIn={handleZoomIn}\n        customToolboxContainerClass={classnames(\n          toolboxProps?.customToolboxContainerClass,\n          customToolboxContainerClass\n        )}\n      />\n    </div>\n  );\n};\n\nEChartsWrapper.defaultProps = {\n  onDataZoom: noop,\n};\n\nexport default EChartsWrapper;\n"],"names":["useStyles","makeStyles","container","position","width","height","EChartsWrapper","_ref","containerClassName","customToolboxContainerClass","onDataZoomCustom","onDataZoom","toolboxProps","children","classes","chartRef","useRef","chart","current","theme","useTheme","useState","_useState2","_slicedToArray","_useState","isNeedInitialOptions","setIsNeedInitialOptions","_useState4","_useState3","isPaneEnabled","setIsPaneEnabled","_useState6","_useState5","isBrushEnabled","setIsBrushEnabled","_useState8","_useState7","isZoomed","setIsZoomed","axisRange","_useState10","_useState9","currentZoomRange","setCurrentZoomRange","handleZoomChart","range","_options$xAxis","_options$yAxis","options","getOption","series","xAxis","length","yAxis","Array","isArray","reduce","acc","serie","concat","data","some","dataItem","x","start","end","y","absoluteXStart","Math","abs","absoluteXEnd","absoluteYStart","absoluteYEnd","yStartPercent","yEndPercent","xStartPercent","xEndPercent","dispatchAction","type","moveOnMouseMove","filterMode","rangeMode","batch","toFixed","dataZoomIndex","handleSaveAxisRanges","_chart$getModel","_chart$getModel$getCo","_chart$getModel$getCo2","_chart$getModel$getCo3","_chart$getModel2","_chart$getModel2$getC","_chart$getModel2$getC2","_chart$getModel2$getC3","xRange","getModel","getComponent","axis","scale","getExtent","yRange","_xRange","xMin","xMax","_yRange","yMin","yMax","handleZoomReset","evt","_evt$batch","_evt$batch$","isResetEvent","isNativeDataZoom","startValue","_chart$getModel$getCo4","_chart$getModel$getCo5","_chart$getModel$getCo6","_chart$getModel$getCo7","handleSaveZoomRange","useEffect","setOption","toolbox","show","feature","dataZoom","icon","brushStyle","borderWidth","opacity","color","palette","primary","light","xAxisIndex","zoomOnMouseWheel","yAxisIndex","replaceMerge","on","key","dataZoomSelectActive","zRender","getZr","dom","canvas","from","getElementsByTagName","at","style","cursor","console","error","_jsxs","className","classnames","Children","map","child","isValidElement","childCallback","onChartReady","props","cloneElement","instance","_jsx","Toolbox","handleTogglePane","isEnabled","handleToggleBrush","handleZoomOut","currentXStep","currentYStep","XStart","XEnd","YStart","YEnd","isXExceeds","isYExceeds","handleZoomIn","targetRange","defaultProps","noop"],"mappings":"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"}
+{"version":3,"file":"EChartsWrapper.js","sources":["../../../../src/components/EChartsWrapper/EChartsWrapper.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  FC,\n  isValidElement,\n  PropsWithChildren,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { noop } from 'lodash';\nimport { EChartsType, SeriesOption } from 'echarts';\nimport { AxisRange, ChartWrapperProps, DataZoomEvent, SeriesDataItem } from './types';\nimport { XAXisOption, YAXisOption } from 'echarts/types/dist/shared';\nimport { makeStyles, useTheme } from '@material-ui/core';\nimport classnames from 'classnames';\n\nimport { Toolbox } from './components/Toolbox/Toolbox';\n\nconst AXIS_ZOOM_STEP_PERCENT = 0.05;\n\nconst useStyles = makeStyles(() => ({\n  container: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n  },\n}));\n\nconst EChartsWrapper: FC<PropsWithChildren<ChartWrapperProps>> = ({\n  containerClassName,\n  customToolboxContainerClass,\n  onDataZoom: onDataZoomCustom = DEFAULT_ECHARTS_WRAPPER_ON_DATA_ZOOM,\n  toolboxProps,\n  children,\n}) => {\n  const classes = useStyles();\n  const chartRef = useRef<EChartsType | null>(null);\n  const chart = chartRef.current;\n  const theme = useTheme();\n  const [isNeedInitialOptions, setIsNeedInitialOptions] = useState(false);\n  const [isPaneEnabled, setIsPaneEnabled] = useState(false);\n  const [isBrushEnabled, setIsBrushEnabled] = useState(true);\n  const [isZoomed, setIsZoomed] = useState(false);\n  const axisRange = useRef<AxisRange | null>(null);\n  const [currentZoomRange, setCurrentZoomRange] = useState<AxisRange | null>(null);\n\n  const handleZoomChart = (range: AxisRange) => {\n    if (!chart || !axisRange.current) return;\n\n    const options = chart.getOption();\n    const series = options.series as SeriesOption[] | SeriesOption;\n    const isMultipleAxis =\n      (options.xAxis as XAXisOption[])?.length > 1 || (options.yAxis as YAXisOption[])?.length > 1;\n    if (!isMultipleAxis) {\n      const data = (\n        Array.isArray(series)\n          ? series.reduce<unknown[]>((acc, serie) => acc.concat(serie.data), [])\n          : series.data\n      ) as SeriesDataItem[];\n\n      const isDataExists = data.some((dataItem: SeriesDataItem) => {\n        // case when dot structure is [x,y]\n        if (Array.isArray(dataItem)) {\n          return (\n            dataItem[0] > range.x.start &&\n            dataItem[0] < range.x.end &&\n            dataItem[1] > range.y.start &&\n            dataItem[1] < range.y.end\n          );\n        }\n        return (\n          dataItem.x > range.x.start &&\n          dataItem.x < range.x.end &&\n          dataItem.y > range.y.start &&\n          dataItem.y < range.y.end\n        );\n      });\n\n      if (!isDataExists) return;\n    }\n\n    const absoluteXStart = Math.abs(range.x.start - axisRange.current.x.start) * 100;\n    const absoluteXEnd = Math.abs(range.x.end - axisRange.current.x.start) * 100;\n\n    const absoluteYStart = Math.abs(range.y.start - axisRange.current.y.start) * 100;\n    const absoluteYEnd = Math.abs(range.y.end - axisRange.current.y.start) * 100;\n\n    const yStartPercent =\n      absoluteYStart / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n    const yEndPercent =\n      absoluteYEnd / Math.abs(axisRange.current.y.start - axisRange.current.y.end);\n\n    const xStartPercent =\n      absoluteXStart / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n    const xEndPercent =\n      absoluteXEnd / Math.abs(axisRange.current.x.start - axisRange.current.x.end);\n\n    chart.dispatchAction({\n      type: 'dataZoom',\n      moveOnMouseMove: isPaneEnabled,\n      filterMode: 'none',\n      rangeMode: ['percent', 'percent'],\n      batch: [\n        { start: +xStartPercent.toFixed(2), end: +xEndPercent.toFixed(2), dataZoomIndex: 0 },\n        {\n          start: +yStartPercent.toFixed(2),\n          end: +yEndPercent.toFixed(2),\n          dataZoomIndex: 1,\n        },\n      ],\n    });\n  };\n\n  const handleSaveAxisRanges = () => {\n    // @ts-expect-error\n    const xRange = chart?.getModel()?.getComponent('xAxis', 0)?.axis?.scale?.getExtent() as [\n      xMin: number,\n      xMax: number\n    ];\n    // @ts-expect-error\n    const yRange = chart?.getModel()?.getComponent('yAxis', 0)?.axis?.scale?.getExtent() as [\n      yMin: number,\n      yMax: number\n    ];\n\n    if (xRange && yRange) {\n      const [xMin, xMax] = xRange;\n      const [yMin, yMax] = yRange;\n      axisRange.current = {\n        x: {\n          start: +xMin.toFixed(2),\n          end: +xMax.toFixed(2),\n        },\n        y: {\n          start: +yMin.toFixed(2),\n          end: +yMax.toFixed(2),\n        },\n      };\n    }\n  };\n\n  const handleSaveZoomRange = () => {\n    if (!chart) return;\n\n    // getModel is not standardized and documented\n    // https://github.com/apache/echarts/issues/16479#issuecomment-1033349403\n    // @ts-expect-error\n    const [yMin, yMax] = chart.getModel().getComponent('yAxis', 0).axis.scale.getExtent();\n    // @ts-expect-error\n    const [xMin, xMax] = chart.getModel().getComponent('xAxis', 0).axis.scale.getExtent();\n\n    const range = {\n      x: {\n        start: xMin,\n        end: xMax,\n      },\n      y: {\n        start: yMin,\n        end: yMax,\n      },\n    };\n    setCurrentZoomRange(range);\n    onDataZoomCustom?.(range);\n  };\n\n  const handleZoomIn = (): void => {\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n      setIsZoomed(true);\n    }\n    const targetRange = currentZoomRange || axisRange.current;\n    if (!targetRange) return;\n\n    const currentXStep = Math.abs(targetRange.x.start - targetRange.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep = Math.abs(targetRange.y.start - targetRange.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(targetRange.x.start + currentXStep).toFixed(2);\n    const XEnd = +(targetRange.x.end - currentXStep).toFixed(2);\n\n    const YStart = +(targetRange.y.start + currentYStep).toFixed(2);\n    const YEnd = +(targetRange.y.end - currentYStep).toFixed(2);\n    const isXExceeds = XStart >= XEnd;\n    const isYExceeds = YStart >= YEnd;\n\n    handleZoomChart({\n      x: {\n        start: isXExceeds ? targetRange.x.start : XStart,\n        end: isXExceeds ? targetRange.x.end : XEnd,\n      },\n      y: {\n        start: isYExceeds ? targetRange.y.start : YStart,\n        end: isYExceeds ? targetRange.y.end : YEnd,\n      },\n    });\n  };\n\n  const handleZoomOut = (): void => {\n    if (!axisRange.current || !currentZoomRange) return;\n\n    const currentXStep =\n      Math.abs(axisRange.current.x.start - axisRange.current.x.end) * AXIS_ZOOM_STEP_PERCENT;\n    const currentYStep =\n      Math.abs(axisRange.current.y.start - axisRange.current.y.end) * AXIS_ZOOM_STEP_PERCENT;\n\n    const XStart = +(currentZoomRange.x.start - currentXStep).toFixed(2);\n    const XEnd = +(currentZoomRange.x.end + currentXStep).toFixed(2);\n\n    const YStart = +(currentZoomRange.y.start - currentYStep).toFixed(2);\n    const YEnd = +(currentZoomRange.y.end + currentYStep).toFixed(2);\n\n    const isXExceeds = XStart <= axisRange.current.x.start || XEnd >= axisRange.current.x.end;\n    const isYExceeds = YStart <= axisRange.current.y.start || YEnd >= axisRange.current.y.end;\n\n    if (isXExceeds && isYExceeds) {\n      return handleZoomReset();\n    }\n\n    handleZoomChart({\n      x: isXExceeds\n        ? axisRange.current.x\n        : {\n            start: XStart,\n            end: XEnd,\n          },\n      y: isYExceeds\n        ? axisRange.current.y\n        : {\n            start: YStart,\n            end: YEnd,\n          },\n    });\n  };\n\n  const handleZoomReset = () => {\n    setIsZoomed(false);\n    setIsPaneEnabled(false);\n    setIsBrushEnabled(true);\n    chart?.dispatchAction({\n      type: 'dataZoom',\n      start: 0,\n      end: 100,\n      rangeMode: ['percent', 'percent'],\n    });\n  };\n\n  const onDataZoom = (evt: DataZoomEvent) => {\n    const isResetEvent = evt.start === 0 && evt.end === 100;\n    const isNativeDataZoom = evt.batch?.[0]?.startValue;\n\n    if (isResetEvent) {\n      handleSaveAxisRanges();\n    }\n\n    setIsZoomed(isNativeDataZoom ? true : !isResetEvent);\n\n    handleSaveZoomRange();\n  };\n\n  useEffect(() => {\n    if (!chart) return;\n    if (!isZoomed) {\n      handleSaveAxisRanges();\n    }\n\n    if (isNeedInitialOptions) {\n      chart.setOption(\n        {\n          toolbox: {\n            show: true,\n            width: 0,\n            height: 0,\n            feature: {\n              dataZoom: {\n                show: true,\n                icon: null,\n                brushStyle: {\n                  borderWidth: 0,\n                  opacity: 0.1,\n                  color: theme.palette.primary.light,\n                },\n              },\n            },\n          },\n          dataZoom: [\n            {\n              type: 'inside',\n              xAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n            {\n              type: 'inside',\n              yAxisIndex: 'all',\n              filterMode: 'none',\n              zoomOnMouseWheel: false,\n              moveOnMouseMove: false,\n            },\n          ],\n        },\n        { replaceMerge: 'dataZoom' }\n      );\n      chart.on('dataZoom', onDataZoom as (...args: unknown[]) => void);\n      setIsNeedInitialOptions(false);\n      chart.dispatchAction({\n        type: 'takeGlobalCursor',\n        key: 'dataZoomSelect',\n        dataZoomSelectActive: true,\n      });\n    }\n  }, [chart, isNeedInitialOptions, isZoomed]);\n\n  useEffect(() => {\n    // cursor grab in pane mode works only for canvas renderer\n    const zRender = chart?.getZr();\n    if (zRender?.dom) {\n      const canvas = Array.from(zRender.dom.getElementsByTagName('canvas')).at(\n        -1\n      ) as HTMLCanvasElement;\n      if (canvas) {\n        canvas.style.cursor = isPaneEnabled ? 'grab' : isBrushEnabled ? 'crosshair' : 'default';\n      } else {\n        console.error('Canvas not found');\n      }\n    }\n  }, [chart, isPaneEnabled, isBrushEnabled]);\n\n  useEffect(() => {\n    if (!chart) return;\n    chart.setOption({\n      dataZoom: [\n        {\n          type: 'inside',\n          xAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n        {\n          type: 'inside',\n          yAxisIndex: 'all',\n          filterMode: 'none',\n          zoomOnMouseWheel: false,\n          moveOnMouseMove: isPaneEnabled,\n        },\n      ],\n    });\n  }, [isPaneEnabled]);\n\n  useEffect(() => {\n    chart?.dispatchAction({\n      type: 'takeGlobalCursor',\n      key: 'dataZoomSelect',\n      dataZoomSelectActive: isBrushEnabled,\n    });\n  }, [isBrushEnabled]);\n\n  const onChartReadyExtended =\n    (childCallback?: (instance: EChartsType) => any) => (instance: EChartsType) => {\n      if (childCallback) {\n        childCallback(instance);\n      }\n      setIsNeedInitialOptions(true);\n      chartRef.current = instance;\n    };\n\n  return (\n    <div className={classnames(classes.container, containerClassName)}>\n      {Children.map(children, child => {\n        if (!isValidElement(child)) return child;\n\n        const { onChartReady } = child.props;\n\n        return cloneElement(child, {\n          onChartReady: onChartReadyExtended(onChartReady),\n        });\n      })}\n      <Toolbox\n        {...toolboxProps}\n        handleTogglePane={isEnabled => setIsPaneEnabled(isEnabled)}\n        handleToggleBrush={isEnabled => setIsBrushEnabled(isEnabled)}\n        isPaneEnabled={isPaneEnabled}\n        isBrushEnabled={isBrushEnabled}\n        isZoomed={isZoomed}\n        chart={chart}\n        handleZoomReset={handleZoomReset}\n        handleZoomOut={handleZoomOut}\n        handleZoomIn={handleZoomIn}\n        customToolboxContainerClass={classnames(\n          toolboxProps?.customToolboxContainerClass,\n          customToolboxContainerClass\n        )}\n      />\n    </div>\n  );\n};\n\nconst DEFAULT_ECHARTS_WRAPPER_ON_DATA_ZOOM = noop;\n\nexport default EChartsWrapper;\n"],"names":["useStyles","makeStyles","container","position","width","height","DEFAULT_ECHARTS_WRAPPER_ON_DATA_ZOOM","noop","_ref","containerClassName","customToolboxContainerClass","_ref$onDataZoom","onDataZoom","onDataZoomCustom","toolboxProps","children","classes","chartRef","useRef","chart","current","theme","useTheme","useState","_useState2","_slicedToArray","_useState","isNeedInitialOptions","setIsNeedInitialOptions","_useState4","_useState3","isPaneEnabled","setIsPaneEnabled","_useState6","_useState5","isBrushEnabled","setIsBrushEnabled","_useState8","_useState7","isZoomed","setIsZoomed","axisRange","_useState10","_useState9","currentZoomRange","setCurrentZoomRange","handleZoomChart","range","_options$xAxis","_options$yAxis","options","getOption","series","xAxis","length","yAxis","Array","isArray","reduce","acc","serie","concat","data","some","dataItem","x","start","end","y","absoluteXStart","Math","abs","absoluteXEnd","absoluteYStart","absoluteYEnd","yStartPercent","yEndPercent","xStartPercent","xEndPercent","dispatchAction","type","moveOnMouseMove","filterMode","rangeMode","batch","toFixed","dataZoomIndex","handleSaveAxisRanges","_chart$getModel","_chart$getModel$getCo","_chart$getModel$getCo2","_chart$getModel$getCo3","_chart$getModel2","_chart$getModel2$getC","_chart$getModel2$getC2","_chart$getModel2$getC3","xRange","getModel","getComponent","axis","scale","getExtent","yRange","_xRange","xMin","xMax","_yRange","yMin","yMax","handleZoomReset","evt","_evt$batch","_evt$batch$","isResetEvent","isNativeDataZoom","startValue","_chart$getModel$getCo4","_chart$getModel$getCo5","_chart$getModel$getCo6","_chart$getModel$getCo7","handleSaveZoomRange","useEffect","setOption","toolbox","show","feature","dataZoom","icon","brushStyle","borderWidth","opacity","color","palette","primary","light","xAxisIndex","zoomOnMouseWheel","yAxisIndex","replaceMerge","on","key","dataZoomSelectActive","zRender","getZr","dom","canvas","from","getElementsByTagName","at","style","cursor","console","error","_jsxs","className","classnames","Children","map","child","isValidElement","childCallback","onChartReady","props","cloneElement","instance","_jsx","Toolbox","handleTogglePane","isEnabled","handleToggleBrush","handleZoomOut","currentXStep","currentYStep","XStart","XEnd","YStart","YEnd","isXExceeds","isYExceeds","handleZoomIn","targetRange"],"mappings":"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"}

package/cjs-bundle/components/EditableItem/EditableItem/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),i=require("react"),n=require("prop-types"),l=require("classnames"),a=require("@material-ui/core"),o=require("@material-ui/icons/Edit"),r=require("@material-ui/icons/Close"),s=require("@material-ui/icons/Done"),c=require("../../IconButton/index.js"),u=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),f=d(t),m=d(n),v=d(l),g=d(o),h=d(r),b=d(s),x=a.makeStyles((function(e){return{editableItem:{width:"100%",height:36,position:"relative",backgroundColor:e.palette.background.b8,"&:hover":{backgroundColor:"rgba(3, 188, 212, 0.07)"},"&:hover svg":{visibility:"visible"}},editableItemActive:{backgroundColor:"rgba(3, 188, 212, 0.15)  !important"},container:{display:"flex",alignItems:"center",justifyContent:"space-between","&:hover $editIcon":{visibility:"visible"}},value:{color:e.palette.primary.text6,fontSize:"0.875rem",height:"100%",letterSpacing:".13132px",lineHeight:"36px",overflow:"hidden",paddingLeft:48,textOverflow:"ellipsis",whiteSpace:"nowrap",width:"calc(100% - 32px)",userSelect:"none"},textField:{width:"100%"},inputRoot:{height:36,paddingLeft:48,fontSize:"0.875rem"},inputDisabled:{backgroundColor:"unset",paddingRight:16,"&::before":{display:"none"},pointerEvents:"none"},editIcon:{visibility:"hidden",marginRight:4},closeIcon:{color:e.palette.primary.text6,"&:hover svg":{fill:"".concat(e.palette.primary.contrastText," !important")},"& svg":{fill:"".concat(e.palette.primary.text6," !important"),"&:hover":{fill:"#FFFFFF !important"}}},inputAdornment:{marginTop:1,marginRight:4}}})),y=function(e){var t=e.className,n=e.isEditable,l=e.isEditing,o=e.onClick,r=e.onClickAway,s=e.onCancel,d=e.onSave,m=e.value,y=i.useState(m),k=f.default(y,2),C=k[0],j=k[1],w=i.useState(l),E=f.default(w,2),S=E[0],q=E[1],I=x(),A=function(e){var t;e.stopPropagation(),C.length&&C!==m&&(null==d||null===(t=d(C))||void 0===t||t.then((function(){return q(!1)})))};i.useEffect((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(j(m),q(!1),null==r||r()):"Enter"===e.key&&A(e)};return S&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[S,m,C]);var F=function(e){e.stopPropagation(),j(m),q(!1),null==s||s()};i.useEffect((function(){j(m)}),[m]);var N=v.default(I.editableItem,p.default({},I.editableItemActive,S),t);return u.jsxs("div",{className:v.default(N,I.container),onClick:null!=o?o:void 0,children:[!S&&u.jsx("div",{className:I.value,children:C}),S&&u.jsx(a.ClickAwayListener,{onClickAway:function(){j(m),q(!1),null==r||r()},children:u.jsx(a.TextField,{autoFocus:!0,type:"text",value:C,onChange:function(e){e.stopPropagation(),j(e.target.value)},placeholder:"Page Name...",className:I.textField,InputProps:{classes:{root:I.inputRoot},endAdornment:S?u.jsx(a.InputAdornment,{position:"end",children:u.jsxs("span",{className:I.inputAdornment,children:[u.jsx(a.Tooltip,{title:"Cancel",placement:"bottom-end",children:u.jsx(c,{onClick:F,size:"small",className:I.closeIcon,children:u.jsx(h.default,{fontSize:"small"})})}),u.jsx(a.Tooltip,{title:"Save",placement:"bottom-end",children:u.jsx(c,{onClick:A,size:"small",disabled:C===m,children:u.jsx(b.default,{color:C===m?"disabled":"primary",fontSize:"small"})})})]})}):null}})}),n&&!S&&u.jsx(a.Tooltip,{title:"Rename Page",placement:"bottom-end",children:u.jsx(c,{className:I.editIcon,size:"small",onClick:function(e){e.stopPropagation(),q(!0)},children:u.jsx(g.default,{fontSize:"small"})})})]})},k={className:m.default.string,isEditable:m.default.bool,isEditing:m.default.bool,onClick:m.default.func,onSave:m.default.func.isRequired,onClickAway:m.default.func,onCancel:m.default.func,value:m.default.string.isRequired};y.propTypes=k,y.defaultProps={className:"",isEditable:!0,isEditing:!1,onClick:function(){},onClickAway:function(){},onCancel:function(){}},module.exports=y;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),i=require("react"),n=require("prop-types"),o=require("classnames"),l=require("@material-ui/core"),a=require("@material-ui/icons/Edit"),r=require("@material-ui/icons/Close"),s=require("@material-ui/icons/Done"),c=require("../../IconButton/index.js"),u=require("react/jsx-runtime");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(e),f=d(t),m=d(n),v=d(o),g=d(a),h=d(r),b=d(s),x=l.makeStyles((function(e){return{editableItem:{width:"100%",height:36,position:"relative",backgroundColor:e.palette.background.b8,"&:hover":{backgroundColor:"rgba(3, 188, 212, 0.07)"},"&:hover svg":{visibility:"visible"}},editableItemActive:{backgroundColor:"rgba(3, 188, 212, 0.15)  !important"},container:{display:"flex",alignItems:"center",justifyContent:"space-between","&:hover $editIcon":{visibility:"visible"}},value:{color:e.palette.primary.text6,fontSize:"0.875rem",height:"100%",letterSpacing:".13132px",lineHeight:"36px",overflow:"hidden",paddingLeft:48,textOverflow:"ellipsis",whiteSpace:"nowrap",width:"calc(100% - 32px)",userSelect:"none"},textField:{width:"100%"},inputRoot:{height:36,paddingLeft:48,fontSize:"0.875rem"},inputDisabled:{backgroundColor:"unset",paddingRight:16,"&::before":{display:"none"},pointerEvents:"none"},editIcon:{visibility:"hidden",marginRight:4},closeIcon:{color:e.palette.primary.text6,"&:hover svg":{fill:"".concat(e.palette.primary.contrastText," !important")},"& svg":{fill:"".concat(e.palette.primary.text6," !important"),"&:hover":{fill:"#FFFFFF !important"}}},inputAdornment:{marginTop:1,marginRight:4}}})),y=function(e){var t=e.className,n=void 0===t?"":t,o=e.isEditable,a=void 0===o||o,r=e.isEditing,s=void 0!==r&&r,d=e.onClick,m=void 0===d?C:d,y=e.onClickAway,k=void 0===y?j:y,S=e.onCancel,q=void 0===S?w:S,E=e.onSave,I=e.value,A=i.useState(I),F=f.default(A,2),N=F[0],z=F[1],P=i.useState(s),R=f.default(P,2),T=R[0],L=R[1],D=x(),B=function(e){var t;e.stopPropagation(),N.length&&N!==I&&(null==E||null===(t=E(N))||void 0===t||t.then((function(){return L(!1)})))};i.useEffect((function(){var e=function(e){"Escape"===e.key||"Esc"===e.key?(z(I),L(!1),null==k||k()):"Enter"===e.key&&B(e)};return T&&document.addEventListener("keydown",e),function(){return document.removeEventListener("keydown",e)}}),[T,I,N]);var H=function(e){e.stopPropagation(),z(I),L(!1),null==q||q()};i.useEffect((function(){z(I)}),[I]);var O=v.default(D.editableItem,p.default({},D.editableItemActive,T),n);return u.jsxs("div",{className:v.default(O,D.container),onClick:null!=m?m:void 0,children:[!T&&u.jsx("div",{className:D.value,children:N}),T&&u.jsx(l.ClickAwayListener,{onClickAway:function(){z(I),L(!1),null==k||k()},children:u.jsx(l.TextField,{autoFocus:!0,type:"text",value:N,onChange:function(e){e.stopPropagation(),z(e.target.value)},placeholder:"Page Name...",className:D.textField,InputProps:{classes:{root:D.inputRoot},endAdornment:T?u.jsx(l.InputAdornment,{position:"end",children:u.jsxs("span",{className:D.inputAdornment,children:[u.jsx(l.Tooltip,{title:"Cancel",placement:"bottom-end",children:u.jsx(c,{onClick:H,size:"small",className:D.closeIcon,children:u.jsx(h.default,{fontSize:"small"})})}),u.jsx(l.Tooltip,{title:"Save",placement:"bottom-end",children:u.jsx(c,{onClick:B,size:"small",disabled:N===I,children:u.jsx(b.default,{color:N===I?"disabled":"primary",fontSize:"small"})})})]})}):null}})}),a&&!T&&u.jsx(l.Tooltip,{title:"Rename Page",placement:"bottom-end",children:u.jsx(c,{className:D.editIcon,size:"small",onClick:function(e){e.stopPropagation(),L(!0)},children:u.jsx(g.default,{fontSize:"small"})})})]})},k={className:m.default.string,isEditable:m.default.bool,isEditing:m.default.bool,onClick:m.default.func,onSave:m.default.func.isRequired,onClickAway:m.default.func,onCancel:m.default.func,value:m.default.string.isRequired};y.propTypes=k;var C=function(){},j=function(){},w=function(){};module.exports=y;
 //# sourceMappingURL=index.js.map

package/cjs-bundle/components/EditableItem/EditableItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/EditableItem/EditableItem/index.tsx"],"sourcesContent":["import { type ChangeEvent, type MouseEvent, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport {\n  ClickAwayListener,\n  InputAdornment,\n  TextField,\n  Tooltip,\n  makeStyles,\n} from '@material-ui/core';\nimport EditIcon from '@material-ui/icons/Edit';\nimport CloseIcon from '@material-ui/icons/Close';\nimport DoneIcon from '@material-ui/icons/Done';\nimport IconButton from '~/components/IconButton';\n\nconst useStyles = makeStyles(theme => ({\n  editableItem: {\n    width: '100%',\n    height: 36,\n    position: 'relative',\n    backgroundColor: theme.palette.background.b8,\n    '&:hover': {\n      backgroundColor: 'rgba(3, 188, 212, 0.07)',\n    },\n    '&:hover svg': {\n      visibility: 'visible',\n    },\n  },\n  editableItemActive: {\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n  },\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    '&:hover $editIcon': {\n      visibility: 'visible',\n    },\n  },\n  value: {\n    color: theme.palette.primary.text6,\n    fontSize: '0.875rem',\n    height: '100%',\n    letterSpacing: '.13132px',\n    lineHeight: '36px',\n    overflow: 'hidden',\n    paddingLeft: 48,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    width: 'calc(100% - 32px)',\n    userSelect: 'none',\n  },\n  textField: {\n    width: '100%',\n  },\n  inputRoot: {\n    height: 36,\n    paddingLeft: 48,\n    fontSize: '0.875rem',\n  },\n  inputDisabled: {\n    backgroundColor: 'unset',\n    paddingRight: 16,\n    '&::before': {\n      display: 'none',\n    },\n    pointerEvents: 'none',\n  },\n  editIcon: {\n    visibility: 'hidden',\n    marginRight: 4,\n  },\n  closeIcon: {\n    color: theme.palette.primary.text6,\n    '&:hover svg': {\n      fill: `${theme.palette.primary.contrastText} !important`,\n    },\n    '& svg': {\n      fill: `${theme.palette.primary.text6} !important`,\n      '&:hover': {\n        fill: '#FFFFFF !important',\n      },\n    },\n  },\n  inputAdornment: {\n    marginTop: 1,\n    marginRight: 4,\n  },\n}));\n\ntype EditableItemProps = PropTypes.InferProps<typeof editableItemPropTypes>;\n\nconst EditableItem = ({\n  className,\n  isEditable,\n  isEditing: isEditingInitial,\n  onClick,\n  onClickAway,\n  onCancel,\n  onSave,\n  value: initialValue,\n}: EditableItemProps): JSX.Element => {\n  const [value, setValue] = useState(initialValue);\n  const [isEditing, setIsEditing] = useState(isEditingInitial);\n\n  const classes = useStyles();\n\n  const handleSave = (e: { stopPropagation(): void }) => {\n    e.stopPropagation();\n    if (!value.length) return;\n\n    if (value !== initialValue) onSave?.(value)?.then(() => setIsEditing(false));\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        setValue(initialValue);\n        setIsEditing(false);\n        onClickAway?.();\n      } else if (e.key === 'Enter') {\n        handleSave(e);\n      }\n    };\n\n    if (isEditing) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isEditing, initialValue, value]);\n\n  const handleClickAway = () => {\n    setValue(initialValue);\n    setIsEditing(false);\n    onClickAway?.();\n  };\n\n  const handleCancel = (e: MouseEvent) => {\n    e.stopPropagation();\n    setValue(initialValue);\n    setIsEditing(false);\n    onCancel?.();\n  };\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    setValue(e.target.value);\n  };\n\n  const handleEdit = (e: MouseEvent) => {\n    e.stopPropagation();\n    setIsEditing(true);\n  };\n\n  const getInputAdornment = () => {\n    if (!isEditing) return null;\n\n    return (\n      <InputAdornment position=\"end\">\n        <span className={classes.inputAdornment}>\n          <Tooltip title=\"Cancel\" placement=\"bottom-end\">\n            <IconButton onClick={handleCancel} size=\"small\" className={classes.closeIcon}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Save\" placement=\"bottom-end\">\n            <IconButton onClick={handleSave} size=\"small\" disabled={value === initialValue}>\n              {/*@ts-ignore*/}\n              <DoneIcon color={value === initialValue ? 'disabled' : 'primary'} fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n        </span>\n      </InputAdornment>\n    );\n  };\n\n  const editableInputClassName = classNames(\n    classes.editableItem,\n    {\n      [classes.editableItemActive]: isEditing,\n    },\n    className\n  );\n\n  return (\n    <div className={classNames(editableInputClassName, classes.container)} onClick={onClick ?? undefined}>\n      {!isEditing && <div className={classes.value}>{value}</div>}\n      {isEditing && (\n        <ClickAwayListener onClickAway={handleClickAway}>\n          <TextField\n            autoFocus\n            type=\"text\"\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Page Name...\"\n            className={classes.textField}\n            InputProps={{\n              classes: {\n                root: classes.inputRoot,\n              },\n              endAdornment: getInputAdornment(),\n            }}\n          />\n        </ClickAwayListener>\n      )}\n      {isEditable && !isEditing && (\n        <Tooltip title=\"Rename Page\" placement=\"bottom-end\">\n          <IconButton className={classes.editIcon} size=\"small\" onClick={handleEdit}>\n            <EditIcon fontSize=\"small\" />\n          </IconButton>\n        </Tooltip>\n      )}\n    </div>\n  );\n};\n\nconst editableItemPropTypes = {\n  className: PropTypes.string,\n  isEditable: PropTypes.bool,\n  isEditing: PropTypes.bool,\n  onClick: PropTypes.func,\n  onSave: PropTypes.func.isRequired,\n  onClickAway: PropTypes.func,\n  onCancel: PropTypes.func,\n  value: PropTypes.string.isRequired,\n};\n\nEditableItem.propTypes = editableItemPropTypes;\n\nEditableItem.defaultProps = {\n  className: '',\n  isEditable: true,\n  isEditing: false,\n  onClick: () => {},\n  onClickAway: () => {},\n  onCancel: () => {},\n};\n\nexport default EditableItem;\n"],"names":["useStyles","makeStyles","theme","editableItem","width","height","position","backgroundColor","palette","background","b8","visibility","editableItemActive","container","display","alignItems","justifyContent","value","color","primary","text6","fontSize","letterSpacing","lineHeight","overflow","paddingLeft","textOverflow","whiteSpace","userSelect","textField","inputRoot","inputDisabled","paddingRight","pointerEvents","editIcon","marginRight","closeIcon","fill","contrastText","concat","inputAdornment","marginTop","EditableItem","_ref","className","isEditable","isEditingInitial","isEditing","onClick","onClickAway","onCancel","onSave","initialValue","useState","_useState2","_slicedToArray","_useState","setValue","_useState4","_useState3","setIsEditing","classes","handleSave","e","_onSave","stopPropagation","length","then","useEffect","handleKeyDown","key","document","addEventListener","removeEventListener","handleCancel","editableInputClassName","classNames","_jsxs","undefined","children","_jsx","jsx","ClickAwayListener","TextField","autoFocus","type","onChange","target","placeholder","InputProps","root","endAdornment","InputAdornment","jsxs","Tooltip","title","placement","IconButton","size","CloseIcon","disabled","DoneIcon","EditIcon","editableItemPropTypes","PropTypes","string","bool","func","isRequired","propTypes","defaultProps"],"mappings":"2gBAgBMA,EAAYC,EAAAA,YAAW,SAAAC,GAAK,MAAK,CACrCC,aAAc,CACZC,MAAO,OACPC,OAAQ,GACRC,SAAU,WACVC,gBAAiBL,EAAMM,QAAQC,WAAWC,GAC1C,UAAW,CACTH,gBAAiB,2BAEnB,cAAe,CACbI,WAAY,YAGhBC,mBAAoB,CAClBL,gBAAiB,uCAEnBM,UAAW,CACTC,QAAS,OACTC,WAAY,SACZC,eAAgB,gBAChB,oBAAqB,CACnBL,WAAY,YAGhBM,MAAO,CACLC,MAAOhB,EAAMM,QAAQW,QAAQC,MAC7BC,SAAU,WACVhB,OAAQ,OACRiB,cAAe,WACfC,WAAY,OACZC,SAAU,SACVC,YAAa,GACbC,aAAc,WACdC,WAAY,SACZvB,MAAO,oBACPwB,WAAY,QAEdC,UAAW,CACTzB,MAAO,QAET0B,UAAW,CACTzB,OAAQ,GACRoB,YAAa,GACbJ,SAAU,YAEZU,cAAe,CACbxB,gBAAiB,QACjByB,aAAc,GACd,YAAa,CACXlB,QAAS,QAEXmB,cAAe,QAEjBC,SAAU,CACRvB,WAAY,SACZwB,YAAa,GAEfC,UAAW,CACTlB,MAAOhB,EAAMM,QAAQW,QAAQC,MAC7B,cAAe,CACbiB,eAASnC,EAAMM,QAAQW,QAAQmB,aAAY,gBAE7C,QAAS,CACPD,KAAI,GAAAE,OAAKrC,EAAMM,QAAQW,QAAQC,MAAkB,eACjD,UAAW,CACTiB,KAAM,wBAIZG,eAAgB,CACdC,UAAW,EACXN,YAAa,GAEhB,IAIKO,EAAe,SASiBC,GAAA,IARpCC,IAAAA,UACAC,IAAAA,WACWC,IAAXC,UACAC,IAAAA,QACAC,IAAAA,YACAC,IAAAA,SACAC,IAAAA,OACOC,IAAPnC,MAE0BoC,EAAAA,EAAQA,SAACD,GAAaE,EAAAC,EAAAA,QAAAC,EAAA,GAAzCvC,EAAKqC,EAAA,GAAEG,EAAQH,EAAA,GACYD,EAAAA,EAAQA,SAACP,GAAiBY,EAAAH,EAAAA,QAAAI,EAAA,GAArDZ,EAASW,EAAA,GAAEE,EAAYF,EAAA,GAExBG,EAAU7D,IAEV8D,EAAa,SAACC,GAAmC,IAAAC,EACrDD,EAAEE,kBACGhD,EAAMiD,QAEPjD,IAAUmC,IAAcD,SAAA,QAAAA,EAAAA,EAASlC,UAAT,IAAA+C,GAAAA,EAAiBG,MAAK,WAAA,OAAMP,GAAa,QAGvEQ,EAAAA,WAAU,WACR,IAAMC,EAAgB,SAACN,GACP,WAAVA,EAAEO,KAA8B,QAAVP,EAAEO,KAC1Bb,EAASL,GACTQ,GAAa,GACbX,SAAAA,KACmB,UAAVc,EAAEO,KACXR,EAAWC,IAQf,OAJIhB,GACFwB,SAASC,iBAAiB,UAAWH,GAGhC,WAAA,OAAME,SAASE,oBAAoB,UAAWJ,EAAc,CACpE,GAAE,CAACtB,EAAWK,EAAcnC,IAE7B,IAMMyD,EAAe,SAACX,GACpBA,EAAEE,kBACFR,EAASL,GACTQ,GAAa,GACbV,SAAAA,KAGFkB,EAAAA,WAAU,WACRX,EAASL,EACX,GAAG,CAACA,IAEJ,IAgCMuB,EAAyBC,EAAAA,QAC7Bf,EAAQ1D,aAEL0D,EAAAA,QAAAA,GAAAA,EAAQjD,mBAAqBmC,GAEhCH,GAGF,OACEiC,EAAAA,KAAA,MAAA,CAAKjC,UAAWgC,EAAU,QAACD,EAAwBd,EAAQhD,WAAYmC,QAASA,QAAAA,OAAW8B,EAAUC,SAClG,EAAChC,GAAaiC,EAAAA,IAAA,MAAA,CAAKpC,UAAWiB,EAAQ5C,MAAM8D,SAAE9D,IAC9C8B,GACCiC,EAAAC,IAACC,oBAAiB,CAACjC,YA7DD,WACtBQ,EAASL,GACTQ,GAAa,GACbX,SAAAA,KA0DoD8B,SAC9CC,MAACG,YAAS,CACRC,WAAS,EACTC,KAAK,OACLpE,MAAOA,EACPqE,SAjDW,SAACvB,GACpBA,EAAEE,kBACFR,EAASM,EAAEwB,OAAOtE,QAgDVuE,YAAY,eACZ5C,UAAWiB,EAAQhC,UACnB4D,WAAY,CACV5B,QAAS,CACP6B,KAAM7B,EAAQ/B,WAEhB6D,aA7CL5C,EAGHiC,EAAAA,IAACY,EAAAA,eAAc,CAACtF,SAAS,MAAKyE,SAC5BF,EAAAgB,KAAA,OAAA,CAAMjD,UAAWiB,EAAQrB,eAAeuC,SAAA,CACtCC,MAACc,UAAO,CAACC,MAAM,SAASC,UAAU,aAAYjB,SAC5CC,MAACiB,EAAU,CAACjD,QAAS0B,EAAcwB,KAAK,QAAQtD,UAAWiB,EAAQzB,UAAU2C,SAC3EC,MAACmB,UAAS,CAAC9E,SAAS,cAGxB2D,MAACc,UAAO,CAACC,MAAM,OAAOC,UAAU,aAAYjB,SAC1CC,MAACiB,EAAU,CAACjD,QAASc,EAAYoC,KAAK,QAAQE,SAAUnF,IAAUmC,EAAa2B,SAE7EC,MAACqB,UAAQ,CAACnF,MAAOD,IAAUmC,EAAe,WAAa,UAAW/B,SAAS,mBAb9D,UAkDpBwB,IAAeE,GACdiC,EAAAA,IAACc,EAAAA,QAAO,CAACC,MAAM,cAAcC,UAAU,aAAYjB,SACjDC,MAACiB,EAAU,CAACrD,UAAWiB,EAAQ3B,SAAUgE,KAAK,QAAQlD,QA1D3C,SAACe,GAClBA,EAAEE,kBACFL,GAAa,IAwDmEmB,SACxEC,MAACsB,UAAQ,CAACjF,SAAS,gBAM/B,EAEMkF,EAAwB,CAC5B3D,UAAW4D,EAAS,QAACC,OACrB5D,WAAY2D,EAAS,QAACE,KACtB3D,UAAWyD,EAAS,QAACE,KACrB1D,QAASwD,EAAS,QAACG,KACnBxD,OAAQqD,EAAAA,QAAUG,KAAKC,WACvB3D,YAAauD,EAAS,QAACG,KACvBzD,SAAUsD,EAAS,QAACG,KACpB1F,MAAOuF,EAAAA,QAAUC,OAAOG,YAG1BlE,EAAamE,UAAYN,EAEzB7D,EAAaoE,aAAe,CAC1BlE,UAAW,GACXC,YAAY,EACZE,WAAW,EACXC,QAAS,WAAQ,EACjBC,YAAa,WAAQ,EACrBC,SAAU,WAAO"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/EditableItem/EditableItem/index.tsx"],"sourcesContent":["import { type ChangeEvent, type MouseEvent, useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport {\n  ClickAwayListener,\n  InputAdornment,\n  TextField,\n  Tooltip,\n  makeStyles,\n} from '@material-ui/core';\nimport EditIcon from '@material-ui/icons/Edit';\nimport CloseIcon from '@material-ui/icons/Close';\nimport DoneIcon from '@material-ui/icons/Done';\nimport IconButton from '~/components/IconButton';\n\nconst useStyles = makeStyles(theme => ({\n  editableItem: {\n    width: '100%',\n    height: 36,\n    position: 'relative',\n    backgroundColor: theme.palette.background.b8,\n    '&:hover': {\n      backgroundColor: 'rgba(3, 188, 212, 0.07)',\n    },\n    '&:hover svg': {\n      visibility: 'visible',\n    },\n  },\n  editableItemActive: {\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n  },\n  container: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    '&:hover $editIcon': {\n      visibility: 'visible',\n    },\n  },\n  value: {\n    color: theme.palette.primary.text6,\n    fontSize: '0.875rem',\n    height: '100%',\n    letterSpacing: '.13132px',\n    lineHeight: '36px',\n    overflow: 'hidden',\n    paddingLeft: 48,\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n    width: 'calc(100% - 32px)',\n    userSelect: 'none',\n  },\n  textField: {\n    width: '100%',\n  },\n  inputRoot: {\n    height: 36,\n    paddingLeft: 48,\n    fontSize: '0.875rem',\n  },\n  inputDisabled: {\n    backgroundColor: 'unset',\n    paddingRight: 16,\n    '&::before': {\n      display: 'none',\n    },\n    pointerEvents: 'none',\n  },\n  editIcon: {\n    visibility: 'hidden',\n    marginRight: 4,\n  },\n  closeIcon: {\n    color: theme.palette.primary.text6,\n    '&:hover svg': {\n      fill: `${theme.palette.primary.contrastText} !important`,\n    },\n    '& svg': {\n      fill: `${theme.palette.primary.text6} !important`,\n      '&:hover': {\n        fill: '#FFFFFF !important',\n      },\n    },\n  },\n  inputAdornment: {\n    marginTop: 1,\n    marginRight: 4,\n  },\n}));\n\ntype EditableItemProps = PropTypes.InferProps<typeof editableItemPropTypes>;\n\nconst EditableItem = ({\n  className = '',\n  isEditable = true,\n  isEditing: isEditingInitial = false,\n  onClick = DEFAULT_EDITABLE_ITEM_ON_CLICK,\n  onClickAway = DEFAULT_EDITABLE_ITEM_ON_CLICK_AWAY,\n  onCancel = DEFAULT_EDITABLE_ITEM_ON_CANCEL,\n  onSave,\n  value: initialValue,\n}: EditableItemProps): JSX.Element => {\n  const [value, setValue] = useState(initialValue);\n  const [isEditing, setIsEditing] = useState(isEditingInitial);\n\n  const classes = useStyles();\n\n  const handleSave = (e: { stopPropagation(): void }) => {\n    e.stopPropagation();\n    if (!value.length) return;\n\n    if (value !== initialValue) onSave?.(value)?.then(() => setIsEditing(false));\n  };\n\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        setValue(initialValue);\n        setIsEditing(false);\n        onClickAway?.();\n      } else if (e.key === 'Enter') {\n        handleSave(e);\n      }\n    };\n\n    if (isEditing) {\n      document.addEventListener('keydown', handleKeyDown);\n    }\n\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isEditing, initialValue, value]);\n\n  const handleClickAway = () => {\n    setValue(initialValue);\n    setIsEditing(false);\n    onClickAway?.();\n  };\n\n  const handleCancel = (e: MouseEvent) => {\n    e.stopPropagation();\n    setValue(initialValue);\n    setIsEditing(false);\n    onCancel?.();\n  };\n\n  useEffect(() => {\n    setValue(initialValue);\n  }, [initialValue]);\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    e.stopPropagation();\n    setValue(e.target.value);\n  };\n\n  const handleEdit = (e: MouseEvent) => {\n    e.stopPropagation();\n    setIsEditing(true);\n  };\n\n  const getInputAdornment = () => {\n    if (!isEditing) return null;\n\n    return (\n      <InputAdornment position=\"end\">\n        <span className={classes.inputAdornment}>\n          <Tooltip title=\"Cancel\" placement=\"bottom-end\">\n            <IconButton onClick={handleCancel} size=\"small\" className={classes.closeIcon}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"Save\" placement=\"bottom-end\">\n            <IconButton onClick={handleSave} size=\"small\" disabled={value === initialValue}>\n              <DoneIcon color={value === initialValue ? 'disabled' : 'primary'} fontSize=\"small\" />\n            </IconButton>\n          </Tooltip>\n        </span>\n      </InputAdornment>\n    );\n  };\n\n  const editableInputClassName = classNames(\n    classes.editableItem,\n    {\n      [classes.editableItemActive]: isEditing,\n    },\n    className\n  );\n\n  return (\n    <div\n      className={classNames(editableInputClassName, classes.container)}\n      onClick={onClick ?? undefined}\n    >\n      {!isEditing && <div className={classes.value}>{value}</div>}\n      {isEditing && (\n        <ClickAwayListener onClickAway={handleClickAway}>\n          <TextField\n            autoFocus\n            type=\"text\"\n            value={value}\n            onChange={handleChange}\n            placeholder=\"Page Name...\"\n            className={classes.textField}\n            InputProps={{\n              classes: {\n                root: classes.inputRoot,\n              },\n              endAdornment: getInputAdornment(),\n            }}\n          />\n        </ClickAwayListener>\n      )}\n      {isEditable && !isEditing && (\n        <Tooltip title=\"Rename Page\" placement=\"bottom-end\">\n          <IconButton className={classes.editIcon} size=\"small\" onClick={handleEdit}>\n            <EditIcon fontSize=\"small\" />\n          </IconButton>\n        </Tooltip>\n      )}\n    </div>\n  );\n};\n\nconst editableItemPropTypes = {\n  className: PropTypes.string,\n  isEditable: PropTypes.bool,\n  isEditing: PropTypes.bool,\n  onClick: PropTypes.func,\n  onSave: PropTypes.func.isRequired,\n  onClickAway: PropTypes.func,\n  onCancel: PropTypes.func,\n  value: PropTypes.string.isRequired,\n};\n\nEditableItem.propTypes = editableItemPropTypes;\n\nconst DEFAULT_EDITABLE_ITEM_ON_CLICK = () => {};\nconst DEFAULT_EDITABLE_ITEM_ON_CLICK_AWAY = () => {};\nconst DEFAULT_EDITABLE_ITEM_ON_CANCEL = () => {};\n\nexport default EditableItem;\n"],"names":["useStyles","makeStyles","theme","editableItem","width","height","position","backgroundColor","palette","background","b8","visibility","editableItemActive","container","display","alignItems","justifyContent","value","color","primary","text6","fontSize","letterSpacing","lineHeight","overflow","paddingLeft","textOverflow","whiteSpace","userSelect","textField","inputRoot","inputDisabled","paddingRight","pointerEvents","editIcon","marginRight","closeIcon","fill","contrastText","concat","inputAdornment","marginTop","EditableItem","_ref","_ref$className","className","_ref$isEditable","isEditable","_ref$isEditing","isEditing","isEditingInitial","_ref$onClick","onClick","DEFAULT_EDITABLE_ITEM_ON_CLICK","_ref$onClickAway","onClickAway","DEFAULT_EDITABLE_ITEM_ON_CLICK_AWAY","_ref$onCancel","onCancel","DEFAULT_EDITABLE_ITEM_ON_CANCEL","onSave","initialValue","useState","_useState2","_slicedToArray","_useState","setValue","_useState4","_useState3","setIsEditing","classes","handleSave","e","_onSave","stopPropagation","length","then","useEffect","handleKeyDown","key","document","addEventListener","removeEventListener","handleCancel","editableInputClassName","classNames","_jsxs","undefined","children","_jsx","jsx","ClickAwayListener","TextField","autoFocus","type","onChange","target","placeholder","InputProps","root","endAdornment","InputAdornment","jsxs","Tooltip","title","placement","IconButton","size","CloseIcon","disabled","DoneIcon","EditIcon","editableItemPropTypes","PropTypes","string","bool","func","isRequired","propTypes"],"mappings":"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"}

package/cjs-bundle/components/EditableItem/EditableItemWithBadge/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@material-ui/core"),t=require("prop-types"),o=require("../EditableItem/index.js"),i=require("react/jsx-runtime");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=n(e),u=n(t);function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function s(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?a(Object(t),!0).forEach((function(r){c.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):a(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var l=r.makeStyles((function(e){return{root:{cursor:"pointer"},isSelected:{"& > div":{color:"#FFFFFF"},backgroundColor:"rgba(3, 188, 212, 0.15)  !important","&::before":{height:"100%",width:4,backgroundColor:e.palette.primary.main,position:"absolute",content:'""',borderRadius:"4px 0 0 4px",zIndex:1}}}})),p=function(e){var r=e.isSelected,t=l();return i.jsx(o,s(s({},e),{},{className:r?t.isSelected:t.root}))};p.propTypes={isSelected:u.default.bool,children:u.default.node.isRequired},p.defaultProps={isSelected:!1},module.exports=p;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),r=require("@babel/runtime/helpers/objectWithoutProperties"),t=require("@material-ui/core"),o=require("prop-types"),i=require("../EditableItem/index.js"),n=require("react/jsx-runtime");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),a=c(r),l=c(o),s=["isSelected"];function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?p(Object(t),!0).forEach((function(r){u.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var b=t.makeStyles((function(e){return{root:{cursor:"pointer"},isSelected:{"& > div":{color:"#FFFFFF"},backgroundColor:"rgba(3, 188, 212, 0.15)  !important","&::before":{height:"100%",width:4,backgroundColor:e.palette.primary.main,position:"absolute",content:'""',borderRadius:"4px 0 0 4px",zIndex:1}}}})),f=function(e){var r=e.isSelected,t=void 0!==r&&r,o=a.default(e,s),c=b();return n.jsx(i,d(d({},o),{},{isSelected:t,className:t?c.isSelected:c.root}))};f.propTypes={isSelected:l.default.bool,children:l.default.node.isRequired},module.exports=f;
 //# sourceMappingURL=index.js.map

package/cjs-bundle/components/EditableItem/EditableItemWithBadge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/EditableItem/EditableItemWithBadge/index.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nimport EditableItem from '../EditableItem';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    cursor: 'pointer',\n  },\n  isSelected: {\n    '& > div': {\n      color: '#FFFFFF',\n    },\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n    '&::before': {\n      height: '100%',\n      width: 4,\n      backgroundColor: theme.palette.primary.main,\n      position: 'absolute',\n      content: '\"\"',\n      borderRadius: '4px 0 0 4px',\n      zIndex: 1,\n    },\n  },\n}));\n\nconst EditableItemWithBadge = props => {\n  const { isSelected } = props;\n  const classes = useStyles();\n\n  return <EditableItem {...props} className={isSelected ? classes.isSelected : classes.root} />;\n};\n\nEditableItemWithBadge.propTypes = {\n  isSelected: PropTypes.bool,\n  children: PropTypes.node.isRequired,\n};\n\nEditableItemWithBadge.defaultProps = {\n  isSelected: false,\n};\n\nexport default EditableItemWithBadge;\n"],"names":["useStyles","makeStyles","theme","root","cursor","isSelected","color","backgroundColor","height","width","palette","primary","main","position","content","borderRadius","zIndex","EditableItemWithBadge","props","classes","_jsx","EditableItem","_objectSpread","className","propTypes","PropTypes","bool","children","node","isRequired","defaultProps"],"mappings":"i2BAKA,IAAMA,EAAYC,EAAAA,YAAW,SAAAC,GAAK,MAAK,CACrCC,KAAM,CACJC,OAAQ,WAEVC,WAAY,CACV,UAAW,CACTC,MAAO,WAETC,gBAAiB,sCACjB,YAAa,CACXC,OAAQ,OACRC,MAAO,EACPF,gBAAiBL,EAAMQ,QAAQC,QAAQC,KACvCC,SAAU,WACVC,QAAS,KACTC,aAAc,cACdC,OAAQ,IAGb,IAEKC,EAAwB,SAAAC,GAC5B,IAAQb,EAAea,EAAfb,WACFc,EAAUnB,IAEhB,OAAOoB,EAAAA,IAACC,EAAYC,EAAAA,EAAA,GAAKJ,GAAK,GAAA,CAAEK,UAAWlB,EAAac,EAAQd,WAAac,EAAQhB,OACvF,EAEAc,EAAsBO,UAAY,CAChCnB,WAAYoB,EAAS,QAACC,KACtBC,SAAUF,EAAAA,QAAUG,KAAKC,YAG3BZ,EAAsBa,aAAe,CACnCzB,YAAY"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/EditableItem/EditableItemWithBadge/index.js"],"sourcesContent":["import { makeStyles } from '@material-ui/core';\nimport PropTypes from 'prop-types';\n\nimport EditableItem from '../EditableItem';\n\nconst useStyles = makeStyles(theme => ({\n  root: {\n    cursor: 'pointer',\n  },\n  isSelected: {\n    '& > div': {\n      color: '#FFFFFF',\n    },\n    backgroundColor: 'rgba(3, 188, 212, 0.15)  !important',\n    '&::before': {\n      height: '100%',\n      width: 4,\n      backgroundColor: theme.palette.primary.main,\n      position: 'absolute',\n      content: '\"\"',\n      borderRadius: '4px 0 0 4px',\n      zIndex: 1,\n    },\n  },\n}));\n\nconst EditableItemWithBadge = ({ isSelected = false, ...props }) => {\n  const classes = useStyles();\n\n  return (\n    <EditableItem\n      {...props}\n      isSelected={isSelected}\n      className={isSelected ? classes.isSelected : classes.root}\n    />\n  );\n};\n\nEditableItemWithBadge.propTypes = {\n  isSelected: PropTypes.bool,\n  children: PropTypes.node.isRequired,\n};\n\nexport default EditableItemWithBadge;\n"],"names":["useStyles","makeStyles","theme","root","cursor","isSelected","color","backgroundColor","height","width","palette","primary","main","position","content","borderRadius","zIndex","EditableItemWithBadge","_ref","_ref$isSelected","props","_objectWithoutProperties","_excluded","classes","_jsx","EditableItem","_objectSpread","className","propTypes","PropTypes","bool","children","node","isRequired"],"mappings":"q7BAKA,IAAMA,EAAYC,EAAAA,YAAW,SAAAC,GAAK,MAAK,CACrCC,KAAM,CACJC,OAAQ,WAEVC,WAAY,CACV,UAAW,CACTC,MAAO,WAETC,gBAAiB,sCACjB,YAAa,CACXC,OAAQ,OACRC,MAAO,EACPF,gBAAiBL,EAAMQ,QAAQC,QAAQC,KACvCC,SAAU,WACVC,QAAS,KACTC,aAAc,cACdC,OAAQ,IAGb,IAEKC,EAAwB,SAAsCC,GAAA,IAAAC,EAAAD,EAAnCb,WAAAA,cAAkBc,EAAKC,EAAKC,EAAA,QAAAH,EAAAI,GACrDC,EAAUvB,IAEhB,OACEwB,EAAAA,IAACC,EAAYC,EAAAA,EAAA,GACPN,GAAK,GAAA,CACTf,WAAYA,EACZsB,UAAWtB,EAAakB,EAAQlB,WAAakB,EAAQpB,OAG3D,EAEAc,EAAsBW,UAAY,CAChCvB,WAAYwB,EAAS,QAACC,KACtBC,SAAUF,EAAAA,QAAUG,KAAKC"}

package/cjs-bundle/components/EmbeddedApp/DevCenterEmbeddedApp.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),a=require("react"),r=require("prop-types"),s=require("classnames"),i=require("./components/AppInfo.js"),p=require("./styles.scss.js"),n=require("../../utils/mobileDetect.js"),d=require("../../constants/sizes.js"),u=require("../DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"),o=require("react/jsx-runtime");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=l(e),c=l(t),f=l(r),v=l(s),q=function(e){var t,r=e.app,s=e.coordinates,l=e.appId,f=e.appSize,q=e.appContainerClassName,C=e.currentUser,A=e.timestamp,j=a.useState(!1),b=c.default(j,2),x=b[0],I=b[1];return o.jsxs("div",{className:v.default(p.embeddedApp,q,(t={},m.default(t,p.embeddedAppMaximized,x),m.default(t,p.embeddedAppNative,n.isNativeDetected),t)),children:[!x&&o.jsx(i.AppInfo,{setMaximized:I}),o.jsx("div",{className:p.embeddedAppContent,children:o.jsx(u.DevCenterIsolatedApp,{app:r,appId:l,onSettingsChange:function(){},onSettingChange:function(){},onAppRemove:function(){},coordinates:s,currentUser:C,timestamp:A})},x?d.Size.XLARGE:f),x&&o.jsx(i.AppInfoMaximized,{setMaximized:I})]})};q.propTypes={appContainerClassName:f.default.string,appId:f.default.number,appSize:f.default.string,app:f.default.shape({coordinates:f.default.shape().isRequired}).isRequired,currentUser:f.default.shape().isRequired,coordinates:f.default.shape(),timestamp:f.default.string},q.defaultProps={appContainerClassName:void 0,appId:0,appSize:d.Size.MEDIUM,coordinates:{},timestamp:void 0};var C=a.memo(q);module.exports=C;
+"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("react"),a=require("prop-types"),s=require("classnames"),i=require("./components/AppInfo.js"),p=require("./styles.scss.js"),n=require("../../utils/mobileDetect.js"),d=require("../../constants/sizes.js"),u=require("../DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp.js"),o=require("react/jsx-runtime");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=l(e),c=l(t),f=l(a),v=l(s),q=function(e){var t,a=e.app,s=e.coordinates,l=void 0===s?j:s,f=e.appId,q=void 0===f?0:f,C=e.appSize,b=void 0===C?A:C,x=e.appContainerClassName,h=e.currentUser,I=e.timestamp,z=r.useState(!1),g=c.default(z,2),D=g[0],S=g[1];return o.jsxs("div",{className:v.default(p.embeddedApp,x,(t={},m.default(t,p.embeddedAppMaximized,D),m.default(t,p.embeddedAppNative,n.isNativeDetected),t)),children:[!D&&o.jsx(i.AppInfo,{setMaximized:S}),o.jsx("div",{className:p.embeddedAppContent,children:o.jsx(u.DevCenterIsolatedApp,{app:a,appId:q,onSettingsChange:function(){},onSettingChange:function(){},onAppRemove:function(){},coordinates:l,currentUser:h,timestamp:I})},D?d.Size.XLARGE:b),D&&o.jsx(i.AppInfoMaximized,{setMaximized:S})]})};q.propTypes={appContainerClassName:f.default.string,appId:f.default.number,appSize:f.default.string,app:f.default.shape({coordinates:f.default.shape().isRequired}).isRequired,currentUser:f.default.shape().isRequired,coordinates:f.default.shape(),timestamp:f.default.string};var A=d.Size.MEDIUM,j={},C=r.memo(q);module.exports=C;
 //# sourceMappingURL=DevCenterEmbeddedApp.js.map

package/cjs-bundle/components/EmbeddedApp/DevCenterEmbeddedApp.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevCenterEmbeddedApp.js","sources":["../../../../src/components/EmbeddedApp/DevCenterEmbeddedApp.js"],"sourcesContent":["import { memo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { AppInfo, AppInfoMaximized } from './components/AppInfo';\n\nimport styles from './styles.scss';\n\nimport { isNativeDetected } from '~/utils/mobileDetect';\nimport { Size } from '~/constants/sizes';\nimport { DevCenterIsolatedApp } from '~/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp';\n\nconst DevCenterEmbeddedApp = ({\n  app,\n  coordinates,\n  appId,\n  appSize,\n  appContainerClassName,\n  currentUser,\n  timestamp,\n}) => {\n  const [maximized, setMaximized] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.embeddedApp, appContainerClassName, {\n        [styles.embeddedAppMaximized]: maximized,\n        [styles.embeddedAppNative]: isNativeDetected,\n      })}\n    >\n      {!maximized && <AppInfo setMaximized={setMaximized} />}\n\n      <div className={styles.embeddedAppContent} key={maximized ? Size.XLARGE : appSize}>\n        <DevCenterIsolatedApp\n          app={app}\n          appId={appId}\n          onSettingsChange={() => undefined}\n          onSettingChange={() => undefined}\n          onAppRemove={() => undefined}\n          coordinates={coordinates}\n          currentUser={currentUser}\n          timestamp={timestamp}\n        />\n      </div>\n\n      {maximized && <AppInfoMaximized setMaximized={setMaximized} />}\n    </div>\n  );\n};\n\nDevCenterEmbeddedApp.propTypes = {\n  appContainerClassName: PropTypes.string,\n  appId: PropTypes.number,\n  appSize: PropTypes.string,\n  app: PropTypes.shape({\n    coordinates: PropTypes.shape().isRequired,\n  }).isRequired,\n  currentUser: PropTypes.shape().isRequired,\n  coordinates: PropTypes.shape(),\n  timestamp: PropTypes.string,\n};\n\nDevCenterEmbeddedApp.defaultProps = {\n  appContainerClassName: undefined,\n  appId: 0,\n  appSize: Size.MEDIUM,\n  coordinates: {},\n  timestamp: undefined,\n};\n\nexport default memo(DevCenterEmbeddedApp);\n"],"names":["DevCenterEmbeddedApp","_ref","_classNames","app","coordinates","appId","appSize","appContainerClassName","currentUser","timestamp","useState","_useState2","_slicedToArray","_useState","maximized","setMaximized","_jsxs","className","classNames","styles","embeddedApp","embeddedAppMaximized","embeddedAppNative","isNativeDetected","children","_jsx","AppInfo","jsx","embeddedAppContent","DevCenterIsolatedApp","onSettingsChange","onSettingChange","onAppRemove","Size","XLARGE","AppInfoMaximized","propTypes","PropTypes","string","number","shape","isRequired","defaultProps","undefined","MEDIUM","memo"],"mappings":"kiBAYMA,EAAuB,SAQvBC,GAAA,IAAAC,EAPJC,IAAAA,IACAC,IAAAA,YACAC,IAAAA,MACAC,IAAAA,QACAC,IAAAA,sBACAC,IAAAA,YACAC,IAAAA,UAEkCC,EAAAA,EAAQA,UAAC,GAAMC,EAAAC,EAAAA,QAAAC,EAAA,GAA1CC,EAASH,EAAA,GAAEI,EAAYJ,EAAA,GAE9B,OACEK,EAAAA,KAAA,MAAA,CACEC,UAAWC,EAAAA,QAAWC,EAAOC,YAAab,GACvCY,EAAAA,CAAAA,EAAAA,EAAAA,QAAAA,EAAAA,EAAOE,qBAAuBP,GAC9BK,UAAAA,EAAAA,EAAOG,kBAAoBC,oBAC3BrB,IAAAsB,SAAA,EAEDV,GAAaW,EAAAA,IAACC,EAAAA,QAAO,CAACX,aAAcA,IAEtCU,EAAAE,IAAA,MAAA,CAAKV,UAAWE,EAAOS,mBAAmBJ,SACxCC,MAACI,uBAAoB,CACnB1B,IAAKA,EACLE,MAAOA,EACPyB,iBAAkB,WAAgB,EAClCC,gBAAiB,WAAgB,EACjCC,YAAa,WAAgB,EAC7B5B,YAAaA,EACbI,YAAaA,EACbC,UAAWA,KATiCK,EAAYmB,EAAAA,KAAKC,OAAS5B,GAazEQ,GAAaW,EAAAE,IAACQ,mBAAgB,CAACpB,aAAcA,MAGpD,EAEAf,EAAqBoC,UAAY,CAC/B7B,sBAAuB8B,EAAS,QAACC,OACjCjC,MAAOgC,EAAS,QAACE,OACjBjC,QAAS+B,EAAS,QAACC,OACnBnC,IAAKkC,EAAS,QAACG,MAAM,CACnBpC,YAAaiC,EAAAA,QAAUG,QAAQC,aAC9BA,WACHjC,YAAa6B,EAAAA,QAAUG,QAAQC,WAC/BrC,YAAaiC,EAAS,QAACG,QACvB/B,UAAW4B,EAAS,QAACC,QAGvBtC,EAAqB0C,aAAe,CAClCnC,2BAAuBoC,EACvBtC,MAAO,EACPC,QAAS2B,EAAIA,KAACW,OACdxC,YAAa,CAAE,EACfK,eAAWkC,GAGb,IAAeE,EAAAA,EAAAA,KAAK7C"}
+{"version":3,"file":"DevCenterEmbeddedApp.js","sources":["../../../../src/components/EmbeddedApp/DevCenterEmbeddedApp.js"],"sourcesContent":["import { memo, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { AppInfo, AppInfoMaximized } from './components/AppInfo';\n\nimport styles from './styles.scss';\n\nimport { isNativeDetected } from '~/utils/mobileDetect';\nimport { Size } from '~/constants/sizes';\nimport { DevCenterIsolatedApp } from '~/components/DevCenter/IsolatedDevCenterAppContainer/DevCenterIsolatedApp';\n\nconst DevCenterEmbeddedApp = ({\n  app,\n  coordinates = DEFAULT_DEV_CENTER_EMBEDDED_APP_COORDINATES,\n  appId = 0,\n  appSize = DEFAULT_DEV_CENTER_EMBEDDED_APP_APP_SIZE,\n  appContainerClassName,\n  currentUser,\n  timestamp,\n}) => {\n  const [maximized, setMaximized] = useState(false);\n\n  return (\n    <div\n      className={classNames(styles.embeddedApp, appContainerClassName, {\n        [styles.embeddedAppMaximized]: maximized,\n        [styles.embeddedAppNative]: isNativeDetected,\n      })}\n    >\n      {!maximized && <AppInfo setMaximized={setMaximized} />}\n\n      <div className={styles.embeddedAppContent} key={maximized ? Size.XLARGE : appSize}>\n        <DevCenterIsolatedApp\n          app={app}\n          appId={appId}\n          onSettingsChange={() => undefined}\n          onSettingChange={() => undefined}\n          onAppRemove={() => undefined}\n          coordinates={coordinates}\n          currentUser={currentUser}\n          timestamp={timestamp}\n        />\n      </div>\n\n      {maximized && <AppInfoMaximized setMaximized={setMaximized} />}\n    </div>\n  );\n};\n\nDevCenterEmbeddedApp.propTypes = {\n  appContainerClassName: PropTypes.string,\n  appId: PropTypes.number,\n  appSize: PropTypes.string,\n  app: PropTypes.shape({\n    coordinates: PropTypes.shape().isRequired,\n  }).isRequired,\n  currentUser: PropTypes.shape().isRequired,\n  coordinates: PropTypes.shape(),\n  timestamp: PropTypes.string,\n};\n\nconst DEFAULT_DEV_CENTER_EMBEDDED_APP_APP_SIZE = Size.MEDIUM;\nconst DEFAULT_DEV_CENTER_EMBEDDED_APP_COORDINATES = {};\n\nexport default memo(DevCenterEmbeddedApp);\n"],"names":["DevCenterEmbeddedApp","_ref","_classNames","app","_ref$coordinates","coordinates","DEFAULT_DEV_CENTER_EMBEDDED_APP_COORDINATES","_ref$appId","appId","_ref$appSize","appSize","DEFAULT_DEV_CENTER_EMBEDDED_APP_APP_SIZE","appContainerClassName","currentUser","timestamp","useState","_useState2","_slicedToArray","_useState","maximized","setMaximized","_jsxs","className","classNames","styles","embeddedApp","embeddedAppMaximized","embeddedAppNative","isNativeDetected","children","_jsx","AppInfo","jsx","embeddedAppContent","DevCenterIsolatedApp","onSettingsChange","onSettingChange","onAppRemove","Size","XLARGE","AppInfoMaximized","propTypes","PropTypes","string","number","shape","isRequired","MEDIUM","memo"],"mappings":"kiBAYMA,EAAuB,SAQvBC,GAAA,IAAAC,EAPJC,IAAAA,IAAGC,EAAAH,EACHI,YAAAA,aAAcC,EAA2CF,EAAAG,EAAAN,EACzDO,MAAAA,aAAQ,EAACD,EAAAE,EAAAR,EACTS,QAAAA,aAAUC,EAAwCF,EAClDG,IAAAA,sBACAC,IAAAA,YACAC,IAAAA,UAEkCC,EAAAA,EAAQA,UAAC,GAAMC,EAAAC,EAAAA,QAAAC,EAAA,GAA1CC,EAASH,EAAA,GAAEI,EAAYJ,EAAA,GAE9B,OACEK,EAAAA,KAAA,MAAA,CACEC,UAAWC,EAAAA,QAAWC,EAAOC,YAAab,GACvCY,EAAAA,CAAAA,EAAAA,EAAAA,QAAAA,EAAAA,EAAOE,qBAAuBP,GAC9BK,UAAAA,EAAAA,EAAOG,kBAAoBC,oBAC3B1B,IAAA2B,SAAA,EAEDV,GAAaW,EAAAA,IAACC,EAAAA,QAAO,CAACX,aAAcA,IAEtCU,EAAAE,IAAA,MAAA,CAAKV,UAAWE,EAAOS,mBAAmBJ,SACxCC,MAACI,uBAAoB,CACnB/B,IAAKA,EACLK,MAAOA,EACP2B,iBAAkB,WAAgB,EAClCC,gBAAiB,WAAgB,EACjCC,YAAa,WAAgB,EAC7BhC,YAAaA,EACbQ,YAAaA,EACbC,UAAWA,KATiCK,EAAYmB,EAAAA,KAAKC,OAAS7B,GAazES,GAAaW,EAAAE,IAACQ,mBAAgB,CAACpB,aAAcA,MAGpD,EAEApB,EAAqByC,UAAY,CAC/B7B,sBAAuB8B,EAAS,QAACC,OACjCnC,MAAOkC,EAAS,QAACE,OACjBlC,QAASgC,EAAS,QAACC,OACnBxC,IAAKuC,EAAS,QAACG,MAAM,CACnBxC,YAAaqC,EAAAA,QAAUG,QAAQC,aAC9BA,WACHjC,YAAa6B,EAAAA,QAAUG,QAAQC,WAC/BzC,YAAaqC,EAAS,QAACG,QACvB/B,UAAW4B,EAAS,QAACC,QAGvB,IAAMhC,EAA2C2B,EAAIA,KAACS,OAChDzC,EAA8C,CAAA,EAErC0C,EAAAA,EAAAA,KAAKhD"}