From 6615ad661f2502c72e060ecbfd21ec4823695d28 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Mon, 17 Jul 2023 10:57:28 -0400
Subject: [PATCH] Cleaned up selector code

---
 src/components/probability-selector.scss |  5 +++
 src/components/probability-selector.tsx  | 45 +++++++++++-------------
 2 files changed, 26 insertions(+), 24 deletions(-)

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<React.SetStateAction<number[]>>
+}
+
 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<React.SetStateAction<number[]>>
-}
-
-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]);