From 40b0589583868aba1313bddf5b55108602920330 Mon Sep 17 00:00:00 2001 From: Seth Trowbridge Date: Sat, 3 Dec 2022 19:05:26 -0500 Subject: [PATCH] cleanup --- deno.json | 3 +- index.html | 2 +- src/app.js | 54 +++++++--- src/store.js | 62 +++++++++-- src/ui.js | 13 ++- test/store_test.js | 258 +++++++++++++++++++++++---------------------- 6 files changed, 235 insertions(+), 157 deletions(-) diff --git a/deno.json b/deno.json index 96cb0d8..24d03de 100644 --- a/deno.json +++ b/deno.json @@ -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" } } \ No newline at end of file diff --git a/index.html b/index.html index a8d8640..601fcf6 100644 --- a/index.html +++ b/index.html @@ -1,2 +1,2 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/src/app.js b/src/app.js index 40fa2e2..f7d87ee 100644 --- a/src/app.js +++ b/src/app.js @@ -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}> - - <${UI.Mark} right=${true} x=${"20%"} y="20%" /> - <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} /> - <${UI.Mark} right=${false}/> - + +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:5})}> + ${State.Stim} + `; +} + +React.render(html` + <${StoreProvider}> + <${UI.Button} icon="+">hey! + <${UI.Button} light>Left + <${UI.Button} inactive>Right + <${UI.Button} disabled>Right + <${Deep}/> + <${UI.Chart}> + + <${UI.Mark} right=${true} x=${"20%"} y="20%" /> + <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} /> + <${UI.Mark} right=${false}/> + + + `, ShadowDiv); \ No newline at end of file diff --git a/src/store.js b/src/store.js index 3f023dc..8344317 100644 --- a/src/store.js +++ b/src/store.js @@ -56,9 +56,9 @@ export const MarkSet =(freq, chan, mark)=> freq[ chan ? "UserR" : "UserL" ] = ma /** @typedef {{Stim:number, Resp:boolean}} TestFrequencySample */ /** @typedef {{Hz:number, TestL:TestFrequencySample, TestR:TestFrequencySample, UserL?:TestFrequencySample, UserR?:TestFrequencySample}} TestFrequency */ -/** @typedef {{Name:string, Plot:Array, Draw?:DrawTest}} Test */ +/** @typedef {{Name:string, Plot:Array}} Test */ /** @typedef {{Test?:Test, Freq?:TestFrequency, Mark?:TestFrequencySample}} Context */ -/** @typedef {{Chan:number, Freq:number, Stim:number, Live:Context, Tests:Array}} State */ +/** @typedef {{Chan:number, Freq:number, Stim:number, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array}} State */ /** @type {State} */ export const Initial = { @@ -71,6 +71,13 @@ export const Initial = Freq: undefined, Mark: undefined }, + Draw: + { + UserL:{Points:[], Paths:[]}, + UserR:{Points:[], Paths:[]}, + TestL:{Points:[], Paths:[]}, + TestR:{Points:[], Paths:[]} + }, Tests: [ { Name: "Patient A Asymmetric Notch", @@ -83,6 +90,34 @@ export const Initial = ] }; +/* +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, Paths:Array>}} DrawGroup */ /** @typedef {{Left:DrawGroup, Right:DrawGroup}} DrawChart */ -/** @typedef {{User:DrawGroup, Test:DrawGroup}} DrawTest */ +/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */ /** @type {(inTest:Test, inChannel:number, inIsUser:boolean)=>DrawGroup} */ export function Congtiguous(inTest, inChannel, inIsUser) { @@ -149,7 +184,11 @@ export function Congtiguous(inTest, inChannel, inIsUser) 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: LimitMap(mark.Stim, ToneLimit.Stim)*100, + Mark: mark + }; output.Points.push(point); if(mark.Resp) @@ -184,17 +223,26 @@ 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, true ), + UserR: Congtiguous(clone.Live.Test, 1, true ), + TestL: Congtiguous(clone.Live.Test, 0, false), + TestR: Congtiguous(clone.Live.Test, 1, 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.Draw = {...clone.Draw}; + clone.Draw[clone.Chan == 0 ? "UserL" : "UserR"] = Congtiguous(clone.Live.Test, clone.Chan, true); } } else if( Name=="Stim" || Name=="Chan" || Name=="Freq") { - clone[Name] = LimitCut(Data, ToneLimit[Name]); + clone[Name] = LimitCut(clone[Name]+Data, ToneLimit[Name]); if(Name != "Stim") { Update.Freq(clone); diff --git a/src/ui.js b/src/ui.js index f2269e1..56f709a 100644 --- a/src/ui.js +++ b/src/ui.js @@ -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}) ${icon} ` } - + ${children} `; @@ -45,7 +44,7 @@ export function Chart({children}) ColumnMapping.forEach(([label, position, normal])=> { rules.push(html` - + ${label} `); }); diff --git a/test/store_test.js b/test/store_test.js index d1a257f..9d8352a 100644 --- a/test/store_test.js +++ b/test/store_test.js @@ -1,139 +1,143 @@ import { assertEquals } from "https://deno.land/std@0.166.0/testing/asserts.ts"; import { Reducer, ColumnMapping, Congtiguous } from "../src/store.js"; -Deno.test("Store", 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("Initialize", async(t)=> +let state = { + Chan: 0, + Freq: 1, + Stim: 20, + Live: { - 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)=> + Test: undefined, + Freq: undefined, + Mark: undefined + }, + Draw: { - await t.step("Dispatch Mark create", ()=> + UserL:{Points:[], Paths:[]}, + UserR:{Points:[], Paths:[]}, + TestL:{Points:[], Paths:[]}, + TestR:{Points:[], Paths:[]} + }, + Tests: [ { - 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}} + 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 } } ] } + ] +}; - 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); + +Deno.test("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:1}); + state = Reducer(state, {Name:"Stim", Data:5}); + 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"); + }); +}); + +Deno.test("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:1}); + state = Reducer(state, {Name:"Stim", Data:5}); + 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); + }); +}); + +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}} + ] + } + + 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); }); \ No newline at end of file