perf(ui): optimize curves graph component

Do not use whole layer as trigger for histo recalc; use the canvas cache
of the layer - it more reliably indicates when the layer pixel data has
changed, and fixes an issue where we can miss the first histo calc due
to race conditiong with async layer bbox calculation.

Author: psychedelicious

invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerCurvesAdjustmentsEditor.tsx

@@ -1,11 +1,12 @@
 import { Box, Flex } from '@invoke-ai/ui-library';
+import { useStore } from '@nanostores/react';
 import { createSelector } from '@reduxjs/toolkit';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useEntityAdapterContext } from 'features/controlLayers/contexts/EntityAdapterContext';
 import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
 import { rasterLayerAdjustmentsCurvesUpdated } from 'features/controlLayers/store/canvasSlice';
 import { selectCanvasSlice, selectEntity } from 'features/controlLayers/store/selectors';
-import type { ChannelName, ChannelPoints } from 'features/controlLayers/store/types';
+import type { ChannelName, ChannelPoints, CurvesAdjustmentsConfig } from 'features/controlLayers/store/types';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -16,6 +17,13 @@ const DEFAULT_POINTS: ChannelPoints = [
   [255, 255],
 ];
 
+const DEFAULT_CURVES: CurvesAdjustmentsConfig = {
+  master: DEFAULT_POINTS,
+  r: DEFAULT_POINTS,
+  g: DEFAULT_POINTS,
+  b: DEFAULT_POINTS,
+};
+
 type ChannelHistograms = Record<ChannelName, number[] | null>;
 
 const calculateHistogramsFromImageData = (imageData: ImageData): ChannelHistograms | null => {
@@ -62,29 +70,29 @@ export const RasterLayerCurvesAdjustmentsEditor = memo(() => {
   const entityIdentifier = useEntityIdentifierContext<'raster_layer'>();
   const adapter = useEntityAdapterContext<'raster_layer'>('raster_layer');
   const { t } = useTranslation();
-  const selectLayer = useMemo(
-    () => createSelector(selectCanvasSlice, (canvas) => selectEntity(canvas, entityIdentifier)),
-    [entityIdentifier]
-  );
-  const layer = useAppSelector(selectLayer);
+  const selectCurves = useMemo(() => {
+    return createSelector(
+      selectCanvasSlice,
+      (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments?.curves ?? DEFAULT_CURVES
+    );
+  }, [entityIdentifier]);
+  const curves = useAppSelector(selectCurves);
+
   const selectIsDisabled = useMemo(() => {
     return createSelector(
       selectCanvasSlice,
       (canvas) => selectEntity(canvas, entityIdentifier)?.adjustments?.enabled !== true
     );
   }, [entityIdentifier]);
   const isDisabled = useAppSelector(selectIsDisabled);
+  // The canvas cache for the layer serves as a proxy for when the layer changes and can be used to trigger histo recalc
+  const canvasCache = useStore(adapter.$canvasCache);
 
   const [histMaster, setHistMaster] = useState<number[] | null>(null);
   const [histR, setHistR] = useState<number[] | null>(null);
   const [histG, setHistG] = useState<number[] | null>(null);
   const [histB, setHistB] = useState<number[] | null>(null);
 
-  const pointsMaster = layer?.adjustments?.curves.master ?? DEFAULT_POINTS;
-  const pointsR = layer?.adjustments?.curves.r ?? DEFAULT_POINTS;
-  const pointsG = layer?.adjustments?.curves.g ?? DEFAULT_POINTS;
-  const pointsB = layer?.adjustments?.curves.b ?? DEFAULT_POINTS;
-
   const recalcHistogram = useCallback(() => {
     try {
       const rect = adapter.transformer.getRelativeRect();
@@ -110,7 +118,7 @@ export const RasterLayerCurvesAdjustmentsEditor = memo(() => {
 
   useEffect(() => {
     recalcHistogram();
-  }, [layer?.objects, layer?.adjustments, recalcHistogram]);
+  }, [canvasCache, recalcHistogram]);
 
   const onChangePoints = useCallback(
     (channel: ChannelName, pts: ChannelPoints) => {
@@ -138,28 +146,28 @@ export const RasterLayerCurvesAdjustmentsEditor = memo(() => {
         <RasterLayerCurvesAdjustmentsGraph
           title={t('controlLayers.adjustments.master')}
           channel="master"
-          points={pointsMaster}
+          points={curves.master}
           histogram={histMaster}
           onChange={onChangeMaster}
         />
         <RasterLayerCurvesAdjustmentsGraph
           title={t('common.red')}
           channel="r"
-          points={pointsR}
+          points={curves.r}
           histogram={histR}
           onChange={onChangeR}
         />
         <RasterLayerCurvesAdjustmentsGraph
           title={t('common.green')}
           channel="g"
-          points={pointsG}
+          points={curves.g}
           histogram={histG}
           onChange={onChangeG}
         />
         <RasterLayerCurvesAdjustmentsGraph
           title={t('common.blue')}
           channel="b"
-          points={pointsB}
+          points={curves.b}
           histogram={histB}
           onChange={onChangeB}
         />

invokeai/frontend/web/src/features/controlLayers/store/types.ts

@@ -404,6 +404,7 @@ const zChannelName = z.enum(['master', 'r', 'g', 'b']);
 const zCurvesAdjustmentsConfig = z.record(zChannelName, zChannelPoints);
 export type ChannelName = z.infer<typeof zChannelName>;
 export type ChannelPoints = z.infer<typeof zChannelPoints>;
+export type CurvesAdjustmentsConfig = z.infer<typeof zCurvesAdjustmentsConfig>;
 
 /**
  * The curves adjustments are stored as LUTs in the Konva node attributes. Konva will use these values when applying