{"ast":null,"code":"var __jsx = React.createElement;\nimport { divide } from '~/resource/high-dimensional';\nimport React, { useMemo } from 'react';\nimport { primaryColor, rem } from '~/utils/style';\nimport ScatterChart from '~/components/ScatterChart';\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 height = rem(600);\n\nconst divideWasm = () => // eslint-disable-next-line @typescript-eslint/ban-ts-ignore\n// @ts-ignore\nimport('~/wasm/dist').then(({\n  divide\n}) => params => {\n  var _params$keyword;\n\n  return divide(params.points, params.labels, !!params.visibility, (_params$keyword = params.keyword) !== null && _params$keyword !== void 0 ? _params$keyword : '');\n});\n\nconst divideWorker = () => new Worker('~/worker/high-dimensional/divide.worker.ts', {\n  type: 'module'\n});\n\nconst StyledScatterChart = styled(ScatterChart).withConfig({\n  displayName: \"HighDimensionalChart__StyledScatterChart\",\n  componentId: \"sc-1sw98lc-0\"\n})([\"height:\", \";\"], height);\nconst Empty = styled.div.withConfig({\n  displayName: \"HighDimensionalChart__Empty\",\n  componentId: \"sc-1sw98lc-1\"\n})([\"display:flex;justify-content:center;align-items:center;font-size:\", \";height:\", \";\"], rem(20), height);\nconst label = {\n  show: true,\n  position: 'top',\n  formatter: params => params.data.showing ? params.data.name : ''\n};\n\nconst HighDimensionalChart = ({\n  run,\n  running,\n  labelVisibility,\n  keyword,\n  reduction,\n  dimension\n}) => {\n  const {\n    t\n  } = useTranslation('common');\n  const {\n    data,\n    error,\n    loading\n  } = useRunningRequest(`/embeddings/embedding?${queryString.stringify({\n    run: run !== null && run !== void 0 ? run : '',\n    dimension: Number.parseInt(dimension),\n    reduction\n  })}`, !!running);\n  const divideParams = useMemo(() => {\n    var _data$embedding, _data$labels;\n\n    return {\n      points: (_data$embedding = data === null || data === void 0 ? void 0 : data.embedding) !== null && _data$embedding !== void 0 ? _data$embedding : [],\n      keyword,\n      labels: (_data$labels = data === null || data === void 0 ? void 0 : data.labels) !== null && _data$labels !== void 0 ? _data$labels : [],\n      visibility: labelVisibility\n    };\n  }, [data, labelVisibility, keyword]);\n  const points = useHeavyWork(divideWasm, divideWorker, divide, divideParams);\n  const chartData = useMemo(() => {\n    var _points$, _points$2;\n\n    return [{\n      name: 'highlighted',\n      data: (_points$ = points === null || points === void 0 ? void 0 : points[0]) !== null && _points$ !== void 0 ? _points$ : [],\n      label\n    }, {\n      name: 'others',\n      data: (_points$2 = points === null || points === void 0 ? void 0 : points[1]) !== null && _points$2 !== void 0 ? _points$2 : [],\n      label,\n      color: primaryColor\n    }];\n  }, [points]);\n\n  if (!data && error) {\n    return __jsx(Empty, null, t('error'));\n  }\n\n  if (!data && !loading) {\n    return __jsx(Empty, null, t('empty'));\n  }\n\n  return __jsx(StyledScatterChart, {\n    loading: loading,\n    data: chartData,\n    gl: dimension === '3d'\n  });\n};\n\nexport default HighDimensionalChart;","map":null,"metadata":{},"sourceType":"module"}