Github website: https://wimpouw.github.io/DIMS_dashboard/

To be updated

Create this exact folder structure:

/your-website/
├── index.html                    # Main HTML file
├── config.json                   # Dataset configuration  
├── css/
│   ├── reset.css                 # Your dashboard styles
├── js/
│   ├── app.js                    # Main application logic
│   └── video-component.js        # Enhanced video component
└── assets/
    ├── timeseries/
    │   ├── 3120_syncbody.csv      # Time + one measurement column
    │   ├── 3120_neuralsync.csv    # Time + one measurement column
    │   ├── 3120_neuralsync2.csv   # Time + one measurement column
    │   └── 3120_neuralsync3.csv   # Time + one measurement column
    ├── transcripts/
    │   └── 3120_transcript.json
    └── videos/
        └── 3120.mp4

• index.html - The main HTML file (now uses external CSS)
• config.json - Configuration file
• css/styles.css - Dashboard styles (extracted from HTML)
• js/app.js - Main application logic (simplified for single-column CSVs)
• js/video-component.js - Enhanced video component with reliable time seeking

1. add to config
2. run script

Place your existing reset.css in the css/ folder.

Each CSV should contain EXACTLY:

• Time column (required for merging)
• One measurement column (any name you want)

Example CSV structure:

Time,synchrony_measure
0.0,0.5
0.1,0.6
0.2,0.4
...

{
    "videoIDs": ["3120"],
    "dataTypes": {
        "3120": ["syncbody", "neuralsync", "neuralsync2", "neuralsync3"]
    },
    "defaultWindowSize": 5,
    "title": "DIMS Dashboard",
    "subtitle": "Multimodal Synchrony Exploration Visualization",
    "authors": "Grace Qiyuan Miao, James Trujillo, Landry S. Bulls, Mark A. Thornton, Rick Dale, Wim Pouw",
    "contacts": "contacts: [email protected] & [email protected]"
}

This will create 4 separate subplots:

• syncbody_synchrony_measure
• neuralsync_synchrony_measure
• neuralsync2_synchrony_measure
• neuralsync3_synchrony_measure

Deploy to any static hosting service:

• GitHub Pages
• Netlify
• Vercel
• Any web server

The video segmenting should now work reliably with the enhanced React component and simplified data structure!