{"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';\nvar dimensions = ['2d', '3d'];\nvar reductions = ['pca', 'tsne'];\nvar StyledIcon = styled(Icon).withConfig({\n  displayName: \"high-dimensional__StyledIcon\",\n  componentId: \"sc-1fy523j-0\"\n})([\"margin-right:\", \";vertical-align:middle;\"], em(4));\nvar 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\nvar HighDimensional = function HighDimensional() {\n  var _useTranslation = useTranslation(['high-dimensional', 'common']),\n      t = _useTranslation.t;\n\n  var _useState = useState(true),\n      running = _useState[0],\n      setRunning = _useState[1];\n\n  var _useRouter = useRouter(),\n      query = _useRouter.query;\n\n  var queryRun = Array.isArray(query.run) ? query.run[0] : query.run;\n\n  var _useRunningRequest = useRunningRequest('/runs', running),\n      runs = _useRunningRequest.data,\n      error = _useRunningRequest.error,\n      loading = _useRunningRequest.loading;\n\n  var selectedRun = (runs === null || runs === void 0 ? void 0 : runs.includes(queryRun)) ? queryRun : runs === null || runs === void 0 ? void 0 : runs[0];\n\n  var _useState2 = useState(selectedRun),\n      run = _useState2[0],\n      setRun = _useState2[1];\n\n  useEffect(function () {\n    return setRun(selectedRun);\n  }, [setRun, selectedRun]);\n\n  var _useState3 = useState(''),\n      search = _useState3[0],\n      setSearch = _useState3[1];\n\n  var debounceSearch = useSearchValue(search);\n\n  var _useState4 = useState(dimensions[0]),\n      dimension = _useState4[0],\n      setDimension = _useState4[1];\n\n  var _useState5 = useState(reductions[0]),\n      reduction = _useState5[0],\n      setReduction = _useState5[1];\n\n  var _useState6 = useState(true),\n      labelVisibility = _useState6[0],\n      setLabelVisibility = _useState6[1];\n\n  var aside = __jsx(\"section\", null, __jsx(AsideTitle, null, t('common:select-runs')), __jsx(Select, {\n    list: runs,\n    value: run,\n    onChange: function onChange(value) {\n      return setRun(value);\n    }\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: function onChange(value) {\n      return setDimension(value);\n    }\n  }, dimensions.map(function (item) {\n    return __jsx(RadioButton, {\n      key: item,\n      value: item\n    }, t(item));\n  }))), __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: function onChange(value) {\n      return setReduction(value);\n    }\n  }, reductions.map(function (item) {\n    return __jsx(RadioButton, {\n      key: item,\n      value: item\n    }, t(item));\n  }))), __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 = function () {\n  return {\n    namespacesRequired: ['high-dimensional', 'common']\n  };\n};\n\nexport default HighDimensional;","map":null,"metadata":{},"sourceType":"module"}