@rws-framework/client 2.0.16 → 2.1.0

package/.emerge-vis-output/fast-foundation/html/resources/js/emerge_heatmap.js

@@ -0,0 +1,220 @@
+function initHeatmapSwitches() {
+    // normal heatmap
+    $("#switchActivateHeatmap").on('change', function() {
+        if ($(this).is(':checked')) {
+            heatmapActive = true
+            if ($("#switchMergeHeatmap").is(':checked')) {
+                $("#switchMergeHeatmap").prop('checked', false);
+                heatmapMerged = false
+            }
+            
+            if ($("#switchChurnHeatmap").is(':checked')) {
+                $("#switchChurnHeatmap").prop('checked', false);
+                heatmapChurn = false
+            }
+            
+            if ($("#switchHotspotHeatmap").is(':checked')) {
+                $("#switchHotspotHeatmap").prop('checked', false);
+                heatmapHotspot = false
+            }
+        } else {
+            heatmapActive = false
+        }
+        
+        simulationUpdate();
+    });
+    
+    // hybrid/merged heatmap
+    $("#switchMergeHeatmap").on('change', function() {
+        if ($(this).is(':checked')) {
+            heatmapMerged = true
+            if ($("#switchActivateHeatmap").is(':checked')) {
+                $("#switchActivateHeatmap").prop('checked', false);
+                heatmapActive = false
+            }
+            
+            if ($("#switchChurnHeatmap").is(':checked')) {
+                $("#switchChurnHeatmap").prop('checked', false);
+                heatmapChurn = false
+            }
+            
+            if ($("#switchHotspotHeatmap").is(':checked')) {
+                $("#switchHotspotHeatmap").prop('checked', false);
+                heatmapHotspot = false
+            }
+        } else {
+            heatmapMerged = false
+        }
+        
+        simulationUpdate();
+    });
+    
+    // churn heatmap
+    $("#switchChurnHeatmap").on('change', function() {
+        if ($(this).is(':checked')) {
+            heatmapChurn = true
+            if ($("#switchActivateHeatmap").is(':checked')) {
+                $("#switchActivateHeatmap").prop('checked', false);
+                heatmapActive = false
+            }
+            
+            if ($("#switchMergeHeatmap").is(':checked')) {
+                $("#switchMergeHeatmap").prop('checked', false);
+                heatmapMerged = false
+            }
+            
+            if ($("#switchHotspotHeatmap").is(':checked')) {
+                $("#switchHotspotHeatmap").prop('checked', false);
+                heatmapHotspot = false
+            }
+        } else {
+            heatmapChurn = false
+        }
+        
+        simulationUpdate();
+    });
+    
+    // hotspot heatmap
+    $("#switchHotspotHeatmap").on('change', function() {
+        if ($(this).is(':checked')) {
+            heatmapHotspot = true
+            if ($("#switchActivateHeatmap").is(':checked')) {
+                $("#switchActivateHeatmap").prop('checked', false);
+                heatmapActive = false
+            }
+            
+            if ($("#switchMergeHeatmap").is(':checked')) {
+                $("#switchMergeHeatmap").prop('checked', false);
+                heatmapMerged = false
+            }
+            
+            if ($("#switchChurnHeatmap").is(':checked')) {
+                $("#switchChurnHeatmap").prop('checked', false);
+                heatmapChurn = false
+            }
+        } else {
+            heatmapHotspot = false
+        }
+        
+        simulationUpdate();
+    });
+    
+}
+
+/**
+* * MARK: - Drawing a heatmap for normal / hybrid (merged) mode
+*/
+
+function calculateHeatmapScore(node) {
+    
+    let totalScore = 0
+    
+    if (normalHeatmapIsActive() || mergedHeatmapIsActive() ) {
+        
+        let score = analysis_config['heatmap']['score']['base']
+        let slocScore = 0
+        let fanoutScore = 0
+        
+        if (analysis_config['heatmap']['metrics']['active']['sloc'] == true) {
+            // add weighted sloc metric if present
+            if ('metric_sloc_in_entity' in node) {
+                slocScore = node.metric_sloc_in_entity * analysis_config['heatmap']['metrics']['weights']['sloc']
+            }
+            if ('metric_sloc_in_file' in node) {
+                slocScore = node.metric_sloc_in_file * analysis_config['heatmap']['metrics']['weights']['sloc']
+            }
+        }
+        
+        if (analysis_config['heatmap']['metrics']['active']['fan_out'] == true) {
+            // add weighted fan-out metric is present
+            if ('metric_fan_out_dependency_graph' in node) {
+                fanoutScore = node.metric_fan_out_dependency_graph * analysis_config['heatmap']['metrics']['weights']['fan_out']
+            }
+            if ('metric_fan_out_inheritance_graph' in node) {
+                fanoutScore = node.metric_fan_out_inheritance_graph * analysis_config['heatmap']['metrics']['weights']['fan_out']
+            }
+            if ('metric_fan_out_complete_graph' in node) {
+                fanoutScore = node.metric_fan_out_complete_graph * analysis_config['heatmap']['metrics']['weights']['fan_out']
+            }
+        }
+        
+        // limit the total score to the heatmap limit parameter, since the rendering seems to be buggy if this is exceeded
+        totalScore = score + slocScore + fanoutScore
+        if (totalScore > analysis_config['heatmap']['score']['limit']) {
+            totalScore = analysis_config['heatmap']['score']['limit']
+        }
+        
+    } else if (churnHeatmapIsActive()) {
+        let score = analysis_config['churn_heatmap']['score']['base']
+        let churnScore = 0
+        
+        if (node.hasOwnProperty('metric_git_code_churn')) {
+            if (analysis_config['churn_heatmap']['metrics']['active']['churn'] == true) {
+                churnScore = node.metric_git_code_churn * analysis_config['churn_heatmap']['metrics']['weights']['churn']
+            }
+            
+            totalScore = score + churnScore
+            if (totalScore > analysis_config['churn_heatmap']['score']['limit']) {
+                totalScore = analysis_config['churn_heatmap']['score']['limit']
+            }      
+        }
+        
+    } else if (hotspotHeatmapIsActive()) {
+        // approach: let's define a hotspot as a product of the following factors
+        // 1. code churn over a given time period
+        // 2. whitespace complexity over a given time period
+        // 3. SLOC over a given time period
+        // 4. connectivity based on dependencies inside the network (i.e. fan-in / fan-out)
+        
+        let score = analysis_config['hotspot_heatmap']['score']['base']
+        let churnScore = 0
+        let ws_complexity_score = 0
+        let connectivity_score = 0
+        let sloc_score = 0
+        
+        if (node.hasOwnProperty('metric_git_code_churn') && node.hasOwnProperty('metric_git_ws_complexity') ) {
+            if (analysis_config['hotspot_heatmap']['metrics']['active']['churn'] == true && analysis_config['hotspot_heatmap']['metrics']['active']['ws_complexity'] == true) {
+                
+                churnScore = node.metric_git_code_churn * analysis_config['hotspot_heatmap']['metrics']['weights']['churn'] * 2.0
+                ws_complexity_score = node.metric_git_code_churn * analysis_config['hotspot_heatmap']['metrics']['weights']['ws_complexity'] * 0.75
+                
+                if ('metric_fan_out_dependency_graph' in node) {
+                    connectivity_score = node.metric_fan_out_dependency_graph * 1.5
+                }
+
+                totalScore = (churnScore + ws_complexity_score + connectivity_score )
+                if (totalScore > analysis_config['hotspot_heatmap']['score']['limit'] * 1.25  ) {
+                    totalScore = analysis_config['hotspot_heatmap']['score']['limit'] * 1.25
+                }
+            }
+        }
+        
+    }
+    
+    return totalScore
+}
+
+function drawHeatMap(context) {
+    
+    if (normalHeatmapIsActive() || mergedHeatmapIsActive()) {
+        heat.max(analysis_config['heatmap']['score']['limit']);
+    }
+    
+    if (churnHeatmapIsActive()) {
+        heat.max(analysis_config['churn_heatmap']['score']['limit']);
+    }
+    
+    if (hotspotHeatmapIsActive()) {
+        heat.max(analysis_config['hotspot_heatmap']['score']['limit']);
+    }
+    
+    heat.clear();
+    currentGraph.nodes.forEach(function(node, i) {
+        heat.add([node.x, node.y, calculateHeatmapScore(node)])
+    })
+    
+    heat.draw()
+    
+    // reset alpha from heatmap rendering
+    context.globalAlpha = 1;  
+}

package/.emerge-vis-output/fast-foundation/html/resources/js/emerge_hull.js

@@ -0,0 +1,180 @@
+/**
+* * MARK: - Rendering concave hulls of clusters.
+*/
+function setupGraphClustersById() {
+    clusterMap = {}
+    currentGraph.nodes.forEach(function(node, i) {
+        let nodeClusterId = 0
+        
+        if (node.hasOwnProperty('metric_file_result_dependency_graph_louvain_modularity_in_file')) {
+            nodeClusterId = node.metric_file_result_dependency_graph_louvain_modularity_in_file
+        } else if (node.hasOwnProperty('metric_entity_result_dependency_graph_louvain_modularity_in_entity')) {
+            nodeClusterId = node.metric_entity_result_dependency_graph_louvain_modularity_in_entity
+        } else if (node.hasOwnProperty('metric_entity_result_inheritance_graph_louvain_modularity_in_entity')) {
+            nodeClusterId = node.metric_entity_result_inheritance_graph_louvain_modularity_in_entity
+        } else if (node.hasOwnProperty('metric_entity_result_complete_graph_louvain_modularity_in_entity')) {
+            nodeClusterId = node.metric_entity_result_complete_graph_louvain_modularity_in_entity
+        }
+        
+        nodeClusterId = nodeClusterId.toString()
+        
+        if (nodeClusterId in clusterMap) {
+            clusterMap[nodeClusterId].push(node)
+        } else {
+            clusterMap[nodeClusterId] = []
+            clusterMap[nodeClusterId].push(node)
+        }
+    })
+    
+    // console.log(clusterMap)
+}
+
+function onMouseOverHullMenuNode(clusterId) {
+    if (!selectedClusterHullIds.includes(clusterId)) {
+        addHighlightToSVGCircle(clusterId)
+    }
+    hoveredClusterHullId = clusterId
+    simulationUpdate()
+}
+
+function onMouseOutHullMenuNode(clusterId) {
+    if (!selectedClusterHullIds.includes(clusterId)) {
+        removeHighlightFromSVGCircle(clusterId)
+    }
+    hoveredClusterHullId = undefined
+    simulationUpdate()
+}
+
+function addHighlightToSVGCircle(clusterId) {
+    let hullNodeSVG = $("#clusterHullNodeSVGCircle-" + clusterId)
+    hullNodeSVG.attr('stroke', 'yellow')
+    hullNodeSVG.attr('stroke-width', '2')
+}
+
+function removeHighlightFromSVGCircle(clusterId) {
+    let hullNodeSVG = $("#clusterHullNodeSVGCircle-" + clusterId)
+    hullNodeSVG.attr('stroke', 'black')
+    hullNodeSVG.attr('stroke-width', '1')
+}
+
+function onClickHullMenuNode(clusterId) {
+    if (selectedClusterHullIds.includes(clusterId)) {
+        removeItemAll(selectedClusterHullIds, clusterId)
+        removeHighlightFromSVGCircle(clusterId)
+    } else {
+        selectedClusterHullIds.push(clusterId)
+        addHighlightToSVGCircle(clusterId)
+    }
+    simulationUpdate()
+}
+
+function createClusterHullMenu() {
+    // check if there is at least one cluster
+    if ("0" in clusterMap) {
+        // build menu
+        let clusterMenuHtml = "<div id=\"clusterHullContainer\"> \
+        <div class=\"row\">"
+        
+        clusterMenuHtml += "<div class=\"svg-column\">"
+        
+        // insert SVG circles
+        let iteration = 0
+        Object.keys(clusterMap).forEach(function(key) {
+            
+            if (iteration < maxClusterHulls) {
+                let firstNode = clusterMap[key][0]
+                let color = nodeColorByModularity(firstNode)
+                
+                let svgElement = "<svg onmouseover=\"onMouseOverHullMenuNode(" + key + ")\" onmouseout=\"onMouseOutHullMenuNode(" + key + ")\" onclick=\"onClickHullMenuNode(" + key + ")\" height=\"16px\" width=\"16px\" viewBox=\"0 0 18 18\"><circle id=\"clusterHullNodeSVGCircle-" + key + "\" cx=\"5\" cy=\"10\" r=\"4\" \
+                stroke=\"black\" stroke-width=\"1\" fill=\""
+                svgElement += color
+                svgElement += "\" /></svg>"
+                clusterMenuHtml += svgElement
+            }
+            iteration += 1
+        });
+        
+        // finish menu and append to div
+        clusterMenuHtml += "</div></div></div>"
+        d3.select("#clusterHullMenu").html(clusterMenuHtml)
+        
+        // add tooltips to cluster hull nodes
+        iteration = 0
+        Object.keys(clusterMap).forEach(function(clusterId) {
+            if (iteration < maxClusterHulls) {
+                let clusterToolTipDescription = "<u>Cluster metrics</u><br>"
+                let clusterMetrics = clusterMetricsMap[clusterId]
+                
+                // TODO: check why clusterMetrics can be undefined
+                if (clusterMetrics !== undefined) {
+                    // add all cluster metrics that we can find
+                    Object.keys(clusterMetrics).forEach(function(clusterMetric) {
+                        let metricPrettyName = clusterMetric.replace(/_/gi, " ").replace(/metric/gi, "")
+                        clusterToolTipDescription += metricPrettyName + ": " + "<b>" + clusterMetrics[clusterMetric] + "</b>" + "<br>"
+                    })
+                    
+                    $('#' + 'clusterHullNodeSVGCircle-' + clusterId).attr('data-bs-toggle', 'tooltip')
+                    $('#' + 'clusterHullNodeSVGCircle-' + clusterId).attr('data-bs-title', clusterToolTipDescription)
+                    $('#' + 'clusterHullNodeSVGCircle-' + clusterId).attr('data-bs-html', 'true')
+                    $('#' + 'clusterHullNodeSVGCircle-' + clusterId).attr('data-bs-placement', 'bottom')
+                    
+                }
+            }
+        })
+    }
+    
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+}
+
+function getPointArrayForClusterId(id) {
+    let pointArray = []
+    let clusterId = id.toString()
+    
+    if (clusterId in clusterMap) {
+        clusterMap[clusterId].forEach(function(node, i) {
+            pointArray.push([node.x, node.y])
+        })
+    }
+    return pointArray
+}
+
+// calculate hull
+function getHullFromPointArray(pointArray) {
+    let hullArray = hull(pointArray, 60)
+    return hullArray
+}
+
+// draw a single cluster hull as a polygon 
+function drawHull(context, clusterId) {
+    let pointArray = getPointArrayForClusterId(clusterId)
+    let hullArray = getHullFromPointArray(pointArray)
+    let firstNodeInCluster = clusterMap[clusterId][0]
+    context.fillStyle = nodeColorByModularity(firstNodeInCluster, 0.2)
+    
+    context.beginPath();
+    
+    let firstPoint = hullArray[0]
+    context.moveTo(firstPoint[0], firstPoint[1]);
+    
+    hullArray.forEach(function(arrayElement, i) {
+        context.lineTo(arrayElement[0], arrayElement[1]);
+    })
+    
+    context.closePath();
+    context.fill();
+}
+
+// draw all required cluster hulls (selected/hovered nodes from the menu)
+function drawHulls(context) {
+    
+    // draw a hull if someone hovers ofer a hull menu cluster node 
+    if (hoveredClusterHullId !== undefined) {
+        drawHull(context, hoveredClusterHullId)
+    }
+    
+    // draw every hull was was selected by a mouse click before 
+    selectedClusterHullIds.forEach(clusterId => {
+        drawHull(context, clusterId)
+    })
+}