From 471ec7e467090bea965ef719ec36ded662edee07 Mon Sep 17 00:00:00 2001
From: Adam Shapiro <adam@pointonenav.com>
Date: Mon, 10 Jun 2024 17:18:56 -0400
Subject: [PATCH 1/3] Added content filter control to event log display.

---
 .../fusion_engine_client/analysis/analyzer.py | 56 ++++++++++++++-----
 1 file changed, 43 insertions(+), 13 deletions(-)

diff --git a/python/fusion_engine_client/analysis/analyzer.py b/python/fusion_engine_client/analysis/analyzer.py
index 77dc172b..0e6dce49 100755
--- a/python/fusion_engine_client/analysis/analyzer.py
+++ b/python/fusion_engine_client/analysis/analyzer.py
@@ -49,15 +49,15 @@
 }
 
 
-def _data_to_table(col_titles: List[str], values: List[List[Any]], row_major: bool = False):
+def _data_to_table(col_titles: List[str], values: List[List[Any]], row_major: bool = False, id='table'):
     if row_major:
         # If values is row major (outer index is the table rows), transpose it.
         col_values = list(map(list, zip(*values)))
     else:
         col_values = values
 
-    table_html = '''\
-<table>
+    table_html = f'''\
+<table id={id}>
   <tbody style="vertical-align: top">
     <tr style="background-color: #a2c4fa">
 '''
@@ -909,21 +909,21 @@ def _plot_data(name, idx, source_id, marker_style=None):
             if marker_style is not None:
                 style['marker'].update(marker_style)
 
+            # Only put default source ID on map by default.
+            legendgroup = None if len(self.source_ids) == 1 else source_id
+            visible = None if source_id == min(self.source_ids) else 'legendonly'
+
             if np.any(idx):
                 text = ["Time: %.3f sec (%.3f sec)<br>Std (ENU): (%.2f, %.2f, %.2f) m" %
                         (t, t + float(self.t0), std[0], std[1], std[2])
                         for t, std in zip(time[idx], std_enu_m[:, idx].T)]
-                # Only put default source ID on map by default.
-                if source_id == min(self.source_ids):
-                    map_data.append(go.Scattermapbox(lat=lla_deg[0, idx], lon=lla_deg[1, idx], name=name, text=text,
-                                                     legendgroup=source_id, **style))
-                else:
-                    map_data.append(go.Scattermapbox(lat=lla_deg[0, idx], lon=lla_deg[1, idx], name=name, text=text,
-                                                     legendgroup=source_id, visible='legendonly', **style))
+                map_data.append(go.Scattermapbox(lat=lla_deg[0, idx], lon=lla_deg[1, idx], name=name, text=text,
+                                                 legendgroup=legendgroup, visible=visible, **style))
 
             else:
                 # If there's no data, draw a dummy trace so it shows up in the legend anyway.
-                map_data.append(go.Scattermapbox(lat=[np.nan], lon=[np.nan], name=name, visible='legendonly', **style))
+                map_data.append(go.Scattermapbox(lat=[np.nan], lon=[np.nan], name=name, legendgroup=legendgroup,
+                                                 visible='legendonly', **style))
 
         # Read the pose data.
         for source_id in self.source_ids:
@@ -2213,9 +2213,39 @@ def plot_events(self):
                 if system_time_ns in times_before_resets:
                     rows[-1][2] = f'{(times_before_resets[system_time_ns]):.3f}'
 
-        table_html = _data_to_table(table_columns, rows, row_major=True)
-        body_html = f"""\
+        table_html = _data_to_table(table_columns, rows, row_major=True, id='event_log')
+        body_html = """\
+<script>
+function UpdateFilter() {
+  var filter = document.getElementById("filter").value.toLowerCase();
+  var invert = document.getElementById("invert").checked;
+  var table = document.getElementById("event_log");
+  var tr = table.getElementsByTagName("tr");
+  for (var i = 0; i < tr.length; ++i) {
+    var tds = tr[i].getElementsByTagName("td");
+    if (tds.length < 6) {
+      continue;
+    }
+
+    var event_type_td = tds[3];
+    var description_td = tds[5];
+    var matches = event_type_td.innerText.toLowerCase().indexOf(filter) > -1 ||
+                  description_td.innerText.toLowerCase().indexOf(filter) > -1;
+    if (filter == "" || (matches && !invert) || (!matches && invert)) {
+      tr[i].style.display = "";
+    }
+    else {
+      tr[i].style.display = "none";
+    }
+  }
+}
+</script>
+""" + f"""\
 <h2>Device Event Log</h2>
+<input type="text" id="filter" onkeyup="UpdateFilter()"
+ placeholder="Filter by event type or description..." style="width: 100%;"><br>
+<input type="checkbox" id="invert" onclick="UpdateFilter()">
+<label for="invert"> Invert Selection</label>
 <pre>{table_html}</pre>
 """
 

From af878f3e1cca080378e9a95f47f5eebb122fd916 Mon Sep 17 00:00:00 2001
From: Adam Shapiro <adam@pointonenav.com>
Date: Tue, 11 Jun 2024 18:31:15 -0400
Subject: [PATCH 2/3] Display the number of visible events.

---
 python/fusion_engine_client/analysis/analyzer.py | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/python/fusion_engine_client/analysis/analyzer.py b/python/fusion_engine_client/analysis/analyzer.py
index 0e6dce49..e8e447f8 100755
--- a/python/fusion_engine_client/analysis/analyzer.py
+++ b/python/fusion_engine_client/analysis/analyzer.py
@@ -2221,6 +2221,7 @@ def plot_events(self):
   var invert = document.getElementById("invert").checked;
   var table = document.getElementById("event_log");
   var tr = table.getElementsByTagName("tr");
+  var visible_count = 0;
   for (var i = 0; i < tr.length; ++i) {
     var tds = tr[i].getElementsByTagName("td");
     if (tds.length < 6) {
@@ -2233,11 +2234,13 @@ def plot_events(self):
                   description_td.innerText.toLowerCase().indexOf(filter) > -1;
     if (filter == "" || (matches && !invert) || (!matches && invert)) {
       tr[i].style.display = "";
+      ++visible_count;
     }
     else {
       tr[i].style.display = "none";
     }
   }
+  document.getElementById("visible_count").innerText = visible_count;
 }
 </script>
 """ + f"""\
@@ -2246,6 +2249,7 @@ def plot_events(self):
  placeholder="Filter by event type or description..." style="width: 100%;"><br>
 <input type="checkbox" id="invert" onclick="UpdateFilter()">
 <label for="invert"> Invert Selection</label>
+<br>Displaying <div id="visible_count" style="display: inline;">{len(rows)}</div>/{len(rows)} event notifications.
 <pre>{table_html}</pre>
 """
 

From c5c9923cc85561782716b7c437f24bef4a03de91 Mon Sep 17 00:00:00 2001
From: Adam Shapiro <adam@pointonenav.com>
Date: Tue, 11 Jun 2024 19:43:57 -0400
Subject: [PATCH 3/3] Optimized table using native JS for filtering.

---
 .../fusion_engine_client/analysis/analyzer.py | 178 +++++++++++++++---
 1 file changed, 150 insertions(+), 28 deletions(-)

diff --git a/python/fusion_engine_client/analysis/analyzer.py b/python/fusion_engine_client/analysis/analyzer.py
index e8e447f8..6ffaa9df 100755
--- a/python/fusion_engine_client/analysis/analyzer.py
+++ b/python/fusion_engine_client/analysis/analyzer.py
@@ -2213,44 +2213,166 @@ def plot_events(self):
                 if system_time_ns in times_before_resets:
                     rows[-1][2] = f'{(times_before_resets[system_time_ns]):.3f}'
 
-        table_html = _data_to_table(table_columns, rows, row_major=True, id='event_log')
+        table_data = ',\n  '.join([repr(row) for row in rows])
         body_html = """\
 <script>
-function UpdateFilter() {
-  var filter = document.getElementById("filter").value.toLowerCase();
-  var invert = document.getElementById("invert").checked;
-  var table = document.getElementById("event_log");
-  var tr = table.getElementsByTagName("tr");
-  var visible_count = 0;
-  for (var i = 0; i < tr.length; ++i) {
-    var tds = tr[i].getElementsByTagName("td");
-    if (tds.length < 6) {
-      continue;
-    }
+// Reference: https://jsfiddle.net/ej7z5kdc/
+class FilteredTable {
+  static next_checkbox_id = 0;
+
+  constructor(columns, data, filter_col_indices, filter_placeholder) {
+    this.columns = columns;
+    this.input_data = data;
+    this.filter_col_indices = filter_col_indices;
+    this.filter_placeholder = filter_placeholder;
+  }
 
-    var event_type_td = tds[3];
-    var description_td = tds[5];
-    var matches = event_type_td.innerText.toLowerCase().indexOf(filter) > -1 ||
-                  description_td.innerText.toLowerCase().indexOf(filter) > -1;
-    if (filter == "" || (matches && !invert) || (!matches && invert)) {
-      tr[i].style.display = "";
-      ++visible_count;
+  /** @returns {{match: boolean, $node: Element}[]} */
+  search(filter, invert) {
+    if (!this.$tbody) {
+      return;
     }
-    else {
-      tr[i].style.display = "none";
+
+    let count = 0;
+    let results = this.data.map(entry => {
+      const searchable_data = entry.searchable_data;
+      const $node = entry.$node;
+      let matches = false;
+      if (filter === "") {
+        matches = true;
+      }
+      else {
+        for (let i = 0; i < searchable_data.length; ++i) {
+          if (searchable_data[i].indexOf(filter) >= 0) {
+            matches = true;
+            break;
+          }
+        }
+
+        if (invert) {
+          matches = !matches;
+        }
+      }
+      if (matches) {
+        ++count;
+      }
+      return {
+        match: matches,
+        $node,
+      };
+    });
+    return {count: count, results: results};
+  }
+
+  getControls() {
+    this._createTable();
+    return this.$controls;
+  }
+
+  getElement() {
+    this._createTable();
+    return this.$container;
+  }
+
+  _createTable() {
+    if (!this.$container) {
+      const $controls = document.createElement("div");
+      this.$controls = $controls;
+      let checkbox_id = "__checkbox_" + FilteredTable.next_checkbox_id++;
+      $controls.innerHTML = `
+<div><input type="text" class="filter" style="width: 100%;" placeholder="${this.filter_placeholder}"></div>
+<div>
+  <input type="checkbox" class="invert" id="${checkbox_id}">
+  <label for="${checkbox_id}"> Invert Selection</label>
+</div>
+<div>Displaying <div class="count" style="display: inline;"></div>/<div class="total" style="display: inline;"></div> elements.</div>`;
+
+      this.$filter = $controls.querySelector(".filter");
+      this.$invert = $controls.querySelector(".invert");
+      this.$count = $controls.querySelector(".count");
+      this.$total = $controls.querySelector(".total");
+
+      const $container = document.createElement("div");
+      this.$container = $container;
+      $container.innerHTML = `
+<table><tbody style="vertical-align: top"></tbody></table>`;
+
+      this.$tbody = $container.querySelector("tbody");
+
+      // Bind a filter function to the controls.
+      const filterData = () => {
+        const filter = this.$filter.value.toLowerCase();
+        const invert = this.$invert.checked;
+        let results = this.search(filter, invert);
+        results.results.forEach(entry => entry.$node.style.display = entry.match ? "" : "none");
+        this.$count.textContent = results.count;
+      };
+
+      this.$filter.addEventListener("blur", filterData);
+      var typing_timer;
+      this.$filter.addEventListener("keydown", () => {
+        clearTimeout(typing_timer);
+      });
+      this.$filter.addEventListener("keyup", (event) => {
+        clearTimeout(typing_timer);
+        if (event.key === "Enter") {
+          filterData();
+        }
+        else {
+          typing_timer = setTimeout(filterData, 250);
+        }
+      });
+      this.$invert.addEventListener("change", filterData);
+
+      // Populate the table header.
+      const $header_tr = document.createElement("tr");
+      $header_tr.style = "background-color: #a2c4fa";
+      this.columns.map(text => {
+        const $td = document.createElement("th");
+        $td.innerHTML = text;
+        $header_tr.appendChild($td);
+      });
+      this.$tbody.appendChild($header_tr);
+
+      // Populate the table contents, and save a reference to the DOM row nodes with our data.
+      this.data = this.input_data.map(entry => {
+        const $tr = document.createElement("tr");
+        let searchable_data = [];
+        for (let col = 0; col < entry.length; ++col) {
+          const $td = document.createElement("td");
+          $td.innerHTML = entry[col];
+          $tr.appendChild($td);
+          if (this.filter_col_indices.indexOf(col) >= 0) {
+            searchable_data.push(entry[col].toLowerCase());
+          }
+        }
+        this.$tbody.appendChild($tr);
+
+        return {
+          $node: $tr,
+          searchable_data: searchable_data,
+        };
+      });
+
+      this.$count.textContent = this.data.length;
+      this.$total.textContent = this.data.length;
     }
   }
-  document.getElementById("visible_count").innerText = visible_count;
 }
 </script>
 """ + f"""\
 <h2>Device Event Log</h2>
-<input type="text" id="filter" onkeyup="UpdateFilter()"
- placeholder="Filter by event type or description..." style="width: 100%;"><br>
-<input type="checkbox" id="invert" onclick="UpdateFilter()">
-<label for="invert"> Invert Selection</label>
-<br>Displaying <div id="visible_count" style="display: inline;">{len(rows)}</div>/{len(rows)} event notifications.
-<pre>{table_html}</pre>
+<div class="controls"></div>
+<pre><div class="table"></div></pre>
+<script>
+const column_headers = {repr(table_columns)};
+const table_data = [
+{table_data}
+];
+const filtered_table = new FilteredTable(column_headers, table_data, [3, 5], "Filter by event type or description...");
+document.body.querySelector(".controls").appendChild(filtered_table.getControls());
+document.body.querySelector(".table").appendChild(filtered_table.getElement());
+</script>
 """
 
         self._add_page(name='event_log', html_body=body_html, title="Event Log")