Resolving issue where Grid won't un-collapse when Details is collapsed

airflow/www/static/js/dag/Main.tsx

@@ -31,7 +31,6 @@ import Grid from "./grid";
 import FilterBar from "./nav/FilterBar";
 import LegendRow from "./nav/LegendRow";
 import useToggleGroups from "./useToggleGroups";
-import useSelection from "./useSelection";
 
 const detailsPanelKey = "hideDetailsPanel";
 const minPanelWidth = 300;
@@ -68,7 +67,6 @@ const Main = () => {
   const gridRef = useRef<HTMLDivElement>(null);
   const isPanelOpen = localStorage.getItem(detailsPanelKey) !== "true";
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
-  const { clearSelection } = useSelection();
   const [hoveredTaskState, setHoveredTaskState] = useState<
     string | null | undefined
   >();
@@ -91,8 +89,10 @@ const Main = () => {
     if (!isOpen) {
       localStorage.setItem(detailsPanelKey, "false");
     } else {
-      clearSelection();
       localStorage.setItem(detailsPanelKey, "true");
+      if (isGridCollapsed) {
+        setIsGridCollapsed(!isGridCollapsed);
+      }
     }
     onToggle();
   };

airflow/www/static/js/dag/grid/index.tsx

@@ -94,14 +94,14 @@ const Grid = ({
 
   return (
     <Box height="100%" position="relative">
-      {isPanelOpen && (
+      {(isPanelOpen || isGridCollapsed) && (
         <IconButton
           fontSize="2xl"
           variant="ghost"
           color="gray.400"
           size="sm"
           position="absolute"
-          right={0}
+          right={isGridCollapsed ? -10 : 0}
           zIndex={2}
           top={-8}
           onClick={() =>
@@ -114,22 +114,24 @@ const Grid = ({
           transitionProperty="none"
         />
       )}
-      <IconButton
-        fontSize="2xl"
-        variant="ghost"
-        color="gray.400"
-        size="sm"
-        position="absolute"
-        right={isPanelOpen ? -10 : 0}
-        zIndex={2}
-        top={-8}
-        onClick={onPanelToggle}
-        title={`${isPanelOpen ? "Hide " : "Show "} Details Panel`}
-        aria-label={isPanelOpen ? "Show Details" : "Hide Details"}
-        icon={<MdDoubleArrow />}
-        transform={isPanelOpen ? undefined : "rotateZ(180deg)"}
-        transitionProperty="none"
-      />
+      {!isGridCollapsed && (
+        <IconButton
+          fontSize="2xl"
+          variant="ghost"
+          color="gray.400"
+          size="sm"
+          position="absolute"
+          right={isPanelOpen ? -10 : 0}
+          zIndex={2}
+          top={-8}
+          onClick={onPanelToggle}
+          title={`${isPanelOpen ? "Hide " : "Show "} Details Panel`}
+          aria-label={isPanelOpen ? "Show Details" : "Hide Details"}
+          icon={<MdDoubleArrow />}
+          transform={isPanelOpen ? undefined : "rotateZ(180deg)"}
+          transitionProperty="none"
+        />
+      )}
       <Box
         maxHeight={`calc(100% - ${offsetTop}px)`}
         ref={scrollRef}