{"ast":null,"code":"var __jsx = React.createElement;\nimport { chartData, range, singlePointRange, sortingMethodMap, tooltip, transform, xAxisMap } from '~/resource/scalars';\nimport React, { useCallback, useMemo } from 'react';\nimport { em, size } from '~/utils/style';\nimport LineChart from '~/components/LineChart';\nimport { cycleFetcher } from '~/utils/fetch';\nimport queryString from 'query-string';\nimport styled from 'styled-components';\nimport useHeavyWork from '~/hooks/useHeavyWork';\nimport { useRunningRequest } from '~/hooks/useRequest';\nimport { useTranslation } from '~/utils/i18n';\nconst width = em(430);\nconst height = em(320);\n\nconst smoothWasm = () => // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n// @ts-ignore\nimport('~/wasm/dist').then(({\n  transform\n}) => params => transform(params.datasets, params.smoothing));\n\nconst rangeWasm = () => // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n// @ts-ignore\nimport('~/wasm/dist').then(({\n  range\n}) => params => range(params.datasets, params.outlier));\n\nconst smoothWorker = () => new Worker('~/worker/scalars/smooth.worker.ts', {\n  type: 'module'\n});\n\nconst rangeWorker = () => new Worker('~/worker/scalars/range.worker.ts', {\n  type: 'module'\n});\n\nconst StyledLineChart = styled(LineChart).withConfig({\n  displayName: \"ScalarChart__StyledLineChart\",\n  componentId: \"sc-1uqazys-0\"\n})([\"\", \"\"], size(height, width));\nconst Error = styled.div.withConfig({\n  displayName: \"ScalarChart__Error\",\n  componentId: \"sc-1uqazys-1\"\n})([\"\", \" display:flex;justify-content:center;align-items:center;\"], size(height, width));\n\nconst ScalarChart = ({\n  runs,\n  tag,\n  smoothing,\n  xAxis,\n  sortingMethod,\n  outlier,\n  running\n}) => {\n  var _useHeavyWork;\n\n  const {\n    t,\n    i18n\n  } = useTranslation(['scalars', 'common']);\n  const {\n    data: datasets,\n    error,\n    loading\n  } = useRunningRequest(runs.map(run => `/scalars/list?${queryString.stringify({\n    run,\n    tag\n  })}`), !!running, (...urls) => cycleFetcher(urls));\n  const smooth = false;\n  const type = useMemo(() => xAxis === 'wall' ? 'time' : 'value', [xAxis]);\n  const xAxisLabel = useMemo(() => xAxis === 'step' ? '' : t(`x-axis-value.${xAxis}`), [xAxis, t]);\n  const transformParams = useMemo(() => {\n    var _datasets$map;\n\n    return {\n      datasets: (_datasets$map = datasets === null || datasets === void 0 ? void 0 : datasets.map(data => data !== null && data !== void 0 ? data : [])) !== null && _datasets$map !== void 0 ? _datasets$map : [],\n      smoothing\n    };\n  }, [datasets, smoothing]);\n  const smoothedDatasets = (_useHeavyWork = useHeavyWork(smoothWasm, smoothWorker, transform, transformParams)) !== null && _useHeavyWork !== void 0 ? _useHeavyWork : [];\n  const rangeParams = useMemo(() => ({\n    datasets: smoothedDatasets,\n    outlier: !!outlier\n  }), [smoothedDatasets, outlier]);\n  const yRange = useHeavyWork(rangeWasm, rangeWorker, range, rangeParams);\n  const ranges = useMemo(() => {\n    let x = undefined;\n    let y = yRange; // if there is only one point, place it in the middle\n\n    if (smoothedDatasets.length === 1 && smoothedDatasets[0].length === 1) {\n      if (['value', 'log'].includes(type)) {\n        x = singlePointRange(smoothedDatasets[0][0][xAxisMap[xAxis]]);\n      }\n\n      y = singlePointRange(smoothedDatasets[0][0][2]);\n    }\n\n    return {\n      x,\n      y\n    };\n  }, [smoothedDatasets, yRange, type, xAxis]);\n  const data = useMemo(() => chartData({\n    data: smoothedDatasets,\n    runs,\n    smooth,\n    xAxis\n  }), [smoothedDatasets, runs, smooth, xAxis]);\n  const formatter = useCallback(params => {\n    var _smoothedDatasets$map;\n\n    const data = Array.isArray(params) ? params[0].data : params.data;\n    const step = data[1];\n    const points = (_smoothedDatasets$map = smoothedDatasets === null || smoothedDatasets === void 0 ? void 0 : smoothedDatasets.map((series, index) => {\n      let nearestItem;\n\n      if (step === 0) {\n        nearestItem = series[0];\n      } else {\n        for (let i = 0; i < series.length; i++) {\n          const item = series[i];\n\n          if (item[1] === step) {\n            nearestItem = item;\n            break;\n          }\n\n          if (item[1] > step) {\n            nearestItem = series[i - 1 >= 0 ? i - 1 : 0];\n            break;\n          }\n\n          if (!nearestItem) {\n            nearestItem = series[series.length - 1];\n          }\n        }\n      }\n\n      return {\n        run: runs[index],\n        item: nearestItem || []\n      };\n    })) !== null && _smoothedDatasets$map !== void 0 ? _smoothedDatasets$map : [];\n    const sort = sortingMethodMap[sortingMethod];\n    return tooltip(sort ? sort(points, data) : points, i18n);\n  }, [smoothedDatasets, runs, sortingMethod, i18n]); // display error only on first fetch\n\n  if (!data && error) {\n    return __jsx(Error, null, t('common:error'));\n  }\n\n  return __jsx(StyledLineChart, {\n    title: tag,\n    xAxis: xAxisLabel,\n    xRange: ranges.x,\n    yRange: ranges.y,\n    type: type,\n    tooltip: formatter,\n    data: data,\n    loading: loading\n  });\n};\n\nexport default ScalarChart;","map":null,"metadata":{},"sourceType":"module"}