Switch a few Switch components over to CoreUI. ;)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veupathdb/eda",
-  "version": "1.6.9",
+  "version": "1.6.10",
   "dependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
@@ -9,7 +9,7 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@types/debounce-promise": "^3.1.3",
     "@veupathdb/components": "^0.11.19",
-    "@veupathdb/coreui": "^0.13.0",
+    "@veupathdb/coreui": "^0.15.1",
     "@veupathdb/http-utils": "^1.1.0",
     "@veupathdb/study-data-access": "^0.1.5",
     "debounce-promise": "^3.1.2",

src/lib/core/components/filter/HistogramFilter.tsx

@@ -1,7 +1,6 @@
 import SelectedRangeControl from '@veupathdb/components/lib/components/plotControls/SelectedRangeControl';
 import BinWidthControl from '@veupathdb/components/lib/components/plotControls/BinWidthControl';
 import AxisRangeControl from '@veupathdb/components/lib/components/plotControls/AxisRangeControl';
-import Switch from '@veupathdb/components/lib/components/widgets/Switch';
 import Button from '@veupathdb/components/lib/components/widgets/Button';
 import LabelledGroup from '@veupathdb/components/lib/components/widgets/LabelledGroup';
 import { NumberRangeInput } from '@veupathdb/components/lib/components/widgets/NumberAndDateRangeInputs';
@@ -24,7 +23,7 @@ import UnknownCount from '@veupathdb/wdk-client/lib/Components/AttributeFilter/U
 import { getOrElse } from 'fp-ts/lib/Either';
 import { pipe } from 'fp-ts/lib/function';
 import { number, partial, TypeOf, boolean, type, intersection } from 'io-ts';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { usePromise } from '../../hooks/promise';
 import { AnalysisState } from '../../hooks/analysis';
 import { useSubsettingClient } from '../../hooks/workspace';
@@ -44,6 +43,7 @@ import Notification from '@veupathdb/components/lib/components/widgets//Notifica
 import { variableDisplayWithUnit } from '../../utils/variable-display';
 // import variable's metadata-based independent axis range utils
 import { defaultIndependentAxisRange } from '../../utils/default-independent-axis-range';
+import { FloatingSwitch, colors } from '@veupathdb/coreui';
 
 type Props = {
   studyMetadata: StudyMetadata;
@@ -611,14 +611,21 @@ function HistogramPlotWithControls({
 
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <LabelledGroup label="Y-axis">
-          <Switch
-            label="Log scale"
-            state={uiState.dependentAxisLogScale}
-            onStateChange={handleDependentAxisLogScale}
-            containerStyles={{
-              paddingBottom: '0.3125em',
-              minHeight: widgetHeight,
+          <FloatingSwitch
+            // After other components in this set of controls are converted to CoreUI, you wouldn't need these styleOverrides.
+            styleOverrides={{
+              container: {
+                fontFamily: 'Roboto',
+                fontWeight: 500,
+                marginBottom: 5,
+              },
+              default: [{ labelColor: 'rgb(150, 150, 150)' }],
             }}
+            themeRole="secondary"
+            labels={{ left: 'Log scale' }}
+            options={[false, true]}
+            selectedOption={uiState.dependentAxisLogScale}
+            onOptionChange={handleDependentAxisLogScale}
           />
 
           <NumberRangeInput

src/lib/core/components/visualizations/implementations/BarplotVisualization.tsx

@@ -64,6 +64,7 @@ import PlotLegend, {
 import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots/addOns';
 //DKDK a custom hook to preserve the status of checked legend items
 import { useCheckedLegendItemsStatus } from '../../../hooks/checkedLegendItemsStatus';
+import { FloatingSwitch } from '@veupathdb/coreui';
 
 type BarplotDataWithStatistics = (BarplotData | FacetedData<BarplotData>) &
   CoverageStatistics;
@@ -474,10 +475,19 @@ function BarplotViz(props: VisualizationProps) {
 
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <LabelledGroup label="Y-axis">
-          <Switch
-            label="Log Scale:"
-            state={vizConfig.dependentAxisLogScale}
-            onStateChange={onDependentAxisLogScaleChange}
+          <FloatingSwitch
+            // After other components in this set of controls are converted to CoreUI, you wouldn't need these styleOverrides.
+            styleOverrides={{
+              container: {
+                fontFamily: 'Roboto',
+                fontWeight: 500,
+              },
+            }}
+            themeRole="secondary"
+            labels={{ left: 'Log scale' }}
+            options={[false, true]}
+            selectedOption={vizConfig.dependentAxisLogScale}
+            onOptionChange={onDependentAxisLogScaleChange}
           />
           <RadioButtonGroup
             selectedOption={vizConfig.valueSpec}

src/lib/core/components/visualizations/implementations/HistogramVisualization.tsx

@@ -82,6 +82,7 @@ import { ColorPaletteDefault } from '@veupathdb/components/lib/types/plots/addOn
 import { EntityCounts } from '../../../hooks/entityCounts';
 //DKDK a custom hook to preserve the status of checked legend items
 import { useCheckedLegendItemsStatus } from '../../../hooks/checkedLegendItemsStatus';
+import { FloatingSwitch } from '@veupathdb/coreui';
 
 type HistogramDataWithCoverageStatistics = (
   | HistogramData
@@ -683,13 +684,19 @@ function HistogramPlotWithControls({
 
       <div style={{ display: 'flex', flexDirection: 'row' }}>
         <LabelledGroup label="Y-axis">
-          <Switch
-            label="Log scale"
-            state={histogramProps.dependentAxisLogScale}
-            onStateChange={onDependentAxisLogScaleChange}
-            containerStyles={{
-              minHeight: widgetHeight,
+          <FloatingSwitch
+            // After other components in this set of controls are converted to CoreUI, you wouldn't need these styleOverrides.
+            styleOverrides={{
+              container: {
+                fontFamily: 'Roboto',
+                fontWeight: 500,
+              },
             }}
+            themeRole="secondary"
+            labels={{ left: 'Log scale' }}
+            options={[false, true]}
+            selectedOption={histogramProps.dependentAxisLogScale ?? false}
+            onOptionChange={onDependentAxisLogScaleChange}
           />
           <RadioButtonGroup
             selectedOption={valueSpec}

yarn.lock

@@ -3568,10 +3568,10 @@
     react-modal "^3.14.3"
     react-table "^7.7.0"
 
-"@veupathdb/coreui@^0.13.0":
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/@veupathdb/coreui/-/coreui-0.13.0.tgz#aa774e71c7963f0638814f6491cf6b20bd2faae7"
-  integrity sha512-MVHx601+EdtRAuZUilDRXOTR9nfpznzAxTOiNqYZ1HTsxgVK/fFXKVgP/VwRJJU9CQ8KHHHfYkg/HWB/U9IiLg==
+"@veupathdb/coreui@^0.15.1":
+  version "0.15.1"
+  resolved "https://registry.yarnpkg.com/@veupathdb/coreui/-/coreui-0.15.1.tgz#55420da02a3019cee8a61bb2513c55c6c463eacc"
+  integrity sha512-Toe+YvwSxOGje6gu/sUtWI2zwDXgy1e9eja6Eu8VAtPDa7murGHckXJ0/Zby7a0xmc2P7B1jHDezp1K32WggnQ==
   dependencies:
     "@emotion/react" "^11.4.0"
     "@emotion/serialize" "^1.0.2"