Merge pull request #1786 from simon-leech/dv-refresh-fix

Entry Dataviews Refresh

lib/ui/Dataview.mjs

@@ -106,22 +106,6 @@ export default async function Dataview(_this) {
 
   _this.hide ??= hide
 
-  // Create checkbox if a label is provided.
-  _this.chkbox = _this.label && mapp.ui.elements.chkbox({
-    data_id: _this.key,
-    label: _this.label,
-    checked: !!_this.display,
-    disabled: _this.disabled,
-    onchange: (checked) => {
-
-      _this.display = checked
-
-      _this.display
-        ? _this.show()
-        : _this.hide()
-    }
-  })
-
   // Create dataview toolbar
   dataviewToolbar(_this)
 

lib/ui/Tabview.mjs

@@ -73,8 +73,8 @@ The decorator method will add `show()` and `hide()` methods for the tab.
 */
 function addTab(entry) {
 
-  // The entry already has a tab.
-  if (entry.tab) return;
+  // The entry already has a tab, and is not flagged as dynamic.
+  if (entry.tab && !entry.dynamic) return;
 
   const tabview = this
 
@@ -182,12 +182,12 @@ function addTab(entry) {
     // This prevents each tab to activate when multiple tabs are added in quick succession.
     tabview.timer && window.clearTimeout(tabview.timer)
 
-    tabview.timer = window.setTimeout(entry.activate, 500)
+    tabview.timer = window.setTimeout(()=>entry.activate(), 500)
 
     if (tabview.showTab instanceof Function) {
 
       // Execute tabview method to show a tab.
-      tabview.showTab(entry)
+      tabview.showTab()
     }
   }
 

lib/ui/layers/panels/dataviews.mjs

@@ -109,6 +109,22 @@ export default function dataviews(layer) {
       dataview.remove()
     }
 
+    // Create checkbox control for dataview.
+    dataview.chkbox = mapp.ui.elements.chkbox({
+      data_id: dataview.key,
+      label: dataview.label,
+      checked: !!dataview.display,
+      disabled: dataview.disabled,
+      onchange: (checked) => {
+
+        dataview.display = checked
+
+        dataview.display
+          ? dataview.show()
+          : dataview.hide()
+      }
+    })
+
     if (mapp.ui.Dataview(dataview) instanceof Error) return;
 
     // Display dataview if layer and dv have display flag.

lib/ui/locations/entries/dataview.mjs

@@ -56,95 +56,116 @@ The dataview checkbox and locationViewTarget elements will be returned if availa
 
 export default function dataview(entry) {
 
-  entry.data ??= entry.value
+  if (entry.value !== undefined) {
+    entry.data = entry.value
+
+    if (entry.data?.length === 0) {
+
+      entry.data = null
+    }
+  } 
 
   if (entry.data === null) {
 
     // The entry must be disabled if the query has run with querycheck:true and the data is null.
     // This is to prevent the query running over and over again getting the same result.
-    delete entry.display
-    entry.disabled = true
-
+    entry._display ??= entry.display;
+    delete entry.display;
+    
   } else {
+    entry.display ??= entry._display;
+  }
 
-    delete entry.disabled
+  if (entry.label) {
+
+    // Create checkbox if a label is provided.
+    entry.chkbox = mapp.ui.elements.chkbox({
+      data_id: entry.key,
+      label: entry.label,
+      checked: !!entry.display,
+      disabled: entry.data === null,
+      onchange: (checked) => {
+        entry.display = checked;
+        entry.display ? entry.show() : entry.hide();
+      },
+    });
   }
 
   // Dataview queries may require the layer and host to be defined on the entry.
-  entry.layer ??= entry.location.layer
-  entry.host ??= entry.layer.mapview.host
+  entry.layer ??= entry.location.layer;
+  entry.host ??= entry.layer.mapview.host;
 
   // Dataview will be rendered into target identified by ID.
-  if (typeof entry.target === 'string' && document.getElementById(entry.target)) {
+  if (
+    typeof entry.target === 'string' &&
+    document.getElementById(entry.target)
+  ) {
 
     // Assign element by ID as target.
-    entry.target = document.getElementById(entry.target)
+    entry.target = document.getElementById(entry.target);
 
     // Create and update the dataview.
     if (mapp.ui.Dataview(entry) instanceof Error) return;
 
-    entry.update()
-
+    entry.update();
     return;
   }
 
-  // Dataview is dependent on other field entries.
-  if (entry.dependents) {
-
-    console.warn(`The dataview type entry key:${entry.key} may be dependent on other entries but has no dependents.`)
-  }
-
-  // Dataview has already been created. e.g. after the location (view) is updated.
-  if (entry.update) {
+  // Dataview has already been created. e.g. after the location (view) is updated, and it is not dynamic.
+  if (entry.update && !entry.dynamic) {
 
-    if (entry.display) entry.show?.()
+    if (entry.display) entry.show?.();
 
     // Return elements to location view.
     return mapp.utils.html.node`
       ${entry.chkbox || ''}
-      ${entry.locationViewTarget || ''}`
+      ${entry.locationViewTarget || ''}`;
   }
 
-  // Find tabview element from data-id attribute.
-  entry.tabview ??= typeof entry.target === 'string'
-    && document.querySelector(`[data-id=${entry.target}]`)
-
-  // Dataview will be rendered into a tabview panel.
-  if (entry.tabview) {
-
+  if (
+    typeof entry.target === 'string' &&
+    document.querySelector(`[data-id=${entry.target}]`)
+  ) {
     // Tabview entries return empty on mobile.
     if (mapp.utils.mobile()) return;
 
+    // Assign tabview element from queryselector
+    entry.tabview ??= document.querySelector(`[data-id=${entry.target}]`);
+
     // Assign border style based on the location view record (from list)
-    entry.tab_style ??= `border-bottom: 3px solid ${entry.location.style?.strokeColor || 'var(--color-primary)'}`
+    entry.tab_style ??= `border-bottom: 3px solid ${
+      entry.location.style?.strokeColor || 'var(--color-primary)'
+    }`;
 
     // Assign target html element for dataview.
     entry.target = mapp.utils.html.node`
-      <div class="dataview-target">`
-
+      <div class="dataview-target">`;
 
     // Create tab after dataview creation is complete.
-    entry.tabview.dispatchEvent(new CustomEvent('addTab', {
-      detail: entry
-    }))
-
-  } else {
+    entry.tabview.dispatchEvent(
+      new CustomEvent('addTab', {
+        detail: entry,
+      })
+    );
+  } else if (!entry.tabview) {
 
     // Dataview will be rendered into location view.
+    const location_class = `location ${entry.key || entry.query}`;
+
     entry.locationViewTarget = mapp.utils.html.node`
-      <div class="${`location ${entry.class}`}">`
+      <div class="${location_class}">`;
 
-    entry.target = entry.locationViewTarget
+    entry.target = entry.locationViewTarget;
   }
 
   // Decorate the dataview entry.
   if (mapp.ui.Dataview(entry) instanceof Error) return;
 
   // Dataview should be displayed.
-  entry.display && entry.show?.()
+  entry.display && entry.show?.();
 
   // Return elements to location view.
   return mapp.utils.html.node`
     ${entry.chkbox || ''}
-    ${entry.locationViewTarget || ''}`
+    ${entry.locationViewTarget || ''}`;
 }

lib/ui/locations/listview.mjs

@@ -231,7 +231,7 @@ export default function listview(params) {
     // Assign record to the location.
     location.record = record
 
-    location.style = locale.locations.style
+    location.style = structuredClone(locale.locations.style)
 
     // Assign stroke and filleColor from record.
     if (record.colour) {

lib/ui/utils/jsonDataview.mjs

@@ -22,10 +22,16 @@ export default {
 The create method for json dataviews assigns the setData method to the dataview object.
 
 @param {dataview} dataview Dataview object.
+@property {object} dataview.data A JSON data object to be assigned as data to the Json dataview.
 */
 function create(dataview) {
 
   dataview.setData = setData
+
+  if (dataview.data) {
+
+    dataview.setData(dataview.data)
+  }
 }
 
 /**