Rename layer "aesthetics" to "mappings"

ui/src/minard/components/Histogram.tsx

@@ -47,7 +47,7 @@ export const Histogram: SFC<Props> = ({
   const layer = useLayer(
     env,
     () => {
-      const [table, aesthetics] = bin(
+      const [table, mappings] = bin(
         baseTable,
         x,
         xDomain,
@@ -56,7 +56,7 @@ export const Histogram: SFC<Props> = ({
         position
       )
 
-      return {table, aesthetics, colors, scales: {}}
+      return {table, mappings, colors, scales: {}}
     },
     [baseTable, xDomain, x, fill, position, binCount, colors]
   )
@@ -75,12 +75,12 @@ export const Histogram: SFC<Props> = ({
     },
   } = env
 
-  const {aesthetics, table} = layer
+  const {mappings, table} = layer
 
   const hoveredRowIndices = findHoveredRowIndices(
-    table.columns[aesthetics.xMin],
-    table.columns[aesthetics.xMax],
-    table.columns[aesthetics.yMax],
+    table.columns[mappings.xMin],
+    table.columns[mappings.xMax],
+    table.columns[mappings.yMax],
     hoverX,
     hoverY,
     xScale,

ui/src/minard/components/HistogramBars.tsx

@@ -24,11 +24,11 @@ const drawBars = (
 ): void => {
   clearCanvas(canvas, width, height)
 
-  const {table, aesthetics} = layer
-  const xMinCol = table.columns[aesthetics.xMin]
-  const xMaxCol = table.columns[aesthetics.xMax]
-  const yMinCol = table.columns[aesthetics.yMin]
-  const yMaxCol = table.columns[aesthetics.yMax]
+  const {table, mappings} = layer
+  const xMinCol = table.columns[mappings.xMin]
+  const xMaxCol = table.columns[mappings.xMax]
+  const yMinCol = table.columns[mappings.yMin]
+  const yMaxCol = table.columns[mappings.yMax]
 
   const context = canvas.getContext('2d')
 

ui/src/minard/index.ts

@@ -39,7 +39,7 @@ export interface AestheticScaleMappings {
 
 export interface Layer {
   table?: Table
-  aesthetics: AestheticDataMappings
+  mappings: AestheticDataMappings
   scales: AestheticScaleMappings
   colors?: string[]
   xDomain?: [number, number]

ui/src/minard/utils/getBarFill.ts

@@ -13,11 +13,11 @@ import {getGroupKey} from 'src/minard/utils/getGroupKey'
 //    key”) that the scale uses as a domain
 // 3. Lookup the scale and get the color via this representation
 export const getBarFill = (
-  {scales, aesthetics, table}: Layer,
+  {scales, mappings, table}: Layer,
   i: number
 ): string => {
   const fillScale = scales.fill
-  const values = aesthetics.fill.map(colKey => table.columns[colKey][i])
+  const values = mappings.fill.map(colKey => table.columns[colKey][i])
   const groupKey = getGroupKey(values)
   const fill = fillScale(groupKey)
 

ui/src/minard/utils/getHistogramTooltipProps.ts

@@ -5,14 +5,14 @@ export const getHistogramTooltipProps = (
   layer: Layer,
   rowIndices: number[]
 ): HistogramTooltipProps => {
-  const {table, aesthetics} = layer
-  const xMinCol = table.columns[aesthetics.xMin]
-  const xMaxCol = table.columns[aesthetics.xMax]
-  const yMinCol = table.columns[aesthetics.yMin]
-  const yMaxCol = table.columns[aesthetics.yMax]
+  const {table, mappings} = layer
+  const xMinCol = table.columns[mappings.xMin]
+  const xMaxCol = table.columns[mappings.xMax]
+  const yMinCol = table.columns[mappings.yMin]
+  const yMaxCol = table.columns[mappings.yMax]
 
   const counts = rowIndices.map(i => {
-    const grouping = aesthetics.fill.reduce(
+    const grouping = mappings.fill.reduce(
       (acc, colName) => ({
         ...acc,
         [colName]: table.columns[colName][i],

ui/src/minard/utils/plotEnvReducer.ts

@@ -33,7 +33,7 @@ export const INITIAL_PLOT_ENV: PlotEnv = {
   yDomain: null,
   baseLayer: {
     table: {columns: {}, columnTypes: {}},
-    aesthetics: {},
+    mappings: {},
     scales: {},
   },
   layers: {},
@@ -117,20 +117,21 @@ export const plotEnvReducer = (state: PlotEnv, action: PlotAction): PlotEnv =>
 
 /*
   Find all columns in the current in all layers that are mapped to the supplied
-  aesthetics
+  aesthetic mappings
 */
 const getColumnsForAesthetics = (
   state: PlotEnv,
-  aesthetics: string[]
+  mappings: string[]
 ): any[][] => {
   const {baseLayer, layers} = state
 
   const cols = []
 
   for (const layer of Object.values(layers)) {
-    for (const aes of aesthetics) {
-      if (layer.aesthetics[aes]) {
-        const colName = layer.aesthetics[aes]
+    for (const mapping of mappings) {
+      const colName = layer.mappings[mapping]
+
+      if (colName) {
         const col = layer.table
           ? layer.table.columns[colName]
           : baseLayer.table.columns[colName]
@@ -272,8 +273,8 @@ const getColorScale = (
   of data (for now). So the domain of the scale is a set of "group keys" which
   represent all possible groupings of data in the layer.
 */
-const getFillDomain = ({table, aesthetics}: Layer): string[] => {
-  const fillColKeys = aesthetics.fill
+const getFillDomain = ({table, mappings}: Layer): string[] => {
+  const fillColKeys = mappings.fill
 
   if (!fillColKeys.length) {
     return []
@@ -299,7 +300,7 @@ const setFillScales = (draftState: PlotEnv) => {
   layers
     .filter(
       // Pick out the layers that actually need a fill scale
-      layer => layer.aesthetics.fill && layer.colors && layer.colors.length
+      layer => layer.mappings.fill && layer.colors && layer.colors.length
     )
     .forEach(layer => {
       layer.scales.fill = getColorScale(getFillDomain(layer), layer.colors)