diff --git a/.llms/learnings.md b/.llms/learnings.md index dc5fd69..30deab0 100644 --- a/.llms/learnings.md +++ b/.llms/learnings.md @@ -8,3 +8,20 @@ Format: brief heading + explanation + (optional) relevant file paths. --- + +## Styling System (post Phase 4 migration) + +The app uses shadcn/ui + Tailwind CSS. CSS modules have been fully removed. Key conventions: +- **Brand color**: `bg-brand` / `text-brand` (teal `#007c70`) — defined in `tailwind.config.js` +- **Accent color**: `border-accent` (gold `#ffc107`) — used for nav active/visited underline indicators +- **Signal quality colors**: `text-signal-great/ok/bad/none` — defined in Tailwind config +- **shadcn components** in `src/renderer/components/ui/`: Button, Card, Dialog, DropdownMenu, Table, Select, Badge, utils +- **Multi-selects** (` - {this.state.eegFilePaths.map((eegFilePath) => ( - - ))} - - {this.renderEpochLabels()} - +

Overview

+

+ Load cleaned datasets from different subjects and view how the + EEG differs between electrodes +

+

Select Clean Datasets

+ + {this.renderEpochLabels()}
@@ -437,27 +384,23 @@ export default class Analyze extends Component { case ANALYZE_STEPS.ERP: return ( <> -
-
-

ERP

-

- The event-related potential represents EEG activity elicited - by a particular sensory event -

- -
- {this.renderEpochLabels()} -
+
+

ERP

+

+ The event-related potential represents EEG activity elicited + by a particular sensory event +

+ +
+ {this.renderEpochLabels()}
@@ -467,46 +410,41 @@ export default class Analyze extends Component { return ( <>
-
-

Overview

-

- Load datasets from different subjects and view behavioral results -

-
- Datasets - -
- -
-

Dependent Variable

- +

Overview

+

+ Load datasets from different subjects and view behavioral results +

+
+ Datasets +
+ +
+

Dependent Variable

+
-
-
+
+
- - - + {(['datapoints', 'errorbars', 'whiskers'] as const).map((mode) => ( + + ))}
{this.state.isSidebarVisible && ( -
+
{this.renderHelpContent()}
)} @@ -553,7 +483,7 @@ export default class Analyze extends Component { render() { return ( -
+
{ activeStep={this.state.activeStep} onStepClick={this.handleStepClick} /> -
+
{this.renderSectionContent()}
diff --git a/src/renderer/components/CleanComponent/CleanSidebar.tsx b/src/renderer/components/CleanComponent/CleanSidebar.tsx index 4d70de4..b79778e 100644 --- a/src/renderer/components/CleanComponent/CleanSidebar.tsx +++ b/src/renderer/components/CleanComponent/CleanSidebar.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { Button } from '../ui/button'; -import styles from '../styles/common.module.css'; enum HELP_STEP { MENU = 0, @@ -21,6 +20,7 @@ interface Props { interface State { helpStep: HELP_STEP; } + export default class CleanSidebar extends Component { constructor(props) { super(props); @@ -59,11 +59,17 @@ export default class CleanSidebar extends Component { renderMenu() { return (
-

What would you like to do?

-
+

What would you like to do?

+
★ Improve the signal quality of your sensors
-
+
⚠ Learn about how the subjects movements create noise
@@ -73,8 +79,8 @@ export default class CleanSidebar extends Component { renderHelp(header: string, content: string) { return ( <> -
-

{header}

+
+

{header}

{content}
@@ -139,12 +145,15 @@ export default class CleanSidebar extends Component { render() { return ( -
- +
+
+ +
{this.renderHelpContent()}
); diff --git a/src/renderer/components/CleanComponent/index.tsx b/src/renderer/components/CleanComponent/index.tsx index 672774a..a92901e 100644 --- a/src/renderer/components/CleanComponent/index.tsx +++ b/src/renderer/components/CleanComponent/index.tsx @@ -3,8 +3,6 @@ import path from 'pathe'; import { Link } from 'react-router-dom'; import { isNil, isString } from 'lodash'; import { Button } from '../ui/button'; -import styles from '../styles/collect.module.css'; -import commonStyles from '../styles/common.module.css'; import { EXPERIMENTS, DEVICES } from '../../constants/constants'; import { readWorkspaceRawEEGData } from '../../utils/filesystem/storage'; import CleanSidebar from './CleanSidebar'; @@ -73,11 +71,7 @@ export default class Clean extends Component { if (acc.find((subject) => subject.key === curr)) { return acc; } - return acc.concat({ - key: curr, - text: curr, - value: curr, - }); + return acc.concat({ key: curr, text: curr, value: curr }); }, []), eegFilePaths: workspaceRawData.map((filepath) => ({ key: filepath.name, @@ -154,18 +148,18 @@ export default class Clean extends Component { }); return ( -
+
{this.state.isSidebarVisible && (
)} -
+

Clean

-
+

Select & Clean

Ready to clean some data? Select a subject and one or more diff --git a/src/renderer/components/CollectComponent/ConnectModal.tsx b/src/renderer/components/CollectComponent/ConnectModal.tsx index fd53b24..db6b3dd 100644 --- a/src/renderer/components/CollectComponent/ConnectModal.tsx +++ b/src/renderer/components/CollectComponent/ConnectModal.tsx @@ -9,7 +9,6 @@ import { CONNECTION_STATUS, SCREENS, } from '../../constants/constants'; -import styles from '../styles/collect.module.css'; import { SignalQualityData } from '../../constants/interfaces'; import { DeviceActions } from '../../actions'; @@ -37,9 +36,6 @@ enum INSTRUCTION_PROGRESS { } export default class ConnectModal extends Component { - // handleSearch: () => void; - - // handleStartTutorial: () => void; static getDeviceName(device: any) { if (!isNil(device)) { return isNil(device.name) ? device.id : device.name; @@ -81,9 +77,7 @@ export default class ConnectModal extends Component { handleSearch() { this.setState({ instructionProgress: 0 }); - this.props.DeviceActions.SetDeviceAvailability( - DEVICE_AVAILABILITY.SEARCHING - ); + this.props.DeviceActions.SetDeviceAvailability(DEVICE_AVAILABILITY.SEARCHING); } handleConnect() { @@ -102,7 +96,7 @@ export default class ConnectModal extends Component { {this.props.availableDevices.map((device) => (

  • this.setState({ selectedDevice: device })} > {this.state.selectedDevice === device ? '✓' : '○'} @@ -116,14 +110,14 @@ export default class ConnectModal extends Component { renderContent() { if (this.props.deviceAvailability === DEVICE_AVAILABILITY.SEARCHING) { return ( -

    +

    Searching for available headset(s)...

    ); } if (this.props.connectionStatus === CONNECTION_STATUS.CONNECTING) { return ( -

    +

    Connecting to {ConnectModal.getDeviceName(this.state.selectedDevice)}...

    ); @@ -131,7 +125,7 @@ export default class ConnectModal extends Component { if (this.state.instructionProgress === INSTRUCTION_PROGRESS.TURN_ON) { return ( <> -

    Turn your headset on

    +

    Turn your headset on

    Make sure your headset is on and fully charged.

    @@ -143,7 +137,7 @@ export default class ConnectModal extends Component { {(this.state.instructionProgress as number) !== 0 && (
    • {this.renderHelpContent()} @@ -161,6 +164,12 @@ export class HelpSidebar extends Component { export const HelpButton: React.FC<{ onClick: () => void }> = ({ onClick }) => { return ( - + ); }; diff --git a/src/renderer/components/CollectComponent/PreTestComponent.tsx b/src/renderer/components/CollectComponent/PreTestComponent.tsx index f10c578..db45820 100644 --- a/src/renderer/components/CollectComponent/PreTestComponent.tsx +++ b/src/renderer/components/CollectComponent/PreTestComponent.tsx @@ -6,7 +6,6 @@ import SignalQualityIndicatorComponent from '../SignalQualityIndicatorComponent' import PreviewExperimentComponent from '../PreviewExperimentComponent'; import PreviewButton from '../PreviewButtonComponent'; import { HelpSidebar, HelpButton } from './HelpSidebar'; -import styles from '../styles/collect.module.css'; import { getExperimentFromType } from '../../utils/labjs/functions'; import { ExperimentActions, DeviceActions } from '../../actions'; import { @@ -102,10 +101,10 @@ export default class PreTestComponent extends Component { plottingInterval={PLOTTING_INTERVAL} />
      -
    • ● Strong Signal
      • -
    • ● Mediocre signal
      • -
    • ● Weak Signal
      • -
    • ● No Signal
      • +
    • ● Strong Signal
      • +
    • ● Mediocre signal
      • +
    • ● Weak Signal
      • +
    • ● No Signal
    ); @@ -119,13 +118,13 @@ export default class PreTestComponent extends Component { render() { return ( -
    +
    {this.state.isSidebarVisible && (
    )} -
    +

    Collect

    @@ -145,7 +144,7 @@ export default class PreTestComponent extends Component {
    -
    +
    {this.renderSignalQualityOrPreview()}
    diff --git a/src/renderer/components/CollectComponent/RunComponent.tsx b/src/renderer/components/CollectComponent/RunComponent.tsx index 273c2b6..891ef43 100644 --- a/src/renderer/components/CollectComponent/RunComponent.tsx +++ b/src/renderer/components/CollectComponent/RunComponent.tsx @@ -1,7 +1,6 @@ import React, { useCallback, useState } from 'react'; import { Button } from '../ui/button'; import { Link } from 'react-router-dom'; -import styles from '../styles/common.module.css'; import InputCollect from '../InputCollect'; import { injectEmotivMarker } from '../../utils/eeg/emotiv'; import { injectMuseMarker } from '../../utils/eeg/muse'; @@ -25,10 +24,6 @@ interface Props { ExperimentActions: typeof globalExperimentActions; } -interface State { - isInputCollectOpen: boolean; -} - const Run: React.FC = ({ type, title, @@ -95,26 +90,22 @@ const Run: React.FC = ({ ); return ( -
    -
    +
    +
    {!isRunning && ( -
    -
    +
    +

    {title}

    -
    - Subject ID: {subject} -
    -
    - Group Name: {group} -
    -
    - Session Number: {session} -
    + > + ✏ + +
    Subject ID: {subject}
    +
    Group Name: {group}
    +
    Session Number: {session}