Split React and non-React DG panels

replayio · Jul 16, 2024 · c619bae · c619bae
1 parent 8b4c11d
commit c619bae
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 deletions.
diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/DependencyGraph/Item.module.css b/src/devtools/client/debugger/src/components/SecondaryPanes/DependencyGraph/Item.module.css
@@ -13,6 +13,9 @@
   background-color: var(--theme-selection-background);
   color: white;
 }
+.Item[data-disabled] {
+  color: var(--color-dim);
+}
 .Item[data-disabled]:hover {
   background-color: transparent;
   cursor: default;

diff --git a/src/devtools/client/debugger/src/components/SecondaryPanes/index.tsx b/src/devtools/client/debugger/src/components/SecondaryPanes/index.tsx
@@ -2,6 +2,7 @@ import { TimeStampedPoint } from "@replayio/protocol";
 import { useMemo, useState } from "react";
 
 import { ReactComponentStack } from "devtools/client/debugger/src/components/SecondaryPanes/DependencyGraph/ReactComponentStack";
+import { DependencyGraphMode } from "shared/client/types";
 import { useGraphQLUserData } from "shared/user-data/GraphQL/useGraphQLUserData";
 import { useAppSelector } from "ui/setup/hooks";
 
@@ -35,6 +36,7 @@ export default function SecondaryPanes() {
     "layout_logpointsPanelExpanded"
   );
   const [dependencyGraphVisible, setDependencyGraphVisible] = useState(false);
+  const [reactDependencyGraphVisible, setReactDependencyGraphVisible] = useState(false);
   const [reactStackVisible, setReactStackVisible] = useState(false);
 
   return (
@@ -72,6 +74,23 @@ export default function SecondaryPanes() {
         >
           <ReactComponentStack timeStampedPoint={timeStampedPoint} />
         </AccordionPane>
+        <AccordionPane
+          header="React Dependency Graph"
+          headerNode={
+            <>
+              <span className="img react !bg-primaryAccent" /> Dependency Graph{" "}
+              <small className="text-warning">(experimental)</small>
+            </>
+          }
+          className="react-dependency-graph-pane"
+          expanded={reactDependencyGraphVisible}
+          onToggle={() => setReactDependencyGraphVisible(!reactDependencyGraphVisible)}
+        >
+          <DependencyGraph
+            mode={DependencyGraphMode.ReactParentRenders}
+            point={timeStampedPoint?.point}
+          />
+        </AccordionPane>
         <AccordionPane
           header="Dependency Graph"
           headerNode={