[Feat] use appName in exported image html json map and csv data

src/components/kepler-gl.js

@@ -180,6 +180,7 @@ export const bottomWidgetSelector = (props, theme) => ({
 });
 
 export const modalContainerSelector = (props, rootNode) => ({
+  appName: props.appName,
   mapStyle: props.mapStyle,
   visState: props.visState,
   mapState: props.mapState,

src/components/modal-container.d.ts

@@ -13,7 +13,8 @@ import {ProviderState} from 'reducers/provider-state-updaters';
 import {OnSuccessCallBack} from 'actions';
 
 export type ModalContainerProps = {
-  rootNode: object;
+  appName: string;
+  rootNode: React.ReactNode;
   containerW: number;
   containerH: number;
   mapboxApiAccessToken: string;
@@ -27,12 +28,12 @@ export type ModalContainerProps = {
   uiStateActions: typeof UIStateActions;
   mapStyleActions: typeof MapStyleActions;
   providerActions: typeof ProviderActions;
-  onSaveToStorage: () => void,
-  cloudProviders: object[],
-  onLoadCloudMapSuccess: OnSuccessCallBack,
-  onLoadCloudMapError: OnErrorCallBack,
-  onExportToCloudSuccess:OnSuccessCallBack,
-  onExportToCloudError: OnErrorCallBack
+  onSaveToStorage: () => void;
+  cloudProviders: object[];
+  onLoadCloudMapSuccess: OnSuccessCallBack;
+  onLoadCloudMapError: OnErrorCallBack;
+  onExportToCloudSuccess: OnSuccessCallBack;
+  onExportToCloudError: OnErrorCallBack;
 };
 
 export default function ModalContainerFactory(): React.Component<ModelContainerProps>;

src/components/modal-container.js

@@ -178,7 +178,7 @@ export default function ModalContainerFactory(
 
     _onExportImage = () => {
       if (!this.props.uiState.exportImage.processing) {
-        exportImage(this.props);
+        exportImage(this.props, `${this.props.appName}.png`);
         this.props.uiStateActions.cleanupExportImage();
         this._closeModal();
       }

src/utils/export-utils.js

@@ -36,10 +36,10 @@ import {set, generateHashId} from 'utils/utils';
 /**
  * Default file names
  */
-export const DEFAULT_IMAGE_NAME = 'kepler-gl.png';
+export const DEFAULT_IMAGE_NAME = 'kepler.gl.png';
 export const DEFAULT_HTML_NAME = 'kepler.gl.html';
-export const DEFAULT_JSON_NAME = 'keplergl.json';
-export const DEFAULT_DATA_NAME = 'kepler-gl';
+export const DEFAULT_JSON_NAME = 'kepler.gl.json';
+export const DEFAULT_DATA_NAME = 'kepler.gl';
 
 /**
  * Default json export settings
@@ -133,11 +133,11 @@ export function downloadFile(fileBlob, fileName) {
   }
 }
 
-export function exportImage(state) {
+export function exportImage(state, filename = DEFAULT_IMAGE_NAME) {
   const {imageDataUri} = state.uiState.exportImage;
   if (imageDataUri) {
     const file = dataURItoBlob(imageDataUri);
-    downloadFile(file, DEFAULT_IMAGE_NAME);
+    downloadFile(file, filename);
   }
 }
 
@@ -170,7 +170,8 @@ export function exportJson(state, options = {}) {
   const map = getMapJSON(state, options);
 
   const fileBlob = new Blob([exportToJsonString(map)], {type: 'application/json'});
-  downloadFile(fileBlob, DEFAULT_JSON_NAME);
+  const fileName = state.appName ? `${state.appName}.json` : DEFAULT_JSON_NAME;
+  downloadFile(fileBlob, fileName);
 }
 
 export function exportHtml(state, options) {
@@ -184,15 +185,15 @@ export function exportHtml(state, options) {
   };
 
   const fileBlob = new Blob([exportMapToHTML(data)], {type: 'text/html'});
-  downloadFile(fileBlob, DEFAULT_HTML_NAME);
+  downloadFile(fileBlob, state.appName ? `${state.appName}.html` : DEFAULT_HTML_NAME);
 }
 
 export function exportData(state, option) {
-  const {visState} = state;
+  const {visState, appName} = state;
   const {datasets} = visState;
   const {selectedDataset, dataType, filtered} = option;
   // get the selected data
-  const filename = DEFAULT_DATA_NAME;
+  const filename = appName ? appName : DEFAULT_DATA_NAME;
   const selectedDatasets = datasets[selectedDataset]
     ? [datasets[selectedDataset]]
     : Object.values(datasets);