atomic file structure

.eslintrc.json

@@ -10,6 +10,7 @@
     "prettier"
   ],
   "extends": [
+    "react-app",
     "eslint:recommended",
     "plugin:react/recommended",
     "airbnb-typescript",

package.json

@@ -13,7 +13,7 @@
     "color-convert": "^2.0.1",
     "delta-e": "0.0.8",
     "hsluv": "0.1.0",
-    "lodash": "4.17.19",
+    "lodash": "^4.17.19",
     "ml-regression": "5.0.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
@@ -25,6 +25,7 @@
   "devDependencies": {
     "@types/chroma-js": "^2.0.0",
     "@types/color": "^3.0.1",
+    "@types/delta-e": "^0.0.0",
     "@types/jest": "^26.0.5",
     "@types/lodash": "^4.14.157",
     "@types/react": "^17.0.0",
@@ -42,8 +43,7 @@
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "^2.3.0",
-    "react-scripts": "^3.4.1",
-    "react-scripts-ts": "3.1.0",
+    "react-scripts": "^4.0.3",
     "typescript": "^4.0.0"
   },
   "scripts": {
@@ -53,10 +53,7 @@
     "eject": "react-scripts eject",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
     "prettier": "prettier --write src/**/*",
-    "typecheck": "tsc"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
+    "tsc": "tsc"
   },
   "browserslist": [
     ">0.2%",

src/AppPages.tsx

@@ -1,23 +1,25 @@
 import { ComponentType } from "react";
+import {
+  ExpandableColorInfo,
+  withSelectableColor,
+  withSelectMultipleColors,
+} from "components";
 import { PlotFeaturesTool } from "./tools/PlotFeatures/PlotFeaturesTool";
 import { HistogramTool } from "./tools/Histogram/HistogramTool";
 import { VisualizeDifference } from "./tools/VisualizeDifference/VisualizeDifference";
 import { DistanceGridTool } from "./tools/DistanceGrid/DistanceGridTool";
 import { ChannelGradientTool } from "./tools/ChannelGradient/ChannelGradientTool";
-import { withSelectableColor } from "./sharedComponents/form/withSelectableColor";
 import { CompareNoiseChannels } from "./tools/ChannelNoise/CompareNoiseChannels";
-import { withSelectMultipleColors } from "./sharedComponents/form/withSelectMultipleColors";
 import { CompareModelNoise } from "./tools/ModelNoise/CompareModelNoise";
 import { NoisyBoxTool } from "./tools/NoisyBoxes/NoisyBoxes";
 import { GradientCompareTool } from "./tools/GradientCompare/GradientCompareTool";
-import { ColorWheelComparison } from "./rainbow/ColorWheelComparison";
+import { ColorWheelComparison } from "./tools/ColorWheel/ColorWheelComparison";
 import { PaletteCompareTool } from "./tools/PaletteCompare/PaletteCompare";
 import { ForceToAll } from "./tools/ForceToRules/ForceToRules";
-import { ColorInfo } from "./sharedComponents/color/ColorInfo";
 import { RenderGroups } from "./tools/RenderGroups/RenderGroups";
 import { TestBoundaries } from "./tools/GroupBoundaries/TestBoundaries";
 import { ChannelRelTool } from "./tools/ChannelRel/ChannelRelTool";
-import { GroupsAnalysis } from "./grouping/AnalysisTable";
+import { GroupsAnalysis } from "./tools/AnalysisTable";
 import { Sandbox } from "./Sandbox";
 import { LevelCreatorTool } from "./tools/LevelCreator/LevelCreatorTool";
 import PerceptronTool from "./tools/Perceptron";
@@ -101,7 +103,10 @@ export const PAGES: AppPage[] = [
   {
     title: "Color Info",
     path: "info",
-    Component: withSelectableColor(ColorInfo, { width: 200, height: 200 }),
+    Component: withSelectableColor(ExpandableColorInfo, {
+      width: 200,
+      height: 200,
+    }),
   },
   {
     title: "View Groups",

src/Home.tsx

@@ -1,11 +1,11 @@
 import Paper from "@material-ui/core/Paper";
 import Grid from "@material-ui/core/Grid";
-import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
+import { createStyles, makeStyles } from "@material-ui/core/styles";
 import { Link } from "react-router-dom";
 import React from "react";
-import { Title } from "sharedComponents/ui/Title";
+import { Title } from "components";
 import { PAGES } from "./AppPages";
-import { sampleGroupHexes } from "./classifier/shuffledData";
+import { sampleGroupHexes } from "./logic/classification/training/shuffledData";
 
 const backgroundColors = sampleGroupHexes("Candy", PAGES.length);
 

src/Menu.tsx

@@ -7,7 +7,7 @@ import Typography from "@material-ui/core/Typography";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 import { PAGES } from "./AppPages";
-import { MenuIcon } from "./sharedComponents/ui/Icons";
+import { MenuIcon } from "./components";
 
 /**
  * props title and path refer to the current page
@@ -40,7 +40,7 @@ export const TopMenu = ({ currentTitle }: Props) => {
           </MenuItem>
           {PAGES.map(({ title, path }) => (
             <MenuItem key={path}>
-              <Link to={"/" + path}>{title}</Link>
+              <Link to={`/${path}`}>{title}</Link>
             </MenuItem>
           ))}
         </Menu>

src/Sandbox.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import { ModelPalette } from "./tools/PaletteCompare/ModelPalette";
-import { ModelAdapter } from "./spacesChannels/ModelAdapter";
-import { ColorAdapter } from "./color/ColorAdapter";
-import { rgbToRyb } from "./color/ryb";
-import { makeIterativePerceptron } from "./classifier/IterativeChannelPerceptron";
-import { TestedModel } from "./classifier/TestedModel";
+import { ModelAdapter } from "./logic/spacesChannels/ModelAdapter";
+import { ColorAdapter } from "./logic/color/ColorAdapter";
+import { rgbToRyb } from "./logic/color/ryb";
+import { makeIterativePerceptron } from "./logic/classification/model/perceptron/IterativeChannelPerceptron";
+import { TestedModel } from "./logic/classification/accuracy/TestedModel";
 
 export const Sandbox = () => {
   const perceptron = makeIterativePerceptron("Neons", 1000, 10);

src/sharedComponents/form/BaseField.tsx → src/components/atoms/Field.tsx

@@ -7,7 +7,7 @@ import { GenericProps } from "./types";
  * but the onChange is based on e.target.value which is always a string
  * prop variant is no longer required
  */
-export type BaseProps = Partial<Omit<TextFieldProps, "onChange">> &
+export type FieldProps = Partial<Omit<TextFieldProps, "onChange">> &
   Pick<GenericProps<string>, "onChange">;
 
 /**
@@ -17,7 +17,7 @@ export type BaseProps = Partial<Omit<TextFieldProps, "onChange">> &
  * but not passing input props from specific instances of those components
  */
 
-export const BaseField = ({ value, onChange, ...props }: BaseProps) => (
+export const Field = ({ value, onChange, ...props }: FieldProps) => (
   <TextField
     variant="outlined"
     {...props}

src/sharedComponents/ui/FlexRow.tsx → src/components/atoms/FlexRow.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import { ElementProps } from "../form/types";
 
-export type Props = ElementProps<HTMLDivElement> & {
+export type Props = JSX.IntrinsicElements["div"] & {
   wrap?: boolean | "nowrap" | "wrap" | "wrap-reverse";
 };
 

src/sharedComponents/color/GradientBar.tsx → src/components/atoms/GradientBar.tsx

@@ -1,15 +1,15 @@
 import React from "react";
-import { Size } from "../form/types";
-import { ifDefined, withHash } from "../../lib";
-import ChannelGradient, {
+import { withHash, Size } from "lib";
+import {
+  ChannelGradient,
   Props as GradientProps,
-} from "../../channel/ChannelGradient";
+} from "logic/gradient/ChannelGradient";
 
 /**
  * a continuous gradient of color,
  * made by adjusting an initial color along one channel
  *
- * unlike the ChannelGradient component, this doesn't use RenderSet because don't want to display detailed color info
+ * unlike the ChannelGradient component, this doesn't use ColorSet because don't want to display detailed color info
  */
 
 export type Props = GradientProps &
@@ -19,7 +19,7 @@ export type Props = GradientProps &
 
 export const GradientBar = ({ width, height, count, ...props }: Props) => {
   // will use passed-in count, or 1 per pixel if width is set, or 100
-  const _count = ifDefined(count, ifDefined(width, 100));
+  const colorCount = count ?? width ?? 100;
   const gradient = new ChannelGradient(props);
   return (
     <div
@@ -29,7 +29,7 @@ export const GradientBar = ({ width, height, count, ...props }: Props) => {
         height: height || 50,
       }}
     >
-      {gradient.colors(_count).map((color) => (
+      {gradient.colors(colorCount).map((color) => (
         <div
           key={color.hex()}
           style={{

src/sharedComponents/form/LabelWrapper.tsx → src/components/atoms/LabelWrapper.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode } from "react";
 
 /**
  * should not need to copy this much HTML, but it works
+ * TODO: which MUI components is this?
  */
 export interface Props {
   children?: ReactNode;