Compatibility with focused view

Author: spaaaacccee

client/src/pages/tree/Axis.tsx

@@ -258,7 +258,17 @@ function AxisOverlay({
         y: yGraphScale(xAxisDataY),
       });
       const xAxisY = Math.min(xAxisYRaw, height - X_AXIS_HEIGHT);
+      // Y axis line
+      const { x: yAxisXRaw, y: yAxisStartY } = sigma.graphToViewport({
+        x: xGraphScale(yAxisDataX),
+        y: yGraphScale(yLo),
+      });
+      const yAxisX = Math.max(yAxisXRaw, Y_AXIS_WIDTH);
 
+      const { y: yAxisEndY } = sigma.graphToViewport({
+        x: xGraphScale(yAxisDataX),
+        y: yGraphScale(yHi),
+      });
       const { x: xAxisEndX } = sigma.graphToViewport({
         x: xGraphScale(xHi),
         y: yGraphScale(xAxisDataY),
@@ -284,6 +294,13 @@ function AxisOverlay({
         ctx.lineTo(x, y + 6);
         ctx.stroke();
 
+        ctx.strokeStyle = alpha(theme.palette.divider, 0.15);
+        ctx.setLineDash([2]);
+        ctx.lineTo(x, yAxisEndY);
+        ctx.stroke();
+        ctx.strokeStyle = theme.palette.text.primary;
+        ctx.setLineDash([]);
+
         ctx.textAlign = "center";
         ctx.textBaseline = "top";
         ctx.fillText(label, x, y + 8);
@@ -293,18 +310,6 @@ function AxisOverlay({
       ctx.textBaseline = "bottom";
       ctx.fillText(xAxisLabel, (xAxisStartX + xAxisEndX) / 2, xAxisY + 40);
 
-      // Y axis line
-      const { x: yAxisXRaw, y: yAxisStartY } = sigma.graphToViewport({
-        x: xGraphScale(yAxisDataX),
-        y: yGraphScale(yLo),
-      });
-      const yAxisX = Math.max(yAxisXRaw, Y_AXIS_WIDTH);
-
-      const { y: yAxisEndY } = sigma.graphToViewport({
-        x: xGraphScale(yAxisDataX),
-        y: yGraphScale(yHi),
-      });
-
       ctx.beginPath();
       ctx.moveTo(yAxisX, yAxisStartY);
       ctx.lineTo(yAxisX, yAxisEndY);
@@ -322,9 +327,17 @@ function AxisOverlay({
 
         ctx.beginPath();
         ctx.moveTo(x, y);
+
         ctx.lineTo(x - 6, y);
         ctx.stroke();
 
+        ctx.strokeStyle = alpha(theme.palette.divider, 0.15);
+        ctx.setLineDash([2]);
+        ctx.lineTo(xAxisEndX, y);
+        ctx.stroke();
+        ctx.strokeStyle = theme.palette.text.primary;
+        ctx.setLineDash([]);
+
         ctx.textAlign = "right";
         ctx.textBaseline = "middle";
         ctx.fillText(label, x - 8, y);

client/src/pages/tree/ScatterPlotGraph.tsx

@@ -8,7 +8,7 @@ import AxisOverlay, {
   createSymlogScatterScale,
 } from "./Axis";
 import { SharedGraphProps } from "./SharedGraphProps";
-import { TreeControls } from "./TreeGraph";
+import { FocusedView, TreeControls } from "./TreeGraph";
 import { getScatterPlotUniqueId, useComputePlot } from "./useComputePlot";
 import { useGraphColoring } from "./useGraphColoring";
 import { useHighlighting } from "./useHighlighting";
@@ -18,19 +18,22 @@ const getScatterPlotGraphId = (step: number, event: TraceEvent): string =>
 const getScatterPlotGraphPId = (step: number, event: TraceEvent): string =>
   getScatterPlotUniqueId(event.pId, step);
 
-export function ScatterPlotGraph({
-  width = 1,
-  height = 1,
-  logAxis,
-  eventTypeFilter,
-  step,
-  trackedProperty,
-  trace,
-  layer,
-  traceKey,
-  xMetric,
-  yMetric,
-}: ScatterPlotGraphProps & SharedGraphProps) {
+export function ScatterPlotGraph(
+  props: ScatterPlotGraphProps & SharedGraphProps,
+) {
+  const {
+    width = 1,
+    height = 1,
+    logAxis,
+    eventTypeFilter,
+    step,
+    trackedProperty,
+    trace,
+    layer,
+    traceKey,
+    xMetric,
+    yMetric,
+  } = props;
   const { data: plot } = useComputePlot({
     key: traceKey,
     trace: trace,
@@ -114,6 +117,7 @@ export function ScatterPlotGraph({
         layer={layer}
         isHighlightingEnabled={isHighlightingEnabled}
       />
+      <FocusedView {...props} />
     </>
   );
 }

client/src/pages/tree/SharedGraphProps.tsx

@@ -9,4 +9,5 @@ export type SharedGraphProps = {
   trackedProperty?: string;
   width?: number;
   height?: number;
+  onExit?: () => void;
 };

client/src/pages/tree/TreeGraph.tsx

@@ -94,17 +94,13 @@ function Dot({ label, color }: { label?: ReactNode; color?: string }) {
 
 export type TreeGraphProps = {
   tree?: TreeWorkerReturnType;
-  onExit?: () => void;
 } & SharedGraphProps;
 
 export type NodeType = { x: number; y: number; label: string; size: number };
 export type EdgeType = { label: string };
 
 export function TreeGraph(props: TreeGraphProps) {
-  const { trace, tree, layer: key, onExit } = props;
-
-  const acrylic = useAcrylic();
-  const theme = useTheme();
+  const { trace, tree, layer: key } = props;
 
   const [orientation, setOrientation] =
     useState<keyof typeof orientationOptions>("vertical");
@@ -122,6 +118,29 @@ export function TreeGraph(props: TreeGraphProps) {
 
   const isHighlightingEnabled = !isEmpty(highlightEdges);
 
+  return (
+    <>
+      <TreeControls
+        layer={key}
+        isHighlightingEnabled={isHighlightingEnabled}
+        setOrientation={setOrientation}
+        orientation={orientation}
+      />
+      <FocusedView {...props} />
+    </>
+  );
+}
+
+export function FocusedView(props: SharedGraphProps) {
+  const { trace, layer: key, onExit } = props;
+
+  const acrylic = useAcrylic();
+  const theme = useTheme();
+
+  const highlightEdges = useHighlighting(key);
+
+  const isHighlightingEnabled = !isEmpty(highlightEdges);
+
   const bg = getShade(
     highlightNodesOptions.find(
       (highlight) => highlight.type === highlightEdges?.type,
@@ -134,76 +153,68 @@ export function TreeGraph(props: TreeGraphProps) {
   const event = trace?.events?.[highlightEdges?.step ?? 0];
 
   return (
-    <>
-      <TreeControls
-        layer={key}
-        isHighlightingEnabled={isHighlightingEnabled}
-        setOrientation={setOrientation}
-        orientation={orientation}
-      />
+    <Stack
+      sx={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        pt: 6,
+        pointerEvents: "none",
+      }}
+    >
       <Stack
         sx={{
           width: "100%",
           height: "100%",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          pt: 6,
-          pointerEvents: "none",
+          border: isHighlightingEnabled ? `2px solid ${bg}` : "none",
+          // The top bar has a 0.5px border, so the top border of the graph needs to be 0.5 pixels thicker
+          borderTopWidth: "2.5px",
+          transition: (t) => t.transitions.create("box-shadow"),
         }}
       >
-        <Stack
-          sx={{
-            width: "100%",
-            height: "100%",
-            border: isHighlightingEnabled ? `2px solid ${bg}` : "none",
-            // The top bar has a 0.5px border, so the top border of the graph needs to be 0.5 pixels thicker
-            borderTopWidth: "2.5px",
-            transition: (t) => t.transitions.create("box-shadow"),
-          }}
-        >
-          {isHighlightingEnabled && (
-            <Scroll x style={{ height: theme.spacing(5) }}>
-              <Box
+        {isHighlightingEnabled && (
+          <Scroll x style={{ height: theme.spacing(5) }}>
+            <Box
+              sx={{
+                ...pick(acrylic, "backdropFilter"),
+                transition: (t) => t.transitions.create("background-color"),
+                pointerEvents: "all",
+                alignItems: "center",
+                p: 2,
+                height: "100%",
+                bgcolor: alpha(bg, 0.05) || "info.main",
+                display: "flex",
+                justifyContent: "space-between",
+                minWidth: "max-content",
+                gap: 2,
+              }}
+            >
+              <Typography variant="overline">
+                {startCase(highlightEdges?.type)}{" "}
+                <Box sx={{ opacity: 0.7 }} component="span">
+                  <Dot color={getColorHex(event?.type)} />{" "}
+                  {startCase(event?.type)} {event?.id}
+                  {", "}
+                  Step {highlightEdges?.step}{" "}
+                </Box>
+              </Typography>
+              <Button
+                onClick={onExit}
+                variant="outlined"
                 sx={{
-                  ...pick(acrylic, "backdropFilter"),
-                  transition: (t) => t.transitions.create("background-color"),
-                  pointerEvents: "all",
-                  alignItems: "center",
-                  p: 2,
-                  height: "100%",
-                  bgcolor: alpha(bg, 0.05) || "info.main",
-                  display: "flex",
-                  justifyContent: "space-between",
-                  minWidth: "max-content",
-                  gap: 2,
+                  mr: -1,
+                  height: theme.spacing(4),
                 }}
               >
-                <Typography variant="overline">
-                  {startCase(highlightEdges?.type)}{" "}
-                  <Box sx={{ opacity: 0.7 }} component="span">
-                    <Dot color={getColorHex(event?.type)} />{" "}
-                    {startCase(event?.type)} {event?.id}
-                    {", "}
-                    Step {highlightEdges?.step}{" "}
-                  </Box>
-                </Typography>
-                <Button
-                  onClick={onExit}
-                  variant="outlined"
-                  sx={{
-                    mr: -1,
-                    height: theme.spacing(4),
-                  }}
-                >
-                  Exit focused view
-                </Button>
-              </Box>
-            </Scroll>
-          )}
-        </Stack>
+                Exit focused view
+              </Button>
+            </Box>
+          </Scroll>
+        )}
       </Stack>
-    </>
+    </Stack>
   );
 }
 

client/src/pages/tree/index.tsx

@@ -105,6 +105,12 @@ export function TreePage({ template: Page }: PageContentProps) {
                         step: throttled,
                         layer: key,
                         showAllEdges: layoutModes[mode].showAllEdges,
+                        onExit: () => {
+                          const layer = one.get();
+                          if (!isEmpty(layer?.source?.highlighting)) {
+                            one.set((l) => set(l, "source.highlighting", {}));
+                          }
+                        },
                       };
                       return (
                         <>
@@ -123,20 +129,7 @@ export function TreePage({ template: Page }: PageContentProps) {
                             >
                               {mode !== "plot" ? (
                                 <>
-                                  <TreeGraph
-                                    {...sharedProps}
-                                    tree={tree}
-                                    onExit={() => {
-                                      const layer = one.get();
-                                      if (
-                                        !isEmpty(layer?.source?.highlighting)
-                                      ) {
-                                        one.set((l) =>
-                                          set(l, "source.highlighting", {}),
-                                        );
-                                      }
-                                    }}
-                                  />
+                                  <TreeGraph {...sharedProps} tree={tree} />
                                 </>
                               ) : (
                                 <>

client/src/pages/tree/useComputePlot.tsx

@@ -80,7 +80,7 @@ export function getScatterPlotUniqueId(
   logicalId: string | number | null | undefined,
   step: number,
 ) {
-  return `${logicalId}-${step}`;
+  return `${logicalId} (Step ${step})`;
 }
 
 export type Bounds = { xMin: number; xMax: number; yMin: number; yMax: number };