diff --git a/lib/gui.ts b/lib/gui.ts index b2609b51..95817705 100644 --- a/lib/gui.ts +++ b/lib/gui.ts @@ -107,7 +107,7 @@ export const Gui = function (language: ReturnType) { let title = Title(); let header = Container("header"); - let infobox = Infobox(sidebar, linkScale); + let infobox = Infobox(sidebar, linkScale, fanout); let tabs = Tabs(); let overview = Container(); let legend = Legend(language); @@ -146,6 +146,12 @@ export const Gui = function (language: ReturnType) { tabs.add("sidebar.stats", statistics); tabs.add("sidebar.about", about); + // If filters are present in the URL, switch to the "nodes" tab on load + let urlParams = router.getParams(); + if (Object.keys(urlParams).length > 0) { + tabs.select("node.nodes"); + } + router.addTarget(title); router.addTarget(infobox); diff --git a/lib/infobox/main.ts b/lib/infobox/main.ts index 0d5c40dc..ddbc13b7 100644 --- a/lib/infobox/main.ts +++ b/lib/infobox/main.ts @@ -5,9 +5,13 @@ import { location } from "./location.js"; import { Link as LinkData, Node as NodeData, NodeId } from "../utils/node.js"; import { Sidebar } from "../sidebar.js"; import { TargetLocation } from "../utils/router.js"; -import { ObjectsLinksAndNodes } from "../datadistributor.js"; +import { DataDistributor, ObjectsLinksAndNodes } from "../datadistributor.js"; -export const Main = function (sidebar: ReturnType, linkScale: (t: any) => any) { +export const Main = function ( + sidebar: ReturnType, + linkScale: (t: any) => any, + filterManager?: ReturnType, +) { const self = { resetView: undefined, gotoNode: undefined, @@ -55,7 +59,7 @@ export const Main = function (sidebar: ReturnType, linkScale: (t self.gotoNode = function gotoNode(nodeData: NodeData, nodeDict: { [k: NodeId]: NodeData }) { create(); - node = Node(el, nodeData, linkScale, nodeDict); + node = Node(el, nodeData, linkScale, nodeDict, filterManager); node.render(); }; diff --git a/lib/infobox/node.ts b/lib/infobox/node.ts index 3e090f14..8e4e99df 100644 --- a/lib/infobox/node.ts +++ b/lib/infobox/node.ts @@ -5,6 +5,8 @@ import { SortTable } from "../sorttable.js"; import * as helper from "../utils/helper.js"; import nodef, { Neighbour, Node as NodeData, NodeId } from "../utils/node.js"; import { NodeInfo } from "../config_default.js"; +import { DataDistributor } from "../datadistributor.js"; +import { GenericNodeFilter } from "../filters/genericnode.js"; const patch = init([classModule, propsModule, styleModule, eventListenersModule]); @@ -43,7 +45,13 @@ function showDevicePictures(pictures: string, device: NodeData) { return helper.showDevicePicture(pictures, subst); } -export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any, nodeDict: { [k: NodeId]: NodeData }) { +export function Node( + el: HTMLElement, + node: NodeData, + linkScale: (t: any) => any, + nodeDict: { [k: NodeId]: NodeData }, + filterManager?: ReturnType, +) { let config = window.config; let router = window.router; @@ -218,7 +226,29 @@ export function Node(el: HTMLElement, node: NodeData, linkScale: (t: any) => any if (field) { if (typeof field !== "object") { - field = h("td", field); + if (row.value === "owner" && filterManager) { + let ownerValue = String(field); + let filter = GenericNodeFilter("node.owner", ["owner"], ownerValue, undefined); + field = h("td", [ + h( + "a", + { + style: { cursor: "pointer" }, + on: { + click: function () { + filterManager.addFilter(filter); + router.fullUrl(); + let nodesTab = document.querySelector('.tabs li[data-tab="node.nodes"]') as HTMLLIElement; + if (nodesTab) nodesTab.click(); + }, + }, + }, + ownerValue, + ), + ]); + } else { + field = h("td", field); + } } attributeTable.children.push(h("tr", [row.name !== undefined ? h("th", _.t(row.name)) : null, field])); } diff --git a/lib/proportions.ts b/lib/proportions.ts index ec9eaba3..ca51ef4b 100644 --- a/lib/proportions.ts +++ b/lib/proportions.ts @@ -79,6 +79,9 @@ const statusFieldMapping: Record = { return d; }, }, + "node.owner": { + keys: ["owner"], + }, }; const patch = init([classModule, propsModule, styleModule, eventListenersModule]); @@ -258,6 +261,7 @@ export const Proportions = function (filterManager: ReturnType