fix: 🐛 fix blocked tabs with dataflows

klarna-incubator · Nov 20, 2024 · 793f423 · 793f423
1 parent cc172e8
commit 793f423
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/app/src/components/model/panels/bottom/BottomPanel.js b/app/src/components/model/panels/bottom/BottomPanel.js
@@ -6,6 +6,7 @@ import { useState, useEffect } from "react";
 import { useModelID } from "../../hooks/useModelID";
 import { useSelectedComponent } from "../../hooks/useSelectedComponent";
 import { useValidateQuery } from "../../../../api/gram/validation";
+import { COMPONENT_TYPE } from "../../board/constants";
 
 export function BottomPanel() {
   const modelId = useModelID();
@@ -57,16 +58,15 @@ export function BottomPanel() {
   }
 
   useEffect(() => {
-    if (!selectedComponent) {
+    if (!selectedComponent && tab === TAB.SELECTED_COMPONENT) {
       setTab(0);
-    } else {
-      setTab(2);
     }
-  }, [selectedComponent]);
+  }, [selectedComponent, tab]);
 
   if (bottomPanelCollapsed) {
     return <></>;
   }
+
   return (
     <Box sx={{ gridArea: "bottom", backgroundColor: "rgb(20,20,20)" }}>
       {!isLoading && (
@@ -77,12 +77,14 @@ export function BottomPanel() {
             allLength={allNegativeResults.length}
             modelLength={modelResults.length}
             selectedLength={selectedResults.length}
+            selectedComponent={selectedComponent}
           />
           <ValidationTab
             tab={tab}
             setTab={setTab}
             filteredResults={filteredResults}
             isLoading={isLoading}
+            selectedComponent={selectedComponent}
           />
         </>
       )}

diff --git a/app/src/components/model/panels/bottom/BottomTabsHeader.js b/app/src/components/model/panels/bottom/BottomTabsHeader.js
@@ -1,5 +1,4 @@
 import { Paper, Grow, Tab, Tabs, Badge, Typography, Box } from "@mui/material";
-import { useSelectedComponent } from "../../hooks/useSelectedComponent";
 
 export const TAB = {
   ALL: 0,
@@ -32,12 +31,8 @@ export function BottomTabsHeader({
   allLength,
   modelLength,
   selectedLength,
+  selectedComponent,
 }) {
-  const selected = useSelectedComponent();
-
-  // This fixes an annoying MUI console error when you deselect a component
-  const tabHck = !selected && tab === TAB.COMPONENT ? TAB.SYSTEM : tab;
-
   return (
     <Paper elevation={3} sx={{ display: "flex" }}>
       <Box
@@ -55,7 +50,7 @@ export function BottomTabsHeader({
       <Box sx={{ flexGrow: 1 }}>
         <Grow in={true}>
           <Tabs
-            value={tabHck}
+            value={tab}
             onChange={(_, v) => setTab(v)}
             textColor="inherit"
             variant="fullWidth"
@@ -97,7 +92,7 @@ export function BottomTabsHeader({
               }
               value={TAB.MODEL}
             />
-            {selected && (
+            {selectedComponent && (
               <Tab
                 disableRipple
                 label={

diff --git a/app/src/components/model/panels/bottom/ValidationTab.js b/app/src/components/model/panels/bottom/ValidationTab.js
@@ -11,7 +11,6 @@ import DoneIcon from "@mui/icons-material/Done";
 import CloseIcon from "@mui/icons-material/Close";
 import { useSetSelected } from "../../hooks/useSetSelected";
 import { useDeselectAll } from "../../hooks/useSetMultipleSelected";
-import { useSelectedComponent } from "../../hooks/useSelectedComponent";
 
 function selectElement(type, elementId, setSelected, deselectAll, setTab) {
   deselectAll();
@@ -74,12 +73,16 @@ function renderResults(results, setSelected, deselectAll, setTab) {
   });
 }
 
-export function ValidationTab({ tab, setTab, filteredResults, isLoading }) {
+export function ValidationTab({
+  tab,
+  setTab,
+  filteredResults,
+  isLoading,
+  selectedComponent,
+}) {
   const setSelected = useSetSelected();
   const deselectAll = useDeselectAll();
 
-  const selectedComponent = useSelectedComponent();
-
   if (isLoading) {
     return (
       <Box