{"ast":null,"code":"var __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\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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\nconst SubField = styled(Field).withConfig({\n  displayName: \"samples__SubField\",\n  componentId: \"sc-5byinv-0\"\n})([\"margin-left:\", \";\"], rem(26));\n\nconst Samples = () => {\n  const {\n    t\n  } = useTranslation(['samples', 'common']);\n  const {\n    0: running,\n    1: setRunning\n  } = useState(true);\n  const {\n    runs,\n    tags,\n    selectedRuns,\n    selectedTags,\n    onChangeRuns,\n    onFilterTags,\n    loadingRuns,\n    loadingTags\n  } = useTagFilter('images', running);\n  const ungroupedSelectedTags = useMemo(() => selectedTags.reduce((prev, _ref) => {\n    let {\n      runs\n    } = _ref,\n        item = _objectWithoutProperties(_ref, [\"runs\"]);\n\n    Array.prototype.push.apply(prev, runs.map(run => _objectSpread({}, item, {\n      run\n    })));\n    return prev;\n  }, []), [selectedTags]);\n  const showImage = true; // const [showImage, setShowImage] = useState(true);\n  // const [showAudio, setShowAudio] = useState(true);\n  // const [showText, setShowText] = useState(true);\n\n  const {\n    0: showActualSize,\n    1: setShowActualSize\n  } = useState(false);\n\n  const 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  const withChart = useCallback(({\n    run,\n    label\n  }) => __jsx(SampleChart, {\n    run: run,\n    tag: label,\n    fit: !showActualSize,\n    running: running\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 = () => ({\n  namespacesRequired: ['samples', 'common']\n});\n\nexport default Samples;","map":null,"metadata":{},"sourceType":"module"}