{"ast":null,"code":"var __jsx = React.createElement;\nimport { useTranslation } from '~/utils/i18n';\nimport React, { useEffect, useState } from 'react';\nimport Select from '~/components/Select';\nimport { em, rem } from '~/utils/style';\nimport AsideDivider from '~/components/AsideDivider';\nimport Checkbox from '~/components/Checkbox';\nimport Content from '~/components/Content';\nimport Field from '~/components/Field';\nimport HighDimensionalChart from '~/components/HighDimensionalPage/HighDimensionalChart';\nimport Icon from '~/components/Icon';\nimport Preloader from '~/components/Preloader';\nimport RadioButton from '~/components/RadioButton';\nimport RadioGroup from '~/components/RadioGroup';\nimport RunningToggle from '~/components/RunningToggle';\nimport SearchInput from '~/components/SearchInput';\nimport Title from '~/components/Title';\nimport styled from 'styled-components';\nimport { useRouter } from 'next/router';\nimport { useRunningRequest } from '~/hooks/useRequest';\nimport useSearchValue from '~/hooks/useSearchValue';\nconst dimensions = ['2d', '3d'];\nconst reductions = ['pca', 'tsne'];\nconst StyledIcon = styled(Icon).withConfig({\n  displayName: \"high-dimensional__StyledIcon\",\n  componentId: \"sc-1fy523j-0\"\n})([\"margin-right:\", \";vertical-align:middle;\"], em(4));\nconst AsideTitle = styled.div.withConfig({\n  displayName: \"high-dimensional__AsideTitle\",\n  componentId: \"sc-1fy523j-1\"\n})([\"font-size:\", \";line-height:\", \";font-weight:700;margin-bottom:\", \";\"], rem(16), rem(16), rem(10));\n\nconst HighDimensional = () => {\n  const {\n    t\n  } = useTranslation(['high-dimensional', 'common']);\n  const {\n    0: running,\n    1: setRunning\n  } = useState(true);\n  const {\n    query\n  } = useRouter();\n  const queryRun = Array.isArray(query.run) ? query.run[0] : query.run;\n  const {\n    data: runs,\n    error,\n    loading\n  } = useRunningRequest('/runs', running);\n  const selectedRun = (runs === null || runs === void 0 ? void 0 : runs.includes(queryRun)) ? queryRun : runs === null || runs === void 0 ? void 0 : runs[0];\n  const {\n    0: run,\n    1: setRun\n  } = useState(selectedRun);\n  useEffect(() => setRun(selectedRun), [setRun, selectedRun]);\n  const {\n    0: search,\n    1: setSearch\n  } = useState('');\n  const debounceSearch = useSearchValue(search);\n  const {\n    0: dimension,\n    1: setDimension\n  } = useState(dimensions[0]);\n  const {\n    0: reduction,\n    1: setReduction\n  } = useState(reductions[0]);\n  const {\n    0: labelVisibility,\n    1: setLabelVisibility\n  } = useState(true);\n\n  const aside = __jsx(\"section\", null, __jsx(AsideTitle, null, t('common:select-runs')), __jsx(Select, {\n    list: runs,\n    value: run,\n    onChange: value => setRun(value)\n  }), __jsx(AsideDivider, null), __jsx(Field, null, __jsx(SearchInput, {\n    placeholder: t('common:search'),\n    value: search,\n    onChange: setSearch\n  })), __jsx(Field, null, __jsx(Checkbox, {\n    value: labelVisibility,\n    onChange: setLabelVisibility\n  }, t('display-all-label'))), __jsx(AsideDivider, null), __jsx(AsideTitle, null, __jsx(StyledIcon, {\n    type: \"dimension\"\n  }), t('dimension')), __jsx(Field, null, __jsx(RadioGroup, {\n    value: dimension,\n    onChange: value => setDimension(value)\n  }, dimensions.map(item => __jsx(RadioButton, {\n    key: item,\n    value: item\n  }, t(item))))), __jsx(AsideDivider, null), __jsx(AsideTitle, null, __jsx(StyledIcon, {\n    type: \"reduction\"\n  }), t('reduction-method')), __jsx(Field, null, __jsx(RadioGroup, {\n    value: reduction,\n    onChange: value => setReduction(value)\n  }, reductions.map(item => __jsx(RadioButton, {\n    key: item,\n    value: item\n  }, t(item))))), __jsx(RunningToggle, {\n    running: running,\n    onToggle: setRunning\n  }));\n\n  return __jsx(React.Fragment, null, __jsx(Preloader, {\n    url: \"/runs\"\n  }), __jsx(Title, null, t('common:high-dimensional')), __jsx(Content, {\n    aside: aside,\n    loading: loading\n  }, error ? __jsx(\"div\", null, t('common:error')) : loading ? null : __jsx(HighDimensionalChart, {\n    dimension: dimension,\n    keyword: debounceSearch,\n    run: run !== null && run !== void 0 ? run : '',\n    running: running,\n    labelVisibility: labelVisibility,\n    reduction: reduction\n  })));\n};\n\nHighDimensional.getInitialProps = () => ({\n  namespacesRequired: ['high-dimensional', 'common']\n});\n\nexport default HighDimensional;","map":null,"metadata":{},"sourceType":"module"}