Fix crash: visualChannels: Cannot read property label of undefined (#…

…1886) Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com> Co-authored-by: Ilya Boyandin <ilyabo@gmail.com>
keplergl · Aug 3, 2022 · 66de62c · 66de62c
1 parent 57f77dd
commit 66de62c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 20 deletions.
diff --git a/src/components/map/layer-hover-info.tsx b/src/components/map/layer-hover-info.tsx
@@ -169,22 +169,16 @@ const CellInfo = ({
     return null;
   }, [fieldsToShow, sizeField, layer, data.elevationValue]);
 
+  const colorMeasure = layer.getVisualChannelDescription('color').measure;
+  const sizeMeasure = layer.getVisualChannelDescription('size').measure;
   return (
     <tbody>
       <Row name={'total points'} key="count" value={String(data.points && data.points.length)} />
-      {colorField && layer.visualChannels.color ? (
-        <Row
-          name={layer.getVisualChannelDescription('color').measure}
-          key="color"
-          value={colorValue || 'N/A'}
-        />
+      {colorField && layer.visualChannels.color && colorMeasure ? (
+        <Row name={colorMeasure} key="color" value={colorValue || 'N/A'} />
       ) : null}
-      {sizeField && layer.visualChannels.size ? (
-        <Row
-          name={layer.getVisualChannelDescription('size').measure}
-          key="size"
-          value={elevationValue || 'N/A'}
-        />
+      {sizeField && layer.visualChannels.size && sizeMeasure ? (
+        <Row name={sizeMeasure} key="size" value={elevationValue || 'N/A'} />
       ) : null}
     </tbody>
   );

diff --git a/src/components/map/map-legend.tsx b/src/components/map/map-legend.tsx
@@ -85,7 +85,7 @@ export const VisualChannelMetric = ({name}) => {
 
 export type LayerSizeLegendProps = {
   label: string;
-  name: string;
+  name: string | undefined;
 };
 
 /** @type {typeof import('./map-legend').LayerSizeLegend} */
@@ -96,7 +96,7 @@ export const LayerSizeLegend: React.FC<LayerSizeLegendProps> = ({label, name}) =
         <span className="legend--layer_by">{label ? <FormattedMessage id={label} /> : null}</span>
         <span className="legend--layer_by"> by </span>
       </p>
-      <VisualChannelMetric name={name} />
+      {name && <VisualChannelMetric name={name} />}
     </div>
   ) : null;
 

diff --git a/src/layers/src/aggregation-layer.ts b/src/layers/src/aggregation-layer.ts
@@ -166,14 +166,14 @@ export default class AggregationLayer extends Layer {
    */
   getVisualChannelDescription(key: string): VisualChannelDescription {
     const channel = this.visualChannels[key];
-    if (!channel) return {label: '', measure: ''};
+    if (!channel) return {label: '', measure: undefined};
     // e.g. label: Color, measure: Average of ETA
     const {range, field, defaultMeasure, aggregation} = channel;
     const fieldConfig = this.config[field];
-    const label = this.visConfigSettings[range].label;
+    const label = this.visConfigSettings[range]?.label;
 
     return {
-      label: typeof label === 'function' ? label(this.config) : label,
+      label: typeof label === 'function' ? label(this.config) : label || '',
       measure:
         fieldConfig && aggregation
           ? `${this.config.visConfig[aggregation]} of ${fieldConfig.displayName ||

diff --git a/src/layers/src/base-layer.ts b/src/layers/src/base-layer.ts
@@ -168,7 +168,7 @@ export type VisualChannel = {
 
 export type VisualChannelDescription = {
   label: string;
-  measure: string;
+  measure: string | undefined;
 };
 
 export type ColumnPairs = {[key: string]: {pair: string; fieldPairKey: string}};
@@ -486,12 +486,12 @@ class Layer {
   getVisualChannelDescription(key: string): VisualChannelDescription {
     // e.g. label: Color, measure: Vehicle Type
     const channel = this.visualChannels[key];
-    if (!channel) return {label: '', measure: ''};
+    if (!channel) return {label: '', measure: undefined};
     const rangeSettings = this.visConfigSettings[channel.range];
     const fieldSettings = this.config[channel.field];
     const label = rangeSettings?.label;
     return {
-      label: typeof label === 'function' ? label(this.config) : label,
+      label: typeof label === 'function' ? label(this.config) : label || '',
       measure: fieldSettings
         ? fieldSettings.displayName || fieldSettings.name
         : channel.defaultMeasure