switch to threelist for field struct

Change-Id: Icc1abf64c271b8e24afe3cfe229b4981b89d5821

analysis/kernel/dashboard/frontend/src/controllers/heap.ts

@@ -54,7 +54,11 @@ export class Heap {
             await Fields.getRootNode(),
             await btf.getFieldsByStructName(struct),
             struct,
-            kmalloc
+            kmalloc,
+            this.kmalloc_cache_name,
+            this.kmalloc_cgroup_name,
+            bits_offset,
+            bits_end
         );
 
         if (bits_offset && bits_end) {

analysis/kernel/dashboard/frontend/src/views/fields/fields.ts

@@ -1,20 +1,22 @@
 import { View } from "../view";
 import { Heap } from "../../controllers/heap";
 import { FIELDS_RESULTS } from "../../types";
-import TreeView, { TreeViewItem } from "js-treeview";
+import ThreeView, { ThreeViewItem } from "../three/three";
 
 
 export class Fields {
     private static ROOT_NODE: HTMLDivElement | null = null;
     private static ROOT_NODE_CLASS_NAME: string = 'fields-root-node';
 
     static async getRootNode(): Promise<HTMLDivElement> {
-        return Fields.ROOT_NODE = await View.getRootNode(Fields.ROOT_NODE, Fields.ROOT_NODE_CLASS_NAME);
+        Fields.ROOT_NODE = await View.getRootNode(Fields.ROOT_NODE, Fields.ROOT_NODE_CLASS_NAME);
+        Fields.ROOT_NODE.role = "tree";
+        return Fields.ROOT_NODE;
     }
     constructor(private heap: Heap) { }
 
-    displayStructs(parentNode: HTMLDivElement, fieldResults: FIELDS_RESULTS[], struct: string, kmalloc: string) {
-        let root = { name: '', children: [] } as TreeViewItem<FIELDS_RESULTS>;
+    displayStructs(parentNode: HTMLDivElement, fieldResults: FIELDS_RESULTS[], struct: string, kmalloc: string, kmalloc_cache_name: string|undefined, kmalloc_cgroup_name: string|undefined, bits_offset: string, bits_end: string) {
+        let root = { name: '', children: [] } as ThreeViewItem<FIELDS_RESULTS>;
         let fullName = false;
 
         fieldResults.forEach(field => {
@@ -25,16 +27,18 @@ export class Fields {
                 if (part == "") {
                     part = `union`;
                 }
-                let nextLeaf: TreeViewItem<FIELDS_RESULTS> = leaf.children.find(e => e.name == part);
+                let nextLeaf = leaf.children?.find(e => e.name == part);
                 if (!nextLeaf) {
                     nextLeaf = {
                         expanded: true,
+                        selected: bits_offset == field.bits_offset && bits_end == field.bits_end,
                         get name() {
                             if (fullName) {
                                 return `[${this.data!.bits_offset}..${this.data!.bits_end}] ${part} (${this.data!.type})`;
                             }
                             return part;
                         },
+                        label: part,
                         children: [],
                         data: {
                             bits_offset: field.bits_offset,
@@ -44,9 +48,10 @@ export class Fields {
                             type: part == 'union' ? '...' : 'struct'
                         }
                     };
-                    leaf.children.push(nextLeaf);
+                    leaf.children?.push(nextLeaf);
                 } else if (parseInt(nextLeaf.data!.bits_end) < parseInt(field.bits_end)) {
-                    nextLeaf.data!.bits_end = field.bits_end
+                    nextLeaf.data!.bits_end = field.bits_end;
+                    nextLeaf.selected = bits_offset == nextLeaf.data!.bits_offset && bits_end == field.bits_end;
                 }
                 if (index == pathParts.length - 1) {
                     nextLeaf.data!.type = field.type;
@@ -59,10 +64,29 @@ export class Fields {
         });
         fullName = true;
         parentNode.replaceChildren();
-        const treeview = new TreeView<FIELDS_RESULTS>(root.children, parentNode);
+        const treeview = new ThreeView<FIELDS_RESULTS>(root.children, parentNode);
         treeview.on('select', e => {
             let field = e.data.data!;
-            location.hash = `!heap/${kmalloc}/${struct}/${field.bits_offset}..${field.bits_end}`;
+            history.pushState(null, '', `#!heap/${kmalloc}/${struct}/${field.bits_offset}..${field.bits_end}`);
+            this.heap.displayAccess(
+                Number(field.bits_offset),
+                Number(field.bits_end),
+                struct,
+                kmalloc,
+                kmalloc_cache_name,
+                kmalloc_cgroup_name,
+                0);
         });
+        let sel = treeview.getSelected();
+        switch(sel?.length) {
+            case undefined:
+            case 0:
+                treeview.focus(treeview.getFirst());
+                break;
+            case 1:
+                break;
+            default:
+                treeview.select(sel![0]);
+        }
     }
 }

analysis/kernel/dashboard/frontend/src/views/struct/struct-alloc.html

@@ -1,6 +1,8 @@
-<a class="struct-alloc-cache" href> </a>
-<div class="struct-alloc-call"> </div>
-<a class="struct-alloc-link" title href> </a>
-<div class="struct-alloc-metadata">
-    (<span class="struct-alloc-syscalls-num"> </span> syscalls)
+<div class="struct-alloc-container" role="row">
+    <div class="struct-alloc-cache" role="cell"><a href> </a></div>
+    <div class="struct-alloc-call" role="cell"> </div>
+    <div class="struct-alloc-link" role="cell"><a title href> </a></div>
+    <div class="struct-alloc-metadata" role="cell">
+        (<span class="struct-alloc-syscalls-num"> </span> syscalls)
+    </div>
 </div>

analysis/kernel/dashboard/frontend/src/views/struct/struct-entry.html

@@ -1,8 +1,9 @@
-<label class="struct-entry">
-    <a class="struct-name" href> </a>
-    <div class="struct-metadata">
-        (<span class="struct-alloc-num"> </span> allocations)
+<label class="struct-entry" role="row">
+    <div class="struct-entry-container" role="rowheader" aria-rowspan>
+        <div class="struct-name"><a href> </a></div>
+        <div class="struct-metadata">
+            (<span class="struct-alloc-num"> </span> allocations)
+        </div>
     </div>
-    <input type="checkbox" checked>
 </label>
 <div class="struct-alloc"></div>

analysis/kernel/dashboard/frontend/src/views/struct/struct-list.html

@@ -1 +1 @@
-<div class="struct-list"></div>
+<div class="struct-list" role="table"></div>

analysis/kernel/dashboard/frontend/src/views/struct/struct.css

@@ -54,44 +54,44 @@
             }
 
             .struct-entry {
-                display: grid;
-                grid-template-columns: auto 1fr;
                 grid-column: 1 / 5;
 
-                column-gap: 1ex;
-                margin: 20px 0 0 0;
-                padding: 1ex;
-
                 box-shadow: 0 0 0.5em #999;
                 background: hsla(24, 20%, 50%,.4);
+                .struct-entry-container {
+                    display: grid;
+                    grid-template-columns: auto 1fr;
 
-                & input {
-                    visibility: hidden;
-                    position: absolute;
-                }
-                &:not(:has(:checked)) + .struct-alloc {
-                    visibility: hidden;
-                    height: 0;
+                    column-gap: 1ex;
+                    padding: 1ex;
                 }
             }
             .struct-alloc {
-                display: grid;
                 grid-column: 1 / 5;
+
+                display: grid;
                 grid-template-columns: subgrid;
 
-                & > * {
-                    padding: 1ex;
-                    border-bottom: 1px dashed #ccc;
-                }
-                .struct-alloc-cache {
-                    margin-left: 3em;
-                    white-space: nowrap;
-                }
-                .struct-alloc-call {
-                    text-align: end;
-                }
-                .struct-alloc-metadata {
-                    white-space: nowrap;
+                margin-bottom: 20px;
+
+                .struct-alloc-container {
+                    display: grid;
+                    grid-column: 1 / 5;
+                    grid-template-columns: subgrid;
+                    & > * {
+                        padding: 1ex;
+                        border-bottom: 1px dashed #ccc;
+                    }
+                    .struct-alloc-cache {
+                        margin-left: 3em;
+                        white-space: nowrap;
+                    }
+                    .struct-alloc-call {
+                        text-align: end;
+                    }
+                    .struct-alloc-metadata {
+                        white-space: nowrap;
+                    }
                 }
             }
         }

analysis/kernel/dashboard/frontend/src/views/struct/struct.ts

@@ -31,9 +31,10 @@ export class Struct {
             return map;
         }, new Map<string, Set<STRUCT_RESULTS>>).forEach((allocs, struct_name) => {
             let structEntryFragment = interpolateHtml(structEntryHtml, new Map([
-                [`//a[@class="struct-name"]/@href`, `#!heap/${kmalloc}/${struct_name}`],
-                [`//a[@class="struct-name"]/text()`, struct_name],
-                [`//span[@class="struct-alloc-num"]/text()`, String(allocs.size)]
+                [`//*[@class="struct-entry-container"]/@aria-rowspan`, `${allocs.size + 1}`],
+                [`//*[@class="struct-name"]/a/@href`, `#!heap/${kmalloc}/${struct_name}`],
+                [`//*[@class="struct-name"]/a/text()`, struct_name],
+                [`//*[@class="struct-alloc-num"]/text()`, `${allocs.size}`]
             ]));
             let structEntry = structEntryFragment.querySelector('.struct-entry');
             let structAlloc = structEntryFragment.querySelector('.struct-alloc');
@@ -47,13 +48,13 @@ export class Struct {
                     alloc.kmalloc_dyn?"-dyn":""
                 }`;
                 let structAllocFragment = interpolateHtml(structAllocHtml, new Map([
-                    [`//a[@class="struct-alloc-cache"]/@href`, `#!heap/${kmalloc}/${struct}`],
-                    [`//a[@class="struct-alloc-cache"]/text()`, kmalloc],
-                    [`//div[@class="struct-alloc-call"]/text()`, `${alloc.call_value}`],
-                    [`//a[@class="struct-alloc-link"]/@href`, `#${alloc.call_uri}:${alloc.function_start_line}:${alloc.function_end_line}`],
-                    [`//a[@class="struct-alloc-link"]/text()`, `${alloc.call_uri}#${alloc.call_startLine}`],
-                    [`//a[@class="struct-alloc-link"]/@title`, `${alloc.function}`],
-                    [`//span[@class="struct-alloc-syscalls-num"]/text()`, `${alloc.syscalls_num}`]
+                    [`//*[@class="struct-alloc-cache"]/a/@href`, `#!heap/${kmalloc}/${struct}`],
+                    [`//*[@class="struct-alloc-cache"]/a/text()`, kmalloc],
+                    [`//*[@class="struct-alloc-call"]/text()`, `${alloc.call_value}`],
+                    [`//*[@class="struct-alloc-link"]/a/@href`, `#${alloc.call_uri}:${alloc.function_start_line}:${alloc.function_end_line}`],
+                    [`//*[@class="struct-alloc-link"]/a/text()`, `${alloc.call_uri}#${alloc.call_startLine}`],
+                    [`//*[@class="struct-alloc-link"]/a/@title`, `${alloc.function}`],
+                    [`//*[@class="struct-alloc-syscalls-num"]/text()`, `${alloc.syscalls_num}`]
                 ]));
                 structAlloc!.appendChild(structAllocFragment);
             });