diff --git a/src/components/probability-selector.scss b/src/components/probability-selector.scss index 442db5b..8bfd835 100644 --- a/src/components/probability-selector.scss +++ b/src/components/probability-selector.scss @@ -9,6 +9,11 @@ svg { width: 100%; height: 100%; + + circle { + fill: #777; + cursor: pointer; + } } } diff --git a/src/components/probability-selector.tsx b/src/components/probability-selector.tsx index 9984d80..50f617f 100644 --- a/src/components/probability-selector.tsx +++ b/src/components/probability-selector.tsx @@ -2,6 +2,24 @@ import React, { useCallback, useMemo } from "react"; import "./probability-selector.scss"; +interface ProbabilitySelectorOffset { + min: number + cur: number + max: number +} +interface ProbabilitySelectorThumbProps { + index: number + offset: ProbabilitySelectorOffset + visibleLineLength: number + onChange: (index: number, probability: number) => void; +} + +interface ProbabilitySelectorProps { + edgeValues: number[] + edgeLabels: string[] + onChange: React.Dispatch> +} + const svgWidth = 200; const svgHeight = 18; const thumbRadius = 7; @@ -19,17 +37,9 @@ const distinctColors = [ ]; const getDistinctColor = (i: number) => distinctColors[i % distinctColors.length]; -interface ProbabilitySelectorOffset { - min: number - cur: number - max: number -} -interface ProbabilitySelectorThumbProps { - index: number - offset: ProbabilitySelectorOffset - visibleLineLength: number - onChange: (index: number, probability: number) => void; -} +const percentage = (n: number) => n * 100; +const probability = (n: number) => n / 100; +const reduceToSum = (a: number[]) => a.reduce((acc, cur) => acc + cur, 0); export const ProbabilitySelectorThumb = (props: ProbabilitySelectorThumbProps) => { const {index, offset, onChange} = props; @@ -58,24 +68,11 @@ export const ProbabilitySelectorThumb = (props: ProbabilitySelectorThumbProps) = cx={offset.cur} cy={lineY} r={thumbRadius} - fill="#777" - style={{cursor: "pointer"}} onMouseDown={handleMouseDown} /> ); }; - -interface ProbabilitySelectorProps { - edgeValues: number[] - edgeLabels: string[] - onChange: React.Dispatch> -} - -const percentage = (n: number) => n * 100; -const probability = (n: number) => n / 100; -const reduceToSum = (a: number[]) => a.reduce((acc, cur) => acc + cur, 0); - export const ProbabilitySelector = ({edgeValues, edgeLabels, onChange}: ProbabilitySelectorProps) => { const sum = useMemo(() => reduceToSum(edgeValues), [edgeValues]);