{"ast":null,"code":"var __jsx = React.createElement;\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { ellipsis, em, primaryColor, size, textLightColor } from '~/utils/style';\nimport GridLoader from 'react-spinners/GridLoader';\nimport Image from '~/components/Image';\nimport StepSlider from '~/components/SamplesPage/StepSlider';\nimport isEmpty from 'lodash/isEmpty';\nimport queryString from 'query-string';\nimport styled from 'styled-components';\nimport { useRunningRequest } from '~/hooks/useRequest';\nimport { useTranslation } from '~/utils/i18n';\nvar width = em(430);\nvar height = em(384);\nvar Wrapper = styled.div.withConfig({\n  displayName: \"SampleChart__Wrapper\",\n  componentId: \"sc-1vhx4sv-0\"\n})([\"\", \" padding:\", \";display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;> *{flex-grow:0;flex-shrink:0;}\"], size(height, width), em(20));\nvar Title = styled.div.withConfig({\n  displayName: \"SampleChart__Title\",\n  componentId: \"sc-1vhx4sv-1\"\n})([\"display:flex;justify-content:space-between;align-items:center;margin-bottom:\", \";> h4{font-size:\", \";font-weight:700;flex-shrink:1;flex-grow:1;padding:0;margin:0;\", \"}> span{font-size:\", \";flex-shrink:0;flex-grow:0;color:\", \";}\"], em(20), em(16), ellipsis(), em(14), textLightColor);\nvar Container = styled.div.withConfig({\n  displayName: \"SampleChart__Container\",\n  componentId: \"sc-1vhx4sv-2\"\n})([\"flex-grow:1;flex-shrink:1;margin-top:\", \";display:flex;justify-content:center;align-items:center;overflow:hidden;> img{\", \" object-fit:\", \";flex-shrink:1;}\"], em(20), size('100%'), function (props) {\n  return props.fit ? 'contain' : 'scale-down';\n});\n\nvar getImageUrl = function getImageUrl(index, run, tag, wallTime) {\n  return \"/images/image?\".concat(queryString.stringify({\n    index: index,\n    ts: wallTime,\n    run: run,\n    tag: tag\n  }));\n};\n\nvar cacheValidity = 5 * 60 * 1000;\n\nvar SampleChart = function SampleChart(_ref) {\n  var _data$map;\n\n  var run = _ref.run,\n      tag = _ref.tag,\n      fit = _ref.fit,\n      running = _ref.running;\n\n  var _useTranslation = useTranslation('common'),\n      t = _useTranslation.t;\n\n  var _useRunningRequest = useRunningRequest(\"/images/list?\".concat(queryString.stringify({\n    run: run,\n    tag: tag\n  })), !!running),\n      data = _useRunningRequest.data,\n      error = _useRunningRequest.error,\n      loading = _useRunningRequest.loading;\n\n  var _useState = useState(0),\n      step = _useState[0],\n      setStep = _useState[1];\n\n  var _useState2 = useState(),\n      src = _useState2[0],\n      setSrc = _useState2[1];\n\n  var cached = useRef({});\n  var timer = useRef(null); // clear cache if tag or run changed\n\n  useEffect(function () {\n    Object.values(cached.current).forEach(function (_ref2) {\n      var timer = _ref2.timer;\n      return clearTimeout(timer);\n    });\n    cached.current = {};\n  }, [tag, run]);\n  var cacheImageSrc = useCallback(function () {\n    if (!data) {\n      return;\n    }\n\n    var imageUrl = getImageUrl(step, run, tag, data[step].wallTime);\n    cached.current[step] = {\n      src: imageUrl,\n      timer: setTimeout(function () {\n        (function (s) {\n          return delete cached.current[s];\n        })(step);\n      }, cacheValidity)\n    };\n    setSrc(imageUrl);\n  }, [step, run, tag, data]);\n  useEffect(function () {\n    if (cached.current[step]) {\n      // cached, return immediately\n      setSrc(cached.current[step].src);\n    } else if (isEmpty(cached.current)) {\n      // first load, return immediately\n      cacheImageSrc();\n    } else {\n      timer.current = setTimeout(cacheImageSrc, 500);\n      return function () {\n        timer.current && clearTimeout(timer.current);\n      };\n    }\n  }, [step, cacheImageSrc]);\n  var Content = useMemo(function () {\n    // show loading when deferring\n    if (loading || !cached.current[step]) {\n      return __jsx(GridLoader, {\n        color: primaryColor,\n        size: \"10px\"\n      });\n    }\n\n    if (!data && error) {\n      return __jsx(\"span\", null, t('error'));\n    }\n\n    if (isEmpty(data)) {\n      return __jsx(\"span\", null, t('empty'));\n    }\n\n    return __jsx(Image, {\n      src: src,\n      cache: cacheValidity\n    });\n  }, [loading, error, data, step, src, t]);\n  return __jsx(Wrapper, null, __jsx(Title, null, __jsx(\"h4\", null, tag), __jsx(\"span\", null, run)), __jsx(StepSlider, {\n    value: step,\n    steps: (_data$map = data === null || data === void 0 ? void 0 : data.map(function (item) {\n      return item.step;\n    })) !== null && _data$map !== void 0 ? _data$map : [],\n    onChange: setStep,\n    onChangeComplete: cacheImageSrc\n  }), __jsx(Container, {\n    fit: fit\n  }, Content));\n};\n\nexport default SampleChart;","map":null,"metadata":{},"sourceType":"module"}