ramiroaquinoromero opened a new pull request, #37256:
URL: https://github.com/apache/superset/pull/37256

   ### SUMMARY
   
   Fixes the Multi Chart (deck.gl Multiple Layers) icon display in the fast viz 
switcher to match Figma design specifications. The Multi Chart now shows a 
custom icon with proper sizing and alignment, and only appears in the quick 
switcher when it's the selected chart type.
   
   **Problem:**
   1. Multi Chart was showing a generic fallback icon 
(CheckSquareOutlined/MonitorOutlined) instead of the custom icon from Figma
   2. Multi Chart appeared in the quick switcher even when other charts were 
selected, cluttering the UI
   3. Icon size and vertical alignment didn't match other featured charts
   4. When selecting Multi Chart from "View all charts" modal, the generic 
MonitorOutlined icon appeared instead of the custom icon
   
   **Root Cause:**
   - `deck_multi` was not in the `FEATURED_CHARTS` array, so it fell back to 
generic icons
   - No conditional logic existed in `FastVizSwitcher` to handle custom icons 
for non-featured charts in either selection state
   - The `currentSelection` block (preview state) and `currentViz` block 
(active state) both needed custom icon handling
   - The custom `multiple.svg` icon needed proper `viewBox` configuration for 
correct positioning
   
   **Solution:**
   - Added `multiple.svg` icon to the custom icons registry
   - Created `getMultiChartIcon()` helper function that returns the properly 
configured Multi Chart icon
   - Updated `FastVizSwitcher` to conditionally render the custom icon for 
`deck_multi` in **both** the `currentSelection` block (when selected from 
modal) and `currentViz` block (after clicking "Update chart")
   - Configured `viewBox="5 4 15 20"` to ensure proper icon sizing and vertical 
alignment
   
   **Changes Made:**
   1. `superset-frontend/src/assets/images/icons/multiple.svg` - Added custom 
Multi Chart icon from Figma
   2. 
`superset-frontend/packages/superset-ui-core/src/components/Icons/index.tsx` - 
Registered `Multiple` in custom icons array
   3. 
`superset-frontend/src/explore/components/controls/VizTypeControl/constants.tsx`
 - Added `getMultiChartIcon()` helper function
   4. 
`superset-frontend/src/explore/components/controls/VizTypeControl/FastVizSwitcher.tsx`
 - Added conditional logic to use custom icon for `deck_multi` in both 
`currentSelection` (lines 57-65) and `currentViz` (lines 76-84) states
   5. 
`superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.tsx`
 - Updated tests to verify Multi Chart only appears when selected
   
   **Technical Details:**
   The `viewBox="5 4 15 20"` adjustment is passed as a prop to override the 
default viewBox, similar to how `BigNumberChartTile` handles its custom 
viewBox. This crops and positions the icon to match the visual alignment of 
other featured chart icons in the quick switcher.
   
   The fix handles two distinct UI states:
   - **Selection state** (`currentSelection`): When user picks Multi Chart from 
modal but hasn't clicked "Update chart" yet
   - **Active state** (`currentViz`): After clicking "Update chart" and Multi 
Chart is rendered
   
   Both states now check `=== 'deck_multi'` and use `getMultiChartIcon()` 
instead of generic fallback icons.
   
   ### BEFORE/AFTER
   
   **Before:** Multi Chart showed generic square icon and appeared even when 
not selected
   
   
https://github.com/user-attachments/assets/71473363-38e5-4093-b791-eb6764654ac1
   
   
   **After:** Multi Chart shows custom icon matching Figma design, only appears 
when selected, with proper size and alignment
   
   
https://github.com/user-attachments/assets/eb272926-a2fc-43f6-84ef-1095706b4c8a
   
   
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to