{"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';\nconst width = em(430);\nconst height = em(384);\nconst 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));\nconst 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);\nconst 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%'), props => props.fit ? 'contain' : 'scale-down');\n\nconst getImageUrl = (index, run, tag, wallTime) => `/images/image?${queryString.stringify({\n  index,\n  ts: wallTime,\n  run,\n  tag\n})}`;\n\nconst cacheValidity = 5 * 60 * 1000;\n\nconst SampleChart = ({\n  run,\n  tag,\n  fit,\n  running\n}) => {\n  var _data$map;\n\n  const {\n    t\n  } = useTranslation('common');\n  const {\n    data,\n    error,\n    loading\n  } = useRunningRequest(`/images/list?${queryString.stringify({\n    run,\n    tag\n  })}`, !!running);\n  const {\n    0: step,\n    1: setStep\n  } = useState(0);\n  const {\n    0: src,\n    1: setSrc\n  } = useState();\n  const cached = useRef({});\n  const timer = useRef(null); // clear cache if tag or run changed\n\n  useEffect(() => {\n    Object.values(cached.current).forEach(({\n      timer\n    }) => clearTimeout(timer));\n    cached.current = {};\n  }, [tag, run]);\n  const cacheImageSrc = useCallback(() => {\n    if (!data) {\n      return;\n    }\n\n    const imageUrl = getImageUrl(step, run, tag, data[step].wallTime);\n    cached.current[step] = {\n      src: imageUrl,\n      timer: setTimeout(() => {\n        (s => delete cached.current[s])(step);\n      }, cacheValidity)\n    };\n    setSrc(imageUrl);\n  }, [step, run, tag, data]);\n  useEffect(() => {\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 () => {\n        timer.current && clearTimeout(timer.current);\n      };\n    }\n  }, [step, cacheImageSrc]);\n  const Content = useMemo(() => {\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(item => item.step)) !== 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"}