Display subset of params in all-parameters comp.

For better performance as rendering thousands of parameters can be
quite heavy.

ui/components/all-parameters.ts

@@ -30,6 +30,26 @@ function escapeRegExp(str): string {
   return str.replace(/[-[\]/{}()*+?.\\^$|]/g, "\\$&");
 }
 
+const keysByDepth: WeakMap<Record<string, unknown>, string[][]> = new WeakMap();
+
+function orderKeysByDepth(device: Record<string, unknown>): string[][] {
+  if (keysByDepth.has(device)) return keysByDepth.get(device);
+  const res: string[][] = [];
+  for (const key of Object.keys(device)) {
+    let count = 0;
+    for (
+      let i = key.lastIndexOf(".", key.length - 2);
+      i >= 0;
+      i = key.lastIndexOf(".", i - 1)
+    )
+      ++count;
+    while (res.length <= count) res.push([]);
+    res[count].push(key);
+  }
+  keysByDepth.set(device, res);
+  return res;
+}
+
 const component: ClosureComponent = (): Component => {
   return {
     view: (vnode) => {
@@ -56,16 +76,27 @@ const component: ClosureComponent = (): Component => {
           re = new RegExp(keywords.map((s) => escapeRegExp(s)).join(".*"), "i");
       }
 
-      const rows = Object.keys(device)
-        .sort()
-        .map((k) => {
+      const filteredKeys: string[] = [];
+      const allKeys = orderKeysByDepth(device);
+      let count = 0;
+      for (const keys of allKeys) {
+        let c = 0;
+        for (const k of keys) {
+          const p = device[k];
+          const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
+          if (re && !re.test(str)) continue;
+          ++c;
+          if (count < 100) filteredKeys.push(k);
+        }
+        count += c;
+      }
+
+      filteredKeys.sort();
+
+      const rows = filteredKeys.map((k) => {
         const p = device[k];
         const val = [];
-          const attrs = {};
-          if (re) {
-            const str = p.value && p.value[0] ? `${k} ${p.value[0]}` : k;
-            if (!re.test(str)) attrs["style"] = "display: none;";
-          }
+        const attrs = { key: k };
 
         if (p.object === false) {
           val.push(
@@ -151,7 +182,14 @@ const component: ClosureComponent = (): Component => {
           "Download"
         ),
         search,
-        m(".parameter-list", m("table", m("tbody", rows)))
+        m(
+          ".parameter-list",
+          m("table", m("tbody", rows)),
+          m(
+            "m",
+            `Displaying ${filteredKeys.length} out of ${count} parameters.`
+          )
+        )
       );
     },
   };