fix(source-switcher): unify item color + hover across levels

Uli-Z · Uli-Z · commit 4fdfd5f07037 · 2025-09-10T21:13:10.000+02:00
- Apply inline text color via palette for all levels
- Add pointer/focus highlight with proper contrast
- Pass palette recursively; set padding-left for indentation
- Set Content text color to palette.text

Also: set data cell text color inline (palette.text)
diff --git a/dist/theme/ResistanceTable/components/TableCell.jsx b/dist/theme/ResistanceTable/components/TableCell.jsx
@@ -16,6 +16,7 @@ export const TableCell = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
+    palette,
     colorMode,
     sourceId2ShortName,
     t,
@@ -47,6 +48,7 @@ export const TableCell = React.memo(
       <td
         style={{
           ...cellStyle(cell?.pct, colorMode),
+          color: palette?.text,
           ...(highlight ? hl : {}),
         }}
         onMouseEnter={handleMouseEnter}
diff --git a/dist/theme/ResistanceTable/components/TableRow.jsx b/dist/theme/ResistanceTable/components/TableRow.jsx
@@ -71,6 +71,7 @@ export const TableRow = React.memo(
             onShowTooltip={onShowTooltip}
             onHideTooltip={onHideTooltip}
             styles={styles}
+            palette={palette}
             colorMode={colorMode}
             sourceId2ShortName={sourceId2ShortName}
             t={t}
diff --git a/dist/theme/ResistanceTable/ui/components.jsx b/dist/theme/ResistanceTable/ui/components.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import clsx from 'clsx';
@@ -16,6 +16,10 @@ const SourceMenuItem = ({
 }) => {
   const hasChildren = source.children && source.children.length > 0;
   const isSelected = selected?.id === source.id;
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const indentRem = 1 + level * 1.5;
+  const itemColor = isSelected ? 'var(--ifm-color-primary)' : (palette?.text ?? undefined);
+  const itemBg = isHighlighted ? (palette?.subtleBgHover ?? undefined) : undefined;
 
   return (
     <div className={styles.sourceSwitcherItemContainer} role="presentation">
@@ -27,15 +31,19 @@ const SourceMenuItem = ({
           isLast && styles.sourceSwitcherItemIsLast,
           level > 0 && styles.sourceSwitcherItemIndented,
         )}
-        style={{ '--level': level }}
+        style={{ '--level': String(level), color: itemColor, backgroundColor: itemBg, paddingLeft: `${indentRem}rem` }}
         onSelect={() => onSelect(source)}
         role="menuitemradio"
         aria-checked={isSelected}
-      
-        style={{ color: palette?.text }}
+        onPointerEnter={() => setIsHighlighted(true)}
+        onPointerLeave={() => setIsHighlighted(false)}
+        onFocus={() => setIsHighlighted(true)}
+        onBlur={() => setIsHighlighted(false)}
       >
-        <span className={styles.sourceSwitcherItemInner}>
-          <span className={styles.sourceSwitcherItemLabel}>{source[`name_${locale}`] || source.name_en || source.id}</span>
+        <span className={styles.sourceSwitcherItemInner} style={{ color: itemColor }}>
+          <span className={styles.sourceSwitcherItemLabel} style={{ color: itemColor }}>
+            {source[`name_${locale}`] || source.name_en || source.id}
+          </span>
         </span>
       </DropdownMenu.Item>
       {hasChildren && (
@@ -50,6 +58,7 @@ const SourceMenuItem = ({
               level={level + 1}
               isLast={index === source.children.length - 1}
               locale={locale}
+              palette={palette}
             />
           ))}
         </div>
@@ -102,6 +111,7 @@ export const SourceSwitcher = ({
           style={{
             backgroundColor: palette?.background,
             border: `1px solid ${palette?.border}`,
+            color: palette?.text,
           }}
         >
           <DropdownMenu.RadioGroup value={selected?.id}>
diff --git a/example/data/resistance_ars_2023_germany_nw.csv b/example/data/resistance_ars_2023_germany_nw.csv
@@ -0,0 +1,246 @@
+organism_id,antibiotic_id,resistance_pct,n_isolates
+B_ENTRC_FACM,GEN,58.4,262
+B_ENTRC_FACM,STR1,68.3,63
+B_ENTRC_FACM,IPM,96.6,503
+B_ENTRC_FACM,CIP,99.0,200
+B_ENTRC_FACM,LVX,97.0,236
+B_ENTRC_FACM,TEC,5.0,482
+B_ENTRC_FACM,VAN,13.7,534
+B_ENTRC_FACM,AMX,96.1,102
+B_ENTRC_FACM,AMC,96.2,133
+B_ENTRC_FACM,AMP,94.7,475
+B_ENTRC_FACM,SAM,94.3,350
+B_ENTRC_FACM,LNZ,0.9,535
+B_ENTRC_FACM,TGC,0.5,406
+B_ESCHR_COLI,AMK,2.2,783
+B_ESCHR_COLI,GEN,4.8,19623
+B_ESCHR_COLI,TOB,7.4,1521
+B_ESCHR_COLI,ETP,0.1,25743
+B_ESCHR_COLI,IPM,0.1,16679
+B_ESCHR_COLI,MEM,0.0,39535
+B_ESCHR_COLI,FEP,9.6,12293
+B_ESCHR_COLI,CTX,9.3,37909
+B_ESCHR_COLI,CAZ,9.2,38424
+B_ESCHR_COLI,CRO,9.3,18813
+B_ESCHR_COLI,CXM,14.2,30567
+B_ESCHR_COLI,CIP,14.4,39389
+B_ESCHR_COLI,LVX,13.4,10207
+B_ESCHR_COLI,MFX,22.0,1386
+B_ESCHR_COLI,AMX,46.1,3799
+B_ESCHR_COLI,AMC,31.4,25903
+B_ESCHR_COLI,AMP,46.0,38302
+B_ESCHR_COLI,SAM,36.7,16512
+B_ESCHR_COLI,MEC,7.6,26370
+B_ESCHR_COLI,PIP,45.3,25175
+B_ESCHR_COLI,TZP,8.0,39331
+B_ESCHR_COLI,SXT,20.5,39441
+B_ESCHR_COLI,FOS,1.8,22628
+B_ESCHR_COLI,NIT,1.2,28937
+B_ESCHR_COLI,TMP,24.2,26507
+B_ESCHR_COLI,TGC,0.7,9944
+B_KLBSL_OXYT,AMK,0.0,82
+B_KLBSL_OXYT,GEN,0.7,3140
+B_KLBSL_OXYT,TOB,1.9,211
+B_KLBSL_OXYT,ETP,0.2,3039
+B_KLBSL_OXYT,IPM,0.0,2859
+B_KLBSL_OXYT,MEM,0.0,4686
+B_KLBSL_OXYT,FEP,3.3,1253
+B_KLBSL_OXYT,CTX,5.2,4479
+B_KLBSL_OXYT,CAZ,3.1,4599
+B_KLBSL_OXYT,CRO,6.7,2485
+B_KLBSL_OXYT,CXM,18.9,3731
+B_KLBSL_OXYT,CIP,2.4,4684
+B_KLBSL_OXYT,LVX,3.0,1473
+B_KLBSL_OXYT,MFX,7.0,171
+B_KLBSL_OXYT,AMC,21.2,2169
+B_KLBSL_OXYT,SAM,31.2,2836
+B_KLBSL_OXYT,MEC,39.2,1048
+B_KLBSL_OXYT,TZP,16.4,4652
+B_KLBSL_OXYT,SXT,2.7,4672
+B_KLBSL_OXYT,FOS,36.7,1876
+B_KLBSL_OXYT,TMP,4.6,1930
+B_KLBSL_PNMN,AMK,1.6,321
+B_KLBSL_PNMN,GEN,3.3,5649
+B_KLBSL_PNMN,TOB,7.6,536
+B_KLBSL_PNMN,ETP,1.1,6402
+B_KLBSL_PNMN,IPM,1.0,5088
+B_KLBSL_PNMN,MEM,0.7,10066
+B_KLBSL_PNMN,FEP,9.9,2860
+B_KLBSL_PNMN,CTX,10.2,9623
+B_KLBSL_PNMN,CAZ,10.6,9587
+B_KLBSL_PNMN,CRO,12.1,5002
+B_KLBSL_PNMN,CXM,16.4,7797
+B_KLBSL_PNMN,CIP,10.2,10034
+B_KLBSL_PNMN,LVX,10.9,2731
+B_KLBSL_PNMN,MFX,17.1,380
+B_KLBSL_PNMN,AMC,21.0,5854
+B_KLBSL_PNMN,SAM,27.2,4763
+B_KLBSL_PNMN,MEC,33.5,2671
+B_KLBSL_PNMN,TZP,13.8,9987
+B_KLBSL_PNMN,SXT,10.2,10025
+B_KLBSL_PNMN,FOS,36.9,4973
+B_KLBSL_PNMN,TMP,14.4,5102
+B_MRGNL_MRGN,GEN,3.0,1143
+B_MRGNL_MRGN,TOB,3.4,88
+B_MRGNL_MRGN,ETP,0.7,1293
+B_MRGNL_MRGN,IPM,8.0,865
+B_MRGNL_MRGN,MEM,0.0,2049
+B_MRGNL_MRGN,FEP,9.4,524
+B_MRGNL_MRGN,CTX,19.9,1924
+B_MRGNL_MRGN,CAZ,17.9,1994
+B_MRGNL_MRGN,CRO,20.1,1008
+B_MRGNL_MRGN,CIP,7.5,2049
+B_MRGNL_MRGN,LVX,5.5,561
+B_MRGNL_MRGN,PIP,35.5,1130
+B_MRGNL_MRGN,TZP,9.6,2033
+B_MRGNL_MRGN,SXT,10.2,2045
+B_MRGNL_MRGN,FOS,97.0,1000
+B_MRGNL_MRGN,TMP,16.7,1117
+B_PROTS_MRBL,AMK,7.8,230
+B_PROTS_MRBL,GEN,9.2,4935
+B_PROTS_MRBL,TOB,11.5,419
+B_PROTS_MRBL,ETP,0.0,6016
+B_PROTS_MRBL,IPM,2.3,3155
+B_PROTS_MRBL,MEM,0.0,8985
+B_PROTS_MRBL,FEP,1.3,2690
+B_PROTS_MRBL,CTX,1.5,8685
+B_PROTS_MRBL,CAZ,1.3,8759
+B_PROTS_MRBL,CRO,1.8,4252
+B_PROTS_MRBL,CXM,3.6,6916
+B_PROTS_MRBL,CIP,12.4,8982
+B_PROTS_MRBL,LVX,13.3,2399
+B_PROTS_MRBL,MFX,75.4,130
+B_PROTS_MRBL,AMX,28.3,757
+B_PROTS_MRBL,AMC,11.1,5351
+B_PROTS_MRBL,AMP,29.4,8766
+B_PROTS_MRBL,SAM,10.9,4234
+B_PROTS_MRBL,MEC,62.9,1951
+B_PROTS_MRBL,PIP,25.7,6165
+B_PROTS_MRBL,TZP,0.7,8938
+B_PROTS_MRBL,SXT,28.7,8974
+B_PROTS_MRBL,FOS,27.5,4760
+B_PROTS_MRBL,TMP,39.7,4569
+B_PSDMN_AERG,AMK,2.1,7196
+B_PSDMN_AERG,GEN,58.7,884
+B_PSDMN_AERG,TOB,3.1,7592
+B_PSDMN_AERG,IPM,14.7,8811
+B_PSDMN_AERG,MEM,5.9,9784
+B_PSDMN_AERG,FEP,9.1,8311
+B_PSDMN_AERG,CAZ,11.3,9774
+B_PSDMN_AERG,CIP,11.7,9785
+B_PSDMN_AERG,LVX,12.6,3743
+B_PSDMN_AERG,PIP,18.5,7963
+B_PSDMN_AERG,TZP,13.7,9132
+B_PSDMN_AERG,ATM,11.0,5162
+B_SERRT_MRCS,AMK,0.0,55
+B_SERRT_MRCS,GEN,2.2,1779
+B_SERRT_MRCS,TOB,12.8,133
+B_SERRT_MRCS,ETP,0.5,1550
+B_SERRT_MRCS,IPM,0.4,1442
+B_SERRT_MRCS,MEM,0.1,2326
+B_SERRT_MRCS,FEP,7.6,667
+B_SERRT_MRCS,CTX,14.1,2234
+B_SERRT_MRCS,CAZ,11.0,2273
+B_SERRT_MRCS,CRO,15.2,1301
+B_SERRT_MRCS,CIP,4.0,2318
+B_SERRT_MRCS,LVX,4.1,858
+B_SERRT_MRCS,PIP,18.5,1723
+B_SERRT_MRCS,TZP,8.5,2320
+B_SERRT_MRCS,SXT,1.2,2323
+B_SERRT_MRCS,FOS,17.8,696
+B_SERRT_MRCS,TMP,5.7,662
+B_STPHY_AURS,GEN,2.6,13552
+B_STPHY_AURS,TOB,10.7,859
+B_STPHY_AURS,ETP,13.3,375
+B_STPHY_AURS,IPM,7.6,7045
+B_STPHY_AURS,MEM,9.2,4372
+B_STPHY_AURS,FEP,10.5,437
+B_STPHY_AURS,CTX,9.3,3250
+B_STPHY_AURS,FOX,8.7,1820
+B_STPHY_AURS,CRO,8.5,3477
+B_STPHY_AURS,CXM,8.1,9175
+B_STPHY_AURS,CIP,14.9,5627
+B_STPHY_AURS,LVX,12.2,13640
+B_STPHY_AURS,MFX,13.2,4780
+B_STPHY_AURS,TEC,0.2,11373
+B_STPHY_AURS,VAN,0.0,13107
+B_STPHY_AURS,AZM,19.8,3871
+B_STPHY_AURS,CLR,19.1,1451
+B_STPHY_AURS,CLI,17.6,12465
+B_STPHY_AURS,ERY,18.1,14031
+B_STPHY_AURS,AMC,6.9,6549
+B_STPHY_AURS,SAM,9.1,7544
+B_STPHY_AURS,FLC,9.7,3035
+B_STPHY_AURS,OXA,8.6,12322
+B_STPHY_AURS,PEN,70.0,13672
+B_STPHY_AURS,TZP,9.1,4044
+B_STPHY_AURS,SXT,1.6,14277
+B_STPHY_AURS,DAP,0.5,10232
+B_STPHY_AURS,FOS,2.3,10407
+B_STPHY_AURS,FUS,2.6,10095
+B_STPHY_AURS,LNZ,0.0,13480
+B_STPHY_AURS,NIT,16.1,1845
+B_STPHY_AURS,RIF,2.7,13151
+B_STPHY_AURS,TMP,5.2,115
+B_STPHY_AURS,DOX,5.5,4111
+B_STPHY_AURS,TCY,4.0,12244
+B_STPHY_AURS,TGC,0.0,10241
+B_STPHY_EPDR,GEN,31.6,8138
+B_STPHY_EPDR,TOB,73.1,866
+B_STPHY_EPDR,ETP,64.6,178
+B_STPHY_EPDR,IPM,63.1,4455
+B_STPHY_EPDR,MEM,58.7,2606
+B_STPHY_EPDR,FEP,66.2,266
+B_STPHY_EPDR,CTX,74.4,2258
+B_STPHY_EPDR,FOX,58.4,1209
+B_STPHY_EPDR,CRO,72.5,2406
+B_STPHY_EPDR,CXM,61.9,5509
+B_STPHY_EPDR,CIP,45.0,3358
+B_STPHY_EPDR,LVX,43.0,7910
+B_STPHY_EPDR,MFX,43.6,2488
+B_STPHY_EPDR,TEC,21.7,6866
+B_STPHY_EPDR,VAN,0.0,8059
+B_STPHY_EPDR,AZM,62.6,2442
+B_STPHY_EPDR,CLR,66.9,1204
+B_STPHY_EPDR,CLI,46.8,8491
+B_STPHY_EPDR,ERY,60.6,8531
+B_STPHY_EPDR,AMC,62.6,4158
+B_STPHY_EPDR,SAM,59.4,4408
+B_STPHY_EPDR,FLC,60.1,1550
+B_STPHY_EPDR,OXA,60.9,7418
+B_STPHY_EPDR,TZP,61.3,2351
+B_STPHY_EPDR,SXT,18.2,8497
+B_STPHY_EPDR,DAP,0.2,6140
+B_STPHY_EPDR,FOS,18.8,6157
+B_STPHY_EPDR,FUS,31.7,5931
+B_STPHY_EPDR,LNZ,0.4,8003
+B_STPHY_EPDR,NIT,0.4,841
+B_STPHY_EPDR,RIF,7.8,7925
+B_STPHY_EPDR,DOX,20.9,2051
+B_STPHY_EPDR,TCY,29.8,7598
+B_STPHY_EPDR,TGC,0.1,6019
+B_STNTR_MLTP,SXT,1.6,970
+B_STRPT_PNMN,IPM,0.0,207
+B_STRPT_PNMN,MEM,0.0,150
+B_STRPT_PNMN,CTX,0.4,245
+B_STRPT_PNMN,CRO,0.0,466
+B_STRPT_PNMN,CXM,0.8,398
+B_STRPT_PNMN,LVX,0.4,493
+B_STRPT_PNMN,MFX,0.3,364
+B_STRPT_PNMN,TEC,0.0,160
+B_STRPT_PNMN,VAN,0.0,482
+B_STRPT_PNMN,CLR,12.0,50
+B_STRPT_PNMN,CLI,5.5,585
+B_STRPT_PNMN,ERY,10.4,584
+B_STRPT_PNMN,AMX,1.6,252
+B_STRPT_PNMN,AMC,0.9,348
+B_STRPT_PNMN,AMP,3.5,315
+B_STRPT_PNMN,SAM,1.4,210
+B_STRPT_PNMN,PEN,2.7,596
+B_STRPT_PNMN,PIP,1.1,95
+B_STRPT_PNMN,TZP,1.0,103
+B_STRPT_PNMN,SXT,7.3,468
+B_STRPT_PNMN,LNZ,0.0,397
+B_STRPT_PNMN,RIF,1.4,221
+B_STRPT_PNMN,DOX,7.3,191
+B_STRPT_PNMN,TCY,6.5,384
diff --git a/src/theme/ResistanceTable/components/TableCell.jsx b/src/theme/ResistanceTable/components/TableCell.jsx
@@ -16,6 +16,7 @@ export const TableCell = React.memo(
     onShowTooltip,
     onHideTooltip,
     styles,
+    palette,
     colorMode,
     sourceId2ShortName,
     t,
@@ -47,6 +48,7 @@ export const TableCell = React.memo(
       <td
         style={{
           ...cellStyle(cell?.pct, colorMode),
+          color: palette?.text,
           ...(highlight ? hl : {}),
         }}
         onMouseEnter={handleMouseEnter}
diff --git a/src/theme/ResistanceTable/components/TableRow.jsx b/src/theme/ResistanceTable/components/TableRow.jsx
@@ -71,6 +71,7 @@ export const TableRow = React.memo(
             onShowTooltip={onShowTooltip}
             onHideTooltip={onHideTooltip}
             styles={styles}
+            palette={palette}
             colorMode={colorMode}
             sourceId2ShortName={sourceId2ShortName}
             t={t}
diff --git a/src/theme/ResistanceTable/ui/components.jsx b/src/theme/ResistanceTable/ui/components.jsx
