Merge pull request #1600 from nextstrain/feat/web-auspice-toggle-focus

Author: ivan-aksamentov

packages/nextclade-web/src/components/Tree/Sidebar.tsx

@@ -8,11 +8,12 @@ import { useTranslationSafe as useTranslation } from 'src/helpers/useTranslation
 import ColorBy, { ColorByInfo } from 'auspice/src/components/controls/color-by'
 import ChooseBranchLabelling from 'auspice/src/components/controls/choose-branch-labelling'
 import ChooseLayout from 'auspice/src/components/controls/choose-layout'
+import ToggleFocus from 'auspice/src/components/controls/toggle-focus'
 import ChooseMetric from 'auspice/src/components/controls/choose-metric'
 import ChooseTipLabel from 'auspice/src/components/controls/choose-tip-label'
 import { ControlsContainer, HeaderContainer, TitleAndIconContainer } from 'auspice/src/components/controls/styles'
 import FilterData, { FilterInfo } from 'auspice/src/components/controls/filter'
-import { TreeInfo } from 'auspice/src/components/controls/miscInfoText'
+import { ToggleFocusInfo, TreeInfo } from 'auspice/src/components/controls/miscInfoText'
 import { ControlHeader } from 'auspice/src/components/controls/controlHeader'
 import { AnnotatedTitle } from 'auspice/src/components/controls/annotatedTitle'
 import { ViewedDatasetSelector } from 'src/components/Main/ViewedDatasetSelector'
@@ -114,6 +115,8 @@ function TreePanel() {
 
       <div className="d-flex flex-column">
         <ChooseLayout />
+        <ToggleFocus tooltip={ToggleFocusInfo} />
+        <Spacer sizePx={10} />
         <ChooseMetric />
         <ChooseBranchLabelling />
         <Spacer sizePx={25} />

packages/nextclade-web/src/types/auspice/src/components/controls/miscInfoText.d.ts

@@ -2,4 +2,5 @@ declare module 'auspice/src/components/controls/miscInfoText' {
   import type { ReactElement } from 'react'
 
   export const TreeInfo: ReactElement
+  export const ToggleFocusInfo: ReactElement
 }

packages/nextclade-web/src/types/auspice/src/components/controls/toggle-focus.d.ts

@@ -0,0 +1,10 @@
+declare module 'auspice/src/components/controls/toggle-focus' {
+  import { FC, ReactElement } from 'react'
+
+  export interface ToggleFocusProps {
+    tooltip: ReactElement
+  }
+
+  export const ToggleFocus: FC<ToggleFocusProps>
+  export default ToggleFocus
+}