[Feature] show run results under lineage

js/app/page.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import LineageView from "@/components/lineage/LineageView";
 import {
   Image,
   Tabs,
@@ -44,6 +43,7 @@ import { EnvInfo } from "@/components/env/EnvInfo";
 import { StateSynchronizer } from "@/components/check/StateSynchronizer";
 import { Check, listChecks } from "@/lib/api/checks";
 import { cacheKeys } from "@/lib/api/cacheKeys";
+import { LineagePage } from "@/components/lineage/LineagePage";
 
 function getCookie(key: string) {
   var b = document.cookie.match("(^|;)\\s*" + key + "\\s*=\\s*([^;]+)");
@@ -306,7 +306,7 @@ export default function Home() {
                   >
                     {/* Prevent the lineage page unmount and lose states */}
                     <RouteAlwaysMount path="/lineage">
-                      <LineageView />
+                      <LineagePage />
                     </RouteAlwaysMount>
                     <Switch>
                       <Route path="/query">

js/src/components/check/LineageDiffView.tsx

@@ -1,6 +1,7 @@
 import { Check } from "@/lib/api/checks";
-import LineageView from "../lineage/LineageView";
+import { LineageView } from "../lineage/LineageView";
 import { Flex } from "@chakra-ui/react";
+import { ReactFlowProvider } from "reactflow";
 
 export interface LineageDiffViewProps {
   check: Check;
@@ -11,7 +12,9 @@ export function LineageDiffView({ check }: LineageDiffViewProps) {
 
   return (
     <Flex direction="column" height="100%">
-      <LineageView viewOptions={viewOptions} interactive={false} />
+      <ReactFlowProvider>
+        <LineageView viewOptions={viewOptions} interactive={false} />
+      </ReactFlowProvider>
     </Flex>
   );
 }

js/src/components/lineage/LineagePage.tsx

@@ -0,0 +1,36 @@
+import { useRecceActionContext } from "@/lib/hooks/RecceActionContext";
+import { Box, useDisclosure } from "@chakra-ui/react";
+import { useEffect } from "react";
+import { VSplit } from "../split/Split";
+import { LineageView } from "./LineageView";
+import { ReactFlowProvider } from "reactflow";
+import { RunResultPane } from "../run/RunResultPane";
+
+export function LineagePage() {
+  const { runId } = useRecceActionContext();
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  useEffect(() => {
+    if (runId) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [runId, onOpen, onClose]);
+
+  return (
+    <ReactFlowProvider>
+      <VSplit
+        sizes={isOpen ? [50, 50] : [100, 0]}
+        minSize={isOpen ? 100 : 0}
+        style={{ height: "100%", borderTop: "1px solid #CBD5E0" }}
+      >
+        <Box>
+          <LineageView viewMode="changed_models" interactive />
+        </Box>
+
+        {isOpen ? <RunResultPane onClose={onClose} /> : <Box></Box>}
+      </VSplit>
+    </ReactFlowProvider>
+  );
+}

js/src/components/lineage/LineageView.tsx

@@ -27,8 +27,17 @@ import {
   StackDivider,
   MenuGroup,
   useToast,
+  useDisclosure,
 } from "@chakra-ui/react";
-import React, { useCallback, useLayoutEffect, useState } from "react";
+import React, {
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import ReactFlow, {
   Node,
   useEdgesState,
@@ -66,7 +75,7 @@ import {
   createLineageDiffCheck,
 } from "@/lib/api/lineagecheck";
 import { ChangeStatusLegend } from "./ChangeStatusLegend";
-import { HSplit } from "../split/Split";
+import { HSplit, VSplit } from "../split/Split";
 import { cacheKeys } from "@/lib/api/cacheKeys";
 import { select } from "@/lib/api/select";
 import { useLocation } from "wouter";
@@ -128,8 +137,52 @@ function _AddLineageDiffCheckButton({
   );
 }
 
-function _LineageView({ ...props }: LineageViewProps) {
+const useResizeObserver = (
+  ref: RefObject<HTMLElement>,
+  handler: () => void
+): number => {
+  const [height, setHeight] = useState(1);
+  const [width, setWidth] = useState(1);
+  const target = ref?.current;
+
+  useEffect(() => {
+    const handleResize = (entries: ResizeObserverEntry[]) => {
+      for (let entry of entries) {
+        const newWidth = entry.contentRect.width;
+        const newHeight = entry.contentRect.height;
+
+        if (
+          Math.abs(newHeight - height) > 100 ||
+          Math.abs(newWidth - width) > 100
+        ) {
+          if (height > 0 && newHeight > 0 && width > 0 && newWidth > 0) {
+            handler();
+          }
+        }
+        setHeight(newHeight);
+        setWidth(newWidth);
+      }
+    };
+
+    const resizeObserver = new ResizeObserver(handleResize);
+
+    if (target) {
+      resizeObserver.observe(target);
+    }
+
+    return () => {
+      if (target) {
+        resizeObserver.unobserve(target);
+      }
+    };
+  }, [target, height, width, handler]);
+
+  return height;
+};
+
+export function LineageView({ ...props }: LineageViewProps) {
   const reactFlow = useReactFlow();
+  const refReactFlow = useRef<HTMLDivElement>(null);
   const { successToast, failToast } = useClipBoardToast();
   const { copyToClipboard, ImageDownloadModal, ref } = useCopyToClipboard({
     renderLibrary: "html-to-image",
@@ -295,22 +348,31 @@ function _LineageView({ ...props }: LineageViewProps) {
     }
   };
 
+  useResizeObserver(refReactFlow, () => {
+    if (selectMode === "detail" || selectMode === "action_result") {
+      const selectedNode = nodes.find((node) => node.data.isSelected);
+      if (selectedNode) {
+        centerNode(selectedNode);
+      }
+    }
+  });
+
   const onNodeClick = (event: React.MouseEvent, node: Node) => {
     if (props.interactive === false) return;
     closeContextMenu();
     if (selectMode === "detail") {
       setDetailViewSelected(node.data);
       if (!isDetailViewShown) {
         setIsDetailViewShown(true);
-        centerNode(node);
       }
+      centerNode(node);
       setNodes(selectSingleNode(node.id, nodes));
     } else if (selectMode === "action_result") {
       setDetailViewSelected(node.data);
       if (!isDetailViewShown) {
         setIsDetailViewShown(true);
-        centerNode(node);
       }
+      centerNode(node);
       setNodes(selectSingleNode(node.id, nodes));
     } else {
       setNodes(selectNode(node.id, nodes));
@@ -492,6 +554,7 @@ function _LineageView({ ...props }: LineageViewProps) {
       style={{ height: "100%", width: "100%" }}
     >
       <VStack
+        ref={refReactFlow}
         divider={<StackDivider borderColor="gray.200" />}
         spacing={0}
         style={{ contain: "strict" }}
@@ -640,18 +703,3 @@ function _LineageView({ ...props }: LineageViewProps) {
     </HSplit>
   );
 }
-
-export default function LineageView({ ...props }: LineageViewProps) {
-  // Set default value for interactive
-  if (props.interactive === undefined) {
-    props.interactive = true;
-  }
-  if (props.viewMode === undefined) {
-    props.viewMode = "changed_models";
-  }
-  return (
-    <ReactFlowProvider>
-      <_LineageView {...props} />
-    </ReactFlowProvider>
-  );
-}

js/src/components/lineage/NodeFilter.tsx

@@ -184,7 +184,6 @@ const PackageSelectMenu = ({
                 size="sm"
                 isChecked={selected.has(pkg)}
                 onChange={() => {
-                  console.log("selected");
                   handleSelect(thePkg);
                 }}
               >

js/src/components/lineage/NodeTag.tsx

@@ -106,7 +106,7 @@ export function ModelRowCount({ rowCount }: ModelRowCountProps) {
 export interface RowCountTagProps {
   node: LineageGraphNode;
   rowCount?: RowCount;
-  onRefresh?: () => Promise<any>;
+  onRefresh?: () => void;
   isFetching?: boolean;
   error?: Error | null;
 }
@@ -157,10 +157,7 @@ export function RowCountTag({
             aria-label="Query Row Count"
             icon={<RepeatIcon />}
             size="xs"
-            onClick={async () => {
-              await onRefresh();
-              refetchRunsAggregated?.();
-            }}
+            onClick={onRefresh}
           />
         )}
       </Tag>

js/src/components/lineage/NodeView.tsx

@@ -41,9 +41,6 @@ import { useLineageGraphContext } from "@/lib/hooks/LineageGraphContext";
 import useModelColumns from "@/lib/hooks/useModelColumns";
 import { createSchemaDiffCheck } from "@/lib/api/schemacheck";
 import { findByRunType } from "../run/registry";
-import { cacheKeys } from "@/lib/api/cacheKeys";
-import { queryModelRowCount } from "@/lib/api/models";
-import { useQuery } from "@tanstack/react-query";
 
 interface NodeViewProps {
   node: LineageGraphNode;
@@ -68,16 +65,13 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
   const { runAction } = useRecceActionContext();
   const { envInfo } = useLineageGraphContext();
   const { primaryKey } = useModelColumns(node.name);
-  const {
-    data: rowCount,
-    refetch: refetchRowCount,
-    isFetching: isRowCountFetching,
-    error: rowCountError,
-  } = useQuery({
-    queryKey: cacheKeys.rowCount(node.name),
-    queryFn: () => queryModelRowCount(node.name),
-    enabled: false,
-  });
+  const refetchRowCount = () => {
+    runAction(
+      "row_count_diff",
+      { node_names: [node.name] },
+      { showForm: false, showLast: false }
+    );
+  };
 
   const addSchemaCheck = useCallback(async () => {
     const nodeId = node.id;
@@ -99,8 +93,8 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
           node.resourceType === "seed" ||
           node.resourceType === "snapshot") && (
           <Menu>
-            <MenuButton as={Button} size="xs" colorScheme="blue">
-              Explore Diff
+            <MenuButton as={Button} size="sm" colorScheme="blue">
+              Explore Change
             </MenuButton>
             <MenuList>
               <MenuItem
@@ -136,7 +130,6 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
                   icon={<Icon as={findByRunType("row_count_diff")?.icon} />}
                   fontSize="14px"
                   onClick={() => refetchRowCount()}
-                  isDisabled={isRowCountFetching}
                 >
                   Row Count Diff
                 </MenuItem>
@@ -150,7 +143,7 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
                       {
                         model: node.name,
                       },
-                      { showForm: false, showLast: true }
+                      { showForm: false, showLast: false }
                     );
                   }}
                 >
@@ -166,7 +159,7 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
                       {
                         model: node.name,
                       },
-                      { showForm: true, showLast: true }
+                      { showForm: true, showLast: false }
                     );
                   }}
                 >
@@ -229,13 +222,7 @@ export function NodeView({ node, onCloseNode }: NodeViewProps) {
           {(node.resourceType === "model" ||
             node.resourceType === "snapshot" ||
             node.resourceType === "seed") && (
-            <RowCountTag
-              node={node}
-              onRefresh={refetchRowCount}
-              rowCount={rowCount}
-              isFetching={isRowCountFetching}
-              error={rowCountError}
-            />
+            <RowCountTag node={node} onRefresh={refetchRowCount} />
           )}
         </HStack>
       </Box>