{"ast":null,"code":"import _regeneratorRuntime from \"@babel/runtime/regenerator\";\nimport _slicedToArray from \"@babel/runtime/helpers/esm/slicedToArray\";\nimport _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nvar __jsx = React.createElement;\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport { collectDagFacts } from '~/resource/graphs';\nimport { useTranslation } from '~/utils/i18n';\nimport NodeInfo from '~/components/GraphsPage/NodeInfo';\nimport React, { useEffect, useMemo, useState } from 'react';\nimport Content from '~/components/Content';\nimport Field from '~/components/Field';\nimport Preloader from '~/components/Preloader';\nimport RawButton from '~/components/Button';\nimport RawRangeSlider from '~/components/RangeSlider';\nimport Title from '~/components/Title';\nimport isEmpty from 'lodash/isEmpty';\nimport { rem } from '~/utils/style';\nimport { saveSvgAsPng } from 'save-svg-as-png';\nimport styled from 'styled-components';\nimport useRequest from '~/hooks/useRequest'; // eslint-disable-next-line @typescript-eslint/no-empty-function\n\nvar dumbFn = function dumbFn() {};\n\nvar SubSection = styled.div.withConfig({\n  displayName: \"graphs__SubSection\",\n  componentId: \"sc-10saymz-0\"\n})([\"margin-bottom:\", \";\"], rem(30));\nvar Button = styled(RawButton).withConfig({\n  displayName: \"graphs__Button\",\n  componentId: \"sc-10saymz-1\"\n})([\"width:100%;text-transform:uppercase;& + &{margin-top:\", \";}\"], rem(20));\nvar Empty = styled.div.withConfig({\n  displayName: \"graphs__Empty\",\n  componentId: \"sc-10saymz-2\"\n})([\"display:flex;justify-content:center;align-items:center;font-size:\", \";height:\", \";\"], rem(20), rem(150));\nvar RangeSlider = styled(RawRangeSlider).withConfig({\n  displayName: \"graphs__RangeSlider\",\n  componentId: \"sc-10saymz-3\"\n})([\"width:100%;\"]);\nvar GraphSvg = styled('svg').withConfig({\n  displayName: \"graphs__GraphSvg\",\n  componentId: \"sc-10saymz-4\"\n})([\"width:100%;cursor:grab;&.grabbing{cursor:grabbing;}.node{cursor:pointer;.label-container{stroke-width:3px;stroke:#e6e6e6;&.rect{rx:10;ry:10;}}&.operator{.label-container{fill:#cdd9da;}}&.output{.label-container{stroke-dasharray:5,5;stroke:#e6e6e6;fill:#cad2d0;}}&.input{.label-container{fill:#d5d3d8;}}&.active{.label-container{stroke:#25c9ff;}}}.edgePath path.path{stroke:#333;stroke-width:1.5px;}\"]);\nvar loadDagLibs = [import('d3'), import('dagre-d3')];\nvar MIN_SCALE = 0.1;\nvar MAX_SCALE = 4;\n\nvar useDag = function useDag(graph) {\n  var _useState = useState({\n    detail: false,\n    input: false,\n    output: false\n  }),\n      displaySwitch = _useState[0],\n      setDisplaySwitch = _useState[1];\n\n  var facts = useMemo(function () {\n    return collectDagFacts(graph);\n  }, [graph]);\n  var dagInfo = useMemo(function () {\n    var inputLayer = facts.inputLayer,\n        outputLayer = facts.outputLayer,\n        briefLayer = facts.briefLayer,\n        detailLayer = facts.detailLayer,\n        findNode = facts.findNode;\n    var availableLayers = displaySwitch.detail ? [detailLayer] : [briefLayer];\n\n    if (displaySwitch.input) {\n      availableLayers.push(inputLayer);\n    }\n\n    if (displaySwitch.output) {\n      availableLayers.push(outputLayer);\n    }\n\n    return _objectSpread({}, availableLayers.reduce(function (memo, _ref) {\n      var nodes = _ref.nodes,\n          edges = _ref.edges;\n      return {\n        nodes: memo.nodes.concat(nodes),\n        edges: memo.edges.concat(edges)\n      };\n    }, {\n      nodes: [],\n      edges: []\n    }), {\n      findNode: findNode\n    });\n  }, [facts, displaySwitch]);\n  return {\n    dagInfo: dagInfo,\n    displaySwitch: displaySwitch,\n    setDisplaySwitch: setDisplaySwitch\n  };\n};\n\nvar useDagreD3 = function useDagreD3(graph) {\n  var _useState2 = useState(undefined),\n      currentNode = _useState2[0],\n      setCurrentNode = _useState2[1];\n\n  var _useDag = useDag(graph),\n      dagInfo = _useDag.dagInfo,\n      displaySwitch = _useDag.displaySwitch,\n      setDisplaySwitch = _useDag.setDisplaySwitch;\n\n  var _useState3 = useState(function () {\n    return dumbFn;\n  }),\n      downloadImage = _useState3[0],\n      setDownloadImageFn = _useState3[1];\n\n  var _useState4 = useState(function () {\n    return dumbFn;\n  }),\n      fitScreen = _useState4[0],\n      setFitScreenFn = _useState4[1];\n\n  var _useState5 = useState(1),\n      scale = _useState5[0],\n      setScaleValue = _useState5[1];\n\n  var _useState6 = useState(function () {\n    return dumbFn;\n  }),\n      setScale = _useState6[0],\n      setScaleFn = _useState6[1];\n\n  useEffect(function () {\n    Promise.all(loadDagLibs).then(function (_ref2) {\n      var _ref3 = _slicedToArray(_ref2, 2),\n          d3 = _ref3[0],\n          dagre = _ref3[1][\"default\"];\n\n      if (!dagInfo.nodes.length || !dagInfo.edges.length) {\n        return;\n      }\n\n      var g = new dagre.graphlib.Graph();\n      g.setGraph({}).setDefaultEdgeLabel(function () {\n        return {};\n      });\n      dagInfo.nodes.forEach(function (n) {\n        return g.setNode(n.key, n);\n      });\n      dagInfo.edges.forEach(function (e) {\n        return g.setEdge(e[0], e[1]);\n      });\n      var render = new dagre.render();\n      var svg = d3.select('svg'); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n      var inner = svg.select('svg g');\n      render(inner, g);\n\n      var _g$graph = g.graph(),\n          width = _g$graph.width,\n          height = _g$graph.height;\n\n      var scaleFactor = 1;\n      svg.attr('height', Math.max(640, window.innerHeight + 40));\n      var zoom = d3.zoom() // eslint-disable-line @typescript-eslint/no-explicit-any\n      .scaleExtent([MIN_SCALE, MAX_SCALE]).on('zoom', function () {\n        setScaleValue(d3.event.transform.k / scaleFactor);\n        inner.attr('transform', d3.event.transform);\n      }).on('start', function () {\n        return svg.classed('grabbing', true);\n      }).on('end', function () {\n        return svg.classed('grabbing', false);\n      });\n      svg.call(zoom);\n      var prevDom; // install event listeners\n\n      svg.selectAll('g.node').on('click', function (v) {\n        var uid = v;\n\n        var _g$node = g.node(uid),\n            type = _g$node.type,\n            dom = _g$node.elem;\n\n        if (prevDom) {\n          prevDom.classList.remove('active');\n        }\n\n        dom.classList.add('active');\n        prevDom = dom;\n        var node = dagInfo.findNode(type, uid);\n\n        if (!node) {\n          setCurrentNode({\n            type: 'unknown',\n            guessType: type,\n            msg: uid\n          });\n          return;\n        }\n\n        setCurrentNode(_objectSpread({}, node, {\n          type: type\n        }));\n      });\n\n      var fitScreen = function fitScreen() {\n        var _svg$node;\n\n        if (!svg) {\n          return;\n        }\n\n        var parent = (_svg$node = svg.node()) === null || _svg$node === void 0 ? void 0 : _svg$node.parentElement;\n\n        if (!parent) {\n          return;\n        }\n\n        var _parent$getBoundingCl = parent.getBoundingClientRect(),\n            parentWidth = _parent$getBoundingCl.width;\n\n        svg.call(zoom.transform, d3.zoomIdentity.translate((parentWidth - (width !== null && width !== void 0 ? width : 0) * scaleFactor) / 2, 20).scale(scaleFactor));\n      };\n\n      fitScreen();\n      setFitScreenFn(function () {\n        return fitScreen;\n      });\n      setDownloadImageFn(function () {\n        var processing = false;\n        return function _callee() {\n          var svgNode, originalHeight;\n          return _regeneratorRuntime.async(function _callee$(_context) {\n            while (1) {\n              switch (_context.prev = _context.next) {\n                case 0:\n                  if (!processing) {\n                    _context.next = 2;\n                    break;\n                  }\n\n                  return _context.abrupt(\"return\");\n\n                case 2:\n                  processing = true;\n                  fitScreen();\n                  svgNode = svg.node();\n\n                  if (svgNode) {\n                    _context.next = 7;\n                    break;\n                  }\n\n                  return _context.abrupt(\"return\");\n\n                case 7:\n                  originalHeight = +svg.attr('height');\n                  svg.attr('height', (height !== null && height !== void 0 ? height : 0) + 40);\n                  _context.next = 11;\n                  return _regeneratorRuntime.awrap(saveSvgAsPng(svgNode, 'graph.png'));\n\n                case 11:\n                  svg.attr('height', originalHeight);\n                  processing = false;\n\n                case 13:\n                case \"end\":\n                  return _context.stop();\n              }\n            }\n          }, null, null, null, Promise);\n        };\n      });\n      setScaleFn(function () {\n        return function (n) {\n          zoom.scaleTo(svg, scaleFactor * n);\n          setScaleValue(n);\n        };\n      });\n    });\n  }, [dagInfo]);\n  return {\n    currentNode: currentNode,\n    displaySwitch: displaySwitch,\n    setDisplaySwitch: setDisplaySwitch,\n    downloadImage: downloadImage,\n    fitScreen: fitScreen,\n    scale: scale,\n    setScale: setScale\n  };\n};\n\nvar Graphs = function Graphs() {\n  var _useTranslation = useTranslation(['graphs', 'common']),\n      t = _useTranslation.t;\n\n  var _useRequest = useRequest('/graphs/graph'),\n      data = _useRequest.data,\n      error = _useRequest.error,\n      loading = _useRequest.loading;\n\n  var graph = useMemo(function () {\n    return loading || isEmpty(data === null || data === void 0 ? void 0 : data.data) ? undefined : data === null || data === void 0 ? void 0 : data.data;\n  }, [loading, data]);\n\n  var _useDagreD = useDagreD3(graph),\n      currentNode = _useDagreD.currentNode,\n      downloadImage = _useDagreD.downloadImage,\n      fitScreen = _useDagreD.fitScreen,\n      scale = _useDagreD.scale,\n      setScale = _useDagreD.setScale;\n\n  var aside = __jsx(\"section\", null, __jsx(SubSection, null, __jsx(Button, {\n    icon: \"download\",\n    onClick: downloadImage\n  }, t('download-image')), __jsx(Button, {\n    icon: \"revert\",\n    onClick: fitScreen\n  }, t('restore-image'))), __jsx(SubSection, null, __jsx(Field, {\n    label: \"\".concat(t('scale'), \":\")\n  }, __jsx(RangeSlider, {\n    min: MIN_SCALE,\n    max: MAX_SCALE,\n    step: 0.1,\n    value: scale,\n    onChange: setScale\n  }))), __jsx(SubSection, null, __jsx(Field, {\n    label: \"\".concat(t('node-info'), \":\")\n  }), __jsx(NodeInfo, {\n    node: currentNode\n  })));\n\n  var ContentInner = useMemo(function () {\n    if (loading) {\n      return null;\n    }\n\n    if (error) {\n      return __jsx(Empty, null, t('common:error'));\n    }\n\n    if (!graph) {\n      return __jsx(Empty, null, t('common:empty'));\n    }\n\n    return __jsx(GraphSvg, null, __jsx(\"g\", null));\n  }, [loading, error, graph, t]);\n  return __jsx(React.Fragment, null, __jsx(Preloader, {\n    url: \"/graphs/graph\"\n  }), __jsx(Title, null, t('common:graphs')), __jsx(Content, {\n    aside: aside,\n    loading: loading\n  }, ContentInner));\n};\n\nGraphs.getInitialProps = function () {\n  return {\n    namespacesRequired: ['graphs', 'common']\n  };\n};\n\nexport default Graphs;","map":null,"metadata":{},"sourceType":"module"}