umap-project 2.7.2__py3-none-any.whl → 2.8.0__py3-none-any.whl

umap/static/umap/js/modules/data/layer.js

@@ -20,6 +20,8 @@ import { translate } from '../i18n.js'
 import { DataLayerPermissions } from '../permissions.js'
 import { Point, LineString, Polygon } from './features.js'
 import TableEditor from '../tableeditor.js'
+import { ServerStored } from '../saving.js'
+import * as Schema from '../schema.js'
 
 export const LAYER_TYPES = [
   DefaultLayer,
@@ -35,10 +37,11 @@ const LAYER_MAP = LAYER_TYPES.reduce((acc, klass) => {
   return acc
 }, {})
 
-export class DataLayer {
-  constructor(map, data) {
-    this.map = map
-    this.sync = map.sync_engine.proxy(this)
+export class DataLayer extends ServerStored {
+  constructor(umap, leafletMap, data = {}) {
+    super()
+    this._umap = umap
+    this.sync = umap.sync_engine.proxy(this)
     this._index = Array()
     this._features = {}
     this._geojson = null
@@ -46,8 +49,9 @@ export class DataLayer {
     this._loaded = false // Are layer metadata loaded
     this._dataloaded = false // Are layer data loaded
 
-    this.parentPane = this.map.getPane('overlayPane')
-    this.pane = this.map.createPane(`datalayer${stamp(this)}`, this.parentPane)
+    this._leafletMap = leafletMap
+    this.parentPane = this._leafletMap.getPane('overlayPane')
+    this.pane = this._leafletMap.createPane(`datalayer${stamp(this)}`, this.parentPane)
     this.pane.dataset.id = stamp(this)
     // FIXME: should be on layer
     this.renderer = L.svg({ pane: this.pane })
@@ -58,9 +62,12 @@ export class DataLayer {
       editMode: 'advanced',
     }
 
-    this._isDirty = false
     this._isDeleted = false
-    this.setUmapId(data.id)
+    this._referenceVersion = data._referenceVersion
+    // Do not save it later.
+    delete data._referenceVersion
+    data.id = data.id || crypto.randomUUID()
+
     this.setOptions(data)
 
     if (!Utils.isObject(this.options.remoteData)) {
@@ -77,8 +84,9 @@ export class DataLayer {
     }
     this.backupOptions()
     this.connectToMap()
-    this.permissions = new DataLayerPermissions(this)
-    if (!this.umap_id) {
+    this.permissions = new DataLayerPermissions(this._umap, this)
+
+    if (!this.createdOnServer) {
       if (this.showAtLoad()) this.show()
       this.isDirty = true
     }
@@ -89,23 +97,24 @@ export class DataLayer {
     if (this.isVisible()) this.propagateShow()
   }
 
-  set isDirty(status) {
-    this._isDirty = status
+  get id() {
+    return this.options.id
+  }
+
+  get createdOnServer() {
+    return Boolean(this._referenceVersion)
+  }
+
+  onDirty(status) {
     if (status) {
-      this.map.isDirty = true
       // A layer can be made dirty by indirect action (like dragging layers)
       // we need to have it loaded before saving it.
       if (!this.isLoaded()) this.fetchData()
     } else {
-      this.map.checkDirty()
       this.isDeleted = false
     }
   }
 
-  get isDirty() {
-    return this._isDirty
-  }
-
   set isDeleted(status) {
     this._isDeleted = status
     if (status) this.isDirty = status
@@ -122,9 +131,7 @@ export class DataLayer {
   getSyncMetadata() {
     return {
       subject: 'datalayer',
-      metadata: {
-        id: this.umap_id || null,
-      },
+      metadata: { id: this.id },
     }
   }
 
@@ -134,7 +141,7 @@ export class DataLayer {
     for (const impact of impacts) {
       switch (impact) {
         case 'ui':
-          this.map.onDataLayersChanged()
+          this._umap.onDataLayersChanged()
           break
         case 'data':
           if (fields.includes('options.type')) {
@@ -159,9 +166,9 @@ export class DataLayer {
   }
 
   autoLoaded() {
-    if (!this.map.datalayersFromQueryString) return this.options.displayOnLoad
-    const datalayerIds = this.map.datalayersFromQueryString
-    let loadMe = datalayerIds.includes(this.umap_id.toString())
+    if (!this._umap.datalayersFromQueryString) return this.options.displayOnLoad
+    const datalayerIds = this._umap.datalayersFromQueryString
+    let loadMe = datalayerIds.includes(this.id.toString())
     if (this.options.old_id) {
       loadMe = loadMe || datalayerIds.includes(this.options.old_id.toString())
     }
@@ -198,7 +205,7 @@ export class DataLayer {
     const visible = this.isVisible()
     if (this.layer) this.layer.clearLayers()
     // delete this.layer?
-    if (visible) this.map.removeLayer(this.layer)
+    if (visible) this._leafletMap.removeLayer(this.layer)
     const Class = LAYER_MAP[this.options.type] || DefaultLayer
     this.layer = new Class(this)
     // Rendering layer changed, so let's force reset the feature rendering too.
@@ -216,13 +223,13 @@ export class DataLayer {
   }
 
   async fetchData() {
-    if (!this.umap_id) return
+    if (!this.createdOnServer) return
     if (this._loading) return
     this._loading = true
-    const [geojson, response, error] = await this.map.server.get(this._dataUrl())
+    const [geojson, response, error] = await this._umap.server.get(this._dataUrl())
     if (!error) {
-      this._reference_version = response.headers.get('X-Datalayer-Version')
-      // FIXME: for now this property is set dynamically from backend
+      this.setReferenceVersion({ response, sync: false })
+      // FIXME: for now the _umap_options property is set dynamically from backend
       // And thus it's not in the geojson file in the server
       // So do not let all options to be reset
       // Fix is a proper migration so all datalayers settings are
@@ -240,15 +247,16 @@ export class DataLayer {
 
   dataChanged() {
     if (!this.hasDataLoaded()) return
-    this.map.onDataLayersChanged()
+    this._umap.onDataLayersChanged()
     this.layer.dataChanged()
   }
 
   fromGeoJSON(geojson, sync = true) {
-    this.addData(geojson, sync)
+    const features = this.addData(geojson, sync)
     this._geojson = geojson
     this.onDataLoaded()
     this.dataChanged()
+    return features
   }
 
   onDataLoaded() {
@@ -258,6 +266,7 @@ export class DataLayer {
 
   async fromUmapGeoJSON(geojson) {
     if (geojson._storage) geojson._umap_options = geojson._storage // Retrocompat
+    geojson._umap_options.id = this.id
     if (geojson._umap_options) this.setOptions(geojson._umap_options)
     if (this.isRemoteLayer()) await this.fetchRemoteData()
     else this.fromGeoJSON(geojson, false)
@@ -281,14 +290,14 @@ export class DataLayer {
 
   reindex() {
     const features = Object.values(this._features)
-    Utils.sortFeatures(features, this.map.getOption('sortKey'), L.lang)
+    this.sortFeatures(features)
     this._index = features.map((feature) => stamp(feature))
   }
 
   showAtZoom() {
     const from = Number.parseInt(this.options.fromZoom, 10)
     const to = Number.parseInt(this.options.toZoom, 10)
-    const zoom = this.map.getZoom()
+    const zoom = this._leafletMap.getZoom()
     return !((!Number.isNaN(from) && zoom < from) || (!Number.isNaN(to) && zoom > to))
   }
 
@@ -300,32 +309,27 @@ export class DataLayer {
     if (!this.isRemoteLayer()) return
     if (!this.hasDynamicData() && this.hasDataLoaded() && !force) return
     if (!this.isVisible()) return
-    let url = this.map.localizeUrl(this.options.remoteData.url)
+    let url = this._umap.renderUrl(this.options.remoteData.url)
     if (this.options.remoteData.proxy) {
-      url = this.map.proxyUrl(url, this.options.remoteData.ttl)
+      url = this._umap.proxyUrl(url, this.options.remoteData.ttl)
     }
-    const response = await this.map.request.get(url)
+    const response = await this._umap.request.get(url)
     if (response?.ok) {
       this.clear()
-      this.map.formatter
+      return this._umap.formatter
         .parse(await response.text(), this.options.remoteData.format)
         .then((geojson) => this.fromGeoJSON(geojson))
     }
   }
 
   isLoaded() {
-    return !this.umap_id || this._loaded
+    return !this.createdOnServer || this._loaded
   }
 
   hasDataLoaded() {
     return this._dataloaded
   }
 
-  setUmapId(id) {
-    // Datalayer is null when listening creation form
-    if (!this.umap_id && id) this.umap_id = id
-  }
-
   backupOptions() {
     this._backupOptions = Utils.CopyJSON(this.options)
   }
@@ -347,25 +351,23 @@ export class DataLayer {
 
   connectToMap() {
     const id = stamp(this)
-    if (!this.map.datalayers[id]) {
-      this.map.datalayers[id] = this
+    if (!this._umap.datalayers[id]) {
+      this._umap.datalayers[id] = this
     }
-    if (!this.map.datalayers_index.includes(this)) {
-      this.map.datalayers_index.push(this)
+    if (!this._umap.datalayersIndex.includes(this)) {
+      this._umap.datalayersIndex.push(this)
     }
-    this.map.onDataLayersChanged()
+    this._umap.onDataLayersChanged()
   }
 
   _dataUrl() {
-    const template = this.map.options.urls.datalayer_view
-
-    let url = Utils.template(template, {
-      pk: this.umap_id,
-      map_id: this.map.options.umap_id,
+    let url = this._umap.urls.get('datalayer_view', {
+      pk: this.id,
+      map_id: this._umap.id,
     })
 
     // No browser cache for owners/editors.
-    if (this.map.hasEditMode()) url = `${url}?${Date.now()}`
+    if (this._umap.hasEditMode()) url = `${url}?${Date.now()}`
     return url
   }
 
@@ -392,7 +394,7 @@ export class DataLayer {
     this._index.push(id)
     this._features[id] = feature
     this.indexProperties(feature)
-    this.map.features_index[feature.getSlug()] = feature
+    this._umap.featuresIndex[feature.getSlug()] = feature
     this.showFeature(feature)
     this.dataChanged()
   }
@@ -401,7 +403,7 @@ export class DataLayer {
     const id = stamp(feature)
     if (sync !== false) feature.sync.delete()
     this.hideFeature(feature)
-    delete this.map.features_index[feature.getSlug()]
+    delete this._umap.featuresIndex[feature.getSlug()]
     feature.disconnectFromDataLayer(this)
     this._index.splice(this._index.indexOf(id), 1)
     delete this._features[id]
@@ -427,6 +429,10 @@ export class DataLayer {
     if (idx !== -1) this._propertiesIndex.splice(idx, 1)
   }
 
+  allProperties() {
+    return this._propertiesIndex
+  }
+
   sortedValues(property) {
     return Object.values(this._features)
       .map((feature) => feature.properties[property])
@@ -438,13 +444,19 @@ export class DataLayer {
     try {
       // Do not fail if remote data is somehow invalid,
       // otherwise the layer becomes uneditable.
-      this.makeFeatures(geojson, sync)
+      return this.makeFeatures(geojson, sync)
     } catch (err) {
-      console.log('Error with DataLayer', this.umap_id)
+      console.log('Error with DataLayer', this.id)
       console.error(err)
+      return []
     }
   }
 
+  sortFeatures(collection) {
+    const sortKeys = this._umap.getProperty('sortKey') || U.DEFAULT_LABEL_KEY
+    return Utils.sortFeatures(collection, sortKeys, U.lang)
+  }
+
   makeFeatures(geojson = {}, sync = true) {
     if (geojson.type === 'Feature' || geojson.coordinates) {
       geojson = [geojson]
@@ -452,10 +464,14 @@ export class DataLayer {
     const collection = Array.isArray(geojson)
       ? geojson
       : geojson.features || geojson.geometries
-    Utils.sortFeatures(collection, this.map.getOption('sortKey'), L.lang)
-    for (const feature of collection) {
-      this.makeFeature(feature, sync)
+    if (!collection) return
+    const features = []
+    this.sortFeatures(collection)
+    for (const featureJson of collection) {
+      const feature = this.makeFeature(featureJson, sync)
+      if (feature) features.push(feature)
     }
+    return features
   }
 
   makeFeature(geojson = {}, sync = true, id = null) {
@@ -466,15 +482,15 @@ export class DataLayer {
     switch (geometry.type) {
       case 'Point':
         // FIXME: deal with MultiPoint
-        feature = new Point(this, geojson, id)
+        feature = new Point(this._umap, this, geojson, id)
         break
       case 'MultiLineString':
       case 'LineString':
-        feature = new LineString(this, geojson, id)
+        feature = new LineString(this._umap, this, geojson, id)
         break
       case 'MultiPolygon':
       case 'Polygon':
-        feature = new Polygon(this, geojson, id)
+        feature = new Polygon(this._umap, this, geojson, id)
         break
       default:
         console.log(geojson)
@@ -492,57 +508,71 @@ export class DataLayer {
   }
 
   async importRaw(raw, format) {
-    this.map.formatter
+    return this._umap.formatter
       .parse(raw, format)
       .then((geojson) => this.addData(geojson))
-      .then(() => this.zoomTo())
-    this.isDirty = true
+      .then((data) => {
+        if (data?.length) this.isDirty = true
+        return data
+      })
   }
 
-  importFromFiles(files, type) {
-    for (const f of files) {
-      this.importFromFile(f, type)
+  readFile(f) {
+    return new Promise((resolve) => {
+      const reader = new FileReader()
+      reader.onloadend = () => resolve(reader.result)
+      reader.readAsText(f)
+    })
+  }
+
+  async importFromFiles(files, type) {
+    const toLoad = []
+    for (const file of files) {
+      toLoad.push(this.importFromFile(file, type))
     }
+    const features = await Promise.all(toLoad)
+    return new Promise((resolve) => {
+      resolve([].concat(...features))
+    })
   }
 
-  importFromFile(f, type) {
-    const reader = new FileReader()
+  async importFromFile(file, type) {
     type = type || Utils.detectFileType(f)
-    reader.readAsText(f)
-    reader.onload = (e) => this.importRaw(e.target.result, type)
+    const raw = await this.readFile(file)
+    return this.importRaw(raw, type)
   }
 
   async importFromUrl(uri, type) {
-    uri = this.map.localizeUrl(uri)
-    const response = await this.map.request.get(uri)
+    uri = this._umap.renderUrl(uri)
+    const response = await this._umap.request.get(uri)
     if (response?.ok) {
-      this.importRaw(await response.text(), type)
+      return this.importRaw(await response.text(), type)
     }
   }
 
   getColor() {
-    return this.options.color || this.map.getOption('color')
+    return this.options.color || this._umap.getProperty('color')
   }
 
   getDeleteUrl() {
-    return Utils.template(this.map.options.urls.datalayer_delete, {
-      pk: this.umap_id,
-      map_id: this.map.options.umap_id,
+    return this._umap.urls.get('datalayer_delete', {
+      pk: this.id,
+      map_id: this._umap.id,
     })
   }
 
   getVersionsUrl() {
-    return Utils.template(this.map.options.urls.datalayer_versions, {
-      pk: this.umap_id,
-      map_id: this.map.options.umap_id,
+    return this._umap.urls.get('datalayer_versions', {
+      pk: this.id,
+      map_id: this._umap.id,
     })
   }
 
-  getVersionUrl(name) {
-    return Utils.template(this.map.options.urls.datalayer_version, {
-      pk: this.umap_id,
-      map_id: this.map.options.umap_id,
-      name: name,
+  getVersionUrl(ref) {
+    return this._umap.urls.get('datalayer_version', {
+      pk: this.id,
+      map_id: this._umap.id,
+      ref: ref,
     })
   }
 
@@ -562,17 +592,17 @@ export class DataLayer {
     options.name = translate('Clone of {name}', { name: this.options.name })
     delete options.id
     const geojson = Utils.CopyJSON(this._geojson)
-    const datalayer = this.map.createDataLayer(options)
+    const datalayer = this._umap.createDataLayer(options)
     datalayer.fromGeoJSON(geojson)
     return datalayer
   }
 
   erase() {
     this.hide()
-    this.map.datalayers_index.splice(this.getRank(), 1)
+    this._umap.datalayersIndex.splice(this.getRank(), 1)
     this.parentPane.removeChild(this.pane)
-    this.map.onDataLayersChanged()
-    this.layer.onDelete(this.map)
+    this._umap.onDataLayersChanged()
+    this.layer.onDelete(this._leafletMap)
     this.propagateDelete()
     this._leaflet_events_bk = this._leaflet_events
     this.clear()
@@ -581,7 +611,10 @@ export class DataLayer {
   }
 
   reset() {
-    if (!this.umap_id) this.erase()
+    if (!this.createdOnServer) {
+      this.erase()
+      return
+    }
 
     this.resetOptions()
     this.parentPane.appendChild(this.pane)
@@ -604,7 +637,7 @@ export class DataLayer {
   }
 
   edit() {
-    if (!this.map.editEnabled || !this.isLoaded()) {
+    if (!this._umap.editEnabled || !this.isLoaded()) {
       return
     }
     const container = DomUtil.create('div', 'umap-layer-properties-container')
@@ -615,6 +648,7 @@ export class DataLayer {
         'options.type',
         { handler: 'LayerTypeChooser', label: translate('Type of layer') },
       ],
+      'options.labelKey',
       [
         'options.displayOnLoad',
         { label: translate('Display on load'), handler: 'Switch' },
@@ -638,7 +672,7 @@ export class DataLayer {
     DomUtil.createTitle(container, translate('Layer properties'), 'icon-layers')
     let builder = new U.FormBuilder(this, metadataFields, {
       callback(e) {
-        this.map.onDataLayersChanged()
+        this._umap.onDataLayersChanged()
         if (e.helper.field === 'options.type') {
           this.edit()
         }
@@ -687,7 +721,6 @@ export class DataLayer {
       'options.zoomTo',
       'options.fromZoom',
       'options.toZoom',
-      'options.labelKey',
     ]
 
     builder = new U.FormBuilder(this, optionsFields, {
@@ -749,7 +782,7 @@ export class DataLayer {
         },
       ],
     ]
-    if (this.map.options.urls.ajax_proxy) {
+    if (this._umap.properties.urls.ajax_proxy) {
       remoteDataFields.push([
         'options.remoteData.proxy',
         {
@@ -775,7 +808,8 @@ export class DataLayer {
       this
     )
 
-    if (this.map.options.urls.datalayer_versions) this.buildVersionsFieldset(container)
+    if (this._umap.properties.urls.datalayer_versions)
+      this.buildVersionsFieldset(container)
 
     const advancedActions = DomUtil.createFieldset(
       container,
@@ -788,7 +822,7 @@ export class DataLayer {
       </button>`)
     deleteButton.addEventListener('click', () => {
       this._delete()
-      this.map.editPanel.close()
+      this._umap.editPanel.close()
     })
     advancedButtons.appendChild(deleteButton)
 
@@ -811,7 +845,7 @@ export class DataLayer {
       },
       this
     )
-    if (this.umap_id) {
+    if (this.createdOnServer) {
       const filename = `${Utils.slugify(this.options.name)}.geojson`
       const download = Utils.loadTemplate(`
         <a class="button" href="${this._dataUrl()}" download="${filename}">
@@ -827,9 +861,9 @@ export class DataLayer {
     // Fixme: remove me when this is merged and released
     // https://github.com/Leaflet/Leaflet/pull/9052
     DomEvent.disableClickPropagation(backButton)
-    DomEvent.on(backButton, 'click', this.map.editDatalayers, this.map)
+    DomEvent.on(backButton, 'click', this._umap.editDatalayers, this._umap)
 
-    this.map.editPanel.open({
+    this._umap.editPanel.open({
       content: container,
       actions: [backButton],
     })
@@ -850,28 +884,22 @@ export class DataLayer {
     if (this.layer?.defaults?.[option]) {
       return this.layer.defaults[option]
     }
-    return this.map.getOption(option, feature)
+    return this._umap.getProperty(option, feature)
   }
 
   async buildVersionsFieldset(container) {
     const appendVersion = (data) => {
       const date = new Date(Number.parseInt(data.at, 10))
-      const content = `${date.toLocaleString(L.lang)} (${Number.parseInt(data.size) / 1000}Kb)`
+      const content = `${date.toLocaleString(U.lang)} (${Number.parseInt(data.size) / 1000}Kb)`
       const el = DomUtil.create('div', 'umap-datalayer-version', versionsContainer)
-      const button = DomUtil.createButton(
-        '',
-        el,
-        '',
-        () => this.restore(data.name),
-        this
-      )
+      const button = DomUtil.createButton('', el, '', () => this.restore(data.ref))
       button.title = translate('Restore this version')
       DomUtil.add('span', '', el, content)
     }
 
     const versionsContainer = DomUtil.createFieldset(container, translate('Versions'), {
       async callback() {
-        const [{ versions }, response, error] = await this.map.server.get(
+        const [{ versions }, response, error] = await this._umap.server.get(
           this.getVersionsUrl()
         )
         if (!error) versions.forEach(appendVersion)
@@ -881,11 +909,11 @@ export class DataLayer {
   }
 
   async restore(version) {
-    if (!this.map.editEnabled) return
-    this.map.dialog
+    if (!this._umap.editEnabled) return
+    this._umap.dialog
       .confirm(translate('Are you sure you want to restore this version?'))
       .then(async () => {
-        const [geojson, response, error] = await this.map.server.get(
+        const [geojson, response, error] = await this._umap.server.get(
           this.getVersionUrl(version)
         )
         if (!error) {
@@ -906,13 +934,13 @@ export class DataLayer {
   }
 
   async show() {
-    this.map.addLayer(this.layer)
+    this._leafletMap.addLayer(this.layer)
     if (!this.isLoaded()) await this.fetchData()
     this.propagateShow()
   }
 
   hide() {
-    this.map.removeLayer(this.layer)
+    this._leafletMap.removeLayer(this.layer)
     this.propagateHide()
   }
 
@@ -924,12 +952,12 @@ export class DataLayer {
     else this.hide()
   }
 
-  zoomTo() {
+  zoomTo(bounds) {
     if (!this.isVisible()) return
-    const bounds = this.layer.getBounds()
+    bounds = bounds || this.layer.getBounds()
     if (bounds.isValid()) {
       const options = { maxZoom: this.getOption('zoomTo') }
-      this.map.fitBounds(bounds, options)
+      this._leafletMap.fitBounds(bounds, options)
     }
   }
 
@@ -960,7 +988,7 @@ export class DataLayer {
   }
 
   isVisible() {
-    return Boolean(this.layer && this.map.hasLayer(this.layer))
+    return Boolean(this.layer && this._leafletMap.hasLayer(this.layer))
   }
 
   getFeatureByIndex(index) {
@@ -997,7 +1025,7 @@ export class DataLayer {
   getPreviousBrowsable() {
     let id = this.getRank()
     let next
-    const index = this.map.datalayers_index
+    const index = this._umap.datalayersIndex
     while (((id = index[++id] ? id : 0), (next = index[id]))) {
       if (next === this || next.canBrowse()) break
     }
@@ -1007,7 +1035,7 @@ export class DataLayer {
   getNextBrowsable() {
     let id = this.getRank()
     let prev
-    const index = this.map.datalayers_index
+    const index = this._umap.datalayersIndex
     while (((id = index[--id] ? id : index.length - 1), (prev = index[id]))) {
       if (prev === this || prev.canBrowse()) break
     }
@@ -1023,7 +1051,7 @@ export class DataLayer {
   }
 
   getRank() {
-    return this.map.datalayers_index.indexOf(this)
+    return this._umap.datalayersIndex.indexOf(this)
   }
 
   isReadOnly() {
@@ -1036,6 +1064,11 @@ export class DataLayer {
     return this.isReadOnly() || this.isRemoteLayer()
   }
 
+  setReferenceVersion({ response, sync }) {
+    this._referenceVersion = response.headers.get('X-Datalayer-Version')
+    this.sync.update('_referenceVersion', this._referenceVersion)
+  }
+
   async save() {
     if (this.isDeleted) return await this.saveDelete()
     if (!this.isLoaded()) {
@@ -1050,19 +1083,21 @@ export class DataLayer {
     // Filename support is shaky, don't do it for now.
     const blob = new Blob([JSON.stringify(geojson)], { type: 'application/json' })
     formData.append('geojson', blob)
-    const saveUrl = this.map.urls.get('datalayer_save', {
-      map_id: this.map.options.umap_id,
-      pk: this.umap_id,
+    const saveURL = this._umap.urls.get('datalayer_save', {
+      map_id: this._umap.id,
+      pk: this.id,
+      created: this.createdOnServer,
     })
-    const headers = this._reference_version
-      ? { 'X-Datalayer-Reference': this._reference_version }
+    const headers = this._referenceVersion
+      ? { 'X-Datalayer-Reference': this._referenceVersion }
       : {}
-    await this._trySave(saveUrl, headers, formData)
+    const status = await this._trySave(saveURL, headers, formData)
     this._geojson = geojson
+    return status
   }
 
   async _trySave(url, headers, formData) {
-    const [data, response, error] = await this.map.server.post(url, headers, formData)
+    const [data, response, error] = await this._umap.server.post(url, headers, formData)
     if (error) {
       if (response && response.status === 412) {
         AlertConflict.error(
@@ -1071,7 +1106,15 @@ export class DataLayer {
               'This situation is tricky, you have to choose carefully which version is pertinent.'
           ),
           async () => {
-            await this._trySave(url, {}, formData)
+            // Save again this layer
+            const status = await this._trySave(url, {}, formData)
+            if (status) {
+              this.isDirty = false
+
+              // Call the main save, in case something else needs to be saved
+              // as the conflict stopped the saving flow
+              await this._umap.saveAll()
+            }
           }
         )
       }
@@ -1083,30 +1126,27 @@ export class DataLayer {
         this.fromGeoJSON(data.geojson)
         delete data.geojson
       }
-      this._reference_version = response.headers.get('X-Datalayer-Version')
-      this.sync.update('_reference_version', this._reference_version)
-
-      this.setUmapId(data.id)
+      delete data.id
+      delete data._referenceVersion
       this.updateOptions(data)
+
+      this.setReferenceVersion({ response, sync: true })
+
       this.backupOptions()
+      this.backupData()
       this.connectToMap()
       this._loaded = true
       this.redraw() // Needed for reordering features
-      this.isDirty = false
-      this.permissions.save()
+      return true
     }
   }
 
   async saveDelete() {
-    if (this.umap_id) {
-      await this.map.server.post(this.getDeleteUrl())
+    if (this.createdOnServer) {
+      await this._umap.server.post(this.getDeleteUrl())
     }
-    delete this.map.datalayers[stamp(this)]
-    this.isDirty = false
-  }
-
-  getMap() {
-    return this.map
+    delete this._umap.datalayers[stamp(this)]
+    return true
   }
 
   getName() {
@@ -1115,7 +1155,7 @@ export class DataLayer {
 
   tableEdit() {
     if (!this.isVisible()) return
-    const editor = new TableEditor(this)
+    const editor = new TableEditor(this._umap, this, this._leafletMap)
     editor.open()
   }
 
@@ -1123,14 +1163,16 @@ export class DataLayer {
     // This keys will be used to filter feature from the browser text input.
     // By default, it will we use the "name" property, which is also the one used as label in the features list.
     // When map owner has configured another label or sort key, we try to be smart and search in the same keys.
-    if (this.map.options.filterKey) return this.map.options.filterKey
+    if (this._umap.properties.filterKey) return this._umap.properties.filterKey
     if (this.getOption('labelKey')) return this.getOption('labelKey')
-    if (this.map.options.sortKey) return this.map.options.sortKey
+    if (this._umap.properties.sortKey) return this._umap.properties.sortKey
     return 'displayName'
   }
 
   renderLegend() {
-    for (const container of document.querySelectorAll(`.${this.cssId} .datalayer-legend`)) {
+    for (const container of document.querySelectorAll(
+      `.${this.cssId} .datalayer-legend`
+    )) {
       container.innerHTML = ''
       if (this.layer.renderLegend) return this.layer.renderLegend(container)
       const color = DomUtil.create('span', 'datalayer-color', container)
@@ -1174,7 +1216,7 @@ export class DataLayer {
         'click',
         function () {
           if (!this.isVisible()) return
-          this.map.dialog
+          this._umap.dialog
             .confirm(translate('Are you sure you want to delete this layer?'))
             .then(() => {
               this._delete()