| // Copyright 2020 The Fuchsia Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| /** |
| * @fileoverview Implements the interactive parsing of component data and |
| * drawing it to the UI. |
| */ |
| |
| function defaultColorFill(e) { |
| if (e.source == "bootfs") { |
| return "#FFA726"; |
| } |
| if (e.source == "unknown") { |
| return "#9C27B0"; |
| } |
| if (e.routes.offers.length > 0) { |
| return "#FF0266"; |
| } |
| if (e.routes.uses.length > 0) { |
| return "#1DE9B6"; |
| } |
| return "#09A4AE"; |
| } |
| |
| function searchColorFill(e) { |
| if (e == "node") { |
| return "#FF0266"; |
| } else if (e == "uses") { |
| return "#1DE9B6"; |
| } else if (e == "used_by") { |
| return "#9C27B0"; |
| } else { |
| return "#09A4AE"; |
| } |
| } |
| |
| /** |
| * Simple wrapper around the component mapper json API. |
| */ |
| class ComponentMapperApi { |
| constructor(baseUrl) { |
| this.baseUrl = baseUrl; |
| |
| this.routesUrl = baseUrl + "api/routes"; |
| this.componentsUrl = baseUrl + "api/components"; |
| this.manifestUrl = baseUrl + "api/component/manifest"; |
| } |
| |
| /** |
| * Takes a component and transforms it into a node as expected |
| * by the graph structure. |
| */ |
| makeNode(component) { |
| // FIXME: Make this a lazy load, since thousands of concurrent requests seem to cause issues in JS. |
| let mani = {}; //this.post_request(this.manifestUrl, JSON.stringify({component_id: component.id})); |
| let metaInd = component.url.lastIndexOf("#meta/"); |
| let componentName = metaInd == -1 ? component.url : component.url.slice(metaInd + 6); |
| let node = { |
| consumers: 0, |
| id: component.id, |
| url: component.url, |
| manifest: mani, |
| name: componentName, |
| routes: { |
| exposes: [], // FIXME: Is this ever used? |
| offers: [], // Empty vector until filled out via makeLink |
| uses: [], // Empty vector until filled out via makeLink. |
| }, |
| source: "package", |
| version: component.version, |
| } |
| return [component.id, node]; |
| } |
| |
| /** |
| * Takes a route and transforms it into a dictionary as expected |
| * by the graph structure. |
| */ |
| makeLink(route) { |
| var src = this.nodes[route.src_id]; |
| var dst = this.nodes[route.dst_id]; |
| |
| if (src == null || dst == null) { |
| console.log("Unable to resolve route node ids: " + route.src_id + "->" + route.dst_id); |
| } |
| |
| var link = { |
| fidl_service: route.service_name, |
| source: src["id"], |
| target: dst["id"], |
| type: "use" |
| }; |
| |
| // Update the list of uses, number of consumers, and offerings for src and dst nodes. |
| if (src != null && dst != null) { |
| src.routes.uses.push(route.service_name); |
| } |
| if (dst != null) { |
| dst.consumers += 1; |
| // This isn't guaranteed, but assume that if there is a link from node A to B for a FIDL service |
| // that node B offers that service. |
| if (!dst.routes.offers.includes(route.service_name)) { |
| dst.routes.offers.push(route.service_name); |
| } |
| } |
| |
| return link; |
| } |
| |
| /** |
| * Returns the complete json graph of all components. |
| */ |
| async getGraph() { |
| // Get all components and routes |
| let components = await this.post_request(this.componentsUrl, null); |
| let routes = await this.post_request(this.routesUrl, null); |
| |
| // Create an empty graph |
| let graph = { |
| links: [], |
| nodes: [], |
| }; |
| |
| // Add all the components as nodes |
| let nodes = {}; |
| let self = this; |
| components.forEach(async function (component) { |
| let [id, node] = self.makeNode(component); |
| nodes[id] = node; |
| graph.nodes.push(node); |
| }); |
| this.nodes = nodes; |
| |
| // Fill out the links between nodes |
| routes.forEach(async function (route) { |
| let link = self.makeLink(route); |
| graph.links.push(link); |
| }); |
| |
| return graph; |
| } |
| |
| /** |
| * Private internal API that returns a promise to the JSON response of a |
| * GET request with no parameters. |
| */ |
| get_request(url) { |
| return new Promise(function(resolve, reject) { |
| const jsonRequest= new XMLHttpRequest(); |
| jsonRequest.open("GET", url); |
| // Only accept 200 success. |
| jsonRequest.onload = function() { |
| if (this.status == 200) { |
| resolve(JSON.parse(jsonRequest.response)); |
| } else { |
| reject({status: this.status, statusText: jsonRequest.statusText}); |
| } |
| } |
| // Reject all errors. |
| jsonRequest.onerror = function() { |
| reject({status: this.status, statusText: jsonRequest.statusText}); |
| } |
| jsonRequest.send(); |
| }); |
| } |
| |
| /** |
| * Private internal API that returns a promise to the JSON response of a |
| * POST request with an input request body. |
| */ |
| post_request(url, body) { |
| return new Promise(function(resolve, reject) { |
| const jsonRequest= new XMLHttpRequest(); |
| jsonRequest.open("POST", url); |
| // Only accept 200 success. |
| jsonRequest.onload = function() { |
| if (this.status == 200) { |
| resolve(JSON.parse(jsonRequest.response)); |
| } else { |
| reject({status: this.status, statusText: jsonRequest.statusText}); |
| } |
| } |
| // Reject all errors. |
| jsonRequest.onerror = function() { |
| reject({status: this.status, statusText: jsonRequest.statusText}); |
| } |
| jsonRequest.send(body); |
| }); |
| } |
| } |
| |
| /** |
| * Simple class that renders the view for the component mapper. |
| */ |
| class ComponentMapperView { |
| constructor(api) { |
| this.api = api; |
| this.graphData = null; |
| this.search = document.getElementById("cm-search"); |
| this.search.addEventListener("keyup", this.searchComponents); |
| this.searchButton = document.getElementById("cm-search-button"); |
| this.searchButton.addEventListener("click", this.searchComponents); |
| this.sidebar = document.getElementById("cm-component-list"); |
| this.map = document.getElementById("cm-map"); |
| this.logo = document.getElementById("cm-logo"); |
| |
| document.body.onkeyup = (e) => { |
| if (e.keyCode == 32) { |
| this.resetGraphVisible(); |
| } |
| } |
| document.addEventListener('click', this.globalClickListener); |
| } |
| |
| /** |
| * Does the basic setup for the view and populates all the important elements. |
| */ |
| async init() { |
| // Retrieve all the important view state. |
| await this.refresh(); |
| // Draw the sidebar. |
| this.drawSidebar(this.graphData["nodes"]); |
| // Draw the main graph. |
| this.drawGraph(); |
| } |
| |
| /** |
| * Refresh all the apis and retrieve new packages etc. |
| */ |
| async refresh() { |
| console.log("[ComponentManager] - Refresh Triggered"); |
| this.graphData = await this.api.getGraph(); |
| } |
| |
| /** |
| * Draws the main graph. |
| */ |
| drawGraph() { |
| console.log("[ComponentView] - Drawing Graph"); |
| const map = document.getElementById("cm-map"); |
| const boundingRect = map.getBoundingClientRect(); |
| const width = boundingRect.width; |
| const height = boundingRect.height; |
| const viewBox = `0 0 ${width} ${height}`; |
| const nodeRadius = 120; |
| const nodeBounding = 2*nodeRadius; |
| |
| // Construct the map. |
| const svg = d3.select("#cm-map") |
| .append("svg") |
| .attr("preserveAspectRatio", "xMinYMin meet") |
| .attr("viewBox", viewBox) |
| .attr("width", width) |
| .attr("height", height) |
| .call(d3.zoom().on("zoom", function() { |
| svg.attr("transform", d3.event.transform) |
| })) |
| .append("g"); |
| |
| const view = this; |
| // Construct the graph. |
| { |
| let graph = view.graphData; |
| |
| console.log("[ComponentView] - Parsing Graph JSON"); |
| |
| const link = svg.append("g").selectAll("line") |
| .data(graph.links) |
| .enter() |
| .append("line") |
| .style("stroke", function(e) { |
| return "#64B5F6"; |
| }); |
| |
| const node = svg.append("g").selectAll("circle") |
| .data(graph.nodes) |
| .enter() |
| .append("circle") |
| .attr("r", function(e) { |
| let calculatedRadius = nodeRadius + 5*e.consumers + 5*e.routes.uses.length; |
| if (e.type == "core") { |
| calculatedRadius = calculatedRadius*2; |
| } |
| e.radius = calculatedRadius; |
| return calculatedRadius; |
| }) |
| .style("fill", defaultColorFill) |
| .on("click", (e, i) => { |
| const query = "id: " + e.id; |
| view.search.value = query; |
| view.updateSidebarWithSearchResults(query); |
| }); |
| |
| const label = svg.append("g").attr("class", "labels") |
| .selectAll("text").data(graph.nodes).enter() |
| .append("text") |
| .attr("text-anchor","middle") |
| .attr("class", "label") |
| .style("font-size", function(e) { |
| let calculatedSize = 20 + (e.consumers * 2) + (e.routes.uses.length * 2); |
| if (e.type == "core") { |
| calculatedSize = calculatedSize*2; |
| } |
| return calculatedSize; |
| }) |
| .style("font-weight", "bold") |
| .style("fill", "#e8eaed") |
| .on("click", (e, i) => { |
| const query = "id: " + e.id; |
| view.search.value = query; |
| view.updateSidebarWithSearchResults(query); |
| }) |
| .text(function(e) { return e.name; }); |
| |
| const simulate = d3.forceSimulation() |
| .force("center", d3.forceCenter(width/2, height/2)) |
| .force("charge", d3.forceManyBody()) |
| .force("collide", d3.forceCollide().radius(function(e) { return 1.5* e.radius; }).iterations(1)) |
| .force("link", d3.forceLink().id(function(e) { return e.id; })); |
| |
| simulate |
| .nodes(graph.nodes) |
| .on("tick", function() { |
| link |
| .attr("x1", function(e) { return e.source.x; }) |
| .attr("y1", function(e) { return e.source.y; }) |
| .attr("x2", function(e) { return e.target.x; }) |
| .attr("y2", function(e) { return e.target.y; }); |
| |
| node |
| .attr("cx", function(e) { return e.x + 5 }) |
| .attr("cy", function(e) { return e.y - 3 }); |
| |
| label |
| .attr("x", function(e) { return e.x }) |
| .attr("y", function(e) { return e.y }); |
| }) |
| .on("end", function() { |
| console.log("[ComponentView] Graph Stabilized"); |
| }); |
| simulate.force("link").links(graph.links); |
| |
| // Calculate what to do next. |
| } |
| } |
| |
| openRawManifest(component_id) { |
| window.open(this.api.manifestUrl + "?component_id=" + component_id, "_blank"); |
| } |
| |
| globalClickListener = ele => { |
| if (ele.target.className == "manifest-button" && ele.target.getAttribute("data-component-id") != null) { |
| this.openRawManifest(ele.target.getAttribute("data-component-id")); |
| } |
| } |
| |
| /** |
| * Draws the component sidebar with the listed items. |
| */ |
| drawSidebar(graphNodes) { |
| this.sidebar.innerHTML = ""; |
| // TODO(benwright) - Move these to use CSS margins. |
| for (const graphNode of graphNodes) { |
| const listNode = document.createElement("li"); |
| listNode.appendChild(document.createTextNode(graphNode["name"])); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode(graphNode["url"])); |
| |
| listNode.appendChild(document.createElement("br")); |
| let hrefEle = document.createElement("button"); |
| hrefEle.className = "manifest-button"; |
| hrefEle.setAttribute("data-component-id", graphNode.id); |
| hrefEle.appendChild(document.createTextNode("Manifest")); |
| listNode.appendChild(hrefEle); |
| if (graphNode["routes"]["uses"].length) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("uses:")); |
| for (const use of graphNode["routes"]["uses"]) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode(use)); |
| } |
| } |
| if (graphNode["routes"]["offers"].length) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("offers:")); |
| for (const offer of graphNode["routes"]["offers"]) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode(offer)); |
| } |
| } |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("version: " + graphNode["version"])); |
| if (graphNode["source"]) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("source: " + graphNode["source"])); |
| } |
| if (graphNode["type"]) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("type: " + graphNode["type"])); |
| } |
| if (graphNode["consumers"]) { |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createElement("br")); |
| listNode.appendChild(document.createTextNode("consumers: " + graphNode["consumers"])); |
| } |
| |
| this.sidebar.appendChild(listNode); |
| } |
| } |
| |
| /** |
| * Show a node and all nodes used by or using that node. |
| */ |
| selectSingleNode(node, show_uses, show_used_by) { |
| const componentName = node.name; |
| const servicesOffered = node.routes.offers; |
| const servicesUsed = node.routes.uses; |
| d3.select('g').selectAll('circle').each(function(node) { |
| if (node.name == componentName) { |
| d3.select(this).attr("visibility", "visible").style("fill", searchColorFill("node")); |
| return; |
| } |
| |
| // Since we are iterating through the nodes to see if the node we have selected is used by |
| // the current loop node, the naming of the variables is a little confusing. |
| // Essentially, show_used_by says that we only show the current loop node if it uses |
| // a service provided by the selected node. |
| if (show_used_by) { |
| const uses = servicesOffered.some(e => node.routes.uses.indexOf(e) >= 0); |
| if (uses) { |
| d3.select(this).attr("visibility", "visible").style("fill", searchColorFill("uses")); |
| return; |
| } |
| } |
| |
| if (show_uses) { |
| const used_by = servicesUsed.some(e => node.routes.offers.indexOf(e) >= 0); |
| if (used_by) { |
| d3.select(this).attr("visibility", "visible").style("fill", searchColorFill("used_by")); |
| return; |
| } |
| } |
| |
| }); |
| d3.select('g').selectAll('line').each(function(link) { |
| if (link.source.name == componentName || link.target.name == componentName) { |
| d3.select(this).attr("visibility", "visible"); |
| } |
| }); |
| } |
| |
| /** |
| * Resets the graph back to the state where all links and nodes are invisible. |
| */ |
| resetGraphInvisible() { |
| d3.select('g').selectAll('circle').each(function(node) { |
| d3.select(this).attr("visibility", "hidden"); |
| d3.select(this).style("stroke", "").style("stroke-width", "").style("fill", defaultColorFill); |
| }); |
| d3.select('g').selectAll('line').each(function(link) { |
| d3.select(this).attr("visibility", "hidden"); |
| }); |
| } |
| |
| /** |
| * Resets the graph back to the default state where all links and nodes are visible. |
| */ |
| resetGraphVisible() { |
| d3.select('g').selectAll('circle').each(function(node) { |
| d3.select(this).attr("visibility", "visible"); |
| d3.select(this).style("stroke", "").style("stroke-width", "").style("fill", defaultColorFill); |
| }); |
| d3.select('g').selectAll('line').each(function(link) { |
| d3.select(this).attr("visibility", "visible"); |
| }); |
| } |
| |
| searchComponents = event => { |
| // 13 is the enter key, only search whenever we either click on the search button or release the enter key. |
| if (event.type == "click" || (event.type == "keyup" && event.keyCode == 13)) { |
| this.updateSidebarWithSearchResults(this.search.value); |
| } |
| } |
| |
| updateSidebarWithSearchResults(query) { |
| if (this.graphData == null) { |
| return; |
| } |
| |
| if (query == "") { |
| this.resetGraphVisible(); |
| this.drawSidebar([]); |
| return; |
| } |
| |
| const matchingNodes = []; |
| // Handle commands |
| if (query.startsWith("uses: ")) { |
| const subquery = query.split(" ")[1]; |
| for (const node of this.graphData["nodes"]) { |
| for (const uses of node["routes"]["uses"]) { |
| if (uses.match(subquery)) { |
| matchingNodes.push(node); |
| break; |
| } |
| } |
| } |
| } else if (query.startsWith("offers: ")) { |
| const subquery = query.split(" ")[1]; |
| for (const node of this.graphData["nodes"]) { |
| for (const offers of node["routes"]["offers"]) { |
| if (offers.match(subquery)) { |
| matchingNodes.push(node); |
| break; |
| } |
| } |
| } |
| } else if (query.startsWith("id: ")) { |
| const subquery = query.split(" ")[1]; |
| for (const node of this.graphData["nodes"]) { |
| if (node["id"] == subquery) { |
| // Since ids are unique, we can stop after finding a single node. |
| matchingNodes.push(node); |
| break; |
| } |
| } |
| } else { |
| for (const node of this.graphData["nodes"]) { |
| if (node["name"].match(query)) { |
| matchingNodes.push(node); |
| } |
| } |
| } |
| |
| this.resetGraphInvisible(); |
| if (matchingNodes.length == 1) { |
| d3.select('g').selectAll('circle').each(node => { |
| if (node.name == matchingNodes[0].name) { |
| this.selectSingleNode(node, true, true); |
| return; |
| } |
| }); |
| } else if (matchingNodes.length > 1) { |
| d3.select('g').selectAll('circle').each(node => { |
| if (matchingNodes.some(e => e.name == node.name)) { |
| this.selectSingleNode(node, false, false); |
| return; |
| } |
| }); |
| } else { |
| this.resetGraphVisible(); |
| } |
| |
| this.drawSidebar(matchingNodes); |
| } |
| } |
| |
| window.onload = async function(e) { |
| const api = new ComponentMapperApi(location.origin + '/'); |
| const view = new ComponentMapperView(api); |
| view.init(); |
| } |
