diff --git a/CHANGELOG.md b/CHANGELOG.md index 03f319574..a142c58d8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # Changelog +* Redesigned the panel sections in the sidebar. ([#1704](https://github.com/nextstrain/auspice/pull/1704)) + * Moved panel visibility toggles to the header. + * Added the ability to show/hide panel options. +* customisation: Renamed `sidebarTheme.unselectedBackground` to a more generic name, `sidebarTheme.alternateBackground`, while keeping backwards compatibility. ([#1704](https://github.com/nextstrain/auspice/pull/1704/commits/1ad4376bb3be9787181110d47fe8c5f26a207896)) + ## version 2.50.0 - 2023/10/30 diff --git a/docs/customise-client/api.rst b/docs/customise-client/api.rst index c389dbf48..975db00d2 100644 --- a/docs/customise-client/api.rst +++ b/docs/customise-client/api.rst @@ -55,25 +55,27 @@ For instance, here is the customisation used by nextstrain.org: "font-family": "Lato, Helvetica Neue, Helvetica, sans-serif", "selectedColor": "#5097BA", "unselectedColor": "#333", - "unselectedBackground": "#888" + "alternateBackground": "#888" } } -+--------------------------+------------------------------+----------------------------------------------------+ -| Properties | CSS string of | Description | -+==========================+==============================+====================================================+ -| selectedColor | color | Text color of selected text / button text | -+--------------------------+------------------------------+----------------------------------------------------+ -| unselectedColor | color | Text color of unselected text / button text | -+--------------------------+------------------------------+----------------------------------------------------+ -| color | color | Text color of all other text | -+--------------------------+------------------------------+----------------------------------------------------+ -| unselectedBackground | color | Background color of unselected toggle | -+--------------------------+------------------------------+----------------------------------------------------+ -| font-family | font | Font used throughout the sidebar | -+--------------------------+------------------------------+----------------------------------------------------+ -| background | color | Background color of the entire sidebar | -+--------------------------+------------------------------+----------------------------------------------------+ ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| Properties | CSS string of | Description | ++===================================+===============+==============================================================================+ +| selectedColor | color | Text color of selected text / button text | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| unselectedColor | color | Text color of unselected text / button text | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| color | color | Text color of all other text | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| unselectedBackground (deprecated) | color | Old key for ``alternateBackground`` | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| alternateBackground | color | Background color of some elements (unselected toggle, panel section borders) | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| font-family | font | Font used throughout the sidebar | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ +| background | color | Background color of the entire sidebar | ++-----------------------------------+---------------+------------------------------------------------------------------------------+ Components ---------- diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx deleted file mode 100644 index fb766a64b..000000000 --- a/src/components/controls/annotatedHeader.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from "react"; -import { useSelector } from "react-redux"; -import { FaInfoCircle } from "react-icons/fa"; -import {StyledTooltip, HeaderIconContainer, HeaderContainer} from "./styles"; -import { RootState } from "../../store"; - -export const AnnotatedHeader = ({title, tooltip}) => { - const mobile = useSelector((state: RootState) => state.general.mobileDisplay); - - return ( - - {title} - {tooltip && !mobile && ( - <> - - - - - {tooltip} - - - )} - - ); -}; - diff --git a/src/components/controls/annotatedTitle.tsx b/src/components/controls/annotatedTitle.tsx new file mode 100644 index 000000000..d08c58cc7 --- /dev/null +++ b/src/components/controls/annotatedTitle.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { useSelector } from "react-redux"; +import { FaInfoCircle } from "react-icons/fa"; +import {TitleAndIconContainer, StyledTooltip, HeaderIconContainer, HeaderTitle} from "./styles"; +import { RootState } from "../../store"; + +/** Title to display for the control. */ +export type Title = string; + +/** Informational tooltip element to display on hover. */ +export type Tooltip = JSX.Element; + +type Props = { + title: Title + tooltip?: Tooltip +} + +/** + * A title and tooltip to be shown in a control header. + * The tooltip is not shown on mobile. + */ +export const AnnotatedTitle = ({title, tooltip=undefined}: Props) => { + const mobile = useSelector((state: RootState) => state.general.mobileDisplay); + + return ( + + {title} + {tooltip && !mobile && ( + <> + event.stopPropagation()}> + + + + {tooltip} + + + )} + + ); +}; diff --git a/src/components/controls/choose-dataset.js b/src/components/controls/choose-dataset.js index c3f0c7bac..134fcfe12 100644 --- a/src/components/controls/choose-dataset.js +++ b/src/components/controls/choose-dataset.js @@ -2,7 +2,7 @@ import React from "react"; import { connect } from "react-redux"; import { withTranslation } from "react-i18next"; import ChooseDatasetSelect from "./choose-dataset-select"; -import { AnnotatedHeader } from "./annotatedHeader"; +import { ControlHeader } from "./controlHeader"; // const DroppedFiles = withTheme((props) => { // /* TODO: this shouldn't be in the auspice src, rather injected as an extension when needed */ @@ -54,7 +54,7 @@ class ChooseDataset extends React.Component { return ( <> - + {options.map((option, optionIdx) => ( { + return ( + + + + ); +}; diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx index df0690c0d..3071869f1 100644 --- a/src/components/controls/controls.tsx +++ b/src/components/controls/controls.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { useSelector } from "react-redux"; import { useTranslation } from 'react-i18next'; import ColorBy, {ColorByInfo} from "./color-by"; @@ -16,84 +17,114 @@ import GeoResolution from "./geo-resolution"; import TransmissionLines from './transmission-lines'; import NormalizeFrequencies from "./frequency-normalization"; import AnimationOptions from "./animation-options"; -import PanelToggles from "./panel-toggles"; +import { PanelSection } from "./panelSection"; import ToggleTangle from "./toggle-tangle"; import Language from "./language"; import { ControlsContainer } from "./styles"; import FilterData, {FilterInfo} from "./filter"; -import {TreeOptionsInfo, MapOptionsInfo, AnimationOptionsInfo, PanelOptionsInfo, - ExplodeTreeInfo, FrequencyInfo, MeasurementsOptionsInfo} from "./miscInfoText"; -import { AnnotatedHeader } from "./annotatedHeader"; +import {TreeInfo, MapInfo, AnimationOptionsInfo, PanelLayoutInfo, + ExplodeTreeInfo, EntropyInfo, FrequencyInfo, MeasurementsInfo} from "./miscInfoText"; +import { ControlHeader } from "./controlHeader"; import MeasurementsOptions from "./measurementsOptions"; +import { RootState } from "../../store"; -type Props = { - treeOn: boolean - mapOn: boolean - frequenciesOn: boolean - measurementsOn: boolean -} - -function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn }: Props) { +function Controls() { const { t } = useTranslation(); + const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable); + const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay); + const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo); + const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout); + return ( - + - + - - - - {treeOn && - - - - - - - - - - + + + + + + {panelsAvailable.includes("tree") && + + + + + + + + + } + /> + } + + {panelsAvailable.includes("measurements") && + } + /> } - {measurementsOn && - - - - + {/* Prevent the map from being toggled on when a second tree is visible. + It is hidden by logic elsewhere. + */} + {panelsAvailable.includes("map") && !showTreeToo && + + + + } + /> } - {mapOn && - - - - - + {panelsAvailable.includes("entropy") && + } - {frequenciesOn && - - - - + {panelsAvailable.includes("frequencies") && + } + /> } - + + {canTogglePanelLayout && + <> + + + + + } + - - - + ); diff --git a/src/components/controls/language.js b/src/components/controls/language.js index e1d163eda..c0fc34245 100644 --- a/src/components/controls/language.js +++ b/src/components/controls/language.js @@ -1,11 +1,9 @@ import React from "react"; import { connect } from "react-redux"; -import { withTranslation } from "react-i18next"; import i18n from "i18next"; import { controlsWidth } from "../../util/globals"; import { analyticsControlsEvent } from "../../util/googleAnalytics"; -import { SidebarSubtitle } from "./styles"; import { CHANGE_LANGUAGE } from "../../actions/types"; import CustomSelect from "./customSelect"; @@ -62,29 +60,22 @@ class Language extends React.Component { } render() { - const { t } = this.props; const selectOptions = this.getlanguageOptions(); return ( - <> - - {t("sidebar:Language")} - -
- value === this.props.language)} - options={selectOptions} - isClearable={false} - isSearchable={false} - isMulti={false} - onChange={(opt) => {this.changeLanguage(opt.value);}} - /> -
- +
+ value === this.props.language)} + options={selectOptions} + isClearable={false} + isSearchable={false} + isMulti={false} + onChange={(opt) => {this.changeLanguage(opt.value);}} + /> +
); } } -const WithTranslation = withTranslation()(Language); -export default WithTranslation; +export default Language; diff --git a/src/components/controls/miscInfoText.js b/src/components/controls/miscInfoText.js index eb2bafb91..dbf542db4 100644 --- a/src/components/controls/miscInfoText.js +++ b/src/components/controls/miscInfoText.js @@ -1,9 +1,10 @@ import React from "react"; -export const TreeOptionsInfo = ( +export const TreeInfo = ( <> - Change various options relating to how the tree is displayed. + This panel displays the evolutionary relationships among samples, illustrating their genetic relatedness and inferred ancestry. +
The exact options available depend on the dataset and specific analysis performed.
If Branch Length is available, you can choose to display the tree branches in terms of (nucleotide) divergence or (inferred) time. @@ -12,9 +13,9 @@ export const TreeOptionsInfo = ( ); -export const MapOptionsInfo = ( +export const MapInfo = ( <> - Change various options relating to how the map is displayed. + This panel displays the geographical distribution of samples.
The geographic resolution chooses the metadata values which define where samples are placed on the map. This can be the same as the selected color-by but is often not! @@ -27,23 +28,31 @@ export const AnimationOptionsInfo = ( ); -export const PanelOptionsInfo = ( +export const PanelLayoutInfo = ( <> - Control which panels are being displayed and whether to show the tree and the map side-by-side (grid) or expanded (full). -
- Note that what options are available here are dataset specific! + Control whether to show the tree and the map side-by-side (grid) or expanded (full). + +); + +export const EntropyInfo = ( + <> + This panel displays the observed diversity across the current genome or a selected CDS. All options are in the panel itself. ); export const FrequencyInfo = ( <> + This panel displays the prevalence of a characteristic over time, determined by the color-by. +
Normalize frequencies controls whether the vertical axis represents the entire dataset or only the samples currently visible (e.g. due to filtering). This option is not available when data is limited to prevent numerical issues. ); -export const MeasurementsOptionsInfo = ( +export const MeasurementsInfo = ( <> + This panel displays multidimensional data such as serological experimental results that are linked to samples in the tree. +
Change collection of measurements and various display options for the collection. ); diff --git a/src/components/controls/panel-layout.js b/src/components/controls/panel-layout.js index 61df20d95..c2cf1ead5 100644 --- a/src/components/controls/panel-layout.js +++ b/src/components/controls/panel-layout.js @@ -19,16 +19,12 @@ const PanelsGridIcon = withTheme(icons.PanelsGrid); @connect((state) => { return { panelLayout: state.controls.panelLayout, - canTogglePanelLayout: state.controls.canTogglePanelLayout }; }) class PanelLayouts extends React.Component { render() { const { t } = this.props; - // const mapAndTree = this.props.panels !== undefined && this.props.panels.indexOf("map") !== -1 && this.props.panels.indexOf("tree") !== -1; - if (!this.props.canTogglePanelLayout) { - return null; - } + return (
diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx deleted file mode 100644 index 023ea9bae..000000000 --- a/src/components/controls/panel-toggles.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from "react"; -import { useSelector } from "react-redux"; -import { useAppDispatch } from "../../hooks"; -import { useTranslation } from 'react-i18next'; - -import Toggle from "./toggle"; -import { togglePanelDisplay } from "../../actions/panelDisplay"; -import { RootState } from "../../store"; - -export default function PanelToggles() { - const dispatch = useAppDispatch(); - const { t } = useTranslation(); - - const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable); - const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay); - const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo); - - const panels = panelsAvailable.slice(); - if (showTreeToo && panels.indexOf("map") !== -1) { - panels.splice(panels.indexOf("map"), 1); - } - return <> - {panels.map((n) => ( - dispatch(togglePanelDisplay(n))} - label={t("sidebar:Show " + n)} - style={{ paddingBottom: "10px" }} - /> - ))} - -} diff --git a/src/components/controls/panelChevron.tsx b/src/components/controls/panelChevron.tsx new file mode 100644 index 000000000..520a99fce --- /dev/null +++ b/src/components/controls/panelChevron.tsx @@ -0,0 +1,25 @@ +import React from "react"; +import styled from 'styled-components'; +import { FaChevronRight, FaChevronDown } from "react-icons/fa"; + +const Container = styled.span` + padding-right: 6px; + color: ${(props) => props.theme.color}; +` + +type Props = { + show: boolean +} + +/** + * An interactive chevron to show/hide a panel's options. + */ +export const PanelChevron = ({ show }: Props) => { + const icon = show ? : + + return ( + + {icon} + + ) +} diff --git a/src/components/controls/panelHeader.tsx b/src/components/controls/panelHeader.tsx new file mode 100644 index 000000000..e5cecfa0d --- /dev/null +++ b/src/components/controls/panelHeader.tsx @@ -0,0 +1,69 @@ +import React from "react"; +import { useAppDispatch } from "../../hooks"; +import { togglePanelDisplay } from "../../actions/panelDisplay"; +import { HeaderContainer } from "./styles"; +import Toggle from "./toggle"; +import { AnnotatedTitle, Title, Tooltip } from "./annotatedTitle"; +import { PanelChevron } from "./panelChevron"; + +/** Panel identifier used internally. */ +export type PanelId = string; + +type Props = { + panel: PanelId + title: Title + tooltip?: Tooltip + + /** Indicates panel visibility. */ + panelIsVisible: boolean + + /** Indicates whether there are options for the panel. */ + hasOptions: boolean + + /** Indicates options visibility. */ + optionsAreVisible: boolean + + /** Update options visibility. */ + setOptionsAreVisible: React.Dispatch> +} + +/** + * A header used by all panel controls, containing an interactive title. + */ +export const PanelHeader = ({ panel, title, tooltip, panelIsVisible, hasOptions, optionsAreVisible, setOptionsAreVisible }: Props) => { + const dispatch = useAppDispatch(); + + function togglePanelVisibility() { + dispatch(togglePanelDisplay(panel)) + } + + function toggleOptionsVisibility() { + setOptionsAreVisible(!optionsAreVisible); + } + + return ( + + + {hasOptions && + } + + + event.stopPropagation()}> + + + + ); +}; diff --git a/src/components/controls/panelSection.tsx b/src/components/controls/panelSection.tsx new file mode 100644 index 000000000..de22a67a9 --- /dev/null +++ b/src/components/controls/panelSection.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import { useSelector } from "react-redux"; +import { PanelSectionContainer } from "./styles"; +import { Title, Tooltip } from "./annotatedTitle"; +import { PanelHeader, PanelId } from "./panelHeader"; +import { RootState } from "../../store"; + +type Props = { + panel: PanelId + title: Title + tooltip?: Tooltip + + /** Element that contains panel-specific options. */ + options?: JSX.Element +} + +/** + * A controls section for panel-specific customization. + */ +export const PanelSection = ({ panel, title, tooltip, options=undefined }: Props) => { + + const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay); + + const panelIsVisible = panelsToDisplay.includes(panel) + + // Initially, panel visibility determines options visibility. + const [optionsAreVisible, setOptionsAreVisible] = React.useState(panelIsVisible); + + // Subsequent panel visibility updates also determines options visibility. + React.useEffect(() => { + setOptionsAreVisible(panelIsVisible) + }, [panelIsVisible]) + + return ( + + + {optionsAreVisible && options} + + ); +}; diff --git a/src/components/controls/styles.js b/src/components/controls/styles.js index 45555053f..30b57b5db 100644 --- a/src/components/controls/styles.js +++ b/src/components/controls/styles.js @@ -24,19 +24,46 @@ export const ControlsContainer = styled.div` export const HeaderContainer = styled.div` display: flex; justify-content: space-between; - font-family: ${(props) => props.theme["font-family"]}; - font-size: 16px; + align-items: center; line-height: 28px; min-height: 28px; /* needed for safari, else the div height is 0 */ margin-top: 15px; margin-bottom: 5px; +`; + +export const PanelSectionContainer = styled.div` + // Less padding is necessary on the top because there is already some space + // from HeaderContainer's top margin. + padding-top: 2px; + padding-bottom: 8px; + + // Add borders to delineate panel sections from other sections. + border-top: 1px solid ${(props) => props.theme.alternateBackground}; + border-bottom: 1px solid ${(props) => props.theme.alternateBackground}; + + // Don't add a top border when there is already a bottom border from a sibling + // above. + & + & { + border-top: none; + } +`; + +export const TitleAndIconContainer = styled.span` + display: inline-flex; + align-items: center; +`; + +export const HeaderTitle = styled.span` + font-family: ${(props) => props.theme["font-family"]}; + font-size: 16px; font-weight: 500; color: ${(props) => props.theme.color}; `; export const HeaderIconContainer = styled.span` - padding-top: 4px; - padding-right: 3px; + display: inline-flex; + font-size: 16px; + padding-left: 6px; cursor: help; color: #888; `; diff --git a/src/components/controls/toggle.js b/src/components/controls/toggle.js index e0ba253af..17441e204 100644 --- a/src/components/controls/toggle.js +++ b/src/components/controls/toggle.js @@ -2,6 +2,11 @@ import React from "react"; import styled from 'styled-components'; import { SidebarSubtitle } from "./styles"; +const ToggleContainer = styled.div` + // Same as ToggleBackground, necessary for panel toggles. + height: 21px; +` + const ToggleBackground = styled.label` position: relative; display: inline-block; @@ -31,7 +36,7 @@ const Slider = styled.div` left: 0; right: 0; bottom: 0; - background-color: ${(props) => props.theme.unselectedBackground}; + background-color: ${(props) => props.theme.alternateBackground}; -webkit-transition: .4s; transition: .4s; border-radius: 12px; @@ -72,7 +77,7 @@ const Toggle = ({display, on, callback, label, style={}}) => { if (!display) return null; return ( -
+ @@ -82,7 +87,7 @@ const Toggle = ({display, on, callback, label, style={}}) => { )} -
+ ); }; diff --git a/src/components/main/sidebar.tsx b/src/components/main/sidebar.tsx index 99f755df6..4a442764c 100644 --- a/src/components/main/sidebar.tsx +++ b/src/components/main/sidebar.tsx @@ -13,7 +13,6 @@ export const Sidebar = ( { width, height, displayNarrative, narrativeTitle, navBarHandler} ) => { const sidebarOpen = useSelector((state: RootState) => state.controls.sidebarOpen); - const panelsToDisplay = useSelector((state: RootState) => state.controls.panelsToDisplay); return ( @@ -27,12 +26,7 @@ export const Sidebar = ( {displayNarrative ? ( ) : ( - + )} diff --git a/src/components/main/styles.js b/src/components/main/styles.js index b0a7ab245..4ef644443 100644 --- a/src/components/main/styles.js +++ b/src/components/main/styles.js @@ -42,10 +42,15 @@ const sidebarThemeDefaults = { sidebarBoxShadow: "rgba(255, 255, 255, 1)", selectedColor: "#5DA8A3", unselectedColor: "#BBB", - unselectedBackground: "#888" + alternateBackground: "#888" }; let sidebarThemeExtensions = {}; if (hasExtension("sidebarTheme")) { sidebarThemeExtensions = getExtension("sidebarTheme"); + + // unselectedBackground → alternateBackground + if (Object.prototype.hasOwnProperty.call(sidebarThemeExtensions, "unselectedBackground")) { + sidebarThemeExtensions["alternateBackground"] = sidebarThemeExtensions["unselectedBackground"]; + } } export const sidebarTheme = {...sidebarThemeDefaults, ...sidebarThemeExtensions}; diff --git a/src/locales/ar/sidebar.json b/src/locales/ar/sidebar.json index 003bdaffa..782f620c9 100644 --- a/src/locales/ar/sidebar.json +++ b/src/locales/ar/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "مجموعة بيانات", "Date Range": "النطاق الزمني", "Color By": "اللون حسب", - "Tree Options": "خيارات الشجرة", "Layout": "التخطيط", "rectangular": "مستطيل", "radial": "شعاعي", @@ -15,15 +14,13 @@ "Branch Labels": "تسميات الفروع", "Search Strains": "البحث على السلالات", "Second Tree": "الشجرة الثانية", - "Map Options": "خيارات الخريطة", "Geographic resolution": "دقة الخريطة", "Animation Speed": "سرعة الحركة", "Loop animation": "حركة متكررة", "Animate cumulative history": "تحريك التاريخ التراكمي", - "Panel Options": "خيارات اللوحة", - "Show tree": "اظهار الشجرة", - "Show map": "اظهار الخريطة", - "Show entropy": "اظهار الانتروبيا", + "Tree": "الشجرة", + "Map": "الخريطة", + "Entropy": "الانتروبيا", "Language": "اللغة", "Slow": "بطيئة", "Medium": "متوسطة", diff --git a/src/locales/de/sidebar.json b/src/locales/de/sidebar.json index 1c31c5788..4263998f7 100644 --- a/src/locales/de/sidebar.json +++ b/src/locales/de/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Datensatz", "Date Range": "Datenintervall", "Color By": "färben nach", - "Tree Options": "Baumeinstellungen", "Layout": "Anordnung", "rectangular": "rechteckig", "radial": "kreisförmig", @@ -14,15 +13,13 @@ "Branch Labels": "Astbeschriftungen", "Search Strains": "In Strängen suchen", "Second Tree": "Zweiter Baum", - "Map Options": "Karteneinstellungen", "Geographic resolution": "Geographische Aufteilung", "Animation Speed": "Geschwindigkeit der Animation", "Loop animation": "In einer Schleife animieren", "Animate cumulative history": "Gesamten Verlauf miteinbeziehen", - "Panel Options": "Hauptansicht-Einstellungen", - "Show tree": "Baum anzeigen", - "Show map": "Karte anzeigen", - "Show entropy": "Entropie anzeigen", + "Tree": "Baum", + "Map": "Karte", + "Entropy": "Entropie", "Language": "Sprache", "Slow": "Langsam", "Medium": "Mittel", diff --git a/src/locales/en/sidebar.json b/src/locales/en/sidebar.json index 0e4ffc229..e4fe807f3 100644 --- a/src/locales/en/sidebar.json +++ b/src/locales/en/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Dataset", "Date Range": "Date Range", "Color By": "Color By", - "Tree Options": "Tree Options", "Layout": "Layout", "rectangular": "rectangular", "radial": "radial", @@ -15,15 +14,14 @@ "Branch Labels": "Branch Labels", "Search Strains": "Search Strains", "Second Tree": "Second Tree", - "Map Options": "Map Options", "Geographic resolution": "Geographic resolution", "Animation Speed": "Animation Speed", "Loop animation": "Loop animation", "Animate cumulative history": "Animate cumulative history", - "Panel Options": "Panel Options", - "Show tree": "Show tree", - "Show map": "Show map", - "Show entropy": "Show entropy", + "Display": "Display", + "Tree": "Tree", + "Map": "Map", + "Entropy": "Entropy", "Language": "Language", "Slow": "Slow", "Medium": "Medium", diff --git a/src/locales/es/sidebar.json b/src/locales/es/sidebar.json index d93a81e75..20374258f 100644 --- a/src/locales/es/sidebar.json +++ b/src/locales/es/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Conjunto de datos", "Date Range": "Rango de fechas", "Color By": "Asigna colores por", - "Tree Options": "Opciones del árbol", "Layout": "Diseño", "rectangular": "rectangular", "radial": "radial", @@ -14,15 +13,13 @@ "Branch Labels": "Etiquetas de rama", "Search Strains": "Buscar cepas", "Second Tree": "Segundo árbol", - "Map Options": "Opciones del mapa", "Geographic resolution": "Región geográfica", "Animation Speed": "Velocidad de la animación", "Loop animation": "Repitir la animación", "Animate cumulative history": "Animar historial cumulativo", - "Panel Options": "Opciones del panel", - "Show tree": "Visualizar árbol", - "Show map": "Visualizar mapa", - "Show entropy": "Visualizar entropía", + "Tree": "Árbol", + "Map": "Mapa", + "Entropy": "Entropía", "Language": "Idioma", "Slow": "Lento", "Medium": "Medio", diff --git a/src/locales/fr/sidebar.json b/src/locales/fr/sidebar.json index 7ed38c1de..fbcaada9f 100644 --- a/src/locales/fr/sidebar.json +++ b/src/locales/fr/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Jeu de données", "Date Range": "Intervalle de dates", "Color By": "Couleur par", - "Tree Options": "Options d'arborescence", "Layout": "Disposition", "rectangular": "rectangulaire", "radial": "radiale", @@ -15,15 +14,13 @@ "Branch Labels": "Libellés de branches", "Search Strains": "Chercher souches", "Second Tree": "Deuxième arbre", - "Map Options": "Options de carte", "Geographic resolution": "Résolution géographique", "Animation Speed": "Vitesse d'animation", "Loop animation": "Animation en boucle", "Animate cumulative history": "Animer l'historique cumulatif", - "Panel Options": "Options du panneau", - "Show tree": "Montrer arbre", - "Show map": "Montrer carte", - "Show entropy": "Montrer entropie", + "Tree": "Arbre", + "Map": "Carte", + "Entropy": "Entropie", "Language": "Langue", "Slow": "Lent", "Medium": "Moyen", diff --git a/src/locales/it/sidebar.json b/src/locales/it/sidebar.json index 81e647a4a..a47f6927c 100644 --- a/src/locales/it/sidebar.json +++ b/src/locales/it/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Dataset", "Date Range": "Intervallo di date", "Color By": "Colore di", - "Tree Options": "Opzioni di albero", "Layout": "Disposizione", "rectangular": "rettangolare", "radial": "radiale", @@ -15,15 +14,13 @@ "Branch Labels": "Etichette di branche", "Search Strains": "Cercare ceppi", "Second Tree": "Secondo albero", - "Map Options": "Opzioni di mappa", "Geographic resolution": "Risoluzione geografica", "Animation Speed": "Velocità di animazioni", "Loop animation": "Animazioni in loop", "Animate cumulative history": "Animare la storia cumulativa", - "Panel Options": "Opzioni di pannello", - "Show tree": "Mostrare albero", - "Show map": "Mostrare mappa", - "Show entropy": "Mostrare entropia", + "Tree": "Albero", + "Map": "Mappa", + "Entropy": "Entropia", "Language": "Lingua", "Slow": "Lento", "Medium": "Medio", diff --git a/src/locales/ja/sidebar.json b/src/locales/ja/sidebar.json index a6d830af1..e8971760d 100644 --- a/src/locales/ja/sidebar.json +++ b/src/locales/ja/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "データセット", "Date Range": "データ範囲", "Color By": "色分け", - "Tree Options": "ツリーのオプション", "Layout": "レイアウト", "rectangular": "矩形", "radial": "放射状", @@ -15,15 +14,13 @@ "Branch Labels": "枝のラベル", "Search Strains": "系統を検索", "Second Tree": "第二ツリー", - "Map Options": "地図のオプション", "Geographic resolution": "地域分けの単位", "Animation Speed": "アニメーション速度", "Loop animation": "アニメーションを繰り返し", "Animate cumulative history": "累積の履歴をアニメーション", - "Panel Options": "パネルのオプション", - "Show tree": "ツリーを表示", - "Show map": "地図を表示", - "Show entropy": "エントロピーを表示", + "Tree": "ツリー", + "Map": "地図", + "Entropy": "エントロピー", "Language": "言語", "Slow": "遅い", "Medium": "普通", diff --git a/src/locales/lt/sidebar.json b/src/locales/lt/sidebar.json index f2fef0e68..a121e919f 100644 --- a/src/locales/lt/sidebar.json +++ b/src/locales/lt/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Duomenų rinkinys", "Date Range": "Laiko ribos", "Color By": "Spalvinti pagal", - "Tree Options": "Medžio parinktys", "Layout": "Išdėstymas", "rectangular": "stačiakampis", "radial": "apskritas", @@ -15,15 +14,13 @@ "Branch Labels": "Šakų žymės", "Search Strains": "Ieškoti štamų", "Second Tree": "Antras medis", - "Map Options": "Žemėlapio parinktys", "Geographic resolution": "Geografijos mastas", "Animation Speed": "Animacijos greitis", "Loop animation": "Kartoti laiko atkarpą", "Animate cumulative history": "Rodyti kauptinę istoriją", - "Panel Options": "Langų parinktys", - "Show tree": "Rodyti medį", - "Show map": "Rodyti žemėlapį", - "Show entropy": "Rodyti entropiją", + "Tree": "Medį", + "Map": "Žemėlapį", + "Entropy": "Entropiją", "Language": "Kalba", "Slow": "Lėtas", "Medium": "Vidutiniškas", diff --git a/src/locales/pl/sidebar.json b/src/locales/pl/sidebar.json index 8e1b74659..340c2428d 100644 --- a/src/locales/pl/sidebar.json +++ b/src/locales/pl/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Zbiór danych", "Date Range": "Zakres dat", "Color By": "Kolorowanie według", - "Tree Options": "Opcje drzewa", "Layout": "Układ", "rectangular": "prostokątny", "radial": "radialny", @@ -16,17 +15,15 @@ "Branch Labels": "Etykiety gałęzi", "Search Strains": "Wyszukaj warianty", "Second Tree": "Drugie drzewo", - "Map Options": "Opcje mapy", "Frequency Options": "Opcje częstości", "Normalize frequencies": "Normalizuj częstości", "Geographic resolution": "Rozdzielczość geograficzna", "Animation Speed": "Szybkość animacji", "Loop animation": "Animacja pętli", "Animate cumulative history": "Animuj historię zbiorczą", - "Panel Options": "Opcje panelu", - "Show tree": "Pokaż drzewo", - "Show map": "Pokaż mapę", - "Show entropy": "Pokaż entropię", + "Tree": "Drzewo", + "Map": "Mapę", + "Entropy": "Entropię", "Show transmission lines": "Pokaż drogi transmisji", "Tip Labels": "Etykiety końcówek", "Language": "Język", diff --git a/src/locales/pt/sidebar.json b/src/locales/pt/sidebar.json index a81f11c62..3c0348468 100644 --- a/src/locales/pt/sidebar.json +++ b/src/locales/pt/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Conjunto de Dados", "Date Range": "Intervalo de Datas", "Color By": "Atribuir cores por", - "Tree Options": "Opções de Árvore", "Layout": "Desenho", "rectangular": "retangular", "radial": "radial", @@ -15,15 +14,13 @@ "Branch Labels": "Rótulos dos ramos", "Search Strains": "Pesquisar Estirpes", "Second Tree": "Segunda Árvore", - "Map Options": "Opções do Mapa", "Geographic resolution": "Localização geográfica", "Animation Speed": "Velocidade de Animação", "Loop animation": "Repetir a animação", "Animate cumulative history": "Animar o histórico acumulado", - "Panel Options": "Painel de Opções", - "Show tree": "Mostrar árvore", - "Show map": "Mostrar mapa", - "Show entropy": "Mostrar entropia", + "Tree": "Árvore", + "Map": "Mapa", + "Entropy": "Entropia", "Language": "Idioma", "Slow": "Lento", "Medium": "Médio", diff --git a/src/locales/ru/sidebar.json b/src/locales/ru/sidebar.json index 694cf85ad..ed95dec2d 100644 --- a/src/locales/ru/sidebar.json +++ b/src/locales/ru/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Данные", "Date Range": "Временной Диапазон", "Color By": "Цвет", - "Tree Options": "Настройки Дерева", "Layout": "Тип диаграммы", "rectangular": "прямоугольный", "radial": "радиальный", @@ -14,15 +13,13 @@ "Branch Labels": "Названия Ветвей", "Search Strains": "Поиск Штаммов", "Second Tree": "Второе Дерево", - "Map Options": "Настройки Карты", "Geographic resolution": "Географическое разрешение", "Animation Speed": "Скорость Анимации", "Loop animation": "Повтор анимации", "Animate cumulative history": "Анимировать кумулятивную историю", - "Panel Options": "Настройки Панели", - "Show tree": "Показать дерево", - "Show map": "Показать карту", - "Show entropy": "Показать энтропию", + "Tree": "Дерево", + "Map": "Карту", + "Entropy": "Энтропию", "Language": "Язык", "Slow": "Медленный", "Medium": "Средний", diff --git a/src/locales/tr/sidebar.json b/src/locales/tr/sidebar.json index be800a200..f45c9ecd7 100644 --- a/src/locales/tr/sidebar.json +++ b/src/locales/tr/sidebar.json @@ -2,7 +2,6 @@ "Dataset": "Veri kümesi", "Date Range": "Tarih Aralığı", "Color By": "Şuna Göre Renklendir", - "Tree Options": "Ağaç Seçenekleri", "Layout": "Görünüm", "rectangular": "dikdörtgensi", "radial": "dairesel", @@ -15,15 +14,13 @@ "Branch Labels": "Dal Etiketleri", "Search Strains": "Suşları Ara", "Second Tree": "İkinci Ağaç", - "Map Options": "Harita Seçenekleri", "Geographic resolution": "Coğrafik çözünürlük", "Animation Speed": "Animasyon Hızı", "Loop animation": "Döngülü animasyon", "Animate cumulative history": "Kümülatif tarihçeyi canlandır", - "Panel Options": "Panel Seçenekleri", - "Show tree": "Ağacı göster", - "Show map": "Haritayı göster", - "Show entropy": "Entropiyi göster", + "Tree": "Ağacı", + "Map": "Haritayı", + "Entropy": "Entropiyi", "Language": "Dil", "Slow": "Yavaş", "Medium": "Orta", diff --git a/tsconfig.json b/tsconfig.json index 37a8d7705..4b8fa23c5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -34,7 +34,6 @@ Visit https://aka.ms/tsconfig.json for a detailed list of options. "noImplicitAny": false, /* Allow implicit any to make incremental TypeScript adoption easier. */ "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */ "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */ - "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */ "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */ "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */ "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */