[Editor] Three point color for entropy display

Author: janishutz

notes.md

@@ -1,7 +1,6 @@
 # Improvement ideas
 ## Editor
 - [ ] Bug testing (I can't recall the issues we had previously)
-- [ ] Remove some of the options (or hide them better)
 - [X] Fix animation for sidebar collapse
 - [ ] Possibly: Resize listener on canvas container
 - [ ] Move advanced options into a popover instead of the sidebar
@@ -12,6 +11,7 @@
 - [X] Pre-Annotation sources name (retrieved from CSVs)
 - [ ] ~~Word boxes rendering -- TODO: Do we really need this? (editor technically supports it, but handling code is missing)~~
 - [X] Tour
+- [ ] Gradients with three points
 - [ ] Completion handler improvements (soft complete (not all manually done), complete (all manually done))
 - [ ] ~~Indices rendering outside box if possible?~~
 

src/editor/config.ts

@@ -84,6 +84,12 @@ export const heatMapMinColor: Ref<Color> = ref( {
     'b': 0
 } );
 
+export const heatMapMidColor: Ref<Color> = ref( {
+    'r': 0,
+    'g': 0,
+    'b': 0
+} );
+
 export const heatMapMaxColor: Ref<Color> = ref( {
     'r': 255,
     'g': 0,
@@ -92,6 +98,8 @@ export const heatMapMaxColor: Ref<Color> = ref( {
 
 export const heatMapMinValue = ref( 0 );
 
+export const heatMapMidValue = ref( 0.5 );
+
 export const heatMapMaxValue = ref( 1 );
 
 export const boundingBoxesOpacity = ref( 1 );

src/editor/render/fixations.ts

@@ -10,6 +10,8 @@ import {
     fixationsOpacity,
     heatMapMaxColor,
     heatMapMaxValue,
+    heatMapMidColor,
+    heatMapMidValue,
     heatMapMinColor,
     heatMapMinValue,
     hoveredFixationColor,
@@ -90,14 +92,25 @@ export const fixationRenderer = ( fixationsCanvas: Ref<HTMLCanvasElement | null>
 const drawPoint = ( ctx: CanvasRenderingContext2D ) => {
     return ( fixation: EditorFixation, color: string, radius: number ) => {
         if ( renderFixationHeatMapInsteadOfDefaultColour.value && fixation.assigned === 'machine' && fixation.disagreement !== undefined ) {
-            const percentage = fixation.disagreement / ( heatMapMaxValue.value - heatMapMinValue.value );
-            const col: Color = {
-                'r': heatMapMinColor.value.r + ( ( heatMapMaxColor.value.r - heatMapMinColor.value.r ) * percentage ),
-                'g': heatMapMinColor.value.g + ( ( heatMapMaxColor.value.g - heatMapMinColor.value.g ) * percentage ),
-                'b': heatMapMinColor.value.b + ( ( heatMapMaxColor.value.b - heatMapMinColor.value.b ) * percentage )
-            };
-
-            ctx.fillStyle = `rgb( ${ col.r }, ${ col.g }, ${ col.b } )`;
+            if ( fixation.disagreement < heatMapMidValue.value ) {
+                const percentage = fixation.disagreement / ( heatMapMidValue.value - heatMapMinValue.value );
+                const col: Color = {
+                    'r': heatMapMinColor.value.r + ( ( heatMapMidColor.value.r - heatMapMinColor.value.r ) * percentage ),
+                    'g': heatMapMinColor.value.g + ( ( heatMapMidColor.value.g - heatMapMinColor.value.g ) * percentage ),
+                    'b': heatMapMinColor.value.b + ( ( heatMapMidColor.value.b - heatMapMinColor.value.b ) * percentage )
+                };
+
+                ctx.fillStyle = `rgb( ${ col.r }, ${ col.g }, ${ col.b } )`;
+            } else {
+                const percentage = fixation.disagreement / ( heatMapMaxValue.value - heatMapMidValue.value );
+                const col: Color = {
+                    'r': heatMapMinColor.value.r + ( ( heatMapMaxColor.value.r - heatMapMidColor.value.r ) * percentage ),
+                    'g': heatMapMinColor.value.g + ( ( heatMapMaxColor.value.g - heatMapMidColor.value.g ) * percentage ),
+                    'b': heatMapMinColor.value.b + ( ( heatMapMaxColor.value.b - heatMapMidColor.value.b ) * percentage )
+                };
+
+                ctx.fillStyle = `rgb( ${ col.r }, ${ col.g }, ${ col.b } )`;
+            }
         } else {
             ctx.fillStyle = color;
         }