feat(web): re-add dataset customization

nextstrain · Sep 28, 2023 · 9b385f2 · 9b385f2
1 parent 64e5578
commit 9b385f2
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 51 deletions.
diff --git a/packages_rs/nextclade-web/src/components/FilePicker/FilePickerAdvanced.tsx b/packages_rs/nextclade-web/src/components/FilePicker/FilePickerAdvanced.tsx
@@ -37,7 +37,7 @@ export function FilePickerAdvanced() {
     <Row noGutters>
       <Col>
         <FilePicker
-          className="my-3"
+          className="mb-2"
           compact
           icon={iconJson}
           title={t('Reference tree')}

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetContentSection.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetContentSection.tsx
@@ -12,19 +12,29 @@ import {
 import { useRecoilValue } from 'recoil'
 import { MarkdownRemote } from 'src/components/Common/Markdown'
 import { datasetCurrentAtom } from 'src/state/dataset.state'
+import { DatasetContentTabAdvanced } from 'src/components/Main/DatasetContentTabAdvanced'
 
 export function DatasetContentSection() {
   const [activeTabId, setActiveTabId] = useState(0)
   const currentDataset = useRecoilValue(datasetCurrentAtom)
   return (
     <ContentSection>
       <Nav tabs>
-        <TabLabel tabId={0} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
-          {'README.md'}
-        </TabLabel>
-        <TabLabel tabId={1} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
-          {'CHANGELOG.md'}
-        </TabLabel>
+        {currentDataset?.files.readme && (
+          <TabLabel tabId={0} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
+            {'README.md'}
+          </TabLabel>
+        )}
+        {currentDataset?.files.changelog && (
+          <TabLabel tabId={1} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
+            {'CHANGELOG.md'}
+          </TabLabel>
+        )}
+        {currentDataset && (
+          <TabLabel tabId={2} activeTabId={activeTabId} setActiveTabId={setActiveTabId}>
+            {'Files'}
+          </TabLabel>
+        )}
       </Nav>
       <TabContent activeTab={activeTabId}>
         <TabPane tabId={0}>
@@ -33,6 +43,7 @@ export function DatasetContentSection() {
         <TabPane tabId={1}>
           {currentDataset?.files.changelog && <MarkdownRemote url={currentDataset?.files.changelog} />}
         </TabPane>
+        <TabPane tabId={2}>{currentDataset && <DatasetContentTabAdvanced />}</TabPane>
       </TabContent>
     </ContentSection>
   )
@@ -68,15 +79,21 @@ const TabContent = styled(TabContentBase)`
   flex: 1;
   flex-direction: column;
   overflow: hidden;
+
+  margin-top: -1px;
 `
 
 const TabPane = styled(TabPaneBase)`
   display: flex;
   flex: 1;
   flex-direction: column;
   overflow: auto;
+
   border: 1px #ccc9 solid;
-  border-radius: 5px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  border-top-right-radius: 5px;
+
   padding: 1rem;
 `
 
@@ -100,6 +117,8 @@ const NavItem = styled(NavItemBase)`
 
   border-bottom: 0 !important;
 
+  z-index: 2;
+
   .active {
     font-weight: bold;
     background-color: ${(props) => props.theme.white} !important;

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetContentTabAdvanced.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetContentTabAdvanced.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import styled from 'styled-components'
+import { FilePickerAdvanced } from 'src/components/FilePicker/FilePickerAdvanced'
+import AdvancedModeExplanationContent from 'src/components/Main/AdvancedModeExplanation.mdx'
+
+export function DatasetContentTabAdvanced() {
+  return (
+    <Container>
+      <Header>
+        <AdvancedModeExplanationWrapper>
+          <AdvancedModeExplanationContent />
+        </AdvancedModeExplanationWrapper>
+      </Header>
+
+      <Main>
+        <FilePickerAdvanced />
+      </Main>
+    </Container>
+  )
+}
+
+export const AdvancedModeExplanationWrapper = styled.div`
+  > p {
+    margin: 0;
+  }
+`
+
+const Container = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+`
+
+const Header = styled.div`
+  flex: 0;
+`
+
+const Main = styled.div`
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+`
diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetCurrent.tsx
@@ -53,7 +53,7 @@ const Main = styled.div`
   overflow: auto;
   width: 100%;
 
-  margin-top: 1rem;
+  margin: 0.5rem 0;
 `
 
 export const FlexLeft = styled.div`
@@ -69,15 +69,6 @@ const ChangeButton = styled(Button)`
   margin-left: auto;
 `
 
-export const AdvancedModeExplanationWrapper = styled.div`
-  max-width: 550px;
-  margin-top: 0.5rem;
-
-  > p {
-    margin: 0;
-  }
-`
-
 export function DatasetCurrent() {
   // Periodically checks if there's local update for the current dataset
   useUpdatedDataset()
@@ -90,31 +81,6 @@ export function DatasetCurrent() {
     resetDatasetCurrent()
   }, [resetDatasetCurrent])
 
-  // const [advancedOpen, setAdvancedOpen] = useState(false)
-  // const onCustomizeClicked = useCallback(() => setAdvancedOpen((advancedOpen) => !advancedOpen), [])
-
-  // const customize = useMemo(() => {
-  //   if (datasetCurrent?.path === 'autodetect') {
-  //     return null
-  //   }
-  //
-  //   return (
-  //     <Row noGutters>
-  //       <Col>
-  //         <ButtonCustomize isOpen={advancedOpen} onClick={onCustomizeClicked} />
-  //
-  //         <Collapse isOpen={advancedOpen}>
-  //           <AdvancedModeExplanationWrapper>
-  //             <AdvancedModeExplanationContent />
-  //           </AdvancedModeExplanationWrapper>
-  //
-  //           <FilePickerAdvanced />
-  //         </Collapse>
-  //       </Col>
-  //     </Row>
-  //   )
-  // }, [advancedOpen, datasetCurrent?.path, onCustomizeClicked])
-
   if (!datasetCurrent) {
     return null
   }

diff --git a/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx b/packages_rs/nextclade-web/src/components/Main/DatasetSelector.tsx
@@ -186,7 +186,8 @@ const Container = styled(ContainerBase)`
   flex: 1;
   flex-direction: column;
   overflow: hidden;
-  margin-right: 10px;
+  margin: 0 auto;
+  max-width: 800px;
 `
 
 const Header = styled.div`

diff --git a/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx b/packages_rs/nextclade-web/src/components/Main/MainInputForm.tsx
@@ -26,7 +26,6 @@ const Container = styled.div`
   flex: 1;
   flex-direction: column;
   overflow: hidden;
-  margin: 0 auto;
 `
 
 const Header = styled.div`

diff --git a/packages_rs/nextclade-web/src/components/Main/MainPage.tsx b/packages_rs/nextclade-web/src/components/Main/MainPage.tsx
@@ -12,7 +12,7 @@ const Main = styled.div`
   margin: 0 auto;
 
   width: 100%;
-  max-width: ${(props) => props.theme.containerMaxWidths.xxl};
+  max-width: 1400px;
 `
 
 export function MainPage() {

diff --git a/packages_rs/nextclade-web/src/components/Main/WizardManualStep.tsx b/packages_rs/nextclade-web/src/components/Main/WizardManualStep.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
-import { Row as RowBase, Col as ColBase, Container as ContainerBase } from 'reactstrap'
+import { Row as RowBase, Col as ColBase } from 'reactstrap'
 import styled from 'styled-components'
 import { QuerySequenceFilePicker } from 'src/components/Main/QuerySequenceFilePicker'
 import { DatasetCurrent } from 'src/components/Main/DatasetCurrent'
 
 export function WizardManualStep() {
   return (
-    <Container fluid>
+    <Container>
       <Row noGutters className="flex-column-reverse flex-lg-row h-100">
         <Col lg={6}>
           <DatasetCurrent />
@@ -19,15 +19,17 @@ export function WizardManualStep() {
   )
 }
 
-const Container = styled(ContainerBase)`
+const Container = styled.div`
+  width: 100% !important;
+
   @media (min-width: 991.98px) {
     overflow: hidden;
     height: 100%;
   }
 `
 
 const Row = styled(RowBase)`
-  width: 100%;
+  width: 100% !important;
 
   @media (min-width: 991.98px) {
     overflow: hidden;
@@ -36,7 +38,7 @@ const Row = styled(RowBase)`
 `
 
 const Col = styled(ColBase)`
-  width: 100%;
+  width: 100% !important;
 
   @media (min-width: 991.98px) {
     overflow: hidden;