{"ast":null,"code":"import _defineProperty from \"@babel/runtime/helpers/esm/defineProperty\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nvar __jsx = React.createElement;\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\n// cSpell:words ungrouped\nimport { useTranslation } from '~/utils/i18n';\nimport React, { useCallback, useMemo, useState } from 'react'; // import {em, rem} from '~/utils/style';\n\nimport AsideDivider from '~/components/AsideDivider';\nimport ChartPage from '~/components/ChartPage';\nimport Checkbox from '~/components/Checkbox';\nimport Content from '~/components/Content';\nimport Field from '~/components/Field'; // import Icon from '~/components/Icon';\n\nimport Preloader from '~/components/Preloader';\nimport RunSelect from '~/components/RunSelect';\nimport RunningToggle from '~/components/RunningToggle';\nimport SampleChart from '~/components/SamplesPage/SampleChart';\nimport TagFilter from '~/components/TagFilter';\nimport Title from '~/components/Title';\nimport { rem } from '~/utils/style';\nimport styled from 'styled-components';\nimport useTagFilter from '~/hooks/useTagFilter'; // const StyledIcon = styled(Icon)`\n//     font-size: ${rem(16)};\n//     margin-left: ${em(6)};\n//     margin-right: ${em(4)};\n//     vertical-align: middle;\n// `;\n// const CheckboxTitle = styled.span`\n//     font-size: ${rem(16)};\n//     font-weight: 700;\n//     vertical-align: text-top;\n// `;\n\nvar SubField = styled(Field).withConfig({\n  displayName: \"samples__SubField\",\n  componentId: \"sc-5byinv-0\"\n})([\"margin-left:\", \";\"], rem(26));\n\nvar Samples = function Samples() {\n  var _useTranslation = useTranslation(['samples', 'common']),\n      t = _useTranslation.t;\n\n  var _useState = useState(true),\n      running = _useState[0],\n      setRunning = _useState[1];\n\n  var _useTagFilter = useTagFilter('images', running),\n      runs = _useTagFilter.runs,\n      tags = _useTagFilter.tags,\n      selectedRuns = _useTagFilter.selectedRuns,\n      selectedTags = _useTagFilter.selectedTags,\n      onChangeRuns = _useTagFilter.onChangeRuns,\n      onFilterTags = _useTagFilter.onFilterTags,\n      loadingRuns = _useTagFilter.loadingRuns,\n      loadingTags = _useTagFilter.loadingTags;\n\n  var ungroupedSelectedTags = useMemo(function () {\n    return selectedTags.reduce(function (prev, _ref) {\n      var runs = _ref.runs,\n          item = _objectWithoutProperties(_ref, [\"runs\"]);\n\n      Array.prototype.push.apply(prev, runs.map(function (run) {\n        return _objectSpread({}, item, {\n          run: run\n        });\n      }));\n      return prev;\n    }, []);\n  }, [selectedTags]);\n  var showImage = true; // const [showImage, setShowImage] = useState(true);\n  // const [showAudio, setShowAudio] = useState(true);\n  // const [showText, setShowText] = useState(true);\n\n  var _useState2 = useState(false),\n      showActualSize = _useState2[0],\n      setShowActualSize = _useState2[1];\n\n  var aside = __jsx(\"section\", null, __jsx(RunSelect, {\n    runs: runs,\n    value: selectedRuns,\n    onChange: onChangeRuns\n  }), __jsx(AsideDivider, null), showImage && __jsx(SubField, null, __jsx(Checkbox, {\n    value: showActualSize,\n    onChange: setShowActualSize\n  }, t('show-actual-size'))), __jsx(RunningToggle, {\n    running: running,\n    onToggle: setRunning\n  }));\n\n  var withChart = useCallback(function (_ref2) {\n    var run = _ref2.run,\n        label = _ref2.label;\n    return __jsx(SampleChart, {\n      run: run,\n      tag: label,\n      fit: !showActualSize,\n      running: running\n    });\n  }, [showActualSize, running]);\n  return __jsx(React.Fragment, null, __jsx(Preloader, {\n    url: \"/runs\"\n  }), __jsx(Preloader, {\n    url: \"/images/tags\"\n  }), __jsx(Title, null, t('common:samples')), __jsx(Content, {\n    aside: aside,\n    loading: loadingRuns\n  }, __jsx(TagFilter, {\n    tags: tags,\n    onChange: onFilterTags\n  }), __jsx(ChartPage, {\n    items: ungroupedSelectedTags,\n    withChart: withChart,\n    loading: loadingRuns || loadingTags\n  })));\n};\n\nSamples.getInitialProps = function () {\n  return {\n    namespacesRequired: ['samples', 'common']\n  };\n};\n\nexport default Samples;","map":null,"metadata":{},"sourceType":"module"}