Tutorial fixes

.env

@@ -0,0 +1,17 @@
+VITE_BASE_PATH="/study/"
+VITE_FIREBASE_CONFIG='
+{
+  apiKey: "AIzaSyAm9QtUgx1lYPDeE0vKLN-lK17WfUGVkLo",
+  authDomain: "revisit-utah.firebaseapp.com",
+  projectId: "revisit-utah",
+  storageBucket: "revisit-utah.appspot.com",
+  messagingSenderId: "811568460432",
+  appId: "1:811568460432:web:995f6b4f1fc8042b5dde15"
+}
+'
+VITE_STORAGE_ENGINE="localStorage" # "firebase" or "supabase" or "localStorage" or your own custom storage engine
+VITE_RECAPTCHAV3TOKEN="6LdjOd0lAAAAAASvFfDZFWgtbzFSS9Y3so8rHJth" # recaptcha SITE KEY
+VITE_REPO_URL="https://github.com/revisit-studies/study/tree/main/public/" # Set the url for the "view source" link on the front page
+
+VITE_SUPABASE_URL="https://supabase.revisit.dev"
+VITE_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlzcyI6InN1cGFiYXNlIiwiaWF0IjoxNzYwNjgwODAwLCJleHAiOjE5MTg0NDcyMDB9.IohiSvWUtjylJgn4gMrK3aYfnbz-hUmyb3h87DrQvTc"

.gitignore

@@ -37,4 +37,3 @@ supabase/volumes/*
 !supabase/volumes/db/
 supabase/volumes/db/data
 !supabase/volumes/api/
-.env

package.json

@@ -44,6 +44,7 @@
     "@types/hjson": "^2.4.6",
     "@types/node": "^24.5.2",
     "ajv": "^8.18.0",
+    "arquero": "^8.0.3",
     "crypto-js": "^4.2.0",
     "d3": "^7.9.0",
     "dayjs": "^1.11.18",

public/global.json

@@ -1,5 +1,9 @@
 {
   "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v2.4.2/src/parser/GlobalConfigSchema.json",
-  "configsList": [],
-  "configs": {}
+  "configsList": ["tutorial"],
+  "configs": {
+    "tutorial": {
+      "path": "tutorial/config.json"
+    }
+  }
 }

src/public/example-brush-interactions/assets/Bar.tsx

@@ -0,0 +1,97 @@
+import { useResizeObserver } from '@mantine/hooks';
+import { useMemo } from 'react';
+import ColumnTable from 'arquero/dist/types/table/column-table';
+
+import * as d3 from 'd3';
+import { Loader } from '@mantine/core';
+import { XAxisBar } from './XAxisBar';
+import { YAxisBar } from './YAxisBar';
+import { BrushParams } from './types';
+
+const margin = {
+  top: 15,
+  left: 100,
+  right: 50,
+  bottom: 50,
+};
+
+export function Bar({ barsTable, parameters, data } : {barsTable: ColumnTable | null, parameters: BrushParams, data: Record<string, string>[]}) {
+  const [ref, { height: originalHeight, width: originalWidth }] = useResizeObserver();
+
+  const width = useMemo(() => originalWidth - margin.left - margin.right, [originalWidth]);
+
+  const height = useMemo(() => originalHeight - margin.top - margin.bottom, [originalHeight]);
+
+  const colorScale = useMemo(() => {
+    const categories = Array.from(new Set(data.map((car) => car[parameters.category])));
+    return d3.scaleOrdinal(d3.schemeTableau10).domain(categories);
+  }, [data, parameters.category]);
+
+  const xScale = useMemo(() => {
+    if (!barsTable) {
+      return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return d3.scaleLinear([margin.left, width + margin.left]).domain([0, d3.max(barsTable.objects().map((obj: any) => obj.count)) as any]).nice();
+  }, [barsTable, width]);
+
+  const yScale = useMemo(() => {
+    if (!barsTable) {
+      return null;
+    }
+
+    return d3.scaleBand([margin.top, height + margin.top]).domain(barsTable.array(parameters.category).sort() as never).paddingInner(0.1);
+  }, [barsTable, height, parameters.category]);
+
+  const rects = useMemo(() => {
+    if (!xScale || !yScale || !colorScale || !barsTable) {
+      return null;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (barsTable.objects() as any[]).map((car: any, i) => {
+      if (car[parameters.category] === null || car.count === null) {
+        return null;
+      }
+
+      return (
+        <g key={i}>
+          <rect key={i} x={margin.left} y={yScale(car[parameters.category])} fill={colorScale(car[parameters.category])} height={yScale.bandwidth()} width={xScale(car.count) - margin.left} />
+          <text x={xScale(car.count) + 5} y={yScale(car[parameters.category])! + (yScale.bandwidth() / 2)} style={{ textAlign: 'center', dominantBaseline: 'middle', fontSize: 14 }}>{car.count}</text>
+        </g>
+      );
+    });
+  }, [barsTable, colorScale, parameters.category, xScale, yScale]);
+
+  return yScale && xScale ? (
+    <svg ref={ref} style={{ height: '200px', width: '550px', fontFamily: 'BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif' }}>
+      <XAxisBar
+        xScale={xScale}
+        yRange={yScale.range() as [number, number]}
+        vertPosition={height + margin.top}
+        showLines={false}
+        label="Count"
+        ticks={xScale.ticks(5).map((value) => ({
+          value: value.toString(),
+          offset: xScale(value),
+        }))}
+      />
+
+      {yScale ? (
+        <YAxisBar
+          yScale={yScale}
+          horizontalPosition={margin.left}
+          xRange={xScale.range() as [number, number]}
+          label={parameters.category}
+          ticks={colorScale.domain().map((country) => ({
+            value: country,
+            offset: yScale(country)! + yScale.bandwidth() / 2,
+          }))}
+        />
+      ) : null }
+      { rects }
+    </svg>
+  ) : <Loader />;
+}
+
+export default Bar;

src/public/example-brush-interactions/assets/BrushPlot.tsx

@@ -0,0 +1,183 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { Loader, Stack } from '@mantine/core';
+import {
+  useCallback, useEffect, useMemo, useState,
+} from 'react';
+import { from, escape } from 'arquero';
+import ColumnTable from 'arquero/dist/types/table/column-table';
+import { Registry, initializeTrrack } from '@trrack/core';
+import * as d3 from 'd3';
+import debounce from 'lodash.debounce';
+import { Scatter } from './Scatter';
+import { Bar } from './Bar';
+import { StimulusParams } from '../../../store/types';
+import { BrushParams, BrushState, SelectionType } from './types';
+
+export function BrushPlot({
+  parameters, setAnswer, provenanceState, updateState = () => null,
+}: StimulusParams<BrushParams, {all: {brush: BrushState}}> & {updateState: (b: BrushState) => void}) {
+  const [filteredTable, setFilteredTable] = useState<ColumnTable | null>(null);
+  const [brushState, setBrushState] = useState<BrushState>(provenanceState ? (provenanceState.all.brush || provenanceState.all) : {
+    hasBrush: false, x1: 0, y1: 0, x2: 0, y2: 0, ids: [],
+  });
+
+  useEffect(() => {
+    if (provenanceState) {
+      setBrushState(provenanceState.all.brush || provenanceState.all);
+    } else {
+      setBrushState({
+        hasBrush: false, x1: 0, y1: 0, x2: 0, y2: 0, ids: [],
+      });
+    }
+  }, [provenanceState]);
+
+  const [data, setData] = useState<any[] | null>(null);
+
+  // load data
+  useEffect(() => {
+    d3.csv(`./data/${parameters.dataset}.csv`).then((_data) => {
+      setData(_data);
+    });
+  }, [parameters]);
+
+  const fullTable = useMemo(() => {
+    if (data) {
+      return from(data);
+    }
+
+    return null;
+  }, [data]);
+
+  // creating provenance tracking
+  const { actions, trrack } = useMemo(() => {
+    const reg = Registry.create();
+
+    const brush = reg.register('brush', (state, currBrush: BrushState) => {
+      state.all = { brush: currBrush };
+      return state;
+    });
+
+    const brushMove = reg.register('brushMove', (state, currBrush: BrushState) => {
+      state.all = { brush: currBrush };
+      return state;
+    });
+
+    const brushResize = reg.register('brushResize', (state, currBrush: BrushState) => {
+      state.all = { brush: currBrush };
+      return state;
+    });
+
+    const clearBrush = reg.register('brushClear', (state, currBrush: BrushState) => {
+      state.all = { brush: currBrush };
+      return state;
+    });
+
+    const trrackInst = initializeTrrack({
+      registry: reg,
+      initialState: {
+        all: {
+          hasBrush: false, x1: null, x2: null, y1: null, y2: null, ids: [],
+        },
+      },
+    });
+
+    return {
+      actions: {
+        brush,
+        brushMove,
+        brushResize,
+        clearBrush,
+      },
+      trrack: trrackInst,
+    };
+  }, []);
+
+  const moveBrushCallback = useCallback((selType: SelectionType, state: BrushState) => {
+    if (selType === 'drag') {
+      trrack.apply('Move Brush', actions.brushMove(state));
+    } else if (selType === 'handle') {
+      trrack.apply('Brush', actions.brush(state));
+    }
+  }, [actions, trrack]);
+
+  // debouncing the trrack callback
+  const debouncedCallback = useMemo(() => debounce(moveBrushCallback, 100, { maxWait: 100 }), [moveBrushCallback]);
+
+  // brush callback, updating state, finding the selected points, and pushing to trrack
+  const brushedSpaceCallback = useCallback((sel: [[number | null, number | null], [number | null, number | null]], xScale: any, yScale: any, selType: SelectionType, ids?: string[]) => {
+    if (!xScale || !yScale) {
+      return;
+    }
+
+    const xMin = xScale.invert(sel[0][0] || brushState.x1);
+    const xMax = xScale.invert(sel[1][0] || brushState.x2);
+
+    const yMin = yScale.invert(sel[1][1] || brushState.y2);
+    const yMax = yScale.invert(sel[0][1] || brushState.y1);
+
+    let _filteredTable = null;
+    if (selType === 'clear') {
+      _filteredTable = fullTable;
+    } else if (ids) {
+      const idSet = new Set(ids);
+      _filteredTable = fullTable!.filter(escape((d: any) => idSet.has(d[parameters.ids])));
+    } else if (parameters.brushType === 'Axis Selection') {
+      _filteredTable = fullTable!.filter(escape((d: any) => new Date(d[parameters.x]) >= new Date(xMin) && new Date(d[parameters.x]) <= new Date(xMax) && d[parameters.y] >= yMin && d[parameters.y] <= yMax));
+    } else {
+      _filteredTable = fullTable!.filter(escape((d: any) => d[parameters.x] >= xMin && d[parameters.x] <= xMax && d[parameters.y] >= yMin && d[parameters.y] <= yMax));
+    }
+
+    const newState = {
+      x1: sel[0][0] || brushState?.x1 || 0,
+      x2: sel[1][0] || brushState?.x2 || 0,
+      y1: sel[0][1] || brushState?.y1 || 0,
+      y2: sel[1][1] || brushState?.y2 || 0,
+      hasBrush: selType !== 'clear',
+      ids: selType !== 'clear' ? _filteredTable?.array('id') as string[] : [],
+    };
+
+    setBrushState(newState);
+
+    if (selType === 'drag' || selType === 'handle') {
+      debouncedCallback(selType, newState);
+    } else if (selType === 'clear') {
+      trrack.apply('Clear Brush', actions.clearBrush(newState));
+    }
+
+    setFilteredTable(_filteredTable);
+
+    updateState(newState);
+
+    setAnswer({
+      status: true,
+      provenanceGraph: trrack.graph.backend,
+      answers: {},
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [brushState, fullTable, parameters, trrack, setAnswer, debouncedCallback, actions]);
+
+  // Which table the bar chart uses, either the base or the filtered table if any selections
+  const barsTable = useMemo(() => {
+    if (filteredTable) {
+      return filteredTable?.groupby(parameters.category).count();
+    }
+    if (fullTable) {
+      return fullTable?.groupby(parameters.category).count();
+    }
+    return null;
+  }, [filteredTable, fullTable, parameters.category]);
+
+  const filteredCallback = useCallback((c: ColumnTable | null) => {
+    setFilteredTable(c);
+  }, []);
+
+  return data ? (
+    <Stack gap="xs">
+      <Scatter brushedPoints={brushState?.ids} data={data} params={parameters} brushType={parameters.brushType} setBrushedSpace={brushedSpaceCallback} brushState={brushState} setFilteredTable={filteredCallback} />
+      <Bar data={data} parameters={parameters} barsTable={barsTable} />
+    </Stack>
+  ) : <Loader />;
+}
+
+export default BrushPlot;