Re: [PR] fix(theming): Visual bugs p-3 [superset]

Thu, 31 Jul 2025 07:27:49 -0700 


korbit-ai[bot] commented on code in PR #34424:
URL: https://github.com/apache/superset/pull/34424#discussion_r2245565110


##########
superset-frontend/src/components/Chart/MenuItemWithTruncation.tsx:
##########
@@ -113,7 +118,12 @@ export const MenuItemWithTruncation = ({
       onClick={onClick}
       style={style}
     >
-      <Tooltip title={itemIsTruncated ? tooltipText : null}>
+      <Tooltip
+        title={itemIsTruncated ? tooltipText : null}
+        css={css`
+          max-width: 200px;
+        `}

Review Comment:
   ### Hardcoded Style Value <sub>![category 
Readability](https://img.shields.io/badge/Readability-0284c7)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The hardcoded max-width value of 200px in the Tooltip component reduces 
readability and maintainability.
   
   
   ###### Why this matters
   Magic numbers in styles make it difficult to maintain consistent layouts and 
understand the reasoning behind specific values.
   
   ###### Suggested change ∙ *Feature Preview*
   Define the value in a theme constant or component-level constant:
   ```typescript
   const TOOLTIP_MAX_WIDTH = 200;
   // In component
   css={css`
     max-width: ${TOOLTIP_MAX_WIDTH}px;
   `}
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/6fad234b-4ad8-4641-bf51-7390cb70bbf9/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/6fad234b-4ad8-4641-bf51-7390cb70bbf9?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/6fad234b-4ad8-4641-bf51-7390cb70bbf9?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/6fad234b-4ad8-4641-bf51-7390cb70bbf9?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/6fad234b-4ad8-4641-bf51-7390cb70bbf9)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:d37f1247-316a-4c54-8a70-1fbbd12b7acb -->
   
   
   [](d37f1247-316a-4c54-8a70-1fbbd12b7acb)



##########
superset-frontend/src/explore/components/ControlPanelsContainer.tsx:
##########
@@ -138,15 +132,18 @@ const Styles = styled.div`
   position: relative;
   height: 100%;
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   // Resizable add overflow-y: auto as a style to this div
   // To override it, we need to use !important
   overflow: visible !important;
+
   #controlSections {
-    height: 100%;
-    overflow: visible;
-    padding-bottom: ${({ theme }) => theme.sizeUnit * 10}px;
+    flex: 1;
+    overflow: auto;
   }

Review Comment:
   ### Missing Virtualization for Large Control Lists <sub>![category 
Performance](https://img.shields.io/badge/Performance-4f46e5)</sub>
   
   <details>
     <summary>Tell me more</summary>
   
   ###### What is the issue?
   The control sections container uses basic overflow scrolling without 
virtualization, which can be inefficient with large numbers of controls.
   
   
   ###### Why this matters
   When many control sections are present, rendering all of them at once can 
cause performance issues and unnecessary DOM nodes.
   
   ###### Suggested change ∙ *Feature Preview*
   Implement virtualization for the control sections using a library like 
react-window or react-virtualized:
   ```typescript
   import { FixedSizeList } from 'react-window';
   
   // In the render method:
   <FixedSizeList
     height={400}
     itemCount={sections.length}
     itemSize={50}
     width="100%"
   >
     {({ index, style }) => (
       <div style={style}>
         {renderControlPanelSection(sections[index])}
       </div>
     )}
   </FixedSizeList>
   ```
   
   
   ###### Provide feedback to improve future suggestions
   [![Nice 
Catch](https://img.shields.io/badge/👍%20Nice%20Catch-71BC78)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a50f12fe-acdc-4002-93e8-c7fc8ea663b7/upvote)
 
[![Incorrect](https://img.shields.io/badge/👎%20Incorrect-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a50f12fe-acdc-4002-93e8-c7fc8ea663b7?what_not_true=true)
  [![Not in 
Scope](https://img.shields.io/badge/👎%20Out%20of%20PR%20scope-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a50f12fe-acdc-4002-93e8-c7fc8ea663b7?what_out_of_scope=true)
 [![Not in coding 
standard](https://img.shields.io/badge/👎%20Not%20in%20our%20standards-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a50f12fe-acdc-4002-93e8-c7fc8ea663b7?what_not_in_standard=true)
 
[![Other](https://img.shields.io/badge/👎%20Other-white)](https://app.korbit.ai/feedback/aa91ff46-6083-4491-9416-b83dd1994b51/a50f12fe-acdc-4002-93e8-c7fc8ea663b7)
   </details>
   
   <sub>
   
   💬 Looking for more details? Reply to this comment to chat with Korbit.
   </sub>
   
   <!--- korbi internal id:6081d4da-2333-48a4-8ed0-2920309b6e30 -->
   
   
   [](6081d4da-2333-48a4-8ed0-2920309b6e30)



-- 
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