@adriansteffan/reactive 0.0.43 → 0.1.0

package/src/components/prolificending.tsx

@@ -1,5 +1,10 @@
 import { BaseComponentProps, getParam, registerComponentParams } from '../utils/common';
 import Text from '../components/text';
+import { registerSimulation, noopSimulate } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('ProlificEnding', null);
+registerSimulation('ProlificEnding', noopSimulate, {});
 
 registerComponentParams('ProlificEnding', [
   { name: 'cc', defaultValue: '', type: 'string', description: 'Completion code of the Profilic experiment (more commonly supplied via the code)' },

package/src/components/quest.tsx

@@ -3,6 +3,66 @@ import { defaultCss, Model, Question, Serializer } from 'survey-core';
 import { ReactQuestionFactory, Survey, SurveyQuestionElementBase } from 'survey-react-ui';
 import { ContrastLight } from 'survey-core/themes';
 import 'survey-core/survey-core.min.css';
+import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('Quest', 'session');
+
+registerSimulation('Quest', (trialProps, _experimentState, simulators, participant) => {
+  const responseData: Record<string, any> = {};
+  let totalDuration = 0;
+  const pages = trialProps.surveyJson?.pages || [{ elements: trialProps.surveyJson?.elements || [] }];
+  for (const page of pages) {
+    for (const el of page.elements || []) {
+      if (!el.name) continue;
+      const result = simulators.answerQuestion(el, participant);
+      participant = result.participantState;
+      responseData[el.name] = result.value;
+      totalDuration += result.duration ?? 0;
+    }
+  }
+  return { responseData, participantState: participant, duration: totalDuration };
+}, {
+  answerQuestion: (question: any, participant: any) => {
+    let value;
+    switch (question.type) {
+      case 'rating': {
+        const min = question.rateMin ?? 1, max = question.rateMax ?? 5;
+        value = min + Math.floor(Math.random() * (max - min + 1));
+        break;
+      }
+      case 'boolean': value = Math.random() > 0.5; break;
+      case 'text': case 'comment': value = 'simulated_response'; break;
+      case 'radiogroup': case 'dropdown': {
+        const c = question.choices?.[Math.floor(Math.random() * (question.choices?.length || 0))];
+        value = c !== undefined ? (typeof c === 'object' ? c.value : c) : null;
+        break;
+      }
+      case 'checkbox': {
+        if (question.choices?.length) {
+          const n = 1 + Math.floor(Math.random() * question.choices.length);
+          value = [...question.choices]
+            .sort(() => Math.random() - 0.5).slice(0, n)
+            .map((c: any) => typeof c === 'object' ? c.value : c);
+        }
+        break;
+      }
+      case 'matrix': {
+        if (question.rows?.length && question.columns?.length) {
+          value = Object.fromEntries(
+            question.rows.map((r: any) => {
+              const col = question.columns[Math.floor(Math.random() * question.columns.length)];
+              return [typeof r === 'object' ? r.value : r, typeof col === 'object' ? col.value : col];
+            }),
+          );
+        }
+        break;
+      }
+      default: value = null;
+    }
+    return { value, participantState: participant, duration: 1000 + Math.random() * 4000 };
+  },
+});
 
 type ComponentsMap = {
   [key: string]: ComponentType<any>;

package/src/components/storeui.tsx

@@ -1,5 +1,9 @@
 import { BaseComponentProps } from '../mod';
 import React, { useState, useEffect } from 'react';
+import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('StoreUI', 'storeui');
 
 interface BaseFieldConfig {
   type: 'string' | 'integer' | 'float' | 'boolean';
@@ -33,6 +37,19 @@ interface BooleanFieldConfig extends BaseFieldConfig {
 
 type FieldConfig = StringFieldConfig | NumberFieldConfig | BooleanFieldConfig;
 
+function buildFieldValues(fields: FieldConfig[], store?: Record<string, any>): Record<string, any> {
+  const values: Record<string, any> = {};
+  fields.forEach(field => {
+    values[field.storeKey] = store?.[field.storeKey] !== undefined ? store[field.storeKey] : field.defaultValue;
+  });
+  return values;
+}
+
+registerSimulation('StoreUI', (trialProps, experimentState, _simulators, participant) => {
+  const values = buildFieldValues(trialProps.fields || [], experimentState.store);
+  return { responseData: values, participantState: participant, storeUpdates: values };
+}, {});
+
 interface StoreUIProps extends BaseComponentProps {
   title?: string;
   description?: string;
@@ -56,17 +73,7 @@ function StoreUI({
   
   
   useEffect(() => {
-    const initialValues: Record<string, any> = {};
-    
-    fields.forEach(field => {
-      
-      initialValues[field.storeKey] = 
-        store?.[field.storeKey] !== undefined 
-          ? store[field.storeKey] 
-          : field.defaultValue;
-    });
-    
-    setValues(initialValues);
+    setValues(buildFieldValues(fields, store));
    
     const initialTouched: Record<string, boolean> = {};
     fields.forEach(field => {

package/src/components/text.tsx

@@ -1,5 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import { BaseComponentProps, now } from '../mod';
+import { registerSimulation } from '../utils/simulation';
+import { registerFlattener } from '../utils/upload';
+
+registerFlattener('Text', 'text');
+
+registerSimulation('Text', (trialProps, _experimentState, simulators, participant) => {
+  const result = simulators.respond(trialProps, participant);
+  return { responseData: result.value, participantState: result.participantState, duration: result.value.reactionTime };
+}, {
+  respond: (_input: any, participant: any) => ({
+    value: { key: 'button', reactionTime: 500 + Math.random() * 1500 },
+    participantState: participant,
+  }),
+});
 
 function Text({
   content,

package/src/components/upload.tsx

@@ -13,8 +13,53 @@ import {
   TrialData,
 } from '../utils/common';
 import { BlobWriter, TextReader, ZipWriter } from '@zip.js/zip.js';
-
 import { Filesystem, Directory, Encoding } from '@capacitor/filesystem';
+import { buildUploadFiles, convertArrayOfObjectsToCSV } from '../utils/upload';
+import { registerSimulation, getBackendUrl, getInitialParticipant } from '../utils/simulation';
+
+registerSimulation('Upload', async (trialProps, experimentState, _simulators, participant) => {
+  const sessionID = trialProps.sessionID || `sim_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+  const files = buildUploadFiles({
+    sessionID,
+    data: experimentState.data || [],
+    store: experimentState.store,
+    generateFiles: trialProps.generateFiles,
+    sessionData: trialProps.sessionData,
+    uploadRaw: trialProps.uploadRaw ?? true,
+  });
+
+  const initialParticipant = getInitialParticipant();
+  if (initialParticipant) {
+    files.push({
+      filename: `${sessionID}_participant_initial.csv`,
+      content: convertArrayOfObjectsToCSV([initialParticipant]),
+      encoding: 'utf8',
+    });
+    files.push({
+      filename: `${sessionID}_participant_final.csv`,
+      content: convertArrayOfObjectsToCSV([participant]),
+      encoding: 'utf8',
+    });
+  }
+
+  const backendUrl = getBackendUrl();
+  if (backendUrl) {
+    const payload = {
+      sessionId: sessionID,
+      files: files.map((f) => ({ ...f, encoding: f.encoding ?? 'utf8' })),
+    };
+    const res = await fetch(`${backendUrl}/data`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload),
+    });
+    if (!res.ok) {
+      console.error(`Simulation upload failed: ${res.status} ${res.statusText}`);
+    }
+  }
+
+  return { responseData: { files }, participantState: participant };
+}, {});
 
 interface UploadPayload {
   sessionId: string;
@@ -26,195 +71,22 @@ interface UploadResponse {
   message?: string;
 }
 
-// TODO: deduplicate values with upload function below
-registerComponentParams('Upload', [
+const UPLOAD_PARAMS = [
   {
     name: 'upload',
     defaultValue: true,
-    type: 'boolean',
+    type: 'boolean' as const,
     description: 'Upload the data at the end of the experiment?',
   },
   {
     name: 'download',
     defaultValue: false,
-    type: 'boolean',
+    type: 'boolean' as const,
     description: 'Locally download the data at the end of the experiment?',
   },
-]);
-
-type DataObject = {
-  [key: string]: string | number | boolean | null | undefined;
-};
-
-function escapeCsvValue(value: any): string {
-  if (value === null || value === undefined) {
-    return '';
-  }
-
-  const stringValue = String(value);
-
-  if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
-    const escapedValue = stringValue.replace(/"/g, '""');
-    return `"${escapedValue}"`;
-  }
-
-  return stringValue;
-}
-
-function convertArrayOfObjectsToCSV(data: DataObject[]): string {
-  if (!data || data.length === 0) {
-    return '';
-  }
-
-  const headerSet = new Set<string>();
-  data.forEach((obj) => {
-    Object.keys(obj).forEach((key) => {
-      headerSet.add(key);
-    });
-  });
-  const headers = Array.from(headerSet);
-
-  const headerRow = headers.map((header) => escapeCsvValue(header)).join(',');
-
-  const dataRows = data.map((obj) => {
-    return headers
-      .map((header) => {
-        const value = obj[header];
-        return escapeCsvValue(value);
-      })
-      .join(',');
-  });
-
-  return [headerRow, ...dataRows].join('\n');
-}
-
-// TODO: for better cohesion move this into the components on registration
-const defaultFlatteningFunctions = {
-  'CanvasBlock': (item: TrialData) => {
-    const responseData = item.responseData;
-    if (Array.isArray(responseData)) {
-      return responseData.map((i) => ({
-        block: item.name,
-        ...i,
-      }));
-    }
-    return [];
-  }
-}
-
-const transform = ({responseData, ...obj}: any) => ({ ...obj, ...Object.entries(responseData || {}).reduce((acc, [k, v]) => ({...acc, [`data_${k}`]: v}), {}) });
-
-function combineTrialsToCsv(
-  data: any[],
-  filename: string,
-  names: string[],
-  flatteningFunctions: Record<string, (item: any) => any[] | Record<string, any[]>>,
-  fun?: (obj: any) => any,
-): FileUpload | FileUpload[] {
-
-  // Collect all flattener results first, filtering out completely empty results
-  const allResults: (any[] | Record<string, any[]>)[] = names.flatMap((name) => {
-    const matchingItems = data.filter((d) => d.name === name);
-
-    return matchingItems.map((item) => {
-      const flattener = item.type && flatteningFunctions[item.type];
-      const result = flattener ? flattener(item) : [transform(item)];
-
-      // Filter out completely empty results
-      if (Array.isArray(result) && result.length === 0) {
-        return null; // Signal this trial should be completely skipped
-      }
-
-      if (result && typeof result === 'object' && !Array.isArray(result)) {
-        // Check if all arrays in the object are empty
-        const hasAnyData = Object.values(result).some(val =>
-          Array.isArray(val) && val.length > 0
-        );
-        if (!hasAnyData) {
-          return null; // Signal this trial should be completely skipped
-        }
-      }
+];
+registerComponentParams('Upload', UPLOAD_PARAMS);
 
-      return result;
-    });
-  }).filter(result => result !== null);
-
-  // Check if any result is a multi-table object (has string keys with array values)
-  const hasMultiTable = allResults.some((result) =>
-    result &&
-    typeof result === 'object' &&
-    !Array.isArray(result) &&
-    Object.keys(result).some(key => Array.isArray(result[key]))
-  );
-
-  if (!hasMultiTable) {
-    // all results are arrays, combine them into one CSV
-    const processedData = allResults
-      .flatMap((result) => Array.isArray(result) ? result : [])
-      .map((x) => (fun ? fun(x) : x));
-
-    // Skip creating CSV if all flatteners returned empty arrays
-    if (processedData.length === 0) {
-      return [];
-    }
-
-    return {
-      filename,
-      encoding: 'utf8' as const,
-      content: convertArrayOfObjectsToCSV(processedData),
-    };
-  }
-
-  // handle multi-table results
-  // Collect all table keys from all results
-  const allTableKeys = new Set<string>();
-  allResults.forEach((result) => {
-    if (result && typeof result === 'object' && !Array.isArray(result)) {
-      Object.keys(result).forEach(key => {
-        if (Array.isArray(result[key])) {
-          allTableKeys.add(key);
-        }
-      });
-    }
-  });
-
-  // Create separate CSV files for each table key
-  const files: FileUpload[] = [];
-
-  for (const tableKey of allTableKeys) {
-    const tableData = allResults.flatMap((result) => {
-      if (Array.isArray(result)) {
-        // If this result is a simple array, include it in all tables for backward compatibility
-        return result;
-      } else if (result && typeof result === 'object' && result[tableKey]) {
-        // If this result has data for this table key, include it
-        return result[tableKey];
-      }
-      return [];
-    }).map((x) => (fun ? fun(x) : x));
-
-    // Skip creating CSV if all flatteners returned empty arrays for this table
-    if (tableData.length === 0) {
-      continue;
-    }
-
-    // Remove file extension from filename and add table key
-    const baseFilename = filename.replace(/\.csv$/, '');
-
-    files.push({
-      filename: `${baseFilename}_${tableKey}.csv`,
-      encoding: 'utf8' as const,
-      content: convertArrayOfObjectsToCSV(tableData),
-    });
-  }
-
-  // Return empty array if no files were created
-  if (files.length === 0) {
-    return [];
-  }
-
-  return files.length === 1 ? files[0] : files;
-}
 
 interface FileBackend {
   directoryExists(path: string): Promise<boolean>;
@@ -345,30 +217,22 @@ const getUniqueDirectoryName = async (
   return uniqueSessionID;
 };
 
-type CSVBuilder = {
-  filename?: string;
-  trials?: string[];
-  fun?: (row: Record<string, any>) => Record<string, any>;
-};
-
 export default function Upload({
   data,
   next,
   store,
   sessionID,
   generateFiles,
-  sessionCSVBuilder,
-  trialCSVBuilder,
+  sessionData,
   uploadRaw = true,
   autoUpload = false,
   androidFolderName,
 }: BaseComponentProps & {
   sessionID?: string | null;
-  generateFiles: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
-  sessionCSVBuilder: CSVBuilder;
-  trialCSVBuilder: {flatteners: Record<string, ((item: TrialData) => Record<string, any>[] | Record<string, Record<string, any>[]>)>, builders: CSVBuilder[]};
-  uploadRaw: boolean;
-  autoUpload: boolean;
+  generateFiles?: (sessionID: string, data: TrialData[], store?: Store) => FileUpload[];
+  sessionData?: Record<string, any>;
+  uploadRaw?: boolean;
+  autoUpload?: boolean;
   androidFolderName?: string;
 }) {
   const [uploadState, setUploadState] = useState<'initial' | 'uploading' | 'success' | 'error'>(
@@ -376,8 +240,10 @@ export default function Upload({
   );
   const uploadInitiatedRef = useRef(false);
 
-  const shouldUpload = getParam('upload', true, 'boolean');
-  const shouldDownload = getParam('download', false, 'boolean');
+  const uploadParam = UPLOAD_PARAMS.find(p => p.name === 'upload')!;
+  const downloadParam = UPLOAD_PARAMS.find(p => p.name === 'download')!;
+  const shouldUpload = getParam(uploadParam.name, uploadParam.defaultValue, uploadParam.type);
+  const shouldDownload = getParam(downloadParam.name, downloadParam.defaultValue, downloadParam.type);
 
   const uploadData = useMutation({
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -427,97 +293,14 @@ export default function Upload({
 
     const sessionIDUpload = sessionID ?? uuidv4();
 
-    const files: FileUpload[] = generateFiles ? generateFiles(sessionIDUpload, data, store) : [];
-    if (uploadRaw) {
-      files.push({
-        filename: `${sessionIDUpload}.raw.json`,
-        content: JSON.stringify(data),
-        encoding: 'utf8',
-      });
-    }
-
-    if (sessionCSVBuilder) {
-      type ParamDetails = {
-        value?: any;
-        defaultValue: any;
-      };
-      let paramsDict: Record<string, any> = {};
-      const paramsSource: Record<string, ParamDetails | any> | undefined =
-        data?.[0]?.responseData?.params;
-      if (paramsSource && typeof paramsSource === 'object' && paramsSource !== null) {
-        paramsDict = Object.entries(paramsSource).reduce(
-          (
-            accumulator: Record<string, any>,
-            [paramName, paramDetails]: [string, ParamDetails | any],
-          ) => {
-            if (
-              paramDetails &&
-              typeof paramDetails === 'object' &&
-              'defaultValue' in paramDetails
-            ) {
-              const chosenValue = paramDetails.value ?? paramDetails.defaultValue;
-              accumulator[paramName] = chosenValue;
-            }
-            return accumulator;
-          },
-          {} as Record<string, any>,
-        );
-      }
-
-      let content = {
-        sessionID: sessionIDUpload,
-        userAgent: data[0].responseData.userAgent,
-        ...paramsDict,
-      };
-
-      if (
-        sessionCSVBuilder.trials &&
-        Array.isArray(sessionCSVBuilder.trials) &&
-        sessionCSVBuilder.trials.length > 0
-      ) {
-        for (const trialName of sessionCSVBuilder.trials) {
-          const matchingDataElement = data.find((element) => element.name === trialName);
-
-          if (matchingDataElement?.responseData) {
-            if (
-              typeof matchingDataElement.responseData === 'object' &&
-              matchingDataElement.responseData !== null
-            ) {
-              content = { ...content, ...matchingDataElement.responseData };
-            }
-          }
-        }
-      }
-
-      files.push({
-        content: convertArrayOfObjectsToCSV([
-          sessionCSVBuilder.fun ? sessionCSVBuilder.fun(content) : content,
-        ]),
-        filename: `${sessionIDUpload}${sessionCSVBuilder.filename}.csv`,
-        encoding: 'utf8' as const,
-      });
-    }
-
-    if (trialCSVBuilder) {
-      for (const builder of trialCSVBuilder.builders) {
-        const result = combineTrialsToCsv(
-          data,
-          `${sessionIDUpload}${builder.filename}.csv`,
-          builder.trials ?? [],
-          {...defaultFlatteningFunctions, ...trialCSVBuilder.flatteners},
-          builder.fun,
-        );
-
-        if (Array.isArray(result)) {
-          // Only push files if the array is not empty
-          if (result.length > 0) {
-            files.push(...result);
-          }
-        } else {
-          files.push(result);
-        }
-      }
-    }
+    const files = buildUploadFiles({
+      sessionID: sessionIDUpload,
+      data,
+      store,
+      generateFiles,
+      sessionData,
+      uploadRaw,
+    });
 
     try {
       const payload: UploadPayload = {
@@ -616,7 +399,7 @@ export default function Upload({
           </div>
           <button
             onClick={handleUpload}
-            className='px-4 py-2 cursor-pointer bg-blue-500 text-white rounded-sm hover:bg-blue-600 transition-colors'
+            className='cursor-pointer bg-white px-8 py-3 border-2 border-black font-bold text-black text-lg rounded-xl shadow-[2px_2px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
           >
             Try Again
           </button>

package/src/index.css

@@ -31,26 +31,6 @@
 }
 
 
-@keyframes slideDown {
-  0% {
-    transform: translateY(-10px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still

package/src/mod.tsx

@@ -4,6 +4,8 @@ export type { BaseComponentProps, ExperimentConfig };
 
 export * from './utils/array';
 export * from './utils/common';
+export * from './utils/simulation';
+export { registerFlattener } from './utils/upload';
 export * from './components';
 
 export * from 'react-toastify';