1 files changed, 91 insertions, 0 deletions

diff --git a/subprojects/frontend/src/graph/VisibilityPanel.tsx b/subprojects/frontend/src/graph/VisibilityPanel.tsx
new file mode 100644
index 00000000..20c4ffca
--- /dev/null
+++ b/subprojects/frontend/src/graph/VisibilityPanel.tsx
@@ -0,0 +1,91 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import TuneIcon from '@mui/icons-material/Tune';
+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 { styled } from '@mui/material/styles';
+import { observer } from 'mobx-react-lite';
+import { useCallback, useId, useState } from 'react';
+
+import type GraphStore from './GraphStore';
+import VisibilityDialog from './VisibilityDialog';
+
+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',
+    display: 'flex',
+    maxWidth: '100%',
+    margin: theme.spacing(1),
+  },
+}));
+
+function VisibilityPanel({
+  graph,
+  dialog,
+}: {
+  graph: GraphStore;
+  dialog: boolean;
+}): JSX.Element {
+  const id = useId();
+  const [showFilter, setShowFilter] = useState(false);
+  const close = useCallback(() => setShowFilter(false), []);
+
+  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>
+  );
+}
+
+export default observer(VisibilityPanel);