Virtualize the steps panel (study browser)

package.json

@@ -34,6 +34,7 @@
     "@reduxjs/toolkit": "^2.9.0",
     "@supabase/supabase-js": "^2.57.4",
     "@tabler/icons-react": "^3.35.0",
+    "@tanstack/react-virtual": "^3.13.13",
     "@trrack/core": "^1.3.0",
     "@types/crypto-js": "^4.2.2",
     "@types/hjson": "^2.4.6",

src/analysis/individualStudy/stats/StatsView.tsx

@@ -1,15 +1,11 @@
 import {
   Box, Divider, Flex, Paper, Text,
 } from '@mantine/core';
-import {
-  useMemo,
-} from 'react';
 import { useParams } from 'react-router';
 import { ParticipantData } from '../../../storage/types';
 import { StudyConfig } from '../../../parser/types';
 import { TrialVisualization } from './TrialVisualization';
-import { ComponentBlockWithOrderPath, StepsPanel } from '../../../components/interface/StepsPanel';
-import { addPathToComponentBlock } from '../../../utils/getSequenceFlatMap';
+import { StepsPanel } from '../../../components/interface/StepsPanel';
 
 export function StatsView(
   {
@@ -20,13 +16,6 @@ export function StatsView(
     visibleParticipants: ParticipantData[];
   },
 ) {
-  const fullOrder = useMemo(() => {
-    let r = structuredClone(studyConfig.sequence) as ComponentBlockWithOrderPath;
-    r = addPathToComponentBlock(r, 'root') as ComponentBlockWithOrderPath;
-    r.components.push('end');
-    return r;
-  }, [studyConfig.sequence]);
-
   const { trialId } = useParams();
 
   return (
@@ -42,7 +31,7 @@ export function StatsView(
             <Flex direction="row">
               {/* Trial selection sidebar */}
               <Box w={340}>
-                <StepsPanel configSequence={fullOrder} participantSequence={fullOrder} fullSequence={fullOrder} participantView={false} studyConfig={studyConfig} analysisNavigation />
+                <StepsPanel participantAnswers={{}} studyConfig={studyConfig} />
               </Box>
 
               <Divider orientation="vertical" mx="md" />

src/components/interface/AppAside.tsx

@@ -15,15 +15,14 @@ import {
   IconBrandFirebase, IconBrandSupabase, IconDatabase, IconGraph, IconGraphOff, IconInfoCircle, IconSettingsShare, IconUserPlus,
 } from '@tabler/icons-react';
 import { useHref } from 'react-router';
-import { ComponentBlockWithOrderPath, StepsPanel } from './StepsPanel';
+import { StepsPanel } from './StepsPanel';
 import { useStudyConfig } from '../../store/hooks/useStudyConfig';
 import {
   useStoreActions, useStoreDispatch, useStoreSelector,
 } from '../../store/store';
 import { useStudyId } from '../../routes/utils';
 import { getNewParticipant } from '../../utils/nextParticipant';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
-import { addPathToComponentBlock } from '../../utils/getSequenceFlatMap';
 import { useIsAnalysis } from '../../store/hooks/useIsAnalysis';
 
 function InfoHover({ text }: { text: string }) {
@@ -36,6 +35,7 @@ function InfoHover({ text }: { text: string }) {
 
 export function AppAside() {
   const sequence = useStoreSelector((state) => state.sequence);
+  const answers = useStoreSelector((state) => state.answers);
   const { toggleStudyBrowser } = useStoreActions();
 
   const studyConfig = useStudyConfig();
@@ -48,13 +48,6 @@ export function AppAside() {
 
   const isAnalysis = useIsAnalysis();
 
-  const fullOrder = useMemo(() => {
-    let r = structuredClone(studyConfig.sequence) as ComponentBlockWithOrderPath;
-    r = addPathToComponentBlock(r, 'root') as ComponentBlockWithOrderPath;
-    r.components.push('end');
-    return r;
-  }, [studyConfig.sequence]);
-
   const [activeTab, setActiveTab] = useState<string | null>('participant');
 
   const nextParticipantDisabled = useMemo(() => activeTab === 'allTrials' || isAnalysis, [activeTab, isAnalysis]);
@@ -152,18 +145,18 @@ export function AppAside() {
                 Participant View
                 <InfoHover text="The Participants View shows items just as a participants would see them, considering randomization, omissions, etc. You can navigate between multiple participants using the next participant button." />
               </Tabs.Tab>
-              <Tabs.Tab value="allTrials" disabled={isAnalysis}>
-                All Trials View
-                <InfoHover text="The All Trials View shows all items in the order defined in the config." />
+              <Tabs.Tab value="allTrials" disabled={isAnalysis} p="xs">
+                Browse Components
+                <InfoHover text="Browse Components allows you to view all the components that are defined in your study." />
               </Tabs.Tab>
             </Tabs.List>
           </Box>
 
           <Tabs.Panel value="participant">
-            <StepsPanel configSequence={fullOrder} participantSequence={sequence} fullSequence={sequence} participantView studyConfig={studyConfig} />
+            <StepsPanel participantSequence={sequence} participantAnswers={answers} studyConfig={studyConfig} />
           </Tabs.Panel>
           <Tabs.Panel value="allTrials">
-            <StepsPanel configSequence={fullOrder} participantSequence={sequence} fullSequence={sequence} participantView={false} studyConfig={studyConfig} />
+            <StepsPanel participantAnswers={{}} studyConfig={studyConfig} />
           </Tabs.Panel>
         </Tabs>
       </AppShell.Section>