1 files changed, 240 insertions, 63 deletions

diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
index 20c4ffca..210ff5d5 100644
--- a/subprojects/frontend/src/graph/VisibilityPanel.tsx
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -1,43 +1,133 @@
 /*
- * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2023-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
 
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import LabelIcon from '@mui/icons-material/Label';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied';
 import TuneIcon from '@mui/icons-material/Tune';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Badge from '@mui/material/Badge';
-import Dialog from '@mui/material/Dialog';
-import IconButton from '@mui/material/IconButton';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
+import Button from '@mui/material/Button';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 import { observer } from 'mobx-react-lite';
-import { useCallback, useId, useState } from 'react';
+import { useCallback } from 'react';
 
 import type GraphStore from './GraphStore';
-import VisibilityDialog from './VisibilityDialog';
+import { isVisibilityAllowed } from './GraphStore';
+import RelationName from './RelationName';
+import SlideInPanel from './SlideInPanel';
 
-const VisibilityPanelRoot = styled('div', {
-  name: 'VisibilityPanel-Root',
-})(({ theme }) => ({
-  position: 'absolute',
-  padding: theme.spacing(1),
-  top: 0,
-  left: 0,
-  maxHeight: '100%',
-  maxWidth: '100%',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'start',
-  '.VisibilityPanel-drawer': {
-    overflow: 'hidden',
+const VisibilityDialogScroll = styled('div', {
+  name: 'VisibilityDialog-Scroll',
+  shouldForwardProp: (propName) => propName !== 'dialog',
+})<{ dialog: boolean }>(({ theme, dialog }) => {
+  const overlayOpacity = dialog ? 0.16 : 0.09;
+  return {
     display: 'flex',
-    maxWidth: '100%',
-    margin: theme.spacing(1),
-  },
-}));
+    flexDirection: 'column',
+    height: 'auto',
+    overflowX: 'hidden',
+    overflowY: 'auto',
+    margin: `0 ${theme.spacing(2)}`,
+    '& table': {
+      // We use flexbox instead of `display: table` to get proper text-overflow
+      // behavior for overly long relation names.
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& thead, & tbody': {
+      display: 'flex',
+      flexDirection: 'column',
+    },
+    '& thead': {
+      position: 'sticky',
+      top: 0,
+      zIndex: 999,
+      backgroundColor: theme.palette.background.paper,
+      ...(theme.palette.mode === 'dark'
+        ? {
+            // In dark mode, MUI Paper gets a lighter overlay.
+            backgroundImage: `linear-gradient(
+                rgba(255, 255, 255, ${overlayOpacity}),
+                rgba(255, 255, 255, ${overlayOpacity})
+              )`,
+          }
+        : {}),
+      '& tr': {
+        height: '44px',
+      },
+    },
+    '& tr': {
+      display: 'flex',
+      flexDirection: 'row',
+      maxWidth: '100%',
+    },
+    '& tbody tr': {
+      transition: theme.transitions.create('background', {
+        duration: theme.transitions.duration.shortest,
+      }),
+      '&:hover': {
+        background: theme.palette.action.hover,
+        '@media (hover: none)': {
+          background: 'transparent',
+        },
+      },
+    },
+    '& th, & td': {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      // Set width in advance, since we can't rely on `display: table-cell`.
+      width: '44px',
+    },
+    '& th:nth-of-type(3), & td:nth-of-type(3)': {
+      justifyContent: 'start',
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(2),
+      // Only let the last column grow or shrink.
+      flexGrow: 1,
+      flexShrink: 1,
+      // Compute the maximum available space in advance to let the text overflow.
+      maxWidth: 'calc(100% - 88px)',
+      width: 'min-content',
+    },
+    '& td:nth-of-type(3)': {
+      cursor: 'pointer',
+      userSelect: 'none',
+      WebkitTapHighlightColor: 'transparent',
+    },
+
+    '& thead th, .VisibilityDialog-custom tr:last-child td': {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+    // Hack to apply `text-overflow`.
+    '.VisibilityDialog-nowrap': {
+      maxWidth: '100%',
+      overflow: 'hidden',
+      wordWrap: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    '.VisibilityDialog-empty': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      color: theme.palette.text.secondary,
+    },
+    '.VisibilityDialog-emptyIcon': {
+      fontSize: '6rem',
+      marginBottom: theme.spacing(1),
+    },
+  };
+});
 
 function VisibilityPanel({
   graph,
@@ -46,45 +136,132 @@ function VisibilityPanel({
   graph: GraphStore;
   dialog: boolean;
 }): JSX.Element {
-  const id = useId();
-  const [showFilter, setShowFilter] = useState(false);
-  const close = useCallback(() => setShowFilter(false), []);
+  const builtinRows: JSX.Element[] = [];
+  const rows: JSX.Element[] = [];
+  graph.relationMetadata.forEach((metadata, name) => {
+    if (!isVisibilityAllowed(metadata, 'must')) {
+      return;
+    }
+    const visibility = graph.getVisibility(name);
+    const row = (
+      <tr key={metadata.name}>
+        <td>
+          <Checkbox
+            checked={visibility !== 'none'}
+            aria-label={`Show true and error values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'none' ? 'must' : 'none')
+            }
+          />
+        </td>
+        <td>
+          <Checkbox
+            checked={visibility === 'all'}
+            disabled={!isVisibilityAllowed(metadata, 'all')}
+            aria-label={`Show all values of ${metadata.simpleName}`}
+            onClick={() =>
+              graph.setVisibility(name, visibility === 'all' ? 'must' : 'all')
+            }
+          />
+        </td>
+        <td
+          onClick={() => graph.cycleVisibility(name)}
+          aria-label="Toggle visiblity"
+        >
+          <div className="VisibilityDialog-nowrap">
+            <RelationName metadata={metadata} abbreviate={graph.abbreviate} />
+          </div>
+        </td>
+      </tr>
+    );
+    if (name.startsWith('builtin::')) {
+      builtinRows.push(row);
+    } else {
+      rows.push(row);
+    }
+  });
+
+  const hasRows = rows.length > 0 || builtinRows.length > 0;
+
+  const hideBadge = graph.visibility.size === 0;
+  const icon = useCallback(
+    (show: boolean) => (
+      <Badge color="primary" variant="dot" invisible={hideBadge}>
+        {show && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
+      </Badge>
+    ),
+    [dialog, hideBadge],
+  );
 
   return (
-    <VisibilityPanelRoot>
-      <IconButton
-        role="switch"
-        aria-checked={showFilter}
-        aria-controls={dialog ? undefined : id}
-        aria-label="Show filter panel"
-        onClick={() => setShowFilter(!showFilter)}
-      >
-        <Badge
-          color="primary"
-          variant="dot"
-          invisible={graph.visibility.size === 0}
-        >
-          {showFilter && !dialog ? <ChevronLeftIcon /> : <TuneIcon />}
-        </Badge>
-      </IconButton>
-      {dialog ? (
-        <Dialog open={showFilter} onClose={close} maxWidth="xl">
-          <VisibilityDialog graph={graph} close={close} dialog />
-        </Dialog>
-      ) : (
-        <Slide
-          direction="right"
-          in={showFilter}
-          id={id}
-          mountOnEnter
-          unmountOnExit
-        >
-          <Paper className="VisibilityPanel-drawer" elevation={4}>
-            <VisibilityDialog graph={graph} close={close} />
-          </Paper>
-        </Slide>
-      )}
-    </VisibilityPanelRoot>
+    <SlideInPanel
+      anchor="left"
+      dialog={dialog}
+      title="Customize view"
+      icon={icon}
+      iconLabel="Show filter panel"
+      buttons={
+        <>
+          <Button
+            color="inherit"
+            onClick={() => graph.hideAll()}
+            startIcon={<VisibilityOffIcon />}
+          >
+            Hide all
+          </Button>
+          <Button
+            color="inherit"
+            onClick={() => graph.resetFilter()}
+            startIcon={<FilterListIcon />}
+          >
+            Reset filter
+          </Button>
+        </>
+      }
+    >
+      <FormControlLabel
+        control={
+          <Switch
+            checked={!graph.abbreviate}
+            onClick={() => graph.toggleAbbrevaite()}
+          />
+        }
+        label="Fully qualified names"
+      />
+      <FormControlLabel
+        control={
+          <Switch checked={graph.scopes} onClick={() => graph.toggleScopes()} />
+        }
+        label="Object scopes"
+      />
+      <VisibilityDialogScroll dialog={dialog}>
+        {hasRows ? (
+          <table cellSpacing={0}>
+            <thead>
+              <tr>
+                <th aria-label="Show true and error values">
+                  <LabelIcon />
+                </th>
+                <th aria-label="Show unknown values">
+                  <LabelOutlinedIcon />
+                </th>
+                <th>Symbol</th>
+              </tr>
+            </thead>
+            <tbody className="VisibilityDialog-custom">{...rows}</tbody>
+            <tbody className="VisibilityDialog-builtin">{...builtinRows}</tbody>
+          </table>
+        ) : (
+          <div className="VisibilityDialog-empty">
+            <SentimentVeryDissatisfiedIcon
+              className="VisibilityDialog-emptyIcon"
+              fontSize="inherit"
+            />
+            <div>Partial model is empty</div>
+          </div>
+        )}
+      </VisibilityDialogScroll>
+    </SlideInPanel>
   );
 }