sghaskell / maps-plus

Maps+ for Splunk
Other
18 stars 3 forks source link

Drill down from a feature you have drawn - code included #43

Open guarddogmonitor opened 1 year ago

guarddogmonitor commented 1 year ago

I would like to contribute to the maps+ plugin for Splunk.

Feature I implemented was a drill down option from a feature, that will set a token "token_feature_drill_down". That way these coordinates can be used as "INPUTS" / area selection.

I am updating one file:

appserver/static/visualizations/maps-plus/visualization.js

Line 80510-80516 update, this will add another option when clicking on a feature, other than center on, and delete.

 function(e, t, r) {
                e.exports = '<h3>Point location</h3> <p>{{ model.lastCoord.dms.y }} <span class=coorddivider>/</span> {{ model.lastCoord.dms.x }}</p> <p>{{ numberFormat(model.lastCoord.dd.y, 6) }} <span class=coorddivider>/</span> {{ numberFormat(model.lastCoord.dd.x, 6) }}</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks><li><a href=# class="js-drill zoomto">Drill down</a></li> <li><a href=# class="js-zoomto zoomto">Center on this location</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul> '
            }, function(e, t, r) {
                e.exports = '<h3>Linear measurement</h3> <p>{{ model.displayStrings.lengthDisplay }}</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks> <li><a href=# class="js-drill zoomto">Drill down</a></li><li><a href=# class="js-zoomto zoomto">Center on this area</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul> '
            }, function(e, t, r) {
                e.exports = '<h3>Area measurement</h3> <p>{{ model.displayStrings.areaDisplay }}</p> <p>{{ model.displayStrings.lengthDisplay }} Perimeter</p> <br><h3>Feature Definition</h3> <p><input type=text width=100% id=zone-def value="{{ model.points }}"></p> <ul class=tasks><li><a href=# class="js-drill zoomto">Drill down</a></li> <li><a href=# class="js-zoomto zoomto">Center on this area</a></li> <li><a href=# class="js-deletemarkup deletemarkup">Delete</a></li> </ul>'
            }]);

Line 79453 add Functionality for the drill down

try {
                            var feature_drill_down = (0, p.selectOne)(".js-drill", a);
                            feature_drill_down && (L.DomEvent.on(u, "click", L.DomEvent.stop), L.DomEvent.on(feature_drill_down, "click", function() {

                                // Get the current URL
                                const popupContents = document.querySelectorAll('.leaflet-popup-content');
                                var drill_value = ""

                                // Loop through the selected elements (if there are multiple)
                                popupContents.forEach((popupContent) => {
                                // Find the zone-def input element within each div
                                const zoneDefInput = popupContent.querySelector('#zone-def');

                                // Check if the zone-def input exists in this div
                                if (zoneDefInput) {
                                    drill_value = zoneDefInput.value;

    // You can perform further actions with the value as needed
  }
});

                                require(["splunkjs/mvc","splunkjs/mvc/simplexml/ready!"], function(mvc) {

                                var token_feature_drill_down = mvc.Components.get("default");
                                token_feature_drill_down.set("token_feature_drill",drill_value);    
                                token_feature_drill_down.set("form.token_feature_drill",drill_value);                               
                                });

                            }, this));

                            }
                            catch (error){
                                console.error('An custom error occurred:', error.message);

                            }

Some limitations yet, token is a static and not configurable.

I have a hidden search in my dashboard that uses the feature definition as an input, to figure out what "elements of interest" are located in the polygon drawn. Currently I have a little input box set where the users needs to copy paste the feature definition manually over.

The code might not be up to par as quality, so update as need if you want to add it at all.