[tools][system-analyzer] Add time filtering functionality

This CL adds input fields to the IC Panel to filter
IC events based on the event creation time.

Filtered events across time reflected back to the IC-panel
statistics which helps to examine statistics about
the events in the selected time range.

Change-Id: Ib2d66caab25140b09daa4d6249758254f8c75ce8
Reviewed-on: https://chromium-review.googlesource.com/c/v8/v8/+/2295601Reviewed-by: Camillo Bruni <cbruni@chromium.org>
Commit-Queue: Zeynep Cankara <zcankara@google.com>
Cr-Commit-Position: refs/heads/master@{#68845}

tools/system-analyzer/ic-panel-template.html

@@ -44,6 +44,7 @@ found in the LICENSE file. -->
 #legend {
   padding-right: 20px;
 }
+
 </style>
 <div class="panel">
   <h2>IC Panel</h2>
@@ -69,10 +70,11 @@ found in the LICENSE file. -->
     Group-Key:
     <select id="group-key"></select>
     </p>
-  Filter number of items
+    <p>
+    Filter by Time
     <br></br>
-  <input type="search" id="filter-input" placeholder="Number of items"></input>
-  <button id="filterICBtn">Filter</button>
+    <input type="search" id="filter-time-start" placeholder="start"></input> : <input type="search" id="filter-time-end" placeholder="end"></input>
+    <button id="filterICTimeBtn">Filter</button>
     <p>
       <table id="table" width="100%">
         <tbody id="table-body">

tools/system-analyzer/ic-panel.mjs

@@ -12,9 +12,11 @@ defineCustomElement('ic-panel', (templateText) =>
     shadowRoot.innerHTML = templateText;
     this.groupKeySelect.addEventListener(
         'change', e => this.updateTable(e));
-    this.filterICBtnSelect.addEventListener(
-        'click', e => this.handleICFilter(e));
+    this.$('#filterICTimeBtn').addEventListener(
+      'click', e => this.handleICTimeFilter(e));
     this._noOfItems = 100;
+    this._startTime = 0;
+    this._endTime = 0;
   }
 
   $(id) {
@@ -29,10 +31,6 @@ defineCustomElement('ic-panel', (templateText) =>
     return this.$('#group-key');
   }
 
-  get filterICBtnSelect() {
-    return this.$('#filterICBtn');
-  }
-
   get tableSelect() {
     return this.$('#table');
   }
@@ -49,13 +47,38 @@ defineCustomElement('ic-panel', (templateText) =>
     return this.querySelectorAll("span");
   }
 
+  set filteredEntries(value){
+    this._filteredEntries = value;
+  }
+
+  get filteredEntries(){
+    return this._filteredEntries;
+  }
+
+  set entries(value){
+    this._entries = value;
+    this.filteredEntries = value;
+    this.updateTable();
+  }
+
+  get entries(){
+    return this._entries;
+  }
+
+   filterEntriesByTime() {
+    this.filteredEntries =  this.entries.filter(e => e.time >= this._startTime && e.time <= this._endTime);
+  }
+
    updateTable(event) {
     let select = this.groupKeySelect;
     let key = select.options[select.selectedIndex].text;
     let tableBody = this.tableBodySelect;
     this.removeAllChildren(tableBody);
-    let groups = Group.groupBy(entries, key, true);
+    let groups = Group.groupBy(this.filteredEntries, key, true);
     this.display(groups, tableBody);
+    //TODO(zcankara) do not send an event here, filtering will done outside
+    this.dispatchEvent(new CustomEvent(
+      'change', {bubbles: true, composed: true, detail: this.filteredEntries}));
   }
 
   escapeHtml(unsafe) {
@@ -102,10 +125,10 @@ defineCustomElement('ic-panel', (templateText) =>
     return this._noOfItems;
   }
 
-
   display(entries, parent) {
     let fragment = document.createDocumentFragment();
-    let max = Math.min(this.noOfItems, entries.length)
+    //let max = entries.length;
+    let max = Math.min(1000, entries.length)
     for (let i = 0; i < max; i++) {
       let entry = entries[i];
       let tr = document.createElement("tr");
@@ -127,6 +150,7 @@ defineCustomElement('ic-panel', (templateText) =>
     parent.appendChild(fragment);
   }
 
+
   displayDrilldown(entry, previousSibling) {
     let tr = document.createElement('tr');
     tr.className = "entry-details";
@@ -183,35 +207,17 @@ defineCustomElement('ic-panel', (templateText) =>
     }
   }
 
-  //TODO(zc): Function processing the timestamps of ICEvents
-  // Processes the IC Events which have V8Map's in the map-processor
-  processICEventTime(){
-    let ICTimeToEvent = new Map();
-    // save the occurance time of V8Maps
-    let eventTimes = []
-    console.log("Num of stats: " + entries.length);
-    // fetch V8 Maps from the IC Events
-    entries.forEach(element => {
-      let v8Map = V8Map.get("0x" + element.map);
-      if(!v8Map){
-        ICTimeToEvent.set(-1, element);
-      } else {
-        ICTimeToEvent.set(v8Map.time, element);
-        eventTimes.push(v8Map.time);
-      }
-    });
-    eventTimes.sort();
-    // save the IC events which have Map states
-    let eventsList = [];
-    for(let i = 0;  i < eventTimes.length; i++){
-      eventsList.push(ICTimeToEvent.get(eventTimes[i]));
-    }
-    return eventList;
-  }
-
-  handleICFilter(e){
-    let noOfItemsInput = parseInt(this.$('#filter-input').value);
-    this.noOfItems = noOfItemsInput;
+  handleICTimeFilter(e) {
+    this._startTime = parseInt(this.$('#filter-time-start').value);
+    console.assert(this._startTime >= 0, { errorMsg: "start time must be a non-negative integer!" });
+    this._endTime = parseInt(this.$('#filter-time-end').value);
+    console.assert(this._endTime <= this.entries[this.entries.length - 1].time,
+      { errorMsg: "end time must be smaller or equal to the the time of the last event!" });
+    console.assert(this._startTime < this._endTime,
+      { errorMsg: "end time must be smaller than the start time!" });
+    this.filterEntriesByTime();
     this.updateTable(e);
   }
+
+
 });

tools/system-analyzer/index.html

@@ -102,6 +102,7 @@ function handleKeyDown(event) {
   }
 }
 
+
 // Update application state
 function updateDocumentState(){
     document.state = stateGlobal.state;
@@ -109,7 +110,7 @@ function updateDocumentState(){
       document.state.timeline = stateGlobal.timeline;
     } catch (error) {
       console.log(error);
-      console.log("cannot assign timeline to state!");
+      console.log("cannot assign timeline to the state!");
     }
 }
 
@@ -126,15 +127,14 @@ function loadFileIC(file) {
   reader.onload = function(evt) {
     let icProcessor = new CustomIcProcessor();
     icProcessor.processString(this.result);
-    entries = icProcessor.entries;
+    let entries = icProcessor.entries;
     $("ic-panel").countSelect.innerHTML = entries.length;
-    $("ic-panel").updateTable(entries);
+    $('#ic-panel').entries = entries;
   }
   reader.readAsText(file);
   $("ic-panel").initGroupKeySelect();
 }
 
-
 function $(id) { return document.querySelector(id); }
 
 // holds the state of the application
@@ -150,17 +150,24 @@ function globalDataUpload(e) {
   stateGlobal.state = new State('#map-panel','#timeline-panel');
   stateGlobal.timeline = handleLoadTextMapProcessor(stateGlobal.fileData.chunk);
   updateDocumentState();
-  // process the IC explorer
   loadFileIC(stateGlobal.fileData.file);
 }
 
+
 function globalSearchBarEvent(e) {
   if(!e.detail.isValidMap) return;
   document.state.map = e.detail.map;
 }
 
+function handleSelectIcEvents(e){
+  if(!e.detail) return;
+  // Set selected IC events on the View
+  document.state.filteredEntries = e.detail;
+}
+
 function showMaps(e) {
-  // show maps on the view
+  if(!e.detail) return;
+  // Show selected maps on the View
   document.state.view.transitionView.showMaps(e.detail);
 }
 </script>
@@ -175,7 +182,7 @@ function showMaps(e) {
     <div id="container" style="display: none;">
       <timeline-panel id="timeline-panel"></timeline-panel>
       <map-panel id="map-panel" onclick="globalSearchBarEvent(event)" onchange="showMaps(event)"></map-panel>
-      <ic-panel id="ic-panel"></ic-panel>
+      <ic-panel id="ic-panel" onchange="handleSelectIcEvents(event)"></ic-panel>
     </div>
   </div>
 

tools/system-analyzer/map-model.js

@@ -15,6 +15,15 @@ class State {
     this._view = new View(this, mapPanelId, timelinePanelId);
     this._navigation = new Navigation(this, this.view);
   }
+  set filteredEntries(value) {
+    this._filteredEntries = value;
+    if (this._filteredEntries) {
+      //TODO(zcankara) update timeline view
+    }
+  }
+  get filteredEntries() {
+    return this._filteredEntries;
+  }
   get timeline() {
     return this._timeline
   }
@@ -201,6 +210,7 @@ class View {
     this.transitionView =
         new TransitionView(state, this.mapPanel_.transitionViewSelect);
     this.isLocked = false;
+    this._filteredEntries = [];
   }
   get chunks() {
     return this.state.chunks
@@ -369,7 +379,6 @@ class View {
     canvas.height = height;
     canvas.width = window.innerWidth;
     let ctx = canvas.getContext('2d');
-
     let chunks = this.state.timeline.chunkSizes(canvas.width * kFactor);
     let max = chunks.max();
 
@@ -397,6 +406,7 @@ class View {
     let ctx = canvas.getContext('2d');
     ctx.clearRect(0, 0, canvas.width, kChunkHeight);
     if (!this.state.map) return;
+    //TODO(zcankara) Redraw the IC events on canvas.
     this.drawEdges(ctx);
   }