Merge pull request #640 from nextstrain/feat/full-width

nextstrain · Dec 6, 2021 · adabc36 · adabc36 · vercel · Dec 6, 2021
2 parents 1d42fd0 + 35c2692
commit adabc36
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 19 deletions.
diff --git a/packages/web/src/components/GeneMap/GeneMapTable.tsx b/packages/web/src/components/GeneMap/GeneMapTable.tsx
@@ -8,7 +8,14 @@ import { BsArrowReturnLeft } from 'react-icons/bs'
 import type { State } from 'src/state/reducer'
 import { setViewedGene } from 'src/state/ui/ui.actions'
 import { useTranslationSafe } from 'src/helpers/useTranslationSafe'
-import { geneMapNameBasisPx, Table, TableCell, TableCellName, TableRow } from 'src/components/Results/ResultsTable'
+import {
+  geneMapNameBasisPx,
+  RESULTS_TABLE_FLEX_BASIS_PX,
+  Table,
+  TableCell,
+  TableCellName,
+  TableRow,
+} from 'src/components/Results/ResultsTable'
 import { GeneMap, GENE_MAP_HEIGHT_PX } from 'src/components/GeneMap/GeneMap'
 import { GeneMapAxis } from 'src/components/GeneMap/GeneMapAxis'
 import { GENE_OPTION_NUC_SEQUENCE } from 'src/constants'
@@ -63,7 +70,7 @@ export function GeneMapTableDisconnected({ isInNucleotideView, switchToNucleotid
   return (
     <GeneMapTableContent>
       <GeneMapTableRow>
-        <GeneMapTableCell basis={geneMapNameBasisPx} shrink={0}>
+        <GeneMapTableCell basis={geneMapNameBasisPx} grow={0} shrink={0}>
           <div className="mx-auto">
             <span className="ml-auto mr-2">{t('Genome annotation')}</span>
             <ButtonHelpSimple identifier="btn-help-gene-map" tooltipPlacement="auto">
@@ -81,14 +88,14 @@ export function GeneMapTableDisconnected({ isInNucleotideView, switchToNucleotid
             </GeneMapBackButton>
           )}
         </GeneMapTableCell>
-        <TableCell grow={1} shrink={1} className="w-100">
+        <TableCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
           <GeneMap />
         </TableCell>
       </GeneMapTableRow>
 
       <GeneMapAxisTableRow>
-        <TableCellName basis={geneMapNameBasisPx} shrink={0} />
-        <TableCell grow={1} shrink={1} className="w-100">
+        <TableCellName basis={geneMapNameBasisPx} grow={0} shrink={0} />
+        <TableCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
           <GeneMapAxis />
         </TableCell>
       </GeneMapAxisTableRow>

diff --git a/packages/web/src/components/Layout/LayoutMain.tsx b/packages/web/src/components/Layout/LayoutMain.tsx
@@ -14,8 +14,9 @@ import { NavigationBar } from './NavigationBar'
 import FooterContent from './Footer'
 
 export const Container = styled.div`
-  max-width: 1700px;
-  min-width: 500px;
+  max-width: 100vw;
+  max-height: 100vh;
+  min-width: 700px;
   margin: 0 auto;
 `
 

diff --git a/packages/web/src/components/Layout/LayoutResults.tsx b/packages/web/src/components/Layout/LayoutResults.tsx
@@ -6,8 +6,9 @@ import { NavigationBar } from './NavigationBar'
 import FooterContent from './Footer'
 
 export const LayoutContainer = styled.div`
-  max-width: 1700px;
-  margin: 0 auto;
+  max-width: 100vw;
+  max-height: 100vh;
+  margin: 0;
   width: 100%;
   height: 100%;
   display: flex;

diff --git a/packages/web/src/components/Results/ResultsPage.tsx b/packages/web/src/components/Results/ResultsPage.tsx
@@ -18,7 +18,7 @@ import { ButtonRerun } from './ButtonRerun'
 export const Container = styled.div`
   width: 100%;
   height: 100%;
-  min-width: 1000px;
+  min-width: 1650px;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;

diff --git a/packages/web/src/components/Results/ResultsTable.tsx b/packages/web/src/components/Results/ResultsTable.tsx
@@ -64,13 +64,14 @@ export const RESULTS_TABLE_FLEX_BASIS = {
   insertions: 60,
   frameShifts: 60,
   stopCodons: 60,
+  sequenceView: 600,
 } as const
 
 export const RESULTS_TABLE_FLEX_BASIS_PX = Object.fromEntries(
   Object.entries(RESULTS_TABLE_FLEX_BASIS).map(([item, fb]) => [item, `${fb}px`]),
 ) as Record<keyof typeof RESULTS_TABLE_FLEX_BASIS, string>
 
-export const geneMapNameBasis = sum(Object.values(RESULTS_TABLE_FLEX_BASIS))
+export const geneMapNameBasis = sum(Object.values(RESULTS_TABLE_FLEX_BASIS)) - RESULTS_TABLE_FLEX_BASIS.sequenceView
 export const geneMapNameBasisPx = `${geneMapNameBasis}px`
 
 export const Table = styled.div<{ rounded?: boolean }>`
@@ -180,7 +181,7 @@ function TableRowComponent({ index, style, data }: RowProps) {
           <ColumnName seqName={seqName} sequence={sequence} warnings={warnings} errors={errors} />
         </TableCellName>
 
-        <TableCell grow={20} shrink={20}>
+        <TableCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
           <TableCellText>{errors}</TableCellText>
         </TableCell>
       </TableRowError>
@@ -198,7 +199,7 @@ function TableRowComponent({ index, style, data }: RowProps) {
           <ColumnName seqName={seqName} sequence={sequence} warnings={warnings} errors={errors} />
         </TableCellName>
 
-        <TableCell grow={20} shrink={20}>
+        <TableCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
           <TableCellText>{t('Analyzing...')}</TableCellText>
         </TableCell>
       </TableRowPending>
@@ -261,7 +262,7 @@ function TableRowComponent({ index, style, data }: RowProps) {
         <ColumnStopCodons sequence={sequence} />
       </TableCell>
 
-      <TableCell grow={20} shrink={20}>
+      <TableCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
         {viewedGene === GENE_OPTION_NUC_SEQUENCE ? (
           <SequenceView key={seqName} sequence={sequence} />
         ) : (
@@ -538,7 +539,7 @@ export function ResultsTableDisconnected({
             </ButtonHelpStyled>
           </TableHeaderCell>
 
-          <TableHeaderCell grow={20}>
+          <TableHeaderCell basis={RESULTS_TABLE_FLEX_BASIS_PX.sequenceView} grow={1} shrink={0}>
             <TableHeaderCellContent>
               <SequenceSelector viewedGene={viewedGene} setViewedGene={setViewedGene} />
             </TableHeaderCellContent>

diff --git a/packages/web/src/components/Results/Tooltip.tsx b/packages/web/src/components/Results/Tooltip.tsx
@@ -29,7 +29,7 @@ export interface TooltipProps extends PropsWithChildren<PopoverProps> {
 export function Tooltip({ children, placement, hideArrow, wide, fullWidth, tooltipWidth, ...restProps }: TooltipProps) {
   return (
     <Popover
-      placement={placement ?? 'auto'}
+      placement={placement}
       hideArrow={hideArrow ?? true}
       delay={0}
       fade={false}

diff --git a/packages/web/src/components/Tree/TreePage.tsx b/packages/web/src/components/Tree/TreePage.tsx
@@ -21,7 +21,7 @@ export const Container = styled.div`
   flex-basis: 100%;
   width: 100%;
   height: 100%;
-  min-width: 1000px;
+  min-width: 1080px;
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
@@ -52,7 +52,7 @@ const MainContent = styled.main`
 const AuspiceContainer = styled.div`
   display: flex;
   flex: 1;
-  flex-basis: 100%;
+  flex-basis: 99%;
   height: 100%;
 `
 

diff --git a/packages/web/src/styles/components/Results.scss b/packages/web/src/styles/components/Results.scss
@@ -1,7 +1,7 @@
 @import '../variables';
 
 .results-page-container {
-  min-width: 992px;
+  min-width: 1300px;
 }
 
 .btn-refresh {