diff --git a/packages_rs/nextclade-web/src/components/Results/ButtonBack.tsx b/packages_rs/nextclade-web/src/components/Results/ButtonBack.tsx deleted file mode 100644 index fc472ce52..000000000 --- a/packages_rs/nextclade-web/src/components/Results/ButtonBack.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useMemo } from 'react' -import { useRouter } from 'next/router' -import { Button } from 'reactstrap' -import styled from 'styled-components' -import { FaCaretLeft } from 'react-icons/fa' - -import { useTranslationSafe } from 'src/helpers/useTranslationSafe' - -export const ButtonStyled = styled(Button)` - margin: 2px 2px; - height: 38px; - width: 50px; - color: ${(props) => props.theme.gray700}; - - @media (min-width: 1200px) { - width: 140px; - } -` - -export function ButtonBack() { - const { t } = useTranslationSafe() - const text = useMemo(() => t('Back'), [t]) - const { back } = useRouter() - - return ( - - - {text} - - ) -} diff --git a/packages_rs/nextclade-web/src/components/Results/ButtonNewRun.tsx b/packages_rs/nextclade-web/src/components/Results/ButtonNewRun.tsx deleted file mode 100644 index 41d5ffe93..000000000 --- a/packages_rs/nextclade-web/src/components/Results/ButtonNewRun.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useCallback } from 'react' -import { useRecoilState, useRecoilValue } from 'recoil' -import { canRunAtom } from 'src/state/results.state' -import styled from 'styled-components' -import { - Col, - Modal as ReactstrapModal, - ModalBody as ReactstrapModalBody, - ModalFooter as ReactstrapModalFooter, - ModalHeader as ReactstrapModalHeader, - Row, -} from 'reactstrap' -import { FaFile } from 'react-icons/fa' - -import { FilePickerAdvanced } from 'src/components/FilePicker/FilePickerAdvanced' -import { isNewRunPopupShownAtom } from 'src/state/settings.state' -import { PanelButton } from 'src/components/Results/PanelButton' -import { useTranslationSafe } from 'src/helpers/useTranslationSafe' - -export const ModalHeader = styled(ReactstrapModalHeader)` - .modal-title { - width: 100%; - } -` - -export const Modal = styled(ReactstrapModal)` - @media (max-width: 1200px) { - min-width: 80vw; - } - @media (min-width: 1201px) { - min-width: 957px; - } -` - -export const ModalBody = styled(ReactstrapModalBody)` - display: flex; - height: 66vh; - flex-direction: column; -` - -export const Scrollable = styled.div` - flex: 1; - overflow-y: auto; - - // prettier-ignore - background: - linear-gradient(#ffffff 33%, rgba(255,255,255, 0)), - linear-gradient(rgba(255,255,255, 0), #ffffff 66%) 0 100%, - radial-gradient(farthest-side at 50% 0, rgba(119,119,119, 0.5), rgba(0,0,0,0)), - radial-gradient(farthest-side at 50% 100%, rgba(119,119,119, 0.5), rgba(0,0,0,0)) 0 100%; - background-color: #ffffff; - background-repeat: no-repeat; - background-attachment: local, local, scroll, scroll; - background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px; -` - -export const ModalFooter = styled(ReactstrapModalFooter)`` - -export function ButtonNewRun() { - const { t } = useTranslationSafe() - - // const algorithmRun = useCallback(() => { - // // TODO: trigger a run - // }, []) - - const canRun = useRecoilValue(canRunAtom) - const [isNewRunPopupShown, setIsNewRunPopupShown] = useRecoilState(isNewRunPopupShownAtom) - - const open = useCallback(() => setIsNewRunPopupShown(true), [setIsNewRunPopupShown]) - const close = useCallback(() => setIsNewRunPopupShown(false), [setIsNewRunPopupShown]) - const toggle = useCallback( - () => setIsNewRunPopupShown((isNewRunPopupShown) => !isNewRunPopupShown), - [setIsNewRunPopupShown], - ) - - // const run = useCallback(() => { - // close() - // algorithmRun() - // }, [algorithmRun, close]) - - return ( - <> - - - - - - -

{t('New run')}

- - - - - - - - - - - {/* */} - - - - - ) -} diff --git a/packages_rs/nextclade-web/src/components/Results/ButtonRerun.tsx b/packages_rs/nextclade-web/src/components/Results/ButtonRerun.tsx deleted file mode 100644 index 6be377566..000000000 --- a/packages_rs/nextclade-web/src/components/Results/ButtonRerun.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useCallback, useMemo } from 'react' -import { useRecoilValue } from 'recoil' -import { canRunAtom } from 'src/state/results.state' -import styled from 'styled-components' -import { MdRefresh } from 'react-icons/md' - -import { useTranslationSafe } from 'src/helpers/useTranslationSafe' -import { PanelButton } from 'src/components/Results/PanelButton' - -export const RefreshIcon = styled(MdRefresh)` - width: 22px; - height: 22px; - margin-bottom: 3px; -` - -export function ButtonRerun() { - const { t } = useTranslationSafe() - const tooltip = useMemo(() => t('Run the algorithm again'), [t]) - const rerun = useCallback(() => { - // TODO - }, []) - const canRun = useRecoilValue(canRunAtom) - - return ( - - - - ) -} diff --git a/packages_rs/nextclade-web/src/components/Results/ButtonTree.tsx b/packages_rs/nextclade-web/src/components/Results/ButtonTree.tsx deleted file mode 100644 index ca7fcd36f..000000000 --- a/packages_rs/nextclade-web/src/components/Results/ButtonTree.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React, { useCallback, useMemo } from 'react' -import { useRouter } from 'next/router' -import { useRecoilValue } from 'recoil' -import styled from 'styled-components' - -import { hasTreeAtom } from 'src/state/results.state' -import { useTranslationSafe } from 'src/helpers/useTranslationSafe' -import { PanelButton } from 'src/components/Results/PanelButton' -import { TreeIcon } from 'src/components/Tree/TreeIcon' - -const IconContainer = styled.span` - margin-right: 0.5rem; -` - -export function ButtonTree() { - const { t } = useTranslationSafe() - const router = useRouter() - - const text = useMemo(() => t('Show phylogenetic tree'), [t]) - const hasTree = useRecoilValue(hasTreeAtom) - const showTree = useCallback(() => router.push('/tree'), [router]) - - return ( - - - - - - ) -} diff --git a/packages_rs/nextclade-web/src/components/Results/ResultsPage.tsx b/packages_rs/nextclade-web/src/components/Results/ResultsPage.tsx index 7da595c13..16c450c01 100644 --- a/packages_rs/nextclade-web/src/components/Results/ResultsPage.tsx +++ b/packages_rs/nextclade-web/src/components/Results/ResultsPage.tsx @@ -1,18 +1,11 @@ import React, { Suspense } from 'react' import { useRecoilValue } from 'recoil' import styled from 'styled-components' - import { resultsTableTotalWidthAtom } from 'src/state/settings.state' import { Layout } from 'src/components/Layout/Layout' import { GeneMapTable } from 'src/components/GeneMap/GeneMapTable' -import { ButtonNewRun } from 'src/components/Results/ButtonNewRun' -import { ButtonBack } from './ButtonBack' -import { ButtonFilter } from './ButtonFilter' -import { ButtonTree } from './ButtonTree' -import { ResultsStatus } from './ResultsStatus' -import { ResultsFilter } from './ResultsFilter' -import { ResultsTable } from './ResultsTable' -import { ButtonRerun } from './ButtonRerun' +import { ResultsFilter } from 'src/components/Results/ResultsFilter' +import { ResultsTable } from 'src/components/Results/ResultsTable' export const Container = styled.div` width: 100%; @@ -22,26 +15,6 @@ export const Container = styled.div` flex-wrap: nowrap; ` -const Header = styled.header` - flex-shrink: 1; - display: flex; -` - -const HeaderLeft = styled.header` - flex: 0; -` - -const HeaderCenter = styled.header` - flex: 1; - padding: 5px 10px; - border-radius: 5px; -` - -const HeaderRight = styled.header` - flex: 0; - display: flex; -` - const WrapperOuter = styled.div` flex: 1; width: 100%; @@ -58,10 +31,6 @@ const WrapperInner = styled.div<{ $minWidth: number }>` min-width: ${(props) => props.$minWidth}px; ` -const HeaderRightContainer = styled.div` - flex: 0; -` - const MainContent = styled.main` flex: 1; flex-basis: 100%; @@ -78,29 +47,6 @@ export function ResultsPage() { return ( -
- - - - - - - - - - - - - - - - - - - - -
- diff --git a/packages_rs/nextclade-web/src/components/Tree/TreePage.tsx b/packages_rs/nextclade-web/src/components/Tree/TreePage.tsx index a20642f02..f04d36edc 100644 --- a/packages_rs/nextclade-web/src/components/Tree/TreePage.tsx +++ b/packages_rs/nextclade-web/src/components/Tree/TreePage.tsx @@ -3,15 +3,13 @@ import styled from 'styled-components' import { I18nextProvider } from 'react-i18next' import { connect } from 'react-redux' import { AuspiceMetadata } from 'auspice' -import FiltersSummary from 'auspice/src/components/info/filtersSummary' - import type { State } from 'src/state/reducer' import i18nAuspice from 'src/i18n/i18n.auspice' +import FiltersSummary from 'auspice/src/components/info/filtersSummary' import { Layout } from 'src/components/Layout/Layout' import { LogoGisaid as LogoGisaidBase } from 'src/components/Common/LogoGisaid' -import { ButtonBack } from 'src/components/Results/ButtonBack' -import { Tree } from './Tree' -import { Sidebar } from './Sidebar' +import { Tree } from 'src/components/Tree/Tree' +import { Sidebar } from 'src/components/Tree/Sidebar' export const Container = styled.div` flex: 1; @@ -24,22 +22,6 @@ export const Container = styled.div` flex-wrap: nowrap; ` -const Header = styled.header` - display: flex; - flex-shrink: 0; - margin-bottom: 7px; -` - -const HeaderLeft = styled.header` - flex: 0; -` - -const HeaderCenter = styled.header` - flex: 1; - padding: 5px 10px; - border-radius: 5px; -` - const MainContent = styled.main` flex: 1; flex-basis: 100%; @@ -77,6 +59,7 @@ const LogoGisaidWrapper = styled.div` flex: 0 0 auto; margin: 0 auto; margin-right: 2.25rem; + margin-top: 10px; ` const LogoGisaid = styled(LogoGisaidBase)` @@ -102,14 +85,6 @@ function TreePageDisconnected({ treeMeta }: TreePageProps) { return ( -
- - - - - -
- {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}