refactor: graph to use a set of points instead of taking the whole dsp oobject

src/features/dsp408/components/InputSection/InputSection.tsx

@@ -18,7 +18,7 @@ import { useRef, useState } from 'react';
 import './InputSection.css';
 import ChannelGroup from '../../../../components/ChannelGroup/ChannelGroup';
 import Button from '../../../../components/Button/Button';
-import { buildTotalCurveDraw, buildTotalPhaseCurveDraw } from '../../utils/totalCurve';
+// import { buildTotalCurveDraw, buildTotalPhaseCurveDraw } from '../../utils/totalCurve';
 import {
   FREQUENCY_MAX,
   FREQUENCY_MIN,
@@ -28,6 +28,10 @@ import {
   GRAPH_Y_MAX,
   GRAPH_Y_MIN,
 } from '../../constants';
+import { drawCurves } from '../../utils/graph/draw';
+import { getPeqCurvePoints, getPeqPhasePoints } from '../../utils/graph/peq';
+import { logSpace, sumCurvePoints, sumPhaseCurvePoints } from '../../utils/graph/curve';
+import { getCrossoverCurvePoints, getCrossoverPhasePoints } from '../../utils/graph/crossover';
 
 type GraphView = 'both' | 'magnitude' | 'phase';
 
@@ -601,6 +605,8 @@ function InputSection({
   const highPassSpec = { frequency: liveHpFreq, filter_type: ActiveHighPassFilter.slope };
   const lowPassSpec = { frequency: liveLpFreq, filter_type: ActiveLowPassFilter.slope };
 
+  const freqs = logSpace(GRAPH_X_MIN, GRAPH_X_MAX, 1000);
+
   return (
     <>
       <div className="input-graph-section">
@@ -625,16 +631,30 @@ function InputSection({
                 showGrid={true}
                 formatX={(v) => Math.round(v).toString()}
                 formatY={(v) => Math.round(v).toString()}
-                draw={buildTotalCurveDraw({
-                  bands: displayPeq,
-                  highPass: highPassSpec,
-                  lowPass: lowPassSpec,
-                  xMin: GRAPH_X_MIN,
-                  xMax: GRAPH_X_MAX,
-                  yMin: GRAPH_Y_MIN,
-                  yMax: GRAPH_Y_MAX,
-                  dimmed: ActivePeq.bypass,
-                })}
+                draw={({ ctx, toPx }) => {
+                  drawCurves({
+                    ctx,
+                    toPx,
+
+                    xMin: GRAPH_X_MIN,
+                    xMax: GRAPH_X_MAX,
+                    yMin: GRAPH_Y_MIN,
+                    yMax: GRAPH_Y_MAX,
+                    curves: [
+                      {
+                        points: sumCurvePoints([
+                          getPeqCurvePoints({ freqs, bands: displayPeq }),
+                          getCrossoverCurvePoints({
+                            freqs,
+                            highPass: highPassSpec,
+                            lowPass: lowPassSpec,
+                          }),
+                        ]),
+                        style: { strokeColor: '#e5e7eb', dimmed: ActivePeq.bypass },
+                      },
+                    ],
+                  });
+                }}
               />
             </div>
           )}
@@ -652,16 +672,30 @@ function InputSection({
               showGrid={true}
               formatX={(v) => Math.round(v).toString()}
               formatY={(v) => Math.round(v).toString()}
-              draw={buildTotalPhaseCurveDraw({
-                bands: displayPeq,
-                highPass: highPassSpec,
-                lowPass: lowPassSpec,
-                xMin: GRAPH_X_MIN,
-                xMax: GRAPH_X_MAX,
-                yMin: -180,
-                yMax: 180,
-                dimmed: ActivePeq.bypass,
-              })}
+              draw={({ ctx, toPx }) => {
+                drawCurves({
+                  ctx,
+                  toPx,
+
+                  xMin: GRAPH_X_MIN,
+                  xMax: GRAPH_X_MAX,
+                  yMin: GRAPH_Y_MIN,
+                  yMax: GRAPH_Y_MAX,
+                  curves: [
+                    {
+                      points: sumPhaseCurvePoints([
+                        getPeqPhasePoints({ freqs, bands: displayPeq }),
+                        getCrossoverPhasePoints({
+                          freqs,
+                          highPass: highPassSpec,
+                          lowPass: lowPassSpec,
+                        }),
+                      ]),
+                      style: { strokeColor: '#e5e7eb', dimmed: ActivePeq.bypass },
+                    },
+                  ],
+                });
+              }}
             />
           )}
         </div>