Added drag to scroll container

components/home/GroupBox/GroupBox.tsx

@@ -6,7 +6,8 @@ import styles from "./GroupBox.module.css"
 import {EntitySpan} from "../EntitySpan/EntitySpan";
 import {useGroups} from "../../contexts/GroupProvider";
 import {calculateInputs} from "../../../src/calculateInputs";
-import {uniquify} from "../../../src/utils";
+import {fixedEncodeURIComponent, uniquify} from "../../../src/utils";
+import Link from "next/link";
 
 interface Props {
   group: Group
@@ -81,6 +82,7 @@ const GroupBoxBase: FC<Props> = ({ group }) => {
     >
       {name}
     </h3>
+    <Link href={`./visualize/${fixedEncodeURIComponent(group.name)}`}>👁</Link>
     <button
       className={styles.quit}
       onBlur={() => setDeleteConfirm(false)}

components/shared/ScrollContainer/ScrollContainer.module.css

@@ -0,0 +1,10 @@
+.container {
+    width: 100vw;
+    height: 100vh;
+}
+
+.inner {
+    padding: 2em;
+    width: fit-content;
+    height: fit-content;
+}

components/shared/ScrollContainer/ScrollContainer.tsx

@@ -0,0 +1,25 @@
+import {FC, PropsWithChildren, useEffect, useRef} from "react";
+import IndianaDragScoll from "react-indiana-drag-scroll";
+import styles from './ScrollContainer.module.css'
+
+export const ScrollContainer: FC<PropsWithChildren> = ({children}) => {
+  const container = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (container.current) {
+      container.current.oncontextmenu = e => e.preventDefault()
+    }
+  }, []);
+
+  return <IndianaDragScoll
+    className={styles.container}
+    buttons={[2]}
+    innerRef={container}
+    hideScrollbars={false}
+    activationDistance={5}
+  >
+    <div className={styles.inner}>
+      {children}
+    </div>
+  </IndianaDragScoll>
+}