Scatterplot fixes and improvements

app/gui/src/project-view/components/visualizations/ScatterplotVisualization.vue

@@ -7,6 +7,7 @@ import { Pattern } from '@/util/ast/match'
 import { getTextWidthBySizeAndFamily } from '@/util/measurement'
 import { defineKeybinds } from '@/util/visualizationBuiltins'
 import { computed, ref, watch, watchEffect, watchPostEffect } from 'vue'
+import { ToolbarItem } from './toolbar'
 
 export const name = 'Scatter Plot'
 export const icon = 'points'
@@ -707,12 +708,12 @@ watchPostEffect(() => {
   const yScale_ = yScale.value
   const plotData = getPlotData(data.value) as Point[]
   const series = Object.keys(data.value.axis).filter((s) => s != 'x')
-  const colorScale = (d: string) => {
+  const colorScale = (d: Point) => {
     const color = d3.scaleOrdinal(d3.schemeCategory10).domain(series)
     if (data.value.is_multi_series) {
-      return color(d)
+      return color(d.series ?? '')
     }
-    return DEFAULT_FILL_COLOR
+    return d.color ?? DEFAULT_FILL_COLOR
   }
   d3Points.value
     .selectAll<SVGPathElement, unknown>('path')
@@ -730,7 +731,7 @@ watchPostEffect(() => {
       'd',
       symbol.type(matchShape).size((d) => (d.size ?? 0.15) * SIZE_SCALE_MULTIPLER),
     )
-    .style('fill', (d) => colorScale(d.series || ''))
+    .style('fill', (d) => colorScale(d))
     .attr('transform', (d) => `translate(${xScale_(Number(d.x))}, ${yScale_(d.y)})`)
   if (data.value.points.labels === VISIBLE_POINTS) {
     d3Points.value
@@ -865,42 +866,49 @@ const makeSeriesLabelOptions = () => {
   return seriesOptions
 }
 
-config.setToolbar([
-  {
-    icon: 'select',
-    title: 'Enable Selection',
-    toggle: selectionEnabled,
-  },
-  {
-    icon: 'show_all',
-    title: 'Fit All',
-    onClick: () => zoomToSelected(false),
-  },
-  {
-    icon: 'zoom',
-    title: 'Zoom to Selected',
-    disabled: () => brushExtent.value == null,
-    onClick: zoomToSelected,
-  },
-  {
-    icon: 'add_to_graph_editor',
-    title: 'Create component of selected points',
-    disabled: () => !createNewFilterNodeEnabled.value,
-    onClick: createNewFilterNode,
-  },
-  {
-    type: 'textSelectionMenu',
-    selectedTextOption: yAxisSelected,
-    title: 'Choose Y Axis Label',
-    heading: 'Y Axis Label: ',
-    options: {
-      none: {
-        label: 'No Label',
-      },
-      ...makeSeriesLabelOptions(),
+const createTextSelectionButton = (): ToolbarItem => ({
+  type: 'textSelectionMenu',
+  selectedTextOption: yAxisSelected,
+  title: 'Choose Y Axis Label',
+  heading: 'Y Axis Label: ',
+  options: {
+    none: {
+      label: 'No Label',
     },
+    ...makeSeriesLabelOptions(),
   },
-])
+})
+
+function useScatterplotVizToolbar() {
+  const textSelectionButton = createTextSelectionButton()
+  return computed(() => [
+    {
+      icon: 'select',
+      title: 'Enable Selection',
+      toggle: selectionEnabled,
+    },
+    {
+      icon: 'show_all',
+      title: 'Fit All',
+      onClick: () => zoomToSelected(false),
+    },
+    {
+      icon: 'zoom',
+      title: 'Zoom to Selected',
+      disabled: () => brushExtent.value == null,
+      onClick: zoomToSelected,
+    },
+    {
+      icon: 'add_to_graph_editor',
+      title: 'Create component of selected points',
+      disabled: () => !createNewFilterNodeEnabled.value,
+      onClick: createNewFilterNode,
+    },
+    ...(data.value.is_multi_series ? [textSelectionButton] : []),
+  ])
+}
+
+config.setToolbar(useScatterplotVizToolbar())
 </script>
 
 <template>

distribution/lib/Standard/Visualization/0.0.0-dev/src/Scatter_Plot.enso

@@ -51,6 +51,9 @@ type Point_Data
     ## PRIVATE
     Row_Number
 
+    ## PRIVATE
+    Colour
+
     ## PRIVATE
 
        Returns all recognized point data fields.
@@ -94,6 +97,10 @@ type Point_Data
             candidates.find if_missing=candidates.first is_good
         Point_Data.Row_Number ->
             Point_Data.iota table.row_count
+        Point_Data.Color ->
+            colour_col = Point_Data.Colour.lookup_in table
+            is_good c = (self.is_recognized c).not
+            if is_good colour_col then colour_col else Error.throw Nothing
 
         _ -> Error.throw No_Fallback_Column
 

test/Visualization_Tests/src/Scatter_Plot_Spec.enso

@@ -80,6 +80,21 @@ add_specs suite_builder =
             table = Table.from_rows header [row_1, row_2]
             expect table (labels index 'y') '[{"size":40,"x":0,"y":10, "row_number": 0},{"size":50,"x":1,"y":20, "row_number": 1}]' '"get_row"'
 
+        group_builder.specify "recognises color and colour for the colour column, colour" <|
+            header = [ 'u'  , 'k' , 'size', 'colour']
+            row_1 =  [ 10   , 3  , 40, 'black']
+            row_2 =  [ 20   , 4  , 50, 'white']
+            table = Table.from_rows header [row_1, row_2]
+            expect table (labels 'u' 'k') '[{"x":10,"y":3,"color":"black","size":40,"row_number":0},{"x":20,"y":4,"color":"white","size":50,"row_number":1}]' '"get_row"'
+
+        group_builder.specify "recognizes color and colour for the colour column, color" <|
+            header = [ 'u'  , 's' , 'size', 'color']
+            row_1 =  [ 10   , 3  , 40, 'red']
+            row_2 =  [ 20   , 4  , 50, 'white']
+            row_3 =  [ 30   , 5  , 50, 'blue']
+            table = Table.from_rows header [row_1, row_2, row_3]
+            expect table (labels 'u' 's') '[{"x":10,"y":3,"color":"red", "size":40,"row_number": 0},{"x":20,"y":4,"color":"white", "size":50,"row_number": 1}, {"x":30,"y":5,"color":"blue", "size":50,"row_number": 2}]' '"get_row"'
+
         group_builder.specify "using indices for x if given a vector" <|
             vector = [0,10,20]
             expect vector no_labels '[{"x":0,"y":0, "row_number": 0},{"x":1,"y":10, "row_number": 1},{"x":2,"y":20, "row_number": 2}]' '"at"'