cleanup

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"
     }
 }

index.html

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

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";
+const StoreContext = React.createContext(null);
-import {html}    from "https://esm.sh/htm@3.1.1/preact";
+const StoreProvider =(props)=>
-render(html`
+{
-    <${UI.Button} icon="+">hey!<//>
+    const reducer = React.useReducer(Reducer, Initial);
-    <${UI.Button} light>Left<//>
+    return html`<${StoreContext.Provider} value=${reducer}>${props.children}<//>`;
-    <${UI.Button} inactive>Right<//>
+}
-    <${UI.Button} disabled>Right<//>
+const StoreConsumer =()=> React.useContext(StoreContext);
-    <${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%" />
+const Deep =()=>
-            <${UI.Mark} right=${false} x=${"10%"} y="20%" response=${true} />
+{
-            <${UI.Mark} right=${false}/>
+    const [State, Dispatch] = React.useContext(StoreContext);
-        </svg>
+    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}>
+            <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);

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<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:number, Freq:number, Stim:number, Live:Context, Draw:{UserL:DrawGroup, UserR:DrawGroup, TestL:DrawGroup, TestR:DrawGroup}, Tests:Array<Test>}} 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<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};
+
+    }
+}
+*/
+
 /** @typedef {{Name:"Mark", Data:boolean|null}} ActionMark */
 /** @typedef {{Name:"Test", Data:number}} ActionTest */
 /** @typedef {{Name:"Chan", Data:number}} ActionChan */
@@ -125,10 +160,10 @@ const Update =
     }
 };
 
-/** @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 */
+/** @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);

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} */
+/** @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})
+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>`);
     });

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,
-    let state = {
+    Freq: 1,
-        Chan: 0,
+    Stim: 20,
-        Freq: 3,
+    Live:
-        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)=>
     {
-        await t.step("A test exists with 500 and 1k hz plots", ()=>
+        Test: undefined,
-        {
+        Freq: undefined,
-            assertEquals(state.Tests.length > 0, true);
+        Mark: undefined
-            const test = state.Tests[0];
+    },
-            assertEquals(test.Plot.length > 1, true);
+    Draw:
-            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", ()=>
+        UserL:{Points:[], Paths:[]},
+        UserR:{Points:[], Paths:[]},
+        TestL:{Points:[], Paths:[]},
+        TestR:{Points:[], Paths:[]}
+    },
+    Tests: [
         {
-            state = Reducer(state, {Name:"Mark", Data:true});
+            Name: "Patient A  Asymmetric Notch",
-        });
+            Plot:
-
+            [
-        await t.step("Check marked value", ()=>
+                { Hz: 500,  TestL: { Stim: 30, Resp: true }, TestR: { Stim: 50, Resp: true } },
-        {
+                { Hz: 1000, TestL: { Stim: 50, Resp: true }, TestR: { Stim: 55, Resp: true } }
-            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);
+Deno.test("Initialize", async(t)=>
-        assertEquals(Paths.length, 2);
+{
-        assertEquals(Paths[0].length, 2);
+    await t.step("A test exists with 500 and 1k hz plots", ()=>
-        assertEquals(Paths[1].length, 3);
+    {
+        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);
 });