diff --git a/src/components/controls/annotatedHeader.tsx b/src/components/controls/annotatedHeader.tsx index 8ebf5e693..fbaf523f7 100644 --- a/src/components/controls/annotatedHeader.tsx +++ b/src/components/controls/annotatedHeader.tsx @@ -3,25 +3,29 @@ import { FaInfoCircle } from "react-icons/fa"; import {StyledTooltip, HeaderIconContainer, HeaderContainer, HeaderTitle} from "./styles"; type Props = { + toggle?: JSX.Element title: string tooltip: JSX.Element mobile: boolean } -export const AnnotatedHeader = ({title, tooltip, mobile}: Props) => { +export const AnnotatedHeader = ({toggle=undefined, title, tooltip, mobile}: Props) => { return ( - {title} - {tooltip && !mobile && ( - <> - - - - - {tooltip} - - - )} +
+ {title} + {tooltip && !mobile && ( + <> + + + + + {tooltip} + + + )} +
+ {toggle !== undefined && toggle}
); }; diff --git a/src/components/controls/controls.tsx b/src/components/controls/controls.tsx index 0ce8fbb72..a57a6356f 100644 --- a/src/components/controls/controls.tsx +++ b/src/components/controls/controls.tsx @@ -16,15 +16,17 @@ 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 PanelToggle from "./panel-toggle"; 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 {TreeInfo, MapInfo, AnimationOptionsInfo, PanelLayoutInfo, + ExplodeTreeInfo, FrequencyInfo, MeasurementsInfo} from "./miscInfoText"; import { AnnotatedHeader } from "./annotatedHeader"; import MeasurementsOptions from "./measurementsOptions"; +import { useSelector } from "react-redux"; +import { RootState } from "../../store"; type Props = { treeOn: boolean @@ -37,6 +39,10 @@ type Props = { function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay }: Props) { const { t } = useTranslation(); + const panelsAvailable = useSelector((state: RootState) => state.controls.panelsAvailable); + const showTreeToo = useSelector((state: RootState) => state.controls.showTreeToo); + const canTogglePanelLayout = useSelector((state: RootState) => state.controls.canTogglePanelLayout); + return ( @@ -51,9 +57,25 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay + {canTogglePanelLayout && + <> + + {/* FIXME: update translations */} + + + + } + + {panelsAvailable.includes("tree") && + } + title={t("sidebar:Tree")} + tooltip={TreeInfo} + mobile={mobileDisplay} + /> + } {treeOn && - @@ -64,24 +86,48 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay } + {panelsAvailable.includes("measurements") && + } + title={t("sidebar:Measurements")} + tooltip={MeasurementsInfo} + mobile={mobileDisplay} + /> + } {measurementsOn && - } + {/* Prevent the map from being toggled on when a second tree is visible. + It is hidden by logic elsewhere. + */} + {panelsAvailable.includes("map") && !showTreeToo && + } + title={t("sidebar:Map")} + tooltip={MapInfo} + mobile={mobileDisplay} + /> + } {mapOn && - } + {panelsAvailable.includes("frequencies") && + } + title={t("sidebar:Frequency")} + tooltip={FrequencyInfo} + mobile={mobileDisplay} + /> + } {frequenciesOn && - } @@ -91,10 +137,6 @@ function Controls({ treeOn, mapOn, frequenciesOn, measurementsOn, mobileDisplay - - - - ); diff --git a/src/components/controls/miscInfoText.js b/src/components/controls/miscInfoText.js index eb2bafb91..8ec0777a3 100644 --- a/src/components/controls/miscInfoText.js +++ b/src/components/controls/miscInfoText.js @@ -1,7 +1,7 @@ import React from "react"; -export const TreeOptionsInfo = ( +export const TreeInfo = ( <> Change various options relating to how the tree is displayed. The exact options available depend on the dataset and specific analysis performed. @@ -12,7 +12,7 @@ export const TreeOptionsInfo = ( ); -export const MapOptionsInfo = ( +export const MapInfo = ( <> Change various options relating to how the map is displayed.
@@ -27,11 +27,9 @@ 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). ); @@ -42,7 +40,7 @@ export const FrequencyInfo = ( ); -export const MeasurementsOptionsInfo = ( +export const MeasurementsInfo = ( <> 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-toggle.tsx b/src/components/controls/panel-toggle.tsx new file mode 100644 index 000000000..c4a5e00f4 --- /dev/null +++ b/src/components/controls/panel-toggle.tsx @@ -0,0 +1,31 @@ +// A slider toggle to adjust the state of a panel via dispatch. + +import React from "react"; +import { useAppDispatch } from "../../hooks"; + +import Toggle from "./toggle"; +import { togglePanelDisplay } from "../../actions/panelDisplay"; + +type Props = { + panel: string + on: boolean +} + +const PanelToggle = ({ panel, on }: Props) => { + const dispatch = useAppDispatch(); + + // There is no slider label since the title in the annotated header acts as a + // visual label. + // FIXME: Add a hidden label? + + return ( + dispatch(togglePanelDisplay(panel))} + label="" + /> + ); +}; + +export default PanelToggle; diff --git a/src/components/controls/panel-toggles.tsx b/src/components/controls/panel-toggles.tsx deleted file mode 100644 index eb74afb80..000000000 --- a/src/components/controls/panel-toggles.tsx +++ /dev/null @@ -1,38 +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(); - - // Prevent the map from being toggled on when a second tree is visible. - // It is hidden by logic elsewhere. - 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/styles.js b/src/components/controls/styles.js index 40c22bb23..2b6d1a475 100644 --- a/src/components/controls/styles.js +++ b/src/components/controls/styles.js @@ -28,6 +28,8 @@ export const HeaderContainer = styled.div` min-height: 28px; /* needed for safari, else the div height is 0 */ margin-top: 15px; margin-bottom: 5px; + border-top: 1px solid #d3d3d3; + padding-top: 9px; `; export const HeaderTitle = styled.span` @@ -38,8 +40,7 @@ export const HeaderTitle = styled.span` `; export const HeaderIconContainer = styled.span` - padding-top: 4px; - padding-right: 3px; + padding-left: 6px; cursor: help; color: #888; `; diff --git a/src/locales/ar/sidebar.json b/src/locales/ar/sidebar.json index 003bdaffa..259b74ef3 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,14 @@ "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..4c7775d46 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,14 @@ "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..fe78fd56a 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", + "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..4f749afaa 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,14 @@ "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..48b255b4a 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,14 @@ "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..fad3fbb5f 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,14 @@ "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..9fe5e1293 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,14 @@ "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..0f3c9d3be 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,14 @@ "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..490b8a8d7 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,7 +15,6 @@ "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", @@ -24,9 +22,9 @@ "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..85a7bd91a 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,14 @@ "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..7d83d068f 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,14 @@ "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..b2e30f9f6 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,14 @@ "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",