#681 DrawTool Templating from intersected GeoDatasets (#683)

* #681 geodatasets/intersect endpoint

* #681 CusorInfo locking

* #681 minor

* #681 DrawTool Templating from intersected GeoDatasets

Author: tariqksoliman

API/Backend/Geodatasets/routes/geodatasets.js

@@ -468,6 +468,145 @@ function get(reqtype, req, res, next) {
     });
 }
 
+router.post("/intersect", function (req, res, next) {
+  let layer = req.body.layer;
+  let noDuplicates = null;
+
+  if (req.body.noDuplicates === true || req.body.noDuplicates === "true")
+    noDuplicates = true;
+
+  //First Find the table name
+  Geodatasets.findOne({ where: { name: layer } })
+    .then((result) => {
+      if (result) {
+        let table = result.dataValues.table;
+
+        let distinct = "";
+        if (noDuplicates === true) {
+          if (result.dataValues.group_id_field != null)
+            distinct = ` DISTINCT ON (group_id)`;
+          else distinct = ` DISTINCT ON (geom)`;
+        }
+
+        let q = `SELECT${distinct} properties, ST_AsGeoJSON(geom) FROM ${Utils.forceAlphaNumUnder(
+          table
+        )}`;
+
+        // Intersect
+        q += ` WHERE ST_Intersects(geom, ST_GeomFromGeoJSON(:intersect))`;
+
+        let startProp = "start_time";
+        let start_time = "";
+        let endProp = "end_time";
+        let end_time = "";
+        if (req.body?.endtime != null) {
+          const format = req.body?.format || "YYYY-MM-DDTHH:MI:SSZ";
+          let t = ` `;
+          t += `AND `;
+
+          if (
+            req.body?.starttime == null ||
+            req.body?.starttime.indexOf(`'`) != -1 ||
+            req.body?.endtime == null ||
+            req.body?.endtime.indexOf(`'`) != -1 ||
+            format.indexOf(`'`) != -1
+          ) {
+            res.send({
+              status: "failure",
+              message: "Missing inner or malformed time parameters.",
+            });
+            return;
+          }
+
+          start_time = new Date(
+            req.body.starttime || "1970-01-01T00:00:00Z"
+          ).getTime();
+          end_time = new Date(req.body.endtime).getTime();
+
+          startProp = Utils.forceAlphaNumUnder(req.body.startProp || startProp);
+          endProp = Utils.forceAlphaNumUnder(req.body.endProp || endProp);
+          // prettier-ignore
+          t += [
+              `((`,
+                `${startProp} IS NOT NULL AND ${endProp} IS NOT NULL AND`, 
+                  ` ${startProp} >= ${start_time}`,
+                  ` AND ${endProp} <= ${end_time}`,
+              `)`,
+              ` OR `,
+              `(`,
+                `${startProp} IS NULL AND ${endProp} IS NOT NULL AND`,
+                  ` ${endProp} >= ${start_time}`,
+                  ` AND ${endProp} <= ${end_time}`,
+              `))`
+          ].join('')
+          q += t;
+        }
+
+        const replacements = {
+          intersect:
+            typeof req.body.intersect === "string"
+              ? req.body.intersect
+              : JSON.stringify(req.body.intersect),
+          startProp: startProp,
+          start_time: start_time,
+          endProp: endProp,
+          end_time: end_time,
+        };
+
+        q += `;`;
+
+        sequelize
+          .query(q, {
+            replacements: replacements,
+          })
+          .then(([results]) => {
+            let geojson = { type: "FeatureCollection", features: [] };
+            for (let i = 0; i < results.length; i++) {
+              let properties = results[i].properties;
+              properties._ = properties._ || {};
+              properties._.idx = results[i].id;
+              let feature = {};
+              feature.type = "Feature";
+              feature.properties = properties;
+
+              feature.geometry = JSON.parse(results[i].st_asgeojson);
+              geojson.features.push(feature);
+            }
+
+            res.setHeader("Access-Control-Allow-Origin", "*");
+
+            res.send({
+              status: "success",
+              body: geojson,
+            });
+
+            return null;
+          })
+          .catch((err) => {
+            logger(
+              "error",
+              "Geodataset query SQL error.",
+              req.originalUrl,
+              req,
+              err
+            );
+            res.send({
+              status: "failure",
+              message: "Failed to query Geodataset.",
+            });
+          });
+      } else {
+        res.send({ status: "failure", message: "Not Found" });
+      }
+
+      return null;
+    })
+    .catch((err) => {
+      logger("error", "Failure finding geodataset.", req.originalUrl, req, err);
+      res.send({ status: "failure", message: "Failure finding geodataset." });
+    });
+});
+
 /*
 req.query.layer
 req.query.limit

configure/public/contours.png

@@ -12,6 +12,8 @@ var CursorInfo = {
     //The div that will follow the mouse around
     cursorInfoDiv: null,
     forcedPos: false,
+    _lockTimeout: null,
+    _locked: false,
     //Creates that div and adds the mousemove event so it follows the cursor
     init: function () {
         CursorInfo.cursorInfoDiv = d3
@@ -39,6 +41,9 @@ var CursorInfo = {
     },
     //Use jquery to fade in out then set display to none and clear inner html
     hide: function (immediate) {
+        if (CursorInfo._locked) {
+            return
+        }
         if (immediate) {
             CursorInfo.cursorInfoDiv.style('display', 'none').html('')
         } else {
@@ -58,8 +63,20 @@ var CursorInfo = {
         forceFontColor,
         asHTML,
         withBorder,
-        withoutPadding
+        withoutPadding,
+        lockMS
     ) {
+        if (CursorInfo._locked) {
+            return
+        }
+        if (lockMS != null && lockMS > 0) {
+            CursorInfo._locked = true
+            clearTimeout(CursorInfo._lockTimeout)
+            CursorInfo._lockTimeout = setTimeout(() => {
+                CursorInfo._locked = false
+            }, lockMS)
+        }
+
         if (position) {
             CursorInfo.forcedPos = true
             CursorInfo.cursorInfoDiv

configure/public/toolConfigs.json

@@ -38,3 +38,14 @@
     left: 50%;
     top: 50%;
 }
+
+.mmgisModal .dropdown {
+    background-color: #2c2f30;
+    border: none;
+    margin: 1px 0px;
+    width: 120px;
+    height: 28px;
+    font-size: 14px;
+    color: var(--color-f);
+    padding: 0px 2px;
+}

src/essence/Ancillary/CursorInfo.js

@@ -3561,6 +3561,18 @@ const L_ = {
             $('#dataLoadingSpinner').css({ opacity: 0 })
         }
     },
+    getListOfUsedGeoDatasets() {
+        const list = []
+        Object.keys(L_.layers.data).forEach((key) => {
+            const d = L_.layers.data[key]
+            if (d.url && d.url.startsWith('geodatasets:'))
+                list.push({
+                    display_name: d.display_name,
+                    geodataset: d.url.replace('geodatasets:', ''),
+                })
+        })
+        return list
+    },
 }
 
 //Takes in a configData object and does a depth-first search through its

src/essence/Ancillary/Modal.css

@@ -413,6 +413,7 @@ let Map_ = {
                     }
                 }
             }
+
             Map_.map.addLayer(L_.layers.layer[L_._layersOrdered[hasIndex[i]]])
 
             // If image layer, reorder the z index and redraw the layer
@@ -444,6 +445,20 @@ let Map_ = {
                     )
             )
         }
+
+        // Now bring any Drawn layers back to the front:
+        Object.keys(L_.layers.layer).forEach((key) => {
+            if (
+                key.startsWith('DrawTool_') &&
+                Array.isArray(L_.layers.layer[key])
+            ) {
+                L_.layers.layer[key].forEach((l) => {
+                    try {
+                        l.bringToFront()
+                    } catch (err) {}
+                })
+            }
+        })
     },
     refreshLayer: async function (layerObj, cb, skipOrderedBringToFront) {
         // If it's a dynamic extent layer, just re-call its function

src/essence/Basics/Layers_/Layers_.js

@@ -42,7 +42,8 @@
 
 .drawToolButton1 {
     background: #067ca7;
-    padding: 3px 8px;
+    padding: 5px 8px 2px 8px;
+    border-radius: 2px;
     margin: 5px 0px;
     text-align: center;
     color: #ededed;
@@ -2372,7 +2373,33 @@
 .drawToolContextMenuPropertiesTitle {
     height: 30px;
     line-height: 30px;
-    color: var(--color-query);
+    color: #91c676;
+}
+.drawToolContextMenuPropertiesRecomputeTemplate {
+    margin-top: -1px;
+    display: flex;
+    cursor: pointer;
+}
+.drawToolContextMenuPropertiesRecomputeTemplate > div {
+    background: var(--color-a-1);
+    border: 1px solid var(--color-a-5);
+    color: var(--color-a6);
+    border-radius: 3px;
+    padding: 4px 8px 3px 4px;
+    margin-bottom: 6px;
+    display: flex;
+    transition: all 0.2s ease-out;
+}
+.drawToolContextMenuPropertiesRecomputeTemplate > div > i {
+margin-right: 4px;
+}
+.drawToolContextMenuPropertiesRecomputeTemplate > div > div {
+font-size: 12px;
+line-height: 20px;
+}
+.drawToolContextMenuPropertiesRecomputeTemplate > div:hover {
+    color: white;
+    background: var(--color-a2);
 }
 .drawToolContextMenuPropertiesExtended {
     margin-bottom: 12px;

src/essence/Basics/Map_/Map_.js

@@ -740,7 +740,6 @@ var DrawTool = {
                                         null,
                                         d
                                     )
-
                                     Viewer_.changeImages(layer.feature, layer)
                                     Globe_.highlight(
                                         Globe_.findSpriteObject(
@@ -1170,15 +1169,17 @@ var DrawTool = {
             }
         )
     },
-    addDrawing: function (body, callback, failure) {
+    addDrawing: async function (body, callback, failure) {
         // Add template property defaults
         const file = DrawTool.getFileObjectWithId(body.file_id)
         if (file?.template?.template && body?.properties) {
             let newProps = JSON.parse(body.properties)
-            const templateDefaults = DrawTool_Templater.getTemplateDefaults(
-                file?.template?.template,
-                L_.layers.layer[`DrawTool_${body.file_id}`]
-            )
+            const templateDefaults =
+                await DrawTool_Templater.getTemplateDefaults(
+                    file?.template?.template,
+                    L_.layers.layer[`DrawTool_${body.file_id}`],
+                    body
+                )
 
             newProps = { ...newProps, ...templateDefaults }
             body.properties = JSON.stringify(newProps)

src/essence/Tools/Draw/DrawTool.css

@@ -618,8 +618,16 @@ var Editing = {
                     "</div>",
                     (file.template != null ) ? [
                     "<div class='drawToolContextMenuPropertiesCollapsible'>",
-                        `<div class='drawToolContextMenuPropertiesTitle'><div>Template (${file.template?.name})</div><i class='mdi mdi-chevron-down mdi-24px'></i></div>`,
-                        "<div id='drawToolContextMenuPropertiesTemplate'></div>",
+                        `<div class='drawToolContextMenuPropertiesTitle'>`,
+                            `<div style='display: flex;'>`,
+                                `<div>Template (${file.template?.name})</div>`,
+                            `</div>`,
+                            `<i class='mdi mdi-chevron-down mdi-24px'></i>`,
+                        `</div>`,
+                        `<div>`,
+                            `<div class='drawToolContextMenuPropertiesRecomputeTemplate'><div><i class='mdi mdi-restore mdi-18px'></i><div>Recompute Templated Fields</div></div></div>`,
+                            "<div id='drawToolContextMenuPropertiesTemplate'></div>",
+                        `</div>`,
                     "</div>"].join('\n') : "",
                     "<div class='drawToolContextMenuPropertiesCollapsible state-collapsed'>",
                         "<div class='drawToolContextMenuPropertiesTitle'><div>Metrics</div><i class='mdi mdi-chevron-down mdi-24px'></i></div>",
@@ -894,6 +902,31 @@ var Editing = {
         ).on('click', function () {
             $(this).parent().toggleClass('state-collapsed')
         })
+        $(`.drawToolContextMenuPropertiesRecomputeTemplate`).on(
+            'click',
+            async () => {
+                const templateDefaults =
+                    await DrawTool_Templater.getTemplateDefaults(
+                        file?.template?.template,
+                        L_.layers.layer[`DrawTool_${file.file_id}`],
+                        {
+                            geometry: JSON.stringify(
+                                DrawTool.contextMenuLayer?.feature?.geometry
+                            ),
+                        }
+                    )
+
+                $('#drawToolContextMenuPropertiesTemplate').empty()
+                templater = DrawTool_Templater.renderTemplate(
+                    'drawToolContextMenuPropertiesTemplate',
+                    file.template,
+                    {
+                        ...DrawTool.contextMenuLayer?.feature?.properties,
+                        ...templateDefaults,
+                    }
+                )
+            }
+        )
         UserInterface_.openRightPanel(360)
 
         $('#drawToolContextMenuPropertiesDescription').text(description)