1const CountEventPane = { 2 numberOfBins: 5, 3 maxCount: null, 4 5 init: function() { 6 CountEventPane.ExpandCollapseButton.initClick(); 7 CountEventPane.ExpandCollapseButton.initHover(); 8 CountEventPane.ShowHideTextButton.initClick(); 9 CountEventPane.ShowHideTextButton.initHover(); 10 CountEventPane.SearchBox.initInput(); 11 }, 12 update: function() { 13 var eventName = DataProcessingEventCounter.eventName; 14 var eventAttributeName = DataProcessingEventCounter.eventAttributeName; 15 var eventAttributeAttributeName = DataProcessingEventCounter.eventAttributeAttributeName; 16 var hasContentToShow = eventName !== null || 17 eventAttributeName !== null || 18 eventAttributeAttributeName !== null; 19 20 if (hasContentToShow) { 21 CountEventPane.empty(); 22 CountEventPane.getMaxCount(); 23 CountEventPaneHeader.update(); 24 CountEventPane.SearchBox.show(); 25 CountEventPaneContent.updateGroups(); 26 CountEventPaneContent.updateGroupName(); 27 CountEventPaneContent.updateTimelineName(); 28 CountEventPaneContent.updateBarChart(); 29 CountEventPaneContent.updateDescription(); 30 } 31 else if (!hasContentToShow) { 32 CountEventPane.empty(); 33 CountEventPaneHeader.showNone(); 34 CountEventPane.SearchBox.hide(); 35 CountEventPaneContent.showNone(); 36 } 37 }, 38 getMaxCount: function() { 39 const self = this; 40 var maxCount = -Infinity; 41 var eventCountData = DataProcessor.eventCountData; 42 43 for (var i = 0; i < eventCountData.length; i++) { 44 var groupData = eventCountData[i]; 45 var barChartList = groupData.countData; 46 47 for (var j = 0; j < barChartList.length; j++) { 48 var barList = barChartList[j].countList; 49 50 for (var k = 0; k < barList.length; k++) { 51 var barData = barList[k]; 52 var count = barData.count; 53 54 if (count > maxCount) 55 maxCount = count; 56 } 57 } 58 } 59 60 self.maxCount = maxCount; 61 }, 62 expand: function() { 63 $('#count-event-pane') 64 .removeClass('collapsed') 65 .addClass('expanded'); 66 }, 67 collapse: function() { 68 $('#count-event-pane') 69 .removeClass('expanded') 70 .addClass('collapsed'); 71 }, 72 empty: function() { 73 $('#count-event-pane > .header').empty(); 74 $('#count-event-pane > .content').empty(); 75 }, 76 77 // search 78 79 markGroupNames: function(groupNameQueryInLowerCase) { 80 var markInstance = new Mark(document.querySelectorAll('#count-event-pane > .content > .group > .group-name')); 81 82 markInstance.unmark({ 83 done: function(){ 84 markInstance.mark(groupNameQueryInLowerCase, { 85 'separateWordSearch': false, 86 'diacritics': false 87 }); 88 } 89 }); 90 }, 91 filterGroups: function(groupNameQueryInLowerCase, timelineNameQueryInLowerCase = null) { 92 $('#count-event-pane > .content > .group').each(function() { 93 var groupData = d3.select(this).datum(); 94 var groupName = groupData.name; 95 var groupNameInLowerCase = groupName.toLowerCase(); 96 var foundGroupName = groupNameInLowerCase.indexOf(groupNameQueryInLowerCase) != -1; 97 98 if (foundGroupName) { 99 $(this).css('display', ''); 100 101 if (timelineNameQueryInLowerCase) 102 $(this).find('.timeline-event-count').each(function() { 103 var countData = d3.select(this).datum(); 104 var timelineName = countData.timelineName; 105 var timelineNameInLowerCase = timelineName.toLowerCase(); 106 var foundTimelineName = timelineNameInLowerCase.indexOf(timelineNameQueryInLowerCase) != -1; 107 if (foundTimelineName) $(this).css('display', ''); 108 else if (!foundTimelineName) $(this).css('display', 'none'); 109 }); 110 else if (!timelineNameQueryInLowerCase) 111 $(this).find('.timeline-event-count').css('display', ''); 112 } 113 else if (!foundGroupName) 114 $(this).css('display', 'none'); 115 }); 116 }, 117 showAllGroups: function() { 118 $('#count-event-pane > .content > .group') 119 .css('display', ''); 120 $('#count-event-pane > .content > .group > .timeline-event-count') 121 .css('display', ''); 122 }, 123 124 // buttons 125 126 ExpandCollapseButton: { 127 toCollapse: function() { 128 $('#count-event-pane > .buttons > .expand-and-collapse.button > .fa') 129 .removeClass('fa-angle-double-left') 130 .addClass('fa-angle-double-right'); 131 $('#count-event-pane > .buttons > .expand-and-collapse.button') 132 .attr('tooltip', 'Collapse count event pane'); 133 }, 134 toExpand: function() { 135 $('#count-event-pane > .buttons > .expand-and-collapse.button > .fa') 136 .removeClass('fa-angle-double-right') 137 .addClass('fa-angle-double-left'); 138 $('#count-event-pane > .buttons > .expand-and-collapse.button') 139 .attr('tooltip', 'Expand count event pane'); 140 }, 141 initClick: function() { 142 $('#count-event-pane > .buttons > .expand-and-collapse.button') 143 .on('click', onClickExpandAndCollapseButton); 144 145 function onClickExpandAndCollapseButton() { 146 var isCollapsed = $(this).find('.fa').hasClass('fa-angle-double-left'); 147 148 // expand 149 if (isCollapsed) { 150 $('#tooltip').html('Collapse count event pane'); 151 CountEventPane.ExpandCollapseButton.toCollapse(); 152 VisualizationPane.collapse(); 153 CountEventPane.empty(); 154 CountEventPane.expand(); 155 CountEventPane.showLoader(); 156 setTimeout(function() {
157 VisualizationPaneSVG.update(); 158 CountEventPane.update(); 159 CountEventPane.hideLoader(); 160 }, 0); 161 } 162 163 // collapse 164 else if (!isCollapsed) { 165 $('#tooltip').html('Expand count event pane'); 166 CountEventPane.ExpandCollapseButton.toExpand(); 167 VisualizationPane.expand(); 168 CountEventPane.empty(); 169 CountEventPane.collapse(); 170 VisualizationPaneSVG.update(); 171 } 172 } 173 }, 174 initHover: function() { 175 $('#count-event-pane > .buttons > .expand-and-collapse.button') 176 .on('mouseenter', onMouseenterButton) 177 .on('mouseleave', onMouseleaveButton); 178 179 function onMouseenterButton() { 180 var offset = $(this).offset(); 181 var height = $(this).height(); 182 var width = $(this).width(); 183 var tooltipText = $(this).attr('tooltip'); 184 185 $('#tooltip') 186 .removeClass() 187 .removeAttr('style') 188 .empty() 189 .addClass('event-count-button') 190 .css('left', offset.left - 8 + width - 8) 191 .css('top', offset.top + height) 192 .css('transform', 'translateX(-100%)') 193 .html(tooltipText); 194 } 195 196 function onMouseleaveButton() { 197 $('#tooltip') 198 .removeClass() 199 .removeAttr('style') 200 .empty(); 201 } 202 } 203 }, 204 ShowHideTextButton: { 205 toShow: function() { 206 $('#count-event-pane > .buttons > .show-and-hide-text.button > .fa') 207 .removeClass('fa-minus-circle') 208 .addClass('fa-plus-circle'); 209 $('#count-event-pane > .buttons > .show-and-hide-text.button') 210 .attr('tooltip', 'Show chart descriptions'); 211 }, 212 toHide: function() { 213 $('#count-event-pane > .buttons > .show-and-hide-text.button > .fa') 214 .removeClass('fa-plus-circle') 215 .addClass('fa-minus-circle'); 216 $('#count-event-pane > .buttons > .show-and-hide-text.button') 217 .attr('tooltip', 'Hide chart descriptions'); 218 }, 219 initClick: function() { 220 $('#count-event-pane > .buttons > .show-and-hide-text.button') 221 .on('click', onClickShowAndHideTextButton); 222 223 function onClickShowAndHideTextButton() { 224 var isShown = $(this).find('.fa').hasClass('fa-minus-circle'); 225 226 // hide 227 if (isShown) { 228 $('#tooltip').html('Show chart descriptions'); 229 CountEventPane.ShowHideTextButton.toShow(); 230 State.showChartDescription = false; 231 $('#count-event-pane .group .description') 232 .css('display', 'none'); 233 } 234 235 // show 236 else if (!isShown) { 237 $('#tooltip').html('Hide chart descriptions'); 238 CountEventPane.ShowHideTextButton.toHide(); 239 State.showChartDescription = true; 240 $('#count-event-pane .group .description') 241 .css('display', ''); 242 } 243 } 244 }, 245 initHover: function() { 246 $('#count-event-pane > .buttons > .show-and-hide-text.button') 247 .on('mouseenter', onMouseenterButton) 248 .on('mouseleave', onMouseleaveButton); 249 250 function onMouseenterButton() { 251 var offset = $(this).offset(); 252 var height = $(this).height(); 253 var width = $(this).width(); 254 var tooltipText = $(this).attr('tooltip'); 255 256 $('#tooltip') 257 .removeClass() 258 .removeAttr('style') 259 .empty() 260 .addClass('event-count-button') 261 .css('left', offset.left - 8 + width - 8) 262 .css('top', offset.top + height) 263 .css('transform', 'translateX(-100%)') 264 .html(tooltipText); 265 } 266 267 function onMouseleaveButton() { 268 $('#tooltip') 269 .removeClass() 270 .removeAttr('style') 271 .empty(); 272 } 273 } 274 }, 275 276 // search box 277 278 SearchBox: { 279 hide: function() { 280 $('#count-event-pane > .search-box') 281 .css('display', 'none'); 282 }, 283 show: function() { 284 var headerOffset = $('#count-event-pane > .header').offset(); 285 var headerHeight = $('#count-event-pane > .header').outerHeight(); 286 var headerTop = headerOffset.top - 8; 287 288 $('#count-event-pane > .search-box') 289 .css('display', '') 290 .css('top', headerTop + headerHeight + 27); 291 }, 292 initInput: function() { 293 $('#count-event-pane > .search-box > input') 294 .on('input', onInputSearchQuery); 295 296 function onInputSearchQuery() { 297 var groupNameQueryInLowerCase = $(this).val().toLowerCase(); 298 299 if (groupNameQueryInLowerCase == '') { 300 CountEventPane.markGroupNames(groupNameQueryInLowerCase); 301 CountEventPane.showAllGroups(); 302 } 303 else if (groupNameQueryInLowerCase != '') { 304 CountEventPane.markGroupNames(groupNameQueryInLowerCase); 305 CountEventPane.filterGroups(groupNameQueryInLowerCase); 306 } 307 } 308 } 309 }, 310 311 // loader 312 313 showLoader: function() { 314 $('#count-event-pane > .loader') 315 .css('display', 'block'); 316 }, 317 hideLoader: function() { 318 $('#count-event-pane > .loader') 319 .css('display', ''); 320 } 321}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.