map cell view improved

packages/web/src/celldata/MapCellView.svelte

@@ -1,7 +1,60 @@
 <script lang="ts">
-  import MapView from '../elements/MapView.svelte';
+  import _ from 'lodash';
+  import MapView, { findAllObjectPaths, findLatPaths, findLonPaths } from '../elements/MapView.svelte';
+  import SelectField from '../forms/SelectField.svelte';
 
   export let selection;
+
+  $: latitudeFields = _.uniq(_.flatten(selection.map(x => findLatPaths(x.rowData)))) as string[];
+  $: longitudeFields = _.uniq(_.flatten(selection.map(x => findLonPaths(x.rowData)))) as string[];
+  $: allFields = _.uniq(_.flatten(selection.map(x => findAllObjectPaths(x.rowData)))) as string[];
+
+  let latitudeField = '';
+  let longitudeField = '';
+
+  $: {
+    if (latitudeFields.length > 0 && !allFields.includes(latitudeField)) {
+      latitudeField = latitudeFields[0];
+    }
+  }
+  $: {
+    if (longitudeFields.length > 0 && !allFields.includes(longitudeField)) {
+      longitudeField = longitudeFields[0];
+    }
+  }
 </script>
 
-<MapView {selection} />
+<div class="container">
+  {#if allFields.length >= 2}
+    <div>
+      Lat:
+      <SelectField
+        isNative
+        options={allFields.map(x => ({ label: x, value: x }))}
+        value={latitudeField}
+        on:change={e => {
+          latitudeField = e.detail;
+        }}
+      />
+      Lon:
+      <SelectField
+        isNative
+        options={allFields.map(x => ({ label: x, value: x }))}
+        value={longitudeField}
+        on:change={e => {
+          longitudeField = e.detail;
+        }}
+      />
+    </div>
+  {/if}
+
+  <MapView {selection} {latitudeField} {longitudeField} />
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+</style>

packages/web/src/datagrid/InplaceEditor.svelte

@@ -1,12 +1,3 @@
-<script lang="ts" context="module">
-  function getEditedValue(value) {
-    if (value?.type == 'Buffer' && _.isArray(value.data)) return '0x' + arrayToHexString(value.data);
-    if (value?.$oid) return `ObjectId("${value?.$oid}")`;
-    if (_.isPlainObject(value) || _.isArray(value)) return JSON.stringify(value);
-    return value;
-  }
-</script>
-
 <script lang="ts">
   import keycodes from '../utility/keycodes';
   import { onMount, tick } from 'svelte';

packages/web/src/elements/MapView.svelte

@@ -1,16 +1,44 @@
 <script lang="ts" context="module">
+  function findLatLonPaths(obj, attrTest, res = [], prefix = '') {
+    for (const key of Object.keys(obj)) {
+      if (attrTest(key, obj[key])) {
+        res.push(prefix + key);
+      }
+      if (_.isPlainObject(obj[key])) {
+        findLatLonPaths(obj[key], attrTest, res, prefix + key + '.');
+      }
+    }
+    return res;
+  }
+  export function findLatPaths(obj) {
+    return findLatLonPaths(obj, x => x.includes('lat'));
+  }
+  export function findLonPaths(obj) {
+    return findLatLonPaths(obj, x => x.includes('lon') || x.includes('lng'));
+  }
+  export function findAllObjectPaths(obj) {
+    return findLatLonPaths(obj, (_k, v) => v != null && !_.isNaN(Number(v)));
+  }
+
   export function selectionCouldBeShownOnMap(selection) {
     if (selection.length > 0 && _.find(selection, x => isWktGeometry(x.value))) {
       return true;
     }
 
     if (
-      selection.find(x => x.column.toLowerCase().includes('lat')) &&
+      selection.length > 0 &&
-      (selection.find(x => x.column.toLowerCase().includes('lon')) ||
+      _.find(selection, x => findLatPaths(x.rowData).length > 0 && findLonPaths(x.rowData).length > 0)
-        selection.find(x => x.column.toLowerCase().includes('lng')))
     ) {
       return true;
     }
+
+    // if (
+    //   selection.find(x => x.column.toLowerCase().includes('lat')) &&
+    //   (selection.find(x => x.column.toLowerCase().includes('lon')) ||
+    //     selection.find(x => x.column.toLowerCase().includes('lng')))
+    // ) {
+    //   return true;
+    // }
     return false;
   }
 </script>
@@ -21,7 +49,7 @@
   import 'leaflet/dist/leaflet.css';
   import leaflet from 'leaflet';
   import wellknown from 'wellknown';
-  import { isWktGeometry, ScriptWriter, ScriptWriterJson } from 'dbgate-tools';
+  import { isWktGeometry, ScriptWriter, ScriptWriterJson, stringifyCellValue } from 'dbgate-tools';
   import resizeObserver from '../utility/resizeObserver';
   import openNewTab from '../utility/openNewTab';
   import contextMenu from '../utility/contextMenu';
@@ -31,6 +59,9 @@
 
   export let selection;
 
+  export let latitudeField = '';
+  export let longitudeField = '';
+
   let refContainer;
   let map;
 
@@ -39,7 +70,9 @@
 
   function createColumnsTable(cells) {
     if (cells.length == 0) return '';
-    return `<table>${cells.map(cell => `<tr><td>${cell.column}</td><td>${cell.value}</td></tr>`).join('\n')}</table>`;
+    return `<table>${cells
+      .map(cell => `<tr><td>${cell.column}</td><td>${stringifyCellValue(cell.value)}</td></tr>`)
+      .join('\n')}</table>`;
   }
 
   function addSelectionToMap() {
@@ -57,12 +90,15 @@
 
     for (const rowKey of _.keys(selectedRows)) {
       const cells = selectedRows[rowKey];
-      const lat = cells.find(x => x.column.toLowerCase().includes('lat'));
+      // const lat = cells.find(x => x.column.toLowerCase().includes('lat'));
-      const lon = cells.find(x => x.column.toLowerCase().includes('lon') || x.column.toLowerCase().includes('lng'));
+      // const lon = cells.find(x => x.column.toLowerCase().includes('lon') || x.column.toLowerCase().includes('lng'));
 
       const geoValues = cells.map(x => x.value).filter(isWktGeometry);
 
-      if (lat && lon) {
+      const lat = latitudeField ? Number(_.get(cells[0].rowData, latitudeField)) : NaN;
+      const lon = longitudeField ? Number(_.get(cells[0].rowData, longitudeField)) : NaN;
+
+      if (!_.isNaN(lat) && !_.isNaN(lon)) {
         features.push({
           type: 'Feature',
           properties: {
@@ -70,7 +106,7 @@
           },
           geometry: {
             type: 'Point',
-            coordinates: [lon.value, lat.value],
+            coordinates: [Number(lon), Number(lat)],
           },
         });
       }
@@ -156,6 +192,8 @@
 
   $: {
     selection;
+    latitudeField;
+    longitudeField;
     addSelectionToMap();
   }
 

packages/web/src/widgets/CellDataWidget.svelte

@@ -47,14 +47,14 @@
   ];
 
   function autodetect(selection) {
-    if (selection[0]?.engine?.databaseEngineTypes?.includes('document')) {
-      return 'jsonRow';
-    }
-
     if (selectionCouldBeShownOnMap(selection)) {
       return 'map';
     }
 
+    if (selection[0]?.engine?.databaseEngineTypes?.includes('document')) {
+      return 'jsonRow';
+    }
+
     const value = selection.length == 1 ? selection[0].value : null;
     if (_.isString(value)) {
       if (value.startsWith('[') || value.startsWith('{')) return 'json';