Refactor: Integrate Round management and enhance Histogram component

frontend/package.json

@@ -36,7 +36,7 @@
         "storybook": "storybook dev -p 6006 --no-open",
         "storybook:build": "storybook build",
         "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
-        "lint:fix": "eslint --fix src/**/*.js",
+        "lint:fix": "eslint --fix src/**/*.{js,jsx,ts,tsx}",
         "build-storybook": "storybook build"
     },
     "eslintConfig": {

frontend/src/API.ts

@@ -7,6 +7,7 @@ import IExperiment from "@/types/Experiment";
 import Participant, { ParticipantLink } from "./types/Participant";
 import Session from "./types/Session";
 import Experiment from "@/types/Experiment";
+import { RoundResponse } from "./types/Round";
 
 // API handles the calls to the Hooked-server api
 
@@ -173,7 +174,7 @@ interface GetNextRoundParams {
 
 
 // Get next_round from server
-export const getNextRound = async ({ session }: GetNextRoundParams) => {
+export const getNextRound = async ({ session }: GetNextRoundParams): Promise<RoundResponse | null> => {
 
     const sessionId = session.id.toString();
 

frontend/src/components/AppBar/AppBar.test.tsx

@@ -1,4 +1,4 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import AppBar from './AppBar';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { vi, describe, beforeEach, it, expect } from 'vitest';

frontend/src/components/Block/Block.test.tsx

@@ -42,7 +42,7 @@ vi.mock('../../API', () => ({
 
 vi.mock('../../util/stores', () => ({
     __esModule: true,
-    default: (fn) => {
+    default: (fn: any) => {
         const state = {
             session: mockSessionStore,
             participant: mockParticipantStore,
@@ -51,6 +51,7 @@ vi.mock('../../util/stores', () => ({
             setHeadData: vi.fn(),
             resetHeadData: vi.fn(),
             setBlock: vi.fn(),
+            setCurrentAction: vi.fn(),
         };
 
         return fn(state);

frontend/src/components/Block/Block.tsx

@@ -6,37 +6,20 @@ import classNames from "classnames";
 import useBoundStore from "@/util/stores";
 import { getNextRound, useBlock } from "@/API";
 import DefaultPage from "@/components/Page/DefaultPage";
-import Explainer, { ExplainerProps } from "@/components/Explainer/Explainer";
-import Final, { FinalProps } from "@/components/Final/Final";
-import Loading, { LoadingProps } from "@/components/Loading/Loading";
-import Playlist, { PlaylistProps } from "@/components/Playlist/Playlist";
-import Score, { ScoreProps } from "@/components/Score/Score";
-import Trial, { TrialProps } from "@/components/Trial/Trial";
-import Info, { InfoProps } from "@/components/Info/Info";
+import Explainer from "@/components/Explainer/Explainer";
+import Final from "@/components/Final/Final";
+import Loading from "@/components/Loading/Loading";
+import Playlist from "@/components/Playlist/Playlist";
+import Score from "@/components/Score/Score";
+import Trial from "@/components/Trial/Trial";
+import Info from "@/components/Info/Info";
 import FloatingActionButton from "@/components/FloatingActionButton/FloatingActionButton";
 import UserFeedback from "@/components/UserFeedback/UserFeedback";
 import FontLoader from "@/components/FontLoader/FontLoader";
 import useResultHandler from "@/hooks/useResultHandler";
 import Session from "@/types/Session";
-import { RedirectProps } from "../Redirect/Redirect";
-
-interface SharedActionProps {
-    title?: string;
-    config?: object;
-    style?: object;
-}
-
-type ActionProps = SharedActionProps &
-    (
-        | { view: "EXPLAINER" } & ExplainerProps
-        | { view: "INFO" } & InfoProps
-        | { view: "TRIAL_VIEW" } & TrialProps
-        | { view: 'SCORE' } & ScoreProps
-        | { view: 'FINAL' } & FinalProps
-        | { view: 'PLAYLIST' } & PlaylistProps
-        | { view: 'REDIRECT' } & RedirectProps
-        | { view: "LOADING" } & LoadingProps
-    )
+import { Action } from "@/types/Action";
+import { Round } from "@/types/Round";
 
 // Block handles the main (experiment) block flow:
 // - Loads the block and participant
@@ -46,7 +29,7 @@ type ActionProps = SharedActionProps &
 //   Empty URL parameter "participant_id" is the same as no URL parameter at all
 const Block = () => {
     const { slug } = useParams();
-    const startState = { view: "LOADING" } as ActionProps;
+    const startState = { view: "LOADING" } as Action;
     // Stores
     const setError = useBoundStore(state => state.setError);
     const participant = useBoundStore((state) => state.participant);
@@ -56,36 +39,39 @@ const Block = () => {
     const setTheme = useBoundStore((state) => state.setTheme);
     const resetTheme = useBoundStore((state) => state.resetTheme);
     const setBlock = useBoundStore((state) => state.setBlock);
+    const setCurrentAction = useBoundStore((state) => state.setCurrentAction);
 
     const setHeadData = useBoundStore((state) => state.setHeadData);
     const resetHeadData = useBoundStore((state) => state.resetHeadData);
 
     // Current block state
-    const [actions, setActions] = useState([]);
-    const [state, setState] = useState<ActionProps | null>(startState);
+    const [actions, setActions] = useState<Round>([]);
+    const [state, setState] = useState<Action | null>(startState);
     const [key, setKey] = useState<number>(Math.random());
     const playlist = useRef(null);
 
     // API hooks
-    const [block, loadingBlock] = useBlock(slug);
+    const [block, loadingBlock] = useBlock(slug!);
 
     const loadingText = block ? block.loading_text : "";
     const className = block ? block.class_name : "";
 
     /** Set new state as spread of current state to force re-render */
-    const updateState = useCallback((state: ActionProps) => {
+    const updateState = useCallback((state: Action) => {
         if (!state) return;
 
         setState({ ...state });
         setKey(Math.random());
     }, []);
 
-    const updateActions = useCallback((currentActions: []) => {
+    const updateActions = useCallback((currentActions: Round) => {
         const newActions = currentActions;
         setActions(newActions);
         const newState = newActions.shift();
+        const currentAction = newState ? newState : null;
+        setCurrentAction({ ...currentAction });
         updateState(newState);
-    }, [updateState]);
+    }, [updateState, setCurrentAction]);
 
     const continueToNextRound = async (activeSession: Session) => {
         // Try to get next_round data from server
@@ -98,6 +84,7 @@ const Block = () => {
             setError(
                 "An error occured while loading the data, please try to reload the page. (Error: next_round data unavailable)"
             );
+            setCurrentAction(null);
             setState(null);
         }
     };

frontend/src/components/Experiment/Header/Header.tsx

@@ -30,9 +30,6 @@ export const Header: React.FC<HeaderProps> = ({
     socialMediaConfig
 }) => {
 
-    // Get current URL minus the query string
-    const currentUrl = window.location.href.split('?')[0];
-
     return (
         <div className="hero">
             <div className="intro">

frontend/src/components/Explainer/Explainer.tsx

@@ -1,16 +1,8 @@
 import { useEffect } from "react";
 import Button from "../Button/Button";
+import { Explainer as ExplainerAction } from "@/types/Action";
 
-interface ExplainerStep {
-    number: number;
-    description: string;
-}
-
-export interface ExplainerProps {
-    instruction: string;
-    button_label: string;
-    steps?: Array<ExplainerStep>;
-    timer: number | null;
+export interface ExplainerProps extends ExplainerAction {
     onNext: () => void;
 }
 

frontend/src/components/Final/Final.tsx

@@ -10,39 +10,10 @@ import useBoundStore from "../../util/stores";
 import ParticipantLink from "../ParticipantLink/ParticipantLink";
 import UserFeedback from "../UserFeedback/UserFeedback";
 import FinalButton from "./FinalButton";
-import ISocial from "@/types/Social";
-import Block, { FeedbackInfo } from "@/types/Block";
-import Participant from "@/types/Participant";
+import { Final as FinalAction } from "@/types/Action";
 
-export interface FinalProps {
-    block: Block;
-    participant: Participant;
-    score: number;
-    final_text: string | TrustedHTML;
-    action_texts: {
-        all_experiments: string;
-        profile: string;
-        play_again: string;
-    }
-    button: {
-        text: string;
-        link: string;
-    };
+export interface FinalProps extends FinalAction {
     onNext: () => void;
-    show_participant_link: boolean;
-    participant_id_only: boolean;
-    show_profile_link: boolean;
-    social: ISocial;
-    feedback_info?: FeedbackInfo;
-    points: string;
-    rank: {
-        class: string;
-        text: string;
-    }
-    logo: {
-        image: string;
-        link: string;
-    };
 }
 
 /**

frontend/src/components/Histogram/Histogram.test.tsx

@@ -1,5 +1,5 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { render, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach, Mock, } from 'vitest';
+import { render, act } from '@testing-library/react';
 import Histogram from './Histogram';
 
 // Mock requestAnimationFrame and cancelAnimationFrame
@@ -14,9 +14,21 @@ vi.stubGlobal('cancelAnimationFrame', (handle: number): void => {
 // Mock setInterval and clearInterval
 vi.useFakeTimers();
 
+vi.mock('../../util/stores', () => ({
+    __esModule: true,
+    default: (fn: any) => {
+        const state = {
+            currentAction: { playback: { play_method: 'BUFFER' } },
+        };
+
+        return fn(state);
+    },
+    useBoundStore: vi.fn()
+}));
+
 describe('Histogram', () => {
     let mockAnalyser: {
-        getByteFrequencyData: vi.Mock;
+        getByteFrequencyData: Mock
     };
 
     beforeEach(() => {
@@ -154,11 +166,8 @@ describe('Histogram', () => {
     it('updates bar heights based on random data when random is true and running is true', async () => {
         const bars = 5;
 
-        // Ensure the analyser does not provide data
-        mockAnalyser.getByteFrequencyData.mockImplementation(() => { });
-
         const { container, rerender } = render(
-            <Histogram running={true} bars={bars} random={true} />
+            <Histogram running={true} bars={bars} random={true} interval={200} />
         );
 
         const getHeights = () =>
@@ -168,17 +177,16 @@ describe('Histogram', () => {
 
         const initialHeights = getHeights();
 
-        // Advance timers and trigger animation frame
+        // Advance timers by at least one interval
         await act(async () => {
-            vi.advanceTimersByTime(100);
+            vi.advanceTimersByTime(200);
         });
 
         rerender(<Histogram running={true} bars={bars} random={true} />);
 
         const updatedHeights = getHeights();
 
         expect(initialHeights).not.to.deep.equal(updatedHeights);
-        expect(mockAnalyser.getByteFrequencyData).not.toHaveBeenCalled();
     });
 
     it('does not call getByteFrequencyData when random is true', async () => {
@@ -225,6 +233,7 @@ describe('Histogram', () => {
 
     it('updates bar heights based on frequency data using requestAnimationFrame', async () => {
         const bars = 5;
+
         mockAnalyser.getByteFrequencyData.mockImplementation((array) => {
             for (let i = 0; i < array.length; i++) {
                 array[i] = Math.floor(Math.random() * 256);

frontend/src/components/Histogram/Histogram.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import useBoundStore from '@/util/stores';
 
 interface HistogramProps {
     bars?: number;
@@ -27,10 +28,15 @@ const Histogram: React.FC<HistogramProps> = ({
     backgroundColor = undefined,
     borderRadius = '0.15rem',
     random = false,
-    interval = 100,
+    interval = 200,
 }) => {
     const [frequencyData, setFrequencyData] = useState<Uint8Array>(new Uint8Array(bars));
 
+    const currentAction = useBoundStore((state) => state.currentAction);
+    const isBuffer = currentAction?.playback?.play_method === 'BUFFER';
+
+    const shouldRandomize = random || !isBuffer;
+
     const animationFrameRef = useRef<number>();
     const intervalRef = useRef<number>();
 
@@ -50,7 +56,7 @@ const Histogram: React.FC<HistogramProps> = ({
         const updateFrequencyData = () => {
             let dataWithoutExtremes: Uint8Array;
 
-            if (random) {
+            if (shouldRandomize) {
                 // Generate random frequency data
                 dataWithoutExtremes = new Uint8Array(bars);
                 for (let i = 0; i < bars; i++) {
@@ -71,14 +77,14 @@ const Histogram: React.FC<HistogramProps> = ({
             }
         };
 
-        if (random) {
-            // Use setInterval when random is true
+        if (shouldRandomize) {
+            // Use setInterval when shouldRandomize is true
             if (intervalRef.current) {
                 clearInterval(intervalRef.current);
             }
             intervalRef.current = window.setInterval(updateFrequencyData, interval);
         } else {
-            // Use requestAnimationFrame when random is false
+            // Use requestAnimationFrame when shouldRandomize is false
             if (animationFrameRef.current) {
                 cancelAnimationFrame(animationFrameRef.current);
             }
@@ -93,7 +99,7 @@ const Histogram: React.FC<HistogramProps> = ({
                 clearInterval(intervalRef.current);
             }
         };
-    }, [running, bars, random, interval]);
+    }, [running, bars, shouldRandomize, interval]);
 
     const barWidth = `calc((100% - ${(bars - 1) * spacing}px) / ${bars})`;
 
@@ -120,7 +126,7 @@ const Histogram: React.FC<HistogramProps> = ({
                         height: `${(frequencyData[index] / 255) * 100}%`,
                         backgroundColor: 'currentColor',
                         marginRight: index < bars - 1 ? spacing : 0,
-                        transition: random
+                        transition: shouldRandomize
                             ? `height ${interval / 1000}s ease`
                             : 'height 0.05s ease',
                     }}

frontend/src/components/Info/Info.tsx

@@ -1,12 +1,9 @@
 import { useEffect, useState } from "react";
 
 import Button from "../Button/Button";
+import { Info as InfoAction } from "@/types/Action";
 
-export interface InfoProps {
-    heading?: string;
-    body: string | TrustedHTML;
-    button_label?: string;
-    button_link?: string;
+export interface InfoProps extends InfoAction {
     onNext?: () => void;
 }