[Enhancement] add displayName to field and show displayName whenever …

…available (#1538) * add displayName to field and show displayName whenever available * format csv with displayName * copy displayName over when call addDataToMap createNewDataEntry * Add to layer hover and legend Signed-off-by: Shan He <heshan0131@gmail.com> Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com> Co-authored-by: Giuseppe Macrì <macri.giuseppe@gmail.com>
keplergl · Jul 19, 2021 · 8524061 · 8524061
1 parent a0d2a76
commit 8524061
Show file tree

Hide file tree

Showing 33 changed files with 344 additions and 82 deletions.
diff --git a/package.json b/package.json
@@ -193,7 +193,6 @@
     "babel-plugin-transform-builtin-extend": "^1.1.0",
     "babel-tape-runner": "^3.0.0",
     "babelify": "^10.0.0",
-    "coveralls": "^3.0.6",
     "documentation": "^9.1.1",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.10.0",
@@ -211,7 +210,7 @@
     "jest-puppeteer": "^4.4.0",
     "jsdom": "^16.4.0",
     "json-loader": "^0.5.4",
-    "nyc": "^11.4.1",
+    "nyc": "^15.1.0",
     "prettier": "1.19.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "puppeteer": "^2.1.1",

diff --git a/src/actions/actions.d.ts b/src/actions/actions.d.ts
@@ -40,6 +40,8 @@ export type ProtoDataset = {
       name: string;
       type?: string;
       format?: string;
+      displayName?: string;
+      id?: string;
     }[];
     rows: any[][];
   };
@@ -63,7 +65,7 @@ export type AddDataToMapPayload = {
   datasets: ProtoDataset[] | ProtoDataset;
   options?: AddDataToMapOptions;
   config?: ParsedConfig;
-  info?: Partial<MapInfo>
+  info?: Partial<MapInfo>;
 };
 
 export function addDataToMap(
@@ -93,7 +95,9 @@ export type KeplerGlInitPayload = {
   initialUiState?: Partial<UiState>;
 };
 
-export function keplerGlInit(options?: KeplerGlInitPayload): {
+export function keplerGlInit(
+  options?: KeplerGlInitPayload
+): {
   type: ActionTypes.INIT;
   payload: KeplerGlInitPayload;
 };
diff --git a/src/components/common/field-selector.js b/src/components/common/field-selector.js
@@ -29,7 +29,8 @@ import {toArray} from 'utils/utils';
 import {notNullorUndefined} from 'utils/data-utils';
 import FieldTokenFactory from '../common/field-token';
 
-const defaultDisplayOption = d => d.name;
+const defaultDisplayOption = d => d.displayName || d.name;
+const defaultValueOption = d => d.name;
 
 const StyledToken = styled.div`
   display: inline-block;
@@ -128,8 +129,8 @@ function FieldSelectorFactory(FieldListItemFactory) {
           .map(d =>
             fields.find(f =>
               notNullorUndefined(d) && d.name
-                ? d.name === defaultDisplayOption(f)
-                : d === defaultDisplayOption(f)
+                ? d.name === defaultValueOption(f)
+                : d === defaultValueOption(f)
             )
           )
           .filter(d => d)
@@ -156,7 +157,7 @@ function FieldSelectorFactory(FieldListItemFactory) {
             getOptionValue={d => d}
             closeOnSelect={this.props.closeOnSelect}
             displayOption={defaultDisplayOption}
-            filterOption="name"
+            filterOption="displayName"
             fixedOptions={this.props.suggested}
             inputTheme={this.props.inputTheme}
             size={this.props.size}

diff --git a/src/components/common/histogram-plot.js b/src/components/common/histogram-plot.js
@@ -62,7 +62,7 @@ function HistogramPlotFactory() {
     const y = useMemo(
       () =>
         scaleLinear()
-          .domain([0, max(histogram, getValue)])
+          .domain([0, Number(max(histogram, getValue))])
           .range([0, height]),
       [histogram, height, getValue]
     );

diff --git a/src/components/common/item-selector/item-selector.js b/src/components/common/item-selector/item-selector.js
@@ -277,6 +277,7 @@ class ItemSelector extends Component {
       className: classnames({
         active: this.state.showTypeahead
       }),
+      displayOption,
       disabled: this.props.disabled,
       onClick: this._showTypeahead,
       error: this.props.isError,
@@ -294,7 +295,6 @@ class ItemSelector extends Component {
               {...dropdownSelectProps}
               selectedItems={toArray(this.props.selectedItems)}
               placeholder={this.props.placeholder}
-              displayOption={displayOption}
               removeItem={this._removeItem}
               CustomChickletComponent={this.props.CustomChickletComponent}
               inputTheme={this.props.inputTheme}

diff --git a/src/components/map/layer-hover-info.js b/src/components/map/layer-hover-info.js
@@ -118,7 +118,13 @@ const EntryInfoRow = ({item, fields, data, primaryData, compareType}) => {
     compareType
   });
 
-  return <Row name={field.name} value={displayValue} deltaValue={displayDeltaValue} />;
+  return (
+    <Row
+      name={field.displayName || field.name}
+      value={displayValue}
+      deltaValue={displayDeltaValue}
+    />
+  );
 };
 
 // TODO: supporting comparative value for aggregated cells as well

diff --git a/src/components/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.js b/src/components/side-panel/interaction-panel/tooltip-config/tooltip-chicklet.js
@@ -115,22 +115,25 @@ function TooltipChickletFactory(dataId, config, onChange, fields) {
     };
 
     render() {
-      const {disabled, name, remove} = this.props;
+      const {disabled, item, displayOption, remove} = this.props;
       const {show} = this.state;
       const tooltipField = config.fieldsToShow[dataId].find(
-        fieldToShow => fieldToShow.name === name
+        fieldToShow => fieldToShow.name === item.name
       );
+      if (!tooltipField) {
+        return null;
+      }
       const formatLabels = getFormatLabels(fields, tooltipField.name);
       const hasFormat = Boolean(tooltipField.format);
       const selectionIndex = formatLabels.findIndex(fl => getValue(fl) === tooltipField.format);
       const hashStyle = show ? hashStyles.SHOW : hasFormat ? hashStyles.ACTIVE : null;
 
       return (
         <ChickletButton ref={node => (this.node = node)}>
-          <ChickletTag>{name}</ChickletTag>
+          <ChickletTag>{displayOption(item)}</ChickletTag>
           {formatLabels.length > 1 && (
             <ChickletAddonWrapper>
-              <ChickletAddon data-tip data-for={`addon-${name}`}>
+              <ChickletAddon data-tip data-for={`addon-${tooltipField.name}`}>
                 <IconDiv status={hashStyle}>
                   <Hash
                     height="8px"
@@ -140,7 +143,7 @@ function TooltipChickletFactory(dataId, config, onChange, fields) {
                     }}
                   />
                 </IconDiv>
-                <Tooltip id={`addon-${name}`} effect="solid">
+                <Tooltip id={`addon-${tooltipField.name}`} effect="solid">
                   <span>
                     {hasFormat ? (
                       getFormatTooltip(formatLabels, tooltipField.format)
@@ -155,7 +158,7 @@ function TooltipChickletFactory(dataId, config, onChange, fields) {
                   <DropdownList
                     options={formatLabels}
                     selectionIndex={selectionIndex}
-                    displayOption={item => item.label}
+                    displayOption={({label}) => label}
                     onOptionSelected={(result, e) => {
                       e.stopPropagation();
                       this.setState({
@@ -164,9 +167,9 @@ function TooltipChickletFactory(dataId, config, onChange, fields) {
 
                       const oldFieldsToShow = config.fieldsToShow[dataId];
                       const fieldsToShow = oldFieldsToShow.map(fieldToShow => {
-                        return fieldToShow.name === name
+                        return fieldToShow.name === tooltipField.name
                           ? {
-                              name,
+                              name: tooltipField.name,
                               format: getValue(result)
                             }
                           : fieldToShow;

diff --git a/src/components/side-panel/panel-header.js b/src/components/side-panel/panel-header.js
@@ -89,7 +89,7 @@ const StyledToolbar = styled(Toolbar)`
 export const PanelAction = ({item, onClick}) => (
   <StyledPanelAction data-tip data-for={`${item.id}-action`} onClick={onClick}>
     {item.label ? <p>{item.label}</p> : null}
-    <a target={item.blank ? '_blank' : ''} href={item.href}>
+    <a target={item.blank ? '_blank' : ''} href={item.href} rel="noreferrer">
       <item.iconComponent height="20px" {...item.iconComponentProps} />
     </a>
     {item.tooltip ? (

diff --git a/src/connect/with-local-selector.d.ts b/src/connect/with-local-selector.d.ts
@@ -1,8 +1,11 @@
 import {Component} from 'react';
 import KeplerGlContext from 'components/context';
+import {ConnectedComponent} from 'react-redux';
 
 interface ContextSelector {
   (state: any, context: any): KeplerGlContext;
 }
 
-export default function withLocalSelector<P, S>(component: Component<P, S>): Component<P, S>;
+export default function withLocalSelector<P, S>(
+  component: ConnectedComponent<P, S>
+): Component<P, S>;
diff --git a/src/layers/base-layer.js b/src/layers/base-layer.js
@@ -337,7 +337,8 @@ class Layer {
     return {
       label: this.visConfigSettings[this.visualChannels[key].range].label,
       measure: this.config[this.visualChannels[key].field]
-        ? this.config[this.visualChannels[key].field].name
+        ? (this.config[this.visualChannels[key].field].displayName ||
+          this.config[this.visualChannels[key].field].name)
         : this.visualChannels[key].defaultMeasure
     };
   }

diff --git a/src/processors/data-processor.js b/src/processors/data-processor.js
@@ -308,6 +308,8 @@ export function getFieldsFromData(data, fieldOrder) {
 
     return {
       name,
+      id: name,
+      displayName: name,
       format,
       fieldIdx: index,
       type: analyzerTypeToFieldType(type),
@@ -538,7 +540,7 @@ export function processGeojson(rawData) {
  * @returns {string} csv string
  */
 export function formatCsv(data, fields) {
-  const columns = fields.map(f => f.name);
+  const columns = fields.map(f => f.displayName || f.name);
   const formattedData = [columns];
 
   // parse geojson object as string

diff --git a/src/processors/file-handler.d.ts b/src/processors/file-handler.d.ts
@@ -18,7 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {ProtoDataset, AddDataToMapPayload} from 'actions/actions';
+import {AddDataToMapPayload} from 'actions/actions';
 
 export type FileCacheItem = {
   data: any;

diff --git a/src/reducers/vis-state-selectors.js b/src/reducers/vis-state-selectors.js
@@ -20,7 +20,7 @@
 
 import {createSelector} from 'reselect';
 
-// NOTE: default formats must match file-handler.js
+// NOTE: default formats must match file-handler-test.js
 const DEFAULT_FILE_EXTENSIONS = ['csv', 'json', 'geojson'];
 const DEFAULT_FILE_FORMATS = ['CSV', 'Json', 'GeoJSON'];
 

diff --git a/src/utils/dom-to-image.js b/src/utils/dom-to-image.js
@@ -115,7 +115,7 @@ function toSvg(node, options) {
 
 /**
  * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @param {Object} options - Rendering options
  * @return {Promise} - A promise that is fulfilled with a Uint8Array containing RGBA pixel data.
  * */
 function toPixelData(node, options) {
@@ -126,7 +126,7 @@ function toPixelData(node, options) {
 
 /**
  * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @param {Object} options - Rendering options
  * @return {Promise} - A promise that is fulfilled with a PNG image data URL
  * */
 function toPng(node, options) {
@@ -135,7 +135,7 @@ function toPng(node, options) {
 
 /**
  * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @param {Object} options - Rendering options
  * @return {Promise} - A promise that is fulfilled with a JPEG image data URL
  * */
 function toJpeg(node, options) {
@@ -145,7 +145,7 @@ function toJpeg(node, options) {
 
 /**
  * @param {Node} node - The DOM Node object to render
- * @param {Object} options - Rendering options, @see {@link toSvg}
+ * @param {Object} options - Rendering options
  * @return {Promise} - A promise that is fulfilled with a PNG image blob
  * */
 function toBlob(node, options) {

diff --git a/src/utils/table-utils/kepler-table.d.ts b/src/utils/table-utils/kepler-table.d.ts
@@ -7,11 +7,14 @@ export type Field = {
   analyzerType: string;
   id?: string;
   name: string;
+  displayName: string;
   format: string;
   type: string;
   fieldIdx: number;
   valueAccessor(v: any[]): any;
   filterProps?: any;
+  metadata?: any;
+  displayName: string;
 };
 
 export type GpuFilter = {
@@ -45,11 +48,7 @@ export type FilterDatasetOpt = {
   ignoreDomain?: boolean;
 };
 
-export function sortDatasetByColumn(
-  dataset: Dataset,
-  column: string,
-  mode?: string
-): Dataset;
+export function sortDatasetByColumn(dataset: Dataset, column: string, mode?: string): Dataset;
 
 export function findPointFieldPairs(fields: Feild[]): FieldPair[];
 

diff --git a/src/utils/table-utils/kepler-table.js b/src/utils/table-utils/kepler-table.js
@@ -71,6 +71,8 @@ class KeplerTable {
     const fields = data.fields.map((f, i) => ({
       ...f,
       fieldIdx: i,
+      id: f.name,
+      displayName: f.displayName || f.name,
       valueAccessor: maybeToDate.bind(
         null,
         // is time

diff --git a/test/browser/components/geocoder-panel-test.js b/test/browser/components/geocoder-panel-test.js
@@ -62,6 +62,8 @@ test('GeocoderPanel - render', t => {
           fields: [
             {
               name: 'lt',
+              id: 'lt',
+              displayName: 'lt',
               format: '',
               fieldIdx: 0,
               type: 'integer',
@@ -70,6 +72,8 @@ test('GeocoderPanel - render', t => {
             },
             {
               name: 'ln',
+              id: 'ln',
+              displayName: 'ln',
               format: '',
               fieldIdx: 1,
               type: 'integer',
@@ -78,6 +82,8 @@ test('GeocoderPanel - render', t => {
             },
             {
               name: 'icon',
+              id: 'icon',
+              displayName: 'icon',
               format: '',
               fieldIdx: 2,
               type: 'string',
@@ -86,6 +92,8 @@ test('GeocoderPanel - render', t => {
             },
             {
               name: 'text',
+              id: 'text',
+              displayName: 'text',
               format: '',
               fieldIdx: 3,
               type: 'string',