feat(web): remove button panel from results page and tree page

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 (
     <Layout>
       <Container>
-        <Header>
-          <HeaderLeft>
-            <ButtonBack />
-          </HeaderLeft>
-          <HeaderCenter>
-            <ResultsStatus />
-          </HeaderCenter>
-          <HeaderRight>
-            <HeaderRightContainer>
-              <ButtonRerun />
-            </HeaderRightContainer>
-            <HeaderRightContainer>
-              <ButtonNewRun />
-            </HeaderRightContainer>
-            <HeaderRightContainer>
-              <ButtonFilter />
-            </HeaderRightContainer>
-            <HeaderRightContainer>
-              <ButtonTree />
-            </HeaderRightContainer>
-          </HeaderRight>
-        </Header>
-
         <WrapperOuter>
           <WrapperInner $minWidth={totalWidth}>
             <ResultsFilter />

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 (
     <Layout>
       <Container>
-        <Header>
-          <HeaderLeft>
-            <ButtonBack />
-          </HeaderLeft>
-
-          <HeaderCenter />
-        </Header>
-
         <MainContent>
           <AuspiceContainer>
             {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}