msyavuz commented on code in PR #37501:
URL: https://github.com/apache/superset/pull/37501#discussion_r2740835794


##########
superset-frontend/src/explore/components/ExploreChartPanel/index.tsx:
##########
@@ -243,19 +262,23 @@ const ExploreChartPanel = ({
     setShowSplit(isOpen);
   }, []);
 
-  const renderChart = useCallback(
+  const renderChart = useMemo(

Review Comment:
   Why are we changing this from a function to variable?



##########
superset-frontend/src/explore/components/ExploreChartPanel/index.tsx:
##########
@@ -99,29 +99,50 @@ const MIN_SIZES: PanelSizes = [300, 65];
 const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
 
 const Styles = styled.div<{ showSplite: boolean }>`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   align-content: stretch;
-  overflow: auto;
+  overflow: hidden;
   box-shadow: none;
   height: 100%;
+  width: 100%;
 
   & > div {
     height: 100%;
+    min-height: 0;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .gutter {
     border-top: 1px solid ${({ theme }) => theme.colorSplit};
     border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
     width: ${({ theme }) => theme.sizeUnit * 9}px;
-    margin: ${({ theme }) => theme.sizeUnit * GUTTER_SIZE_FACTOR}px auto;
+    margin: 0 auto;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colorFillQuaternary};
   }
 
   .gutter.gutter-vertical {
     display: ${({ showSplite }) => (showSplite ? 'block' : 'none')};
     cursor: row-resize;
+    position: relative;
+    z-index: 1;

Review Comment:
   We should avoid it if we can



##########
superset-frontend/src/explore/components/ExploreChartPanel/useResizeDetectorByObserver.ts:
##########
@@ -16,30 +16,35 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useState, useCallback, useRef } from 'react';
+import { useMemo } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 export default function useResizeDetectorByObserver() {
-  const ref = useRef<HTMLDivElement>(null);
-  const [{ width, height }, setChartPanelSize] = useState<{
-    width?: number;
-    height?: number;
-  }>({});

Review Comment:
   Is this hook used anywhere else? If so how do they get affected?



##########
superset-frontend/src/explore/components/ExploreChartPanel/index.tsx:
##########
@@ -99,29 +99,50 @@ const MIN_SIZES: PanelSizes = [300, 65];
 const DEFAULT_SOUTH_PANE_HEIGHT_PERCENT = 40;
 
 const Styles = styled.div<{ showSplite: boolean }>`
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   align-content: stretch;
-  overflow: auto;
+  overflow: hidden;
   box-shadow: none;
   height: 100%;
+  width: 100%;
 
   & > div {
     height: 100%;
+    min-height: 0;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .gutter {
     border-top: 1px solid ${({ theme }) => theme.colorSplit};
     border-bottom: 1px solid ${({ theme }) => theme.colorSplit};
     width: ${({ theme }) => theme.sizeUnit * 9}px;
-    margin: ${({ theme }) => theme.sizeUnit * GUTTER_SIZE_FACTOR}px auto;
+    margin: 0 auto;
+    box-sizing: border-box;
+    background-color: ${({ theme }) => theme.colorFillQuaternary};
   }
 
   .gutter.gutter-vertical {
     display: ${({ showSplite }) => (showSplite ? 'block' : 'none')};
     cursor: row-resize;
+    position: relative;
+    z-index: 1;

Review Comment:
   Is this z-indext required?



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