Virtualize events list

irdkwmnsb · May 9, 2024 · 6128d80 · 6128d80
1 parent 9d02a3b
commit 6128d80
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "monaco-editor": "^0.46.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "use-immer": "^0.9.0"
+    "use-immer": "^0.9.0",
+    "virtua": "^0.30.5"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.module.scss b/src/App.module.scss
@@ -67,18 +67,23 @@ html, body {
             margin-bottom: 20px;
         }
         .events {
+            flex-grow: 1;
             overflow-y: auto;
-            display: grid;
-            .event {
-                cursor: pointer;
-                box-sizing: border-box;
-                border-top: 1px #c3c3c3 solid;
-                &:last-child {
-                    border-bottom: 1px #c3c3c3 solid;
-                }
-                &.selected {
-                    background-color: #eee;
+            display: flex;
+            flex-direction: column;
+            .eventsContainer{
+                flex-grow: 1;
+                .event {
+                    cursor: pointer;
+                    box-sizing: border-box;
                     border-top: 1px #c3c3c3 solid;
+                    &:last-child {
+                        border-bottom: 1px #c3c3c3 solid;
+                    }
+                    &.selected {
+                        background-color: #eee;
+                        border-top: 1px #c3c3c3 solid;
+                    }
                 }
             }
         }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,12 @@
 /* @refresh reload */
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { RuntimeStore } from "./core/store"
 import { IAlgorithmManifest } from "./core/manifest"
 import { useVisualizer } from "./core/react"
 import "@fontsource-variable/arimo"
 import styles from "./App.module.scss"
 import classNames from "classnames"
+import { VList, VListHandle } from "virtua"
 
 type AppProps = {
     manifest: IAlgorithmManifest,
@@ -20,7 +21,6 @@ const App = ({ manifest, store }: AppProps) => {
     const vis = useVisualizer(store)
     const {curState, curEvent, events, currentStep, start, next} = vis
     const [eventOverride, setEventOverride] = useState<number | undefined>(undefined)
-    const [skipCounter, setSkipCounter] = useState<number>(undefined)
     const curEventOverride = eventOverride !== undefined && events !== undefined ? events[eventOverride] : curEvent
     const curStateOverride = eventOverride !== undefined && events !== undefined ? events[eventOverride].state : curState
     const isRunning = curEventOverride !== undefined && curStateOverride !== undefined
@@ -46,11 +46,17 @@ const App = ({ manifest, store }: AppProps) => {
             setEventOverride(eventOverride - 1)
         }
     }
+    const eventsHandle = useRef<VListHandle>(null)
     const doStart: typeof start = (...args) => {
         setCurTab(Tab.Render)
         setEventOverride(undefined)
         start(...args)
     }
+    useEffect(() => {
+        if(eventsHandle.current !== null) {
+            eventsHandle.current.scrollToIndex(eventOverride ?? currentStep ?? 0, {align: "nearest"})
+        }
+    }, [eventOverride, currentStep])
     useEffect(() => {
         const keyListener = (e: KeyboardEvent) => {
             if (e.key === "ArrowRight") {
@@ -108,16 +114,21 @@ const App = ({ manifest, store }: AppProps) => {
             </section>
             <section className={styles.events}>
                 Events:
-                <div>
-                    {events ? events.map((x, i) => {
-                        const isSelected = i === eventOverride || (eventOverride === undefined && i === currentStep! - 1)
-                        return <div key={i} className={classNames(styles.event, {
-                            [styles.selected]: isSelected
-                        })} onClick={() => setEventOverride(i)}>
-                            <button onClick={() => setEventOverride(i)} disabled={isSelected}>&rarr;</button>
-                            {i + 1} {x.name}
-                        </div>
-                    }) : "Nothing yet.."}
+                <div className={styles.eventsContainer}>
+                    {events ? 
+                        <VList ref={eventsHandle}>
+                            {events.map((event, index) => {
+                                const isSelected = index === eventOverride || (eventOverride === undefined && index === currentStep! - 1)
+                                return <div key={index} className={classNames(styles.event, {
+                                    [styles.selected]: isSelected
+                                })} onClick={() => setEventOverride(index)}>
+                                    <button onClick={() => setEventOverride(index)} disabled={isSelected}>&rarr;</button>
+                                    {index + 1} {event.name}
+                                </div>
+                            })}
+                        </VList>
+                        : "Nothing yet.."
+                    }
                 </div>
             </section>
         </div>

diff --git a/src/visualizers/turing-machine/start.tsx b/src/visualizers/turing-machine/start.tsx
@@ -61,9 +61,9 @@ export const TuringMachineStart = ({ doStart }: StartProps<TuringMachineArgument
             </div>
         )
     }
-    const onStart = useCallback(() => {
+    const onStart = useCallback((full: boolean) => () => {
         if (editorRef.current !== null) {
-            doStart([editorRef.current.getValue(), tape, 10_000], false)
+            doStart([editorRef.current.getValue(), tape, 10_000], full)
         }
     }, [tape])
     useEffect(() => { // https://github.com/Microsoft/monaco-editor/issues/28
@@ -96,5 +96,6 @@ s 0 -> n _ >
 n 0 -> s _ >
 n _ -> rj _ >"/>
         <button onClick={onStart}>Start</button>
+        <button onClick={onStart(true)}>Full run</button>
     </div>
 }