agentsmith Comments - Answer Overflow

agentsmith

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

I tried that originally, but I'll try again. Either way I'm about to just move on. It's mostly working. The app won't break because the value will be clamped even if the user can type in values outside of the min/max if they know how.

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

That looks like it should work. I think it's a bug/restriction in the shadcn-solid component. It does work as expect if I use that and a regular input. But the issue is still there if I use the shadcn-solid components.

import { createSignal } from 'solid-js'
import {
  TextField,
  TextFieldLabel,
  TextFieldDescription,
  TextFieldRoot,
} from '@/components/ui/textfield'

import type { Component } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

interface NumberInputProps {
  id: string
  label: JSX.Element
  info?: JSX.Element
  class?: string
  min?: number
  max?: number
  value?: number | (() => number)
  onInput?: (value: number) => void
}

export const NumberInput: Component<NumberInputProps> = (props) => {
  const [inputValue, setInputValue] = createSignal(
    typeof props.value === 'function' ? props.value() : props.value,
    { equals: () => false }
  )

  // Clamping function to enforce min and max constraints
  const clampValue = (value: number): number => {
    let clamped = value
    if (props.min !== undefined) {
      clamped = Math.max(props.min, clamped)
    }
    if (props.max !== undefined) {
      clamped = Math.min(props.max, clamped)
    }
    return clamped
  }

  const handleInput = (e: Event) => {
    console.log('handleInput')
    const target = e.target as HTMLInputElement
    const val = Number(target.value)
    const clamped = clampValue(val)
    setInputValue(clamped) // Update local state to clamped value
    props.onInput?.(clamped) // Update external signal
  }

  return (
    <TextFieldRoot
      class={props.class ?? 'w-24'}
      defaultValue={inputValue()?.toString()}
    >
      <TextFieldLabel for={props.id}>{props.label}</TextFieldLabel>
      <TextField
        id={props.id}
        type="number"
        min={props.min}
        max={props.max}
        value={inputValue()}
        onInput={handleInput}
      />
      {props.info && <TextFieldDescription>{props.info}</TextFieldDescription>}
    </TextFieldRoot>
    // using this works as expected. 
    // <input
    //   id={props.id}
    //   type="number"
    //   min={props.min}
    //   max={props.max}
    //   value={inputValue()}
    //   onInput={handleInput}
    // />
  )
}

export default NumberInput

import { createSignal } from 'solid-js'
import {
  TextField,
  TextFieldLabel,
  TextFieldDescription,
  TextFieldRoot,
} from '@/components/ui/textfield'

import type { Component } from 'solid-js'
import type { JSX } from 'solid-js/jsx-runtime'

interface NumberInputProps {
  id: string
  label: JSX.Element
  info?: JSX.Element
  class?: string
  min?: number
  max?: number
  value?: number | (() => number)
  onInput?: (value: number) => void
}

export const NumberInput: Component<NumberInputProps> = (props) => {
  const [inputValue, setInputValue] = createSignal(
    typeof props.value === 'function' ? props.value() : props.value,
    { equals: () => false }
  )

  // Clamping function to enforce min and max constraints
  const clampValue = (value: number): number => {
    let clamped = value
    if (props.min !== undefined) {
      clamped = Math.max(props.min, clamped)
    }
    if (props.max !== undefined) {
      clamped = Math.min(props.max, clamped)
    }
    return clamped
  }

  const handleInput = (e: Event) => {
    console.log('handleInput')
    const target = e.target as HTMLInputElement
    const val = Number(target.value)
    const clamped = clampValue(val)
    setInputValue(clamped) // Update local state to clamped value
    props.onInput?.(clamped) // Update external signal
  }

  return (
    <TextFieldRoot
      class={props.class ?? 'w-24'}
      defaultValue={inputValue()?.toString()}
    >
      <TextFieldLabel for={props.id}>{props.label}</TextFieldLabel>
      <TextField
        id={props.id}
        type="number"
        min={props.min}
        max={props.max}
        value={inputValue()}
        onInput={handleInput}
      />
      {props.info && <TextFieldDescription>{props.info}</TextFieldDescription>}
    </TextFieldRoot>
    // using this works as expected. 
    // <input
    //   id={props.id}
    //   type="number"
    //   min={props.min}
    //   max={props.max}
    //   value={inputValue()}
    //   onInput={handleInput}
    // />
  )
}

export default NumberInput

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

I've identified the issue and it's a reactive thing, but I don't know how to fix it yet. I can change the input value and when I do so it invokes the handle input which applies the clamp. This results in the underlying signal sticking to the value I expect. However, because the clamp results in the value being the same it doesn't trigger an update to re-render the input with the correct value. This seems like a fairly common use-case when using inputs. Is there a way to deal with this in solid?

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

Alright, I don't think this is a real issue that would happen, but I wasn't seeing that yesterday. Still an oddity though.

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

14 replies

SSolidJS

•Created by agentsmith on 10/31/2024 in #support

Reactivity with shadcn-solid textfield

This is the implementation using the NumberInput. The trials and futurePoints inputs fail on the -1 test, but the other two work as expected.

import { createEffect, createSignal } from 'solid-js'
// import { Info } from 'lucide-solid'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
// import { Checkbox, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
// import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { NumberInput } from '@/components/ui/NumberInput'
import MonteCarloChart from '@/components/charts/MonteCarlo'
import { setMonteCarloData, simulations } from '@/libs/monteCarlo'

import type { Component } from 'solid-js'
import type { TradeMetrics } from '@/libs/stats'

interface CardProps {
  data: TradeMetrics | null
}

export const MonteCarloCard: Component<CardProps> = (props) => {
  const [trials, setTrials] = createSignal(100)
  const [futurePoints, setFuturePoints] = createSignal(100)
  const [highRunsCnt, setHighRunsCnt] = createSignal(0)
  const [lowRunsCnt, setLowRunsCnt] = createSignal(0)
  // const [staticPoints, setStaticPoints] = createSignal(false)

  const handleMonteCarloData = () => {
    let simulationResult = simulations(
      props.data?.netProfit ?? [],
      trials(),
      futurePoints(),
      props.data?.startingEquity
    )
    // the data is already sorted by the last number in the array
    // so we can just slice the array to remove the high and low points
    // Slice off the high points (remove from the end)
    const removeHigh = highRunsCnt()
    // const highRemoved = simulationResult.slice(0, removeHigh)
    simulationResult = simulationResult.slice(removeHigh)

    // Slice off the low points (remove from the start)
    const removeLow = lowRunsCnt()
    // const lowRemoved = simulationResult.slice(simulationResult.length - removeLow)
    simulationResult = simulationResult.slice(0, simulationResult.length - removeLow)
    setMonteCarloData(() => simulationResult)
  }

  createEffect(() => {
    handleMonteCarloData()
  })

  return (
    <Card>
      <CardHeader>
        <CardTitle>Monte Carlo</CardTitle>
        <div class="flex flex-wrap flex-row justify-end gap-2">
          <NumberInput
            id="trials"
            label="Trials"
            min={1}
            value={trials}
            onInput={setTrials}
          />
          <NumberInput
            id="futurePoints"
            label="Future Points"
            min={1}
            value={futurePoints}
            onInput={setFuturePoints}
          />
          <NumberInput
            class="w-36"
            id="removeHighRuns"
            label="Remove Best Trials"
            min={0}
            value={highRunsCnt}
            onInput={setHighRunsCnt}
          />
          <NumberInput
            class="w-36"
            id="removeLowRuns"
            label="Remove Worst Trials"
            min={0}
            value={lowRunsCnt}
            onInput={setLowRunsCnt}
          />
          <Button
            class="self-end"
            style={{ 'margin-bottom': '0.3rem' }}
            variant="default"
            onClick={() => handleMonteCarloData()}
          >
            Rerun
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <MonteCarloChart
          data={props.data}
          // staticPoints={staticPoints()}
        />
      </CardContent>
    </Card>
  )
}

export default MonteCarloCard

import { createEffect, createSignal } from 'solid-js'
// import { Info } from 'lucide-solid'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
// import { Checkbox, CheckboxControl, CheckboxLabel } from '@/components/ui/checkbox'
// import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { NumberInput } from '@/components/ui/NumberInput'
import MonteCarloChart from '@/components/charts/MonteCarlo'
import { setMonteCarloData, simulations } from '@/libs/monteCarlo'

import type { Component } from 'solid-js'
import type { TradeMetrics } from '@/libs/stats'

interface CardProps {
  data: TradeMetrics | null
}

export const MonteCarloCard: Component<CardProps> = (props) => {
  const [trials, setTrials] = createSignal(100)
  const [futurePoints, setFuturePoints] = createSignal(100)
  const [highRunsCnt, setHighRunsCnt] = createSignal(0)
  const [lowRunsCnt, setLowRunsCnt] = createSignal(0)
  // const [staticPoints, setStaticPoints] = createSignal(false)

  const handleMonteCarloData = () => {
    let simulationResult = simulations(
      props.data?.netProfit ?? [],
      trials(),
      futurePoints(),
      props.data?.startingEquity
    )
    // the data is already sorted by the last number in the array
    // so we can just slice the array to remove the high and low points
    // Slice off the high points (remove from the end)
    const removeHigh = highRunsCnt()
    // const highRemoved = simulationResult.slice(0, removeHigh)
    simulationResult = simulationResult.slice(removeHigh)

    // Slice off the low points (remove from the start)
    const removeLow = lowRunsCnt()
    // const lowRemoved = simulationResult.slice(simulationResult.length - removeLow)
    simulationResult = simulationResult.slice(0, simulationResult.length - removeLow)
    setMonteCarloData(() => simulationResult)
  }

  createEffect(() => {
    handleMonteCarloData()
  })

  return (
    <Card>
      <CardHeader>
        <CardTitle>Monte Carlo</CardTitle>
        <div class="flex flex-wrap flex-row justify-end gap-2">
          <NumberInput
            id="trials"
            label="Trials"
            min={1}
            value={trials}
            onInput={setTrials}
          />
          <NumberInput
            id="futurePoints"
            label="Future Points"
            min={1}
            value={futurePoints}
            onInput={setFuturePoints}
          />
          <NumberInput
            class="w-36"
            id="removeHighRuns"
            label="Remove Best Trials"
            min={0}
            value={highRunsCnt}
            onInput={setHighRunsCnt}
          />
          <NumberInput
            class="w-36"
            id="removeLowRuns"
            label="Remove Worst Trials"
            min={0}
            value={lowRunsCnt}
            onInput={setLowRunsCnt}
          />
          <Button
            class="self-end"
            style={{ 'margin-bottom': '0.3rem' }}
            variant="default"
            onClick={() => handleMonteCarloData()}
          >
            Rerun
          </Button>
        </div>
      </CardHeader>
      <CardContent>
        <MonteCarloChart
          data={props.data}
          // staticPoints={staticPoints()}
        />
      </CardContent>
    </Card>
  )
}

export default MonteCarloCard

14 replies

SSolidJS

•Created by agentsmith on 10/4/2024 in #support