refactor(frontend): alternative view dimming implementation

The previous one created glitches in Firefox, because the animation for the background completed before that the SVG animation with the same duration due to laggy SVG rendering.
graphs4value · Oct 21, 2024 · 154e174 · 154e174
1 parent affb68f
commit 154e174
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 29 deletions.
diff --git a/subprojects/frontend/src/ModelWorkArea.tsx b/subprojects/frontend/src/ModelWorkArea.tsx
@@ -155,8 +155,6 @@ function ModelWorkArea({ touchesTop }: { touchesTop: boolean }): JSX.Element {
     selectedGeneratedModel === undefined
       ? 0
       : generatedModelNames.indexOf(selectedGeneratedModel) + 1;
-  const selectedGraph = generatedModel?.graph ?? graph;
-  const { dimView } = selectedGraph;
 
   return (
     <Stack direction="column" height="100%" width="100%" overflow="hidden">
@@ -202,25 +200,6 @@ function ModelWorkArea({ touchesTop }: { touchesTop: boolean }): JSX.Element {
         overflow="hidden"
         position="relative"
       >
-        <Stack
-          key={(generatedModel?.graph ?? graph).name}
-          sx={(theme) => ({
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            width: '100%',
-            height: '100%',
-            backgroundColor: dimView
-              ? theme.palette.outer.disabled
-              : 'transparent',
-            transition: theme.transitions.create('background-color', {
-              duration: theme.transitions.duration.short,
-            }),
-            '@media (prefers-reduced-motion: reduce)': {
-              backgroundColor: 'transparent',
-            },
-          })}
-        />
         {generatedModel === undefined ? (
           <SplitGraphPane
             graph={graph}

diff --git a/subprojects/frontend/src/graph/GraphArea.tsx b/subprojects/frontend/src/graph/GraphArea.tsx
@@ -62,6 +62,33 @@ const SyncWarning = observer(function SyncWarning({
   );
 });
 
+const Overlay = observer(function Overlay({
+  graph: { dimView },
+}: {
+  graph: GraphStore;
+}): JSX.Element {
+  return (
+    <Box
+      sx={(theme) => ({
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+        backgroundColor: dimView ? theme.palette.outer.disabled : 'transparent',
+        mixBlendMode: theme.palette.mode === 'dark' ? 'lighten' : 'darken',
+        transition: theme.transitions.create('background-color', {
+          duration: theme.transitions.duration.short,
+        }),
+        '@media (prefers-reduced-motion: reduce)': {
+          backgroundColor: 'transparent',
+        },
+      })}
+    />
+  );
+});
+
 export default function GraphArea({
   graph,
 }: {
@@ -99,6 +126,7 @@ export default function GraphArea({
           />
         )}
       </ZoomCanvas>
+      <Overlay graph={graph} />
       <SyncWarning graph={graph} />
       <VisibilityPanel graph={graph} dialog={dialog} />
       <ExportPanel graph={graph} svgContainer={svgContainer} dialog={dialog} />

diff --git a/subprojects/frontend/src/graph/GraphTheme.tsx b/subprojects/frontend/src/graph/GraphTheme.tsx
@@ -207,18 +207,12 @@ export default styled('div', {
           strokeDasharray: 'none !important',
         },
     },
-    '.node-bg, .node-header': {
+    '.node-header': {
       transition: args.theme.transitions.create('fill', {
         duration: args.theme.transitions.duration.short,
       }),
     },
     '&.dimmed svg': {
-      '.node .node-bg:not(.node-shadow)': {
-        fill: args.theme.palette.outer.disabled,
-        '@media (prefers-reduced-motion: reduce)': {
-          fill: args.theme.palette.background.default,
-        },
-      },
       '.node-header': {
         fill: saturate(
           args.theme.palette.mode === 'dark'

diff --git a/subprojects/frontend/src/table/TableArea.tsx b/subprojects/frontend/src/table/TableArea.tsx
@@ -94,7 +94,8 @@ function TableArea({
   graph: GraphStore;
   touchesTop: boolean;
 }): JSX.Element {
-  const { concretize, selectedSymbol, showComputed, semantics } = graph;
+  const { concretize, selectedSymbol, showComputed, semantics, dimView } =
+    graph;
   const { nodes, partialInterpretation } = semantics;
   const symbolName = selectedSymbol?.name;
   const computedName = showComputed
@@ -185,6 +186,15 @@ function TableArea({
         getRowId={(row) => row.nodes.join(',')}
         sx={(theme) => ({
           border: 'none',
+          backgroundColor: dimView
+            ? theme.palette.outer.disabled
+            : 'transparent',
+          transition: theme.transitions.create('background-color', {
+            duration: theme.transitions.duration.short,
+          }),
+          '@media (prefers-reduced-motion: reduce)': {
+            backgroundColor: 'transparent',
+          },
           '--DataGrid-rowBorderColor':
             theme.palette.mode === 'dark'
               ? alpha(theme.palette.text.primary, 0.24)