Fix wobbly height and simplify bulk variable setting

Author: dbuezas

src/Panes/ResizePanel.tsx

@@ -1,8 +1,11 @@
 import { useState } from 'preact/hooks'
-import { ReactNode, CSSProperties, useEffect } from 'react'
+import { ReactNode, useEffect } from 'react'
 import './ResizePanel.css'
+import { atom, useAtom } from 'jotai'
+
+export const plotHeightAtom = atom(300)
 export default function ResizePanel(props: { children: ReactNode }) {
-  const [height, setHeight] = useState(300)
+  const [height, setHeight] = useAtom(plotHeightAtom)
   const [startY, setStartY] = useState(0)
   const [isDragging, setIsDragging] = useState(false)
   const onMouseDown = (e: MouseEvent | TouchEvent) => {

src/Plot/Plot.tsx

@@ -16,6 +16,7 @@ import { getAllCompareRegTraits } from '../helpers/compareRegisterUtil'
 import { useAtomValue, useSetAtom } from 'jotai'
 import { userConfigState } from '../state/state'
 import { simulationState } from '../helpers/helpers'
+import { plotHeightAtom } from '../Panes/ResizePanel'
 
 function usePrevious<T>(value: T) {
   const ref = useRef<T>()
@@ -27,9 +28,10 @@ function usePrevious<T>(value: T) {
 
 export default function Plot({ style }: { style: Object }) {
   const containerRef = useRef<HTMLDivElement>(null)
-  const [width, height_] = useSize(containerRef)
-  const height_ouputCompare = height_ / 10
-  const margin_ouputCompare = height_ / 30
+  const [width] = useSize(containerRef)
+  const height = useAtomValue(plotHeightAtom)
+  const height_ouputCompare = height / 10
+  const margin_ouputCompare = height / 30
   const { simulation, ocrMax, param, counterMax, values } =
     useAtomValue(simulationState)
 
@@ -63,8 +65,7 @@ export default function Plot({ style }: { style: Object }) {
   }
   /* --- */
   const activeOCnXs = IOCR_states.filter(({ isActiveOutput }) => isActiveOutput)
-  const height_timer =
-    height_ - height_ouputCompare * (activeOCnXs.length + 0.5)
+  const height_timer = height - height_ouputCompare * (activeOCnXs.length + 0.5)
   const xDomain = extent(simulation.t) as [number, number]
   const xScale = useMemo(
     () =>

src/state/state.tsx

@@ -4,25 +4,27 @@ import { setHashFromObject, useHashChangedExternally } from './useHash'
 
 import timers from '../data'
 import { MicroControllers, PanelModes } from '../helpers/types'
-import { uniq, without } from 'lodash-es'
+import { memo } from 'react'
 
 export const panelModeState = atom(PanelModes.Normal)
 const defaultState: Record<string, string> = {
   mcu: MicroControllers.ATMEGA328P,
   timer: '0'
 }
 
-export const RegisterHashWatcher = () => {
+export const RegisterHashWatcher = memo(() => {
   const set = useSetAtom(userConfigStateBulk)
   const params = useHashChangedExternally()
-  set(params)
+  set({ ...defaultState, ...params })
   return <></>
-}
-export const RegisterHashUpdater = () => {
+})
+
+export const RegisterHashUpdater = memo(() => {
   const obj = useAtomValue(userConfigStateBulk)
   setHashFromObject({ ...defaultState, ...obj })
   return <></>
-}
+})
+
 export const RegisterHashLink = () => {
   return (
     <>
@@ -32,48 +34,23 @@ export const RegisterHashLink = () => {
   )
 }
 
-const userConfigState_vars = atom<string[]>([])
-
-const userConfigState_store = atomFamily((variable: string) =>
-  atom<string | undefined>(defaultState[variable])
-)
+export const userConfigStateBulk = atom(defaultState)
 
 export const userConfigState = atomFamily((variable: string) =>
   atom(
-    (get) => get(userConfigState_store(variable)),
-    (get, set, value: string | undefined) => {
-      set(userConfigState_store(variable), value)
-      const vars = get(userConfigState_vars)
-      const exists = vars.includes(variable)
-      if (exists && value === undefined) {
-        set(userConfigState_vars, without(vars, variable))
-      } else if (!exists && value != undefined) {
-        set(userConfigState_vars, [...vars, variable])
+    (get) => get(userConfigStateBulk)[variable],
+    (get, set, value?: string) => {
+      const was = get(userConfigStateBulk)
+      if (value === undefined) {
+        const { [variable]: _removedValue, ...without } = was
+        set(userConfigStateBulk, without)
+      } else {
+        set(userConfigStateBulk, { ...was, [variable]: value })
       }
     }
   )
 )
 
-export const userConfigStateBulk = atom(
-  (get) =>
-    Object.fromEntries(
-      get(userConfigState_vars).map((variable) => [
-        variable,
-        get(userConfigState(variable))
-      ])
-    ),
-  (get, set, value: Record<string, string | undefined>) => {
-    const variables = uniq([
-      ...get(userConfigState_vars),
-      ...Object.keys(value)
-    ])
-    for (const variable of variables) {
-      if (get(userConfigState(variable)) !== value[variable])
-        set(userConfigState(variable), value[variable])
-    }
-  }
-)
-
 export const mcuTimers = atom((get) => {
   const micro = get(userConfigState('mcu')) as MicroControllers
   return timers[micro]