[Enhancement] better arc layer column config layout (#1345)

Signed-off-by: Shan He <heshan0131@gmail.com>
keplergl · Dec 7, 2020 · f046ac1 · f046ac1
1 parent 2ea853b
commit f046ac1
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 6 deletions.
diff --git a/src/components/side-panel/layer-panel/column-selector.js b/src/components/side-panel/layer-panel/column-selector.js
@@ -32,11 +32,13 @@ const ColumnRow = styled.div`
 `;
 
 const ColumnName = styled.div`
-  width: 25%;
+  width: 27%;
+  line-height: 1.2;
+  padding-right: 6px;
 `;
 
 const ColumnSelect = styled.div`
-  width: 75%;
+  width: 73%;
 `;
 
 ColumnSelectorFactory.deps = [FieldSelectorFactory];
@@ -47,8 +49,8 @@ function ColumnSelectorFactory(FieldSelector) {
       <ColumnName className="layer-config__column__name">
         <PanelLabel>
           <FormattedMessage id={`columns.${label}`} />
+          {!column.optional ? `  *` : null}
         </PanelLabel>
-        {!column.optional ? <PanelLabel>{`  *`}</PanelLabel> : null}
       </ColumnName>
       <ColumnSelect className="layer-config__column__select">
         <FieldSelector

diff --git a/src/utils/layer-utils.js b/src/utils/layer-utils.js
@@ -87,7 +87,7 @@ export function getLayerHoverProp({
     // deckgl layer to kepler-gl layer
     const layer = layers[overlay.props.idx];
 
-    if (layer.getHoverData && layersToRender[layer.id]) {
+    if (layer && layer.getHoverData && layersToRender[layer.id]) {
       // if layer is visible and have hovered data
       const {
         config: {dataId}

diff --git a/test/node/utils/layer-utils-test.js b/test/node/utils/layer-utils-test.js
@@ -19,12 +19,14 @@
 // THE SOFTWARE.
 
 import test from 'tape';
-import {findDefaultLayer} from 'utils/layer-utils';
+import cloneDeep from 'lodash.clonedeep';
+
+import {findDefaultLayer, getLayerHoverProp} from 'utils/layer-utils';
 import {findPointFieldPairs, createNewDataEntry} from 'utils/dataset-utils';
 import {processCsvData, processGeojson} from 'processors/data-processor';
 import {GEOJSON_FIELDS} from 'constants/default-settings';
 import {LayerClasses, KeplerGlLayers} from 'layers';
-import {StateWTripGeojson} from 'test/helpers/mock-state';
+import {StateWTripGeojson, StateWFiles} from 'test/helpers/mock-state';
 
 const {PointLayer, ArcLayer, GeojsonLayer, LineLayer} = KeplerGlLayers;
 
@@ -799,3 +801,54 @@ test('layerUtils -> findDefaultLayer: TripLayer.1 -> ts as string', t => {
   );
   t.end();
 });
+
+test('layerUtils -> getLayerHoverProp', t => {
+  const visState = cloneDeep(StateWFiles).visState;
+  const layer = visState.layers[0];
+  const layerData = visState.layerData[0];
+  const layersToRender = {
+    [layer.id]: layer
+  };
+
+  const mockHoverInfo = {
+    object: {
+      data: layerData[0]
+    },
+    picked: true,
+    layer: {
+      props: {
+        idx: 0
+      }
+    }
+  };
+  const mockHoverInfoNotHovered = {
+    picked: false,
+    object: null
+  };
+  const args = {
+    interactionConfig: visState.interactionConfig,
+    hoverInfo: mockHoverInfo,
+    layers: visState.layers,
+    layersToRender,
+    datasets: visState.datasets
+  };
+
+  const expected = {
+    data: layerData[0],
+    fields: visState.datasets[layer.config.dataId].fields,
+    fieldsToShow: visState.interactionConfig.tooltip.config.fieldsToShow[layer.config.dataId],
+    layer
+  };
+
+  t.deepEqual(getLayerHoverProp(args), expected, 'should get correct layerHoverProp');
+
+  args.hoverInfo = mockHoverInfoNotHovered;
+  t.deepEqual(getLayerHoverProp(args), null, 'should get correct layerHoverProp');
+
+  visState.interactionConfig.tooltip.enabled = false;
+  args.hoverInfo = mockHoverInfo;
+
+  t.deepEqual(getLayerHoverProp(args), null, 'should get correct layerHoverProp');
+
+  t.end();
+});