Added selection handling to bubble

gchq · May 18, 2023 · 48c6cb4 · 48c6cb4
1 parent 0f7f50b
commit 48c6cb4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 51 deletions.
diff --git a/war/css/ThemeCSS.css b/war/css/ThemeCSS.css
@@ -5,7 +5,7 @@
     --text-color: #000;
     --text-color-disabled: #666;
     --app-background-color: #d50101;
-    --page-background-color: #fff;
+    --vis__background-color: #fff;
     --border-color: #c5cde2;
     --input-background-color: #fff;
     --input-border-color: #c5cde2;
@@ -104,7 +104,7 @@
     --text-color: #e6e1dc;
     --text-color-disabled: #666;
     --app-background-color: #000;/*#19171d;*/
-    --page-background-color: #19171d;
+    --vis__background-color: #19171d;
     --border-color: #555;
     --input-background-color: #333;
     --input-border-color: #555;
@@ -203,7 +203,7 @@
     --text-color: #abb0b6;
     --text-color-disabled: #666;
     --app-background-color: #000;
-    --page-background-color: #1b1d24;
+    --vis__background-color: #1b1d24;
     --border-color: #14161b;
     --input-background-color: #262a32;
     --input-border-color: #191c21;

diff --git a/war/css/ThemeCSSStr.js b/war/css/ThemeCSSStr.js
@@ -7,7 +7,7 @@ var cssStr = "" +
 "    --text-color: #000;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #d50101;" +
-"    --page-background-color: #fff;" +
+"    --vis__background-color: #fff;" +
 "    --border-color: #c5cde2;" +
 "    --input-background-color: #fff;" +
 "    --input-border-color: #c5cde2;" +
@@ -106,7 +106,7 @@ var cssStr = "" +
 "    --text-color: #e6e1dc;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #000;/*#19171d;*/" +
-"    --page-background-color: #19171d;" +
+"    --vis__background-color: #19171d;" +
 "    --border-color: #555;" +
 "    --input-background-color: #333;" +
 "    --input-border-color: #555;" +
@@ -205,7 +205,7 @@ var cssStr = "" +
 "    --text-color: #abb0b6;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #000;" +
-"    --page-background-color: #1b1d24;" +
+"    --vis__background-color: #1b1d24;" +
 "    --border-color: #14161b;" +
 "    --input-background-color: #262a32;" +
 "    --input-border-color: #191c21;" +

diff --git a/war/stroom-content/Visualisations/Version3/Bubble.Script.resource.js b/war/stroom-content/Visualisations/Version3/Bubble.Script.resource.js
@@ -79,8 +79,21 @@ visualisations.Bubble = function(containerNode) {
         //Set up the bar highlighting and hover tip
         if (typeof(tip) == "undefined") {
             inverseHighlight = commonFunctions.inverseHighlight();
+
+            inverseHighlight.toSelectionItem = function(d) {
+              //console.log("selection");
+              //console.log(d);
+              var selection = {
+                key: d.name,
+                series: d.series,
+                value: d.value,
+              };
+              //console.log(selection);
+              return selection;
+            };
+
             tip = inverseHighlight.tip()
-                .html(function(tipData) { 
+                .html(function(tipData) {
                     var html = inverseHighlight.htmlBuilder()
                         .addTipEntry("Series",commonFunctions.autoFormat(tipData.values.series, visSettings.seriesDateFormat))
                         .addTipEntry("Name",commonFunctions.autoFormat(tipData.values.name, visSettings.nameDateFormat))
@@ -131,15 +144,15 @@ visualisations.Bubble = function(containerNode) {
                     delete context.color;
                 }
 
-                //Get grid to construct the grid cells and for each one call back into a 
+                //Get grid to construct the grid cells and for each one call back into a
                 //new instance of this to build the visualisation in the cell
                 //The last array arg allows you to synchronise the scales of fields
                 grid.buildGrid(context, settings, data, this, commonConstants.transitionDuration, synchedFields);
             }
         }
     };
 
-    //Public entry point for the Grid to call back in to set the cell level data on the cell level 
+    //Public entry point for the Grid to call back in to set the cell level data on the cell level
     //visualisation instance.
     //data will only contain the branch of the tree for this cell
     this.setDataInsideGrid = function(context, settings, data) {
@@ -185,9 +198,9 @@ visualisations.Bubble = function(containerNode) {
             svg.call(tip);
 
             //sort by the series name, and then the value of the bubble
-            //so bubbles of the same series are together and arranged in 
+            //so bubbles of the same series are together and arranged in
             //size order within the series set
-            bubbleLayout.sort(function(a, b) { 
+            bubbleLayout.sort(function(a, b) {
                 if (a.series < b.series) {
                     return -1;
                 } else if (a.series > b.series){
@@ -208,7 +221,7 @@ visualisations.Bubble = function(containerNode) {
             var nodes = svg.selectAll("g.vis-node-element")
                 .data(bubbleData, function(d) {
                     //compound data key
-                    var key = d.series + "~#~" + d.name; 
+                    var key = d.series + "~#~" + d.name;
                     //console.log("key: " + key);
                     return key;
                 });
@@ -237,7 +250,7 @@ visualisations.Bubble = function(containerNode) {
                             .style("pointer-events", "none")
                             .style("font-size", "20px")
                             .style("text-rendering", "geometricPrecision")
-                            .text(function(d) { 
+                            .text(function(d) {
                                 if (d.name != null) {
                                     return commonFunctions.autoFormat(d.name, visSettings.nameDateFormat);
                                 } else {
@@ -266,8 +279,8 @@ visualisations.Bubble = function(containerNode) {
                         .attr("r", function(d) {
                             return d.r;
                         })
-                        .style("fill", function(d) { 
-                            return colour(d.series); 
+                        .style("fill", function(d) {
+                            return colour(d.series);
                         });
 
                     if (commonFunctions.isTrue(visSettings.showLabels)){
@@ -307,6 +320,7 @@ visualisations.Bubble = function(containerNode) {
 
             commonFunctions.addDelegateEvent(svg, "mouseover", "circle", inverseHighlight.makeInverseHighlightMouseOverHandler(null, visData.types, svg, "circle"));
             commonFunctions.addDelegateEvent(svg, "mouseout", "circle", inverseHighlight.makeInverseHighlightMouseOutHandler(svg, "circle"));
+            commonFunctions.addDelegateEvent(svg, "click","circle", inverseHighlight.makeInverseHighlightMouseClickHandler(svg, "circle"));
 
             //as this vis supports scrolling and panning by mousewheel and mousedown we need to remove the tip when the user
             //pans or zooms

diff --git a/war/stroom-content/Visualisations/Version3/CSS.Script.resource.js b/war/stroom-content/Visualisations/Version3/CSS.Script.resource.js
@@ -103,11 +103,11 @@ var cssStr = "" +
 "}" +
 "" +
 "svg.vis-cellVisualisation {" +
-"  fill: var(--page-background-color);" +
+"  fill: var(--vis__background-color);" +
 "}" +
 "" +
 "rect.vis-cellVisualisation-border {" +
-"  fill: var(--page-background-color);" +
+"  fill: var(--vis__background-color);" +
 "  stroke: var(--vis-text-color-faint);" +
 "  stroke-width: 1px;" +
 "  shape-rendering: crispEdges;" +

diff --git a/war/stroom-content/Visualisations/Version3/Doughnut.Script.resource.js b/war/stroom-content/Visualisations/Version3/Doughnut.Script.resource.js
@@ -73,9 +73,6 @@ visualisations.Doughnut= function(containerNode) {
     var filteredPieData = [];
     var showLabels = false;
 
-    // Selection support
-    var selection = [];
-
     //one off initialisation of all the local variables, including
     //appending various static dom elements
     var initialise = function() {
@@ -128,15 +125,15 @@ visualisations.Doughnut= function(containerNode) {
         center_group = svg.append("svg:g").attr("class", "center_group");
 
 
-        // PLStroomHOLDER GRAY CIRCLE
+        // PLACEHOLDER GRAY CIRCLE
         paths = arc_group.append("svg:circle").attr("fill", "#EFEFEF");
 
         // =========================================================
         // CENTER TEXT
         // =========================================================
 
         // WHITE CIRCLE BEHIND LABELS
-        whiteCircle = center_group.append("svg:circle").attr("fill", "var(--page-background-color)");
+        whiteCircle = center_group.append("svg:circle").attr("fill", "var(--vis__background-color)");
 
         // "TOTAL" LABEL
         totalLabel = center_group.append("svg:text").attr("class", "label");
@@ -313,7 +310,7 @@ visualisations.Doughnut= function(containerNode) {
         //};
 
         if (filteredPieData.length > 0) {
-            // REMOVE PLStroomHOLDER CIRCLE
+            // REMOVE PLACEHOLDER CIRCLE
             arc_group.selectAll("circle").remove();
 
             totalValue.transition()
@@ -329,7 +326,7 @@ visualisations.Doughnut= function(containerNode) {
             //new data
             paths.enter()
                 .append("svg:path")
-                .attr("stroke", "var(--page-background-color)")
+                .attr("stroke", "var(--vis__background-color)")
                 .attr( "stroke-width", 1)
                 .transition()
                 .duration(tweenDuration)
@@ -612,30 +609,6 @@ visualisations.Doughnut= function(containerNode) {
         return null;
     };
 
-    var select = function(d) {
-        // selection = [selection..., d];
-
-        const index = selection.indexOf(d);
-        if (index > -1) {
-            selection.splice(index, 1);
-        } else {
-            selection.push(d);
-        }
-
-        // console.log(d);
-        // console.log(d.name);
-        // console.log('new test');
-        //stroomLink('title=title&params=userId%3D' + d.name, 'DASHBOARD')
-
-        // stroom.dashboard(null, 'userId=' + d.name)
-
-        // var obj = {userId: d.name};
-        // stroom.select(obj);
-        // stroom.select(d);
-
-        stroom.select(selection);
-    };
-
     var update = function(duration) {
         if (pieData && pieData.length > 0) {
             width = commonFunctions.gridAwareWidthFunc(true, containerNode, element);

diff --git a/war/stroom-content/Visualisations/Version3/ThemeCSS.Script.resource.js b/war/stroom-content/Visualisations/Version3/ThemeCSS.Script.resource.js
@@ -7,7 +7,7 @@ var cssStr = "" +
 "    --text-color: #000;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #d50101;" +
-"    --page-background-color: #fff;" +
+"    --vis__background-color: #fff;" +
 "    --border-color: #c5cde2;" +
 "    --input-background-color: #fff;" +
 "    --input-border-color: #c5cde2;" +
@@ -106,7 +106,7 @@ var cssStr = "" +
 "    --text-color: #e6e1dc;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #000;/*#19171d;*/" +
-"    --page-background-color: #19171d;" +
+"    --vis__background-color: #19171d;" +
 "    --border-color: #555;" +
 "    --input-background-color: #333;" +
 "    --input-border-color: #555;" +
@@ -205,7 +205,7 @@ var cssStr = "" +
 "    --text-color: #abb0b6;" +
 "    --text-color-disabled: #666;" +
 "    --app-background-color: #000;" +
-"    --page-background-color: #1b1d24;" +
+"    --vis__background-color: #1b1d24;" +
 "    --border-color: #14161b;" +
 "    --input-background-color: #262a32;" +
 "    --input-border-color: #191c21;" +