Fix range input behavior when setting min/max values

 * Don't let values get stale
 * Improve response plot and scale+shift AWP handling when invalid ranges are provided

backend/Dockerfile

@@ -4,7 +4,7 @@ RUN apt-get update && apt-get install -y curl libmariadbclient-dev-compat build-
 
 # Install rust
 RUN curl https://sh.rustup.rs/ -sSf | \
-  sh -s -- -y --default-toolchain nightly-2024-02-02
+  sh -s -- -y --default-toolchain nightly-2024-02-03
 
 ENV PATH="/root/.cargo/bin:${PATH}"
 

public/ScaleAndShiftAWP.js

@@ -16,6 +16,10 @@ const mkLinearToExponential = (xMin, xMax, yMin, yMax, steepness) => {
   }
 
   const inputRange = xMax - xMin;
+  if (inputRange <= 0) {
+    console.warn('Found invalid input range, returning a constant function.', { xMin, xMax });
+    return () => yMin;
+  }
   const outputRange = yMax - yMin;
 
   return x => {
@@ -35,6 +39,10 @@ const mkExponentialToLinear = (yMin, yMax, xMin, xMax, steepness) => {
   }
 
   const inputRange = xMax - xMin;
+  if (inputRange <= 0) {
+    console.warn('Found invalid input range, returning a constant function.', { xMin, xMax });
+    return () => yMin;
+  }
   const outputRange = yMax - yMin;
 
   return y => {
@@ -104,9 +112,15 @@ class ScaleAndShiftAWP extends AudioWorkletProcessor {
     const input = new Float32Array(SAMPLE_COUNT);
     const output = new Float32Array(SAMPLE_COUNT);
     const step = (this.inputMax - this.inputMin) / (SAMPLE_COUNT - 1);
+    const inputRange = this.inputMax - this.inputMin;
+
     for (let i = 0; i < SAMPLE_COUNT; i += 1) {
       input[i] = this.inputMin + i * step;
-      output[i] = this.convert(input[i]);
+      if (inputRange <= 0) {
+        output[i] = +'x';
+      } else {
+        output[i] = this.convert(input[i]);
+      }
     }
     this.port.postMessage({ type: 'responsePlot', input, output });
   }

src/graphEditor/nodes/CustomAudio/ScaleAndShift/RangeInput.tsx

@@ -34,21 +34,18 @@ export const RangeInput: React.FC<RangeInputProps> = ({
     newDisplayValue[ix] = evt.target.value;
     setDisplayValue(newDisplayValue);
 
-    const newValue = +evt.target.value;
-    if (Number.isNaN(newValue)) {
+    const [newMin, newMax] = [+newDisplayValue[0], +newDisplayValue[1]];
+    if (Number.isNaN(newMin) || Number.isNaN(newMax)) {
       setErrMsg('Non-numerical values entered');
       return;
-    } else if ((ix === 0 && value[1] < newValue) || (ix === 1 && value[0] > newValue)) {
+    } else if (newMin >= newMax) {
       setErrMsg('Invalid range');
       return;
     }
 
-    const newRange = [...value] as [number, number];
-    newRange[ix] = newValue;
+    const newRange = [newMin, newMax] as [number, number];
     onChange(newRange);
-    if (setErrMsg !== null) {
-      setErrMsg(null);
-    }
+    setErrMsg(null);
   };
 
   return (

src/graphEditor/nodes/CustomAudio/ScaleAndShift/ResponsePlot.svelte

@@ -65,6 +65,10 @@
       .attr('fill', LINE_COLOR);
 
     const updatePlot = (data: ResponsePlotData) => {
+      svgElement.selectAll('.grid').remove();
+      svgElement.selectAll('.line').remove();
+      svgElement.selectAll('.error-text').remove();
+
       const xExtent = d3.extent(data.input);
       const yExtent = d3.extent(data.output);
       if (
@@ -73,9 +77,22 @@
         yExtent[0] === undefined ||
         yExtent[1] === undefined
       ) {
-        throw new Error('Invalid data');
+        xAxisElem.style('display', 'none');
+        yAxisElem.style('display', 'none');
+        svgElement
+          .append('text')
+          .attr('class', 'error-text')
+          .attr('x', INNER_WIDTH / 2)
+          .attr('y', INNER_HEIGHT / 2)
+          .attr('text-anchor', 'middle')
+          .attr('fill', 'red')
+          .text('Invalid Range');
+        return;
       }
 
+      xAxisElem.style('display', null);
+      yAxisElem.style('display', null);
+
       xScale.domain(xExtent);
       yScale.domain(yExtent);
 
@@ -84,7 +101,6 @@
       yAxisElem.call(yAxis);
 
       // Add grid lines
-      svgElement.selectAll('.grid').remove();
       svgElement
         .append('g')
         .attr('class', 'grid')
@@ -108,9 +124,6 @@
         .attr('transform', `translate(0,${INNER_HEIGHT})`)
         .attr('stroke-opacity', 0.1);
 
-      // clear old line
-      svgElement.selectAll('.line').remove();
-
       svgElement
         .append('path')
         .attr('class', 'line')

src/graphEditor/nodes/CustomAudio/ScaleAndShift/ScaleAndShiftUI.tsx

@@ -129,28 +129,12 @@ const ScaleAndShiftSmallView: React.FC<ScaleAndShiftSmallViewProps> = ({
       const clampedNewState = {
         ...newState,
         input_range: [
-          R.clamp(
-            newState.input_min_max[0],
-            Math.min(newState.input_min_max[1], newState.input_range[1]),
-            newState.input_range[0]
-          ),
-          R.clamp(
-            Math.max(newState.input_min_max[0], newState.input_range[0]),
-            newState.input_min_max[1],
-            newState.input_range[1]
-          ),
+          R.clamp(newState.input_min_max[0], newState.input_min_max[1], newState.input_range[0]),
+          R.clamp(newState.input_min_max[0], newState.input_min_max[1], newState.input_range[1]),
         ] as const,
         output_range: [
-          R.clamp(
-            newState.output_min_max[0],
-            Math.min(newState.output_min_max[1], newState.output_range[1]),
-            newState.output_range[0]
-          ),
-          R.clamp(
-            Math.max(newState.output_min_max[0], newState.output_range[0]),
-            newState.output_min_max[1],
-            newState.output_range[1]
-          ),
+          R.clamp(newState.output_min_max[0], newState.output_min_max[1], newState.output_range[0]),
+          R.clamp(newState.output_min_max[0], newState.output_min_max[1], newState.output_range[1]),
         ] as const,
       };
 

src/graphEditor/nodes/CustomAudio/ScaleAndShift/scaleAndShift.tsx

@@ -114,7 +114,7 @@ export class ScaleAndShiftNode implements ForeignNode {
     if (!this.uiState.linearToExponentialState?.enabled) {
       if (this.awpHandle) {
         try {
-          this.awpHandle.disconnect();
+          this.firstShifterNode.disconnect(this.awpHandle);
         } catch (_err) {
           // pass
         }