ui - show column inference icons throughout controls

Author: vxsl

src/controls/editor-mode/filters.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 
 import { DateRange, Icons } from '@eqworks/lumen-labs'
 
@@ -20,11 +20,16 @@ const Filters = () => {
   const groups = useStoreState((state) => state.groups)
   const groupFilter = useStoreState((state) => state.groupFilter)
   const filters = useStoreState((state) => state.filters)
-  const columns = useStoreState((state) => state.columns)
   const columnsAnalysis = useStoreState((state) => state.columnsAnalysis)
   const domain = useStoreState((state) => state.domain)
   const domainIsDate = useStoreState((state) => state.domainIsDate)
 
+  const filterData = useMemo(() => (
+    Object.fromEntries(Object.entries(columnsAnalysis)
+      .filter(([, { min, max, isNumeric }]) => isNumeric && min !== max)
+      .map(([c, { Icon }]) => [c, { Icon }]))
+  ), [columnsAnalysis])
+
   return (
     <WidgetControlCard
       clear={() => resetValue({ filters, groupFilter })}
@@ -68,10 +73,8 @@ const Filters = () => {
               values={filters}
               primaryKey='key'
               secondaryKey='filter'
-              data={columns.map(({ name }) => name).filter(c => {
-                const { min, max, isNumeric } = columnsAnalysis[c] || {}
-                return isNumeric && min !== max
-              })}
+              valueIcons={Object.values(filterData).map(({ Icon }) => Icon)}
+              data={Object.keys(filterData)}
               subData={[]}
               callback={(i, { key }) => {
                 if (i === filters.length) {

src/controls/shared/domain-controls.js

@@ -14,7 +14,6 @@ const DomainControls = () => {
   const update = useStoreActions(actions => actions.update)
   const userUpdate = useStoreActions(actions => actions.userUpdate)
   const resetValue = useStoreActions(actions => actions.resetValue)
-  const columns = useStoreState((state) => state.columns)
   const type = useStoreState((state) => state.type)
   const group = useStoreState((state) => state.group)
   const groupKey = useStoreState((state) => state.groupKey)
@@ -28,18 +27,15 @@ const DomainControls = () => {
   // local state
   const groupingOptional = useMemo(() => typeInfo[type]?.groupingOptional, [type])
 
-  const eligibleGroupKeyValues = useMemo(() => (
-    columns.map(({ name }) => name)
-      .filter(c => !columnsAnalysis[c]?.isNumeric)
-  ), [columns, columnsAnalysis])
-
   const eligibleDomainValues = useMemo(() => (
-    columns.map(({ name }) => name)
-      .filter(c =>
-        (groupingOptional || eligibleGroupKeyValues.includes(c))
-        && !(valueKeys.map(({ key }) => key).includes(c))
-      )
-  ), [columns, eligibleGroupKeyValues, groupingOptional, valueKeys])
+    Object.fromEntries(
+      Object.entries(columnsAnalysis)
+        .filter(([c, { isNumeric }]) =>
+          (groupingOptional || !isNumeric)
+          && !(valueKeys.map(({ key }) => key).includes(c)))
+        .map(([c, { Icon }]) => [c, { Icon }])
+    )
+  ), [columnsAnalysis, groupingOptional, valueKeys])
 
   useEffect(() => {
     if (!group && !groupingOptional) {
@@ -67,10 +63,11 @@ const DomainControls = () => {
             renderRow('Column',
               <CustomSelect
                 fullWidth
-                data={eligibleDomainValues}
+                data={Object.keys(eligibleDomainValues)}
+                icons={Object.values(eligibleDomainValues).map(({ Icon }) => Icon)}
                 value={domain.value}
                 onSelect={val => {
-                  const willGroup = eligibleGroupKeyValues.includes(val) && !groupingOptional
+                  const willGroup = !columnsAnalysis[val]?.isNumeric && !groupingOptional
                   userUpdate({
                     group: willGroup,
                     ...(

src/controls/shared/map-domain-controls.js

@@ -5,6 +5,7 @@ import CustomSelect from '../../components/custom-select'
 import WidgetControlCard from '../shared/components/widget-control-card'
 import { renderRow, renderSection } from './util'
 import { MAP_LAYER_VALUE_VIS, MAP_LAYER_GEO_KEYS } from '../../constants/map'
+import { Icons } from '@eqworks/lumen-labs'
 
 
 const MapDomainControls = () => {
@@ -41,6 +42,7 @@ const MapDomainControls = () => {
             <CustomSelect
               fullWidth
               data={eligibleDomainValues}
+              icons={eligibleDomainValues.map(() => Icons.AddPin)}
               value={domain.value}
               onSelect={val => {
                 // update groupKey with mapGroupKey value to have it available if we switch to a chart widget type

src/controls/shared/map-value-controls/map-linked-select.js

@@ -5,6 +5,7 @@ import { Tooltip, Icons, getTailwindConfigColor, makeStyles } from '@eqworks/lum
 
 import PluralLinkedSelect from '../../../components/plural-linked-select'
 import types from '../../../constants/type-info'
+import { useStoreState } from '../../../store'
 
 
 const classes = makeStyles({
@@ -38,6 +39,7 @@ const MapLinkedSelect = ({
   disableSubMessage,
   callback,
 }) => {
+  const columnsAnalysis = useStoreState((state) => state.columnsAnalysis)
   return (
     categories.map((mapVis, i) => {
       const match = values.findIndex(v => v.mapVis === mapVis)
@@ -69,6 +71,7 @@ const MapLinkedSelect = ({
             ]}
             titles={titles}
             values={values[match] ? [values[match]] : []}
+            {...(values[match] && { valueIcons: [columnsAnalysis[values[match][PRIMARY_KEY]]?.Icon] })}
             callback={(_, v) => callback(
               match,
               {

src/controls/shared/value-controls.js

@@ -5,11 +5,11 @@ import { Icons } from '@eqworks/lumen-labs'
 import modes from '../../constants/modes'
 import aggFunctions from '../../util/agg-functions'
 import { useStoreState, useStoreActions } from '../../store'
-import CustomSelect from '../../components/custom-select'
 import PluralLinkedSelect from '../../components/plural-linked-select'
 import WidgetControlCard from '../shared/components/widget-control-card'
 import { renderRow, renderSection } from './util'
 import MutedBarrier from './muted-barrier'
+import CustomSelect from '../../components/custom-select'
 
 
 const ValueControls = () => {
@@ -19,20 +19,18 @@ const ValueControls = () => {
 
   // common state
   const type = useStoreState((state) => state.type)
-  const columns = useStoreState((state) => state.columns)
   const group = useStoreState((state) => state.group)
   const domain = useStoreState((state) => state.domain)
   const valueKeys = useStoreState((state) => state.valueKeys)
   const dataHasVariance = useStoreState((state) => state.dataHasVariance)
   const dataSourceLoading = useStoreState((state) => state.ui.dataSourceLoading)
   const columnsAnalysis = useStoreState((state) => state.columnsAnalysis)
 
-  const eligibleColumns = useMemo(() => columns
-    .map(({ name }) => name)
-    .filter(c => (
-      c !== domain.value
-      && columnsAnalysis[c]?.isNumeric
-    )), [columns, columnsAnalysis, domain.value])
+  const eligibleColumns = useMemo(() =>
+    Object.fromEntries(
+      Object.entries(columnsAnalysis)
+        .filter(([c, { isNumeric }]) => c !== domain.value && isNumeric)
+    ), [columnsAnalysis, domain.value])
 
   // UI state
   const mode = useStoreState((state) => state.ui.mode)
@@ -46,9 +44,10 @@ const ValueControls = () => {
       staticQuantity={mode === modes.QL ? 3 : undefined}
       titles={['Column', 'Operation']}
       values={valueKeys}
+      valueIcons={Object.values(eligibleColumns).map(({ Icon }) => Icon)}
       primaryKey='key'
       secondaryKey='agg'
-      data={eligibleColumns}
+      data={Object.keys(eligibleColumns)}
       subData={Object.keys(aggFunctions)}
       disableSubs={!dataHasVariance}
       disableSubMessage="doesn't require aggregation."
@@ -71,7 +70,7 @@ const ValueControls = () => {
 
   return (
     <MutedBarrier
-      mute={!dataSourceLoading && (!type || !domain.value || !eligibleColumns.length)}
+      mute={!dataSourceLoading && (!type || !domain.value || !Object.keys(eligibleColumns)?.length)}
       {...!eligibleColumns.length && { message: 'Sorry, there are no eligible columns in this dataset.' }}
     >
       <WidgetControlCard
@@ -90,8 +89,9 @@ const ValueControls = () => {
                   fullWidth
                   multiSelect
                   value={valueKeys.map(({ key }) => key)}
-                  data={eligibleColumns}
+                  data={Object.keys(eligibleColumns)}
                   onSelect={(val) => userUpdate({ valueKeys: val.map(v => ({ key: v })) })}
+                  icons={Object.values(eligibleColumns).map(({ Icon }) => Icon)}
                 />
               )
           )