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`
+{
+    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}>
             <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,18 +1,23 @@
 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 = {
-{
-    let state = {
     Chan: 0,
-        Freq: 3,
+    Freq: 1,
-        Stim: 30,
+    Stim: 20,
     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",
@@ -23,10 +28,11 @@ Deno.test("Store", async(t)=>
             ]
         }
     ]
-    };
+};
 
-    await t.step("Initialize", async(t)=>
+
-    {
+Deno.test("Initialize", async(t)=>
+{
     await t.step("A test exists with 500 and 1k hz plots", ()=>
     {
         assertEquals(state.Tests.length > 0, true);
@@ -39,8 +45,8 @@ Deno.test("Store", async(t)=>
     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:"Freq", Data:1});
-            state = Reducer(state, {Name:"Stim", Data:25});
+        state = Reducer(state, {Name:"Stim", Data:5});
         state = Reducer(state, {Name:"Chan", Data:1});
     });
 
@@ -57,10 +63,10 @@ Deno.test("Store", async(t)=>
         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)=>
+Deno.test("Make Marks", async(t)=>
-    {
+{
     await t.step("Dispatch Mark create", ()=>
     {
         state = Reducer(state, {Name:"Mark", Data:true});
@@ -88,8 +94,8 @@ Deno.test("Store", async(t)=>
 
     await t.step("Dispatch Freq, Stim, and Chan updates", ()=>
     {
-            state = Reducer(state, {Name:"Freq", Data:3});
+        state = Reducer(state, {Name:"Freq", Data:1});
-            state = Reducer(state, {Name:"Stim", Data:65});
+        state = Reducer(state, {Name:"Stim", Data:5});
         state = Reducer(state, {Name:"Chan", Data:0});
     });
 
@@ -107,15 +113,15 @@ Deno.test("Store", async(t)=>
 
     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.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.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", ()=>
+Deno.test("Contiguous Lines", ()=>
-    {
+{
     /** @type {import("../src/store.js").Test} */
     const model = {
         Name:"",
@@ -134,6 +140,4 @@ Deno.test("Store", async(t)=>
     assertEquals(Paths.length, 2);
     assertEquals(Paths[0].length, 2);
     assertEquals(Paths[1].length, 3);
-    });
-
 });