use ranges for tone params

.vscode/settings.json

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

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: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);

src/store.js

@@ -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,
+    Chan: { Min:0,   Max:1,   Value:0,  Step:1 },
-    Freq: 3,
+    Freq: { Min:2,   Max:8,   Value:2,  Step:1 },
-    Stim: 30,
+    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 */
+/** @typedef {{User?:DrawChart, Test?:DrawChart}} DrawTest */
-/** @type {(inTest:Test, inChannel:number, inIsUser:boolean)=>DrawGroup} */
+/** @type {(inTest:Test, inChan:number, inStim:Range, inIsUser:boolean)=>DrawGroup} */
-export function Congtiguous(inTest, inChannel, inIsUser)
+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);
@@ -204,3 +207,31 @@ 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};
+
+    }
+}
+*/

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,32 +1,18 @@
 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("Initialize", async(t)=>
+    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);
@@ -39,28 +25,38 @@ 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:"Stim", Data:25});
         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.Stim, 25);
+        assertEquals(state.Chan.Value, 1);
-            assertEquals(state.Freq, 2);
+        assertEquals(state.Freq.Value, 3);
-            assertEquals(state.Chan, 1);
+        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][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("Make Marks", async(t)=>
-    {
     await t.step("Dispatch Mark create", ()=>
     {
         state = Reducer(state, {Name:"Mark", Data:true});
@@ -68,36 +64,18 @@ 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.UserL !== undefined, true, `there will be a user mark for the left channel`);
-            assertEquals(state.Live.Freq.UserL === undefined, true, `the left channel user mark will be undefined`);
+        assertEquals(state.Live.Freq.UserR === undefined, true, `but not the right`);
-            assertEquals(state.Live.Mark.Stim, state.Stim);
+        assertEquals(state.Live.Mark.Stim, state.Stim.Value);
         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:"Test", Data:0});
-            state = Reducer(state, {Name:"Stim", Data:65});
+        state = Reducer(state, {Name:"Freq", Data:1});
-            state = Reducer(state, {Name:"Chan", Data:0});
+        state = Reducer(state, {Name:"Stim", Data:1});
-        });
+        state = Reducer(state, {Name:"Chan", Data: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);
     });
 
     await t.step("Dispatch Mark create", ()=>
@@ -107,15 +85,24 @@ 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, `and the left`);
-            assertEquals(state.Live.Mark.Stim, state.Stim);
+        assertEquals(state.Live.Mark.Stim, state.Stim.Value);
         assertEquals(state.Live.Mark.Resp, false);
     });
-    })
 
-    await t.step("Contiguous Lines", ()=>
+    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:"",
@@ -129,11 +116,9 @@ Deno.test("Store", async(t)=>
         ]
     }
 
-        const {Points, Paths} = Congtiguous(model, 0, true);
+    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);
-    });
-
 });