Earmark/audiogram-beta
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Earmark:c4c60c0a5977412a1cb19d5851b7f461d3016d7c
Branches Tags
Earmark:master
Earmark:squarespace-tweaks
Earmark:feature/layout-updates
Earmark:feature/typescript-definitions
...
compare: Earmark:a4ab8a79dfd8288662bd16a2d1911964e23d57af
Branches Tags
Earmark:squarespace-tweaks
Earmark:master
Earmark:feature/layout-updates
Earmark:feature/typescript-definitions

2 Commits
c4c60c0a59 ... a4ab8a79df

Author SHA1 Message Date
Seth Trowbridge
a4ab8a79df use ranges for tone params 2022-12-03 21:40:23 -05:00
Seth Trowbridge
40b0589583 cleanup 2022-12-03 19:05:26 -05:00
7 changed files with 243 additions and 196 deletions
Show Stats Expand all files Collapse all files

7
.vscode/settings.json vendored
View File

@ -1,4 +1,9 @@
{
"deno.enable": true,
"deno.unstable": true
"deno.unstable": true,
"deno.codeLens.testArgs": [
"--allow-all",
"--no-check",
"--no-lock"
]
}

3
deno.json
View File

@ -2,6 +2,7 @@
"tasks":
{
"fs": "deno run -A --no-lock https://deno.land/std@0.166.0/http/file_server.ts",
"test": "deno test test/store_test.js --no-lock --watch"
"test": "deno test --no-lock --watch test/store_test.js",
"test-debug": "deno test --no-lock --inspect-brk test/store_test.js"
}
}

2
index.html
View File

@ -1,2 +1,2 @@
<div id="app"></div>
<script type="module" src="app.js"></script>
<script type="module" src="src/app.js"></script>

54
src/app.js
View File

@ -3,6 +3,12 @@ import * as TW from "https://esm.sh/@twind/core@1.0.1";
import TWPreTail from "https://esm.sh/@twind/preset-tailwind@1.0.1";
import TWPreAuto from "https://esm.sh/@twind/preset-autoprefix@1.0.1";
import * as UI from "./ui.js";
import { Reducer, Initial } from "./store.js";
import React from "https://esm.sh/preact@10.11.3/compat";
import {html} from "https://esm.sh/htm@3.1.1/preact";
/** @type {TW.TwindConfig} */
const Configure = {
theme:
@ -70,19 +76,39 @@ ShadowDOM.append(ShadowCSS);
ShadowDOM.append(ShadowDiv);
TW.observe(TW.twind(Configure, TW.cssom(ShadowCSS)), ShadowDiv);
import * as UI from "./ui.js";
import {render} from "https://esm.sh/preact@10.11.3/compat";
import {html} from "https://esm.sh/htm@3.1.1/preact";
render(html`
<${UI.Button} icon="+">hey!<//>
<${UI.Button} light>Left<//>
<${UI.Button} inactive>Right<//>
<${UI.Button} disabled>Right<//>
<${UI.Chart}>
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
<${UI.Mark} right=${true} x=${"20%"} y="20%" />
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
<${UI.Mark} right=${false}/>
</svg>
const StoreContext = React.createContext(null);
const StoreProvider =(props)=>
{
const reducer = React.useReducer(Reducer, Initial);
return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
}
const StoreConsumer =()=> React.useContext(StoreContext);
const Deep =()=>
{
const [State, Dispatch] = React.useContext(StoreContext);
return html`
<${UI.Button} onClick=${()=>Dispatch({Name:"Stim", Data:1})} disabled=${State.Stim.Value == State.Stim.Max}>
${State.Stim.Value}
<//>`;
}
React.render(html`
<${StoreProvider}>
<${UI.Button} icon="+">hey!<//>
<${UI.Button} light>Left<//>
<${UI.Button} inactive>Right<//>
<${UI.Button} disabled>Right<//>
<${Deep}/>
<${UI.Chart}>
<svg class="absolute top-0 w-full h-full overflow-visible stroke(blue-700 bold draw)">
<${UI.Mark} right=${true} x=${"20%"} y="20%" />
<${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
<${UI.Mark} right=${false}/>
<line x1=${"10%"} y1=${"10%"} x2=${"50%"} y2=${"50%"} class="stroke-2 opacity-60" />
</svg>
<//>
<//>
`, ShadowDiv);

109
src/store.js
View File

@ -26,51 +26,37 @@ export const ColumnLookup =(inFrequency)=>
};
/** @typedef {{Min:number, Max:number}} Limit */
/** @typedef {(inValue:number, inLimit:Limit)=>number} LimitUse */
/** @type {Record<string, Limit>} */
export const ToneLimit =
{
Freq: { Min: 0, Max: ColumnMapping.length-1 },
Stim: { Min: -10, Max: 120 },
Chan: { Min: 0, Max: 1},
};
/** @type {LimitUse} */
export const LimitCut =(inValue, inLimit)=>
{
if(inValue < inLimit.Min){ return inLimit.Min; }
else if(inValue > inLimit.Max) { return inLimit.Max; }
else{ return inValue; }
};
/** @type {LimitUse} */
export const LimitMap =(inValue, inLimit)=>(inValue-inLimit.Min)/(inLimit.Max-inLimit.Min);
/** @type {(freq:TestFrequency, chan:number, user:boolean)=>TestFrequencySample|undefined} */
export const MarkGet =(freq, chan, user)=> freq[/** @type {"UserL"|"UserR"|"TestL"|"TestR"} */ (`${user ? "User" : "Test"}${chan ? "R" : "L"}`)];
/** @type {(freq:TestFrequency, chan:number, mark:TestFrequencySample|undefined)=>TestFrequencySample|undefined} */
export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = mark;
/** @typedef {{Min:number, Max:number, Value:number, Step:number}} Range */
/** @typedef {{Stim:number, Resp:boolean}} TestFrequencySample */
/** @typedef {{Hz:number, TestL:TestFrequencySample, TestR:TestFrequencySample, UserL?:TestFrequencySample, UserR?:TestFrequencySample}} TestFrequency */
/** @typedef {{Name:string, Plot:Array<TestFrequency>, Draw?:DrawTest}} Test */
/** @typedef {{Name:string, Plot:Array<TestFrequency>}} Test */
/** @typedef {{Test?:Test, Freq?:TestFrequency, Mark?:TestFrequencySample}} Context */
/** @typedef {{Chan:number, Freq:number, Stim:number, Live:Context, Tests:Array<Test>}} State */
/** @typedef {{Chan:Range, Freq:Range, Stim:Range, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array<Test>}} State */
/** @type {State} */
export const Initial =
{
Chan: 0,
Freq: 3,
Stim: 30,
Chan: { Min:0, Max:1, Value:0, Step:1 },
Freq: { Min:2, Max:8, Value:2, Step:1 },
Stim: { Min:-10, Max:120, Value:30, Step:5 },
Live:
{
Test: undefined,
Freq: undefined,
Mark: undefined
},
Draw:
{
UserL:{Points:[], Paths:[]},
UserR:{Points:[], Paths:[]},
TestL:{Points:[], Paths:[]},
TestR:{Points:[], Paths:[]}
},
Tests: [
{
Name: "Patient A Asymmetric Notch",
@ -96,7 +82,7 @@ const Update =
{
Freq(inState)
{
const column = ColumnMapping[inState.Freq];
const column = ColumnMapping[inState.Freq.Value];
if(column && inState.Live.Test)
{
const hz = column[0];
@ -118,19 +104,19 @@ const Update =
const freq = inState.Live.Freq;
if(freq)
{
inState.Live.Mark = MarkGet(freq, inState.Chan, true);
inState.Live.Mark = MarkGet(freq, inState.Chan.Value, true);
return true;
}
return false;
}
};
/** @typedef {{X:number, Y:number, Resp:boolean}} DrawPoint */
/** @typedef {{X:number, Y:number, Mark:TestFrequencySample}} DrawPoint */
/** @typedef {{Points:Array<DrawPoint>, Paths:Array<Array<DrawPoint>>}} DrawGroup */
/** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */
/** @typedef {{User:DrawGroup, Test:DrawGroup}} DrawTest */
/** @type {(inTest:Test, inChannel:number, inIsUser:boolean)=>DrawGroup} */
export function Congtiguous(inTest, inChannel, inIsUser)
/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
export function Congtiguous(inTest, inChan, inStim, inIsUser)
{
/** @type {DrawGroup} */
const output = {Points:[], Paths:[]};
@ -142,14 +128,18 @@ export function Congtiguous(inTest, inChannel, inIsUser)
for(let i=0; i<inTest.Plot.length; i++)
{
plot = inTest.Plot[i];
const mark = MarkGet(plot, inChannel, inIsUser);
const mark = MarkGet(plot, inChan, inIsUser);
if(mark)
{
const lookup = ColumnLookup(plot.Hz);
if(lookup)
{
/** @type {DrawPoint} */
const point = { X: lookup[1]*100, Y: LimitMap(mark?.Stim, ToneLimit.Stim)*100, Resp: mark.Resp};
const point = {
X: lookup[1]*100,
Y: (mark.Stim - inStim.Min)/(inStim.Max - inStim.Min) * 100,
Mark: mark
};
output.Points.push(point);
if(mark.Resp)
@ -184,17 +174,30 @@ export function Reducer(inState, inAction)
clone.Live.Test = clone.Tests[Data];
Update.Freq(clone);
Update.Mark(clone);
clone.Draw = {
UserL: Congtiguous(clone.Live.Test, 0, clone.Stim, true ),
UserR: Congtiguous(clone.Live.Test, 1, clone.Stim, true ),
TestL: Congtiguous(clone.Live.Test, 0, clone.Stim, false),
TestR: Congtiguous(clone.Live.Test, 1, clone.Stim, false)
};
}
else if (Name == "Mark")
{
if(clone.Live.Freq)
if(clone.Live.Test && clone.Live.Freq)
{
clone.Live.Mark = MarkSet(clone.Live.Freq, clone.Chan, Data !== null ? {Stim:clone.Stim, Resp:Data} : undefined);
clone.Live.Mark = MarkSet(clone.Live.Freq, clone.Chan.Value, Data !== null ? {Stim:clone.Stim.Value, Resp:Data} : undefined);
clone.Draw = {...clone.Draw};
clone.Draw[clone.Chan.Value == 0 ? "UserL" : "UserR"] = Congtiguous(clone.Live.Test, clone.Chan.Value, clone.Stim, true);
}
}
else if( Name=="Stim" || Name=="Chan" || Name=="Freq")
{
clone[Name] = LimitCut(Data, ToneLimit[Name]);
const tone = {...clone[Name]};
tone.Value += Data*tone.Step;
if(tone.Value < tone.Min){ tone.Value = tone.Min; }
if(tone.Value > tone.Max){ tone.Value = tone.Max; }
clone[Name] = tone;
if(Name != "Stim")
{
Update.Freq(clone);
@ -203,4 +206,32 @@ export function Reducer(inState, inAction)
}
return clone;
}
}
/*
const minified =
[
1,
[
[20, 30, 50, 40, 60, 80],[20, 30, 50, 40, 60, 80]
]
];
const Expand =(inMin)=>
{
const outTests = [];
const inFreq = inMin[0];
for(let i=1; i<inMin.length; i++)
{
let inTest = inMin[i];
let inTestName = inTest[0];
const outTest = {
Name:inTest[0],
Plot:[]
};
outTests.push(outTest);
const outFreq = {Hz:0, TestL:{Stim:0, Resp:true}, TestR:{Stim:0, Resp:true}, UserL:undefined, UserR:undefined};
}
}
*/

13
src/ui.js
View File

@ -1,20 +1,19 @@
//@ts-check
import React from "https://esm.sh/preact@10.11.3/compat";
import { html } from "https://esm.sh/htm@3.1.1/preact";
import { ColumnMapping, ColumnLookup } from "./store.js";
import { ColumnMapping } from "./store.js";
/** @typedef {({children}:{children:React.ReactNode})=>JSX.Element} BasicElement */
/** @type {({children, icon, light, disabled, inactive}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean})=>JSX.Element} */
export function Button({children, icon, light, disabled, inactive})
/** @type {({children, icon, light, disabled, inactive, onClick}:{children:React.ReactNode, icon?:JSX.Element, light:boolean, disabled:boolean, inactive:boolean, onClick:()=>void})=>JSX.Element} */
export function Button({children, icon, light, disabled, inactive, onClick})
{
const [LightGet, LightSet] = React.useState(light);
const [FlashGet, FlashSet] = React.useState(0);
const handleClick =()=>
{
if(inactive||disabled){ return; }
LightSet(!LightGet);
FlashSet(FlashGet+1);
onClick();
};
return html`
@ -30,7 +29,7 @@ export function Button({children, icon, light, disabled, inactive})
<span class="relative">${icon}</span>
</span>` }
<span class="p-2 relative border-l(1 [#ffffff44])">
<span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${LightGet ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
<span class="absolute shadow-glow-yellow-500 top-0 left-1/2 w-6 h-[6px] bg-white rounded-full translate(-x-1/2 -y-1/2) transition-all duration-500 ${light ? "opacity-100" : "opacity-0 scale-y-0"}"></span>
${children}
</span>
</button>`;
@ -45,7 +44,7 @@ export function Chart({children})
ColumnMapping.forEach(([label, position, normal])=>
{
rules.push(html`
<span class="block absolute top-[-${inset}px] left-[${position}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}">
<span class="block absolute top-[-${inset}px] left-[${position*100}%] w-0 h-[calc(100%+${inset*2}px)] border-r(1 slate-400) ${!normal && "border-dashed"}">
<span class="block absolute top-0 left-0 -translate-x-1/2 -translate-y-full pb-${normal ? 4 : 1}">${label}</span>
</span>`);
});

251
test/store_test.js
View File

@ -1,139 +1,124 @@
import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts";
import { Reducer, ColumnMapping, Congtiguous } from "../src/store.js";
import { Reducer, ColumnMapping, Congtiguous, Initial } from "../src/store.js";
Deno.test("Store", async(t)=>
let state = {...Initial};
Deno.test("Initialize", async(t)=>
{
let state = {
Chan: 0,
Freq: 3,
Stim: 30,
Live:
{
Test: undefined,
Freq: undefined,
Mark: undefined
},
Tests: [
{
Name: "Patient A Asymmetric Notch",
Plot:
[
{ Hz: 500, TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
{ Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
]
}
await t.step("Tone Parameters Initialized", ()=>
{
assertEquals(state.Chan.Value, 0);
assertEquals(state.Freq.Value, 2);
assertEquals(state.Stim.Value, 30);
});
await t.step("A test exists with 500 and 1k hz plots", ()=>
{
assertEquals(state.Tests.length > 0, true);
const test = state.Tests[0];
assertEquals(test.Plot.length > 1, true);
assertEquals(test.Plot[0].Hz, 500);
assertEquals(test.Plot[1].Hz, 1000);
});
await t.step("Dispatch Test, Freq, Stim, and Chan updates", ()=>
{
state = Reducer(state, {Name:"Test", Data:0});
state = Reducer(state, {Name:"Chan", Data:1});
state = Reducer(state, {Name:"Freq", Data:1});
state = Reducer(state, {Name:"Stim", Data:1});
});
await t.step("Freq, Stim, and Chan have the correct values", ()=>
{
assertEquals(state.Chan.Value, 1);
assertEquals(state.Freq.Value, 3);
assertEquals(state.Stim.Value, 35);
});
await t.step("Live context values are correct", ()=>
{
assertEquals(state.Live.Test, state.Tests[0]);
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
assertEquals(state.Live.Mark, undefined, "(User) Mark is undefined");
});
});
Deno.test("Make Marks", async(t)=>
{
let state = {...Initial};
await t.step("Tone Parameters Initialized", ()=>
{
assertEquals(state.Chan.Value, 0);
assertEquals(state.Freq.Value, 2);
assertEquals(state.Stim.Value, 30);
});
await t.step("Dispatch Mark create", ()=>
{
state = Reducer(state, {Name:"Mark", Data:true});
});
await t.step("Check marked value", ()=>
{
assertEquals(state.Live.Freq.UserL !== undefined, true, `there will be a user mark for the left channel`);
assertEquals(state.Live.Freq.UserR === undefined, true, `but not the right`);
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
assertEquals(state.Live.Mark.Resp, true);
});
await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
{
state = Reducer(state, {Name:"Test", Data:0});
state = Reducer(state, {Name:"Freq", Data:1});
state = Reducer(state, {Name:"Stim", Data:1});
state = Reducer(state, {Name:"Chan", Data:1});
});
await t.step("Dispatch Mark create", ()=>
{
state = Reducer(state, {Name:"Mark", Data:false});
});
await t.step("Check marked value", ()=>
{
assertEquals(state.Live.Freq.UserR !== undefined, true, `there will be a user mark for the right channel`);
assertEquals(state.Live.Freq.UserL !== undefined, true, `and the left`);
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
assertEquals(state.Live.Mark.Resp, false);
});
await t.step("Live context values are correct", ()=>
{
assertEquals(state.Live.Test, state.Tests[0]);
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq.Value][0]);
assertEquals(state.Live.Mark.Stim, state.Stim.Value);
});
console.log(state.Draw);
});
Deno.test("Contiguous Lines", ()=>
{
/** @type {import("../src/store.js").Test} */
const model = {
Name:"",
Plot:[
{Hz: 500, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
{Hz: 1000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
{Hz: 2000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:false}},
{Hz: 3000, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
{Hz: 4000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
{Hz: 4000, TestL: {Stim:50, Resp:true}, TestR: {Stim:55, Resp:true}, UserL:{Stim:40, Resp:true}}
]
};
await t.step("Initialize", async(t)=>
{
await t.step("A test exists with 500 and 1k hz plots", ()=>
{
assertEquals(state.Tests.length > 0, true);
const test = state.Tests[0];
assertEquals(test.Plot.length > 1, true);
assertEquals(test.Plot[0].Hz, 500);
assertEquals(test.Plot[1].Hz, 1000);
});
await t.step("Dispatch Test, Freq, Stim, and Chan updates", ()=>
{
state = Reducer(state, {Name:"Test", Data:0});
state = Reducer(state, {Name:"Freq", Data:2});
state = Reducer(state, {Name:"Stim", Data:25});
state = Reducer(state, {Name:"Chan", Data:1});
});
await t.step("Freq, Stim, and Chan have the correct values", ()=>
{
assertEquals(state.Stim, 25);
assertEquals(state.Freq, 2);
assertEquals(state.Chan, 1);
});
await t.step("Live context values are correct", ()=>
{
assertEquals(state.Live.Test, state.Tests[0]);
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq][0]);
assertEquals(state.Live.Mark, undefined, "(User) Mark is undefined");
});
});
await t.step("Make Marks", async(t)=>
{
await t.step("Dispatch Mark create", ()=>
{
state = Reducer(state, {Name:"Mark", Data:true});
});
await t.step("Check marked value", ()=>
{
assertEquals(state.Live.Freq.UserR !== undefined, true, `there will be a user mark for the right channel`);
assertEquals(state.Live.Freq.UserL === undefined, true, `the left channel user mark will be undefined`);
assertEquals(state.Live.Mark.Stim, state.Stim);
assertEquals(state.Live.Mark.Resp, true);
});
await t.step("Dispatch Mark delete", ()=>
{
state = Reducer(state, {Name:"Mark", Data:null});
});
await t.step("Check marked value", ()=>
{
assertEquals(state.Live.Freq.UserR === undefined, true);
assertEquals(state.Live.Freq.UserL === undefined, true);
assertEquals(state.Live.Mark, undefined);
});
await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
{
state = Reducer(state, {Name:"Freq", Data:3});
state = Reducer(state, {Name:"Stim", Data:65});
state = Reducer(state, {Name:"Chan", Data:0});
});
await t.step("Live context values are correct", ()=>
{
assertEquals(state.Live.Test, state.Tests[0]);
assertEquals(state.Live.Freq.Hz, ColumnMapping[state.Freq][0]);
assertEquals(state.Live.Mark, undefined);
});
await t.step("Dispatch Mark create", ()=>
{
state = Reducer(state, {Name:"Mark", Data:false});
});
await t.step("Check marked value", ()=>
{
assertEquals(state.Live.Freq.UserR === undefined, true, `there will be a user mark for the right channel`);
assertEquals(state.Live.Freq.UserL !== undefined, true, `the left channel user mark will be undefined`);
assertEquals(state.Live.Mark.Stim, state.Stim);
assertEquals(state.Live.Mark.Resp, false);
});
})
await t.step("Contiguous Lines", ()=>
{
/** @type {import("../src/store.js").Test} */
const model = {
Name:"",
Plot:[
{Hz: 500, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
{Hz: 1000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
{Hz: 2000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:false}},
{Hz: 3000, TestL: {Stim:30, Resp:true}, TestR: {Stim:35, Resp:true}, UserL:{Stim:20, Resp:true}},
{Hz: 4000, TestL: {Stim:40, Resp:true}, TestR: {Stim:45, Resp:true}, UserL:{Stim:30, Resp:true}},
{Hz: 4000, TestL: {Stim:50, Resp:true}, TestR: {Stim:55, Resp:true}, UserL:{Stim:40, Resp:true}}
]
}
const {Points, Paths} = Congtiguous(model, 0, true);
assertEquals(Points.length, 6);
assertEquals(Paths.length, 2);
assertEquals(Paths[0].length, 2);
assertEquals(Paths[1].length, 3);
});
}
const {Points, Paths} = Congtiguous(model, 0, Initial.Stim, true);
assertEquals(Points.length, 6);
assertEquals(Paths.length, 2);
assertEquals(Paths[0].length, 2);
assertEquals(Paths[1].length, 3);
});