console/react/src/topology/svgUtils.js

/*
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
*/

import { Nodes } from "./nodes.js";
import { utils } from "../common/amqp/utilities.js";

// update the node's classes based on the node's data
export function updateState(circle) {
  circle
    .selectAll("circle")
    .classed("highlighted", function (d) {
      return d.highlighted;
    })
    .classed("selected", function (d) {
      return d.selected;
    })
    .classed("fixed", function (d) {
      return d.fixed ? d.fixed & 1 : false;
    })
    .classed("multiple", function (d) {
      return d.normals;
    })
    .classed("dropped", d => d.dropped);
}

export function appendCircle(g) {
  // add new circles and set their attr/class/behavior
  return (
    g
      .append("svg:circle")
      .attr("class", "node")
      // the following attrs and classes won't change after the node is created
      .attr("r", function (d) {
        return Nodes.radius(d.nodeType);
      })
      .attr("fill", function (d) {
        if (d.nodeType === "edge" && d.normals && d.normals.length > 1) {
          return "url(#diagonal-stripe-1) #fff;";
        }
        if (d.cdir === "both" && !utils.isConsole(d)) {
          return "url(#half-circle)";
        }
        return null;
      })
      .attr("data-testid", function (d) {
        return (d.nodeType !== "normal" ? "router" : "client") + "-" + d.index;
      })
      .classed("normal", function (d) {
        return d.nodeType === "normal" || utils.isConsole(d);
      })
      .classed("in", function (d) {
        return d.cdir === "in";
      })
      .classed("out", function (d) {
        return d.cdir === "out";
      })
      .classed("inout", function (d) {
        return d.cdir === "both";
      })
      .classed("inter-router", function (d) {
        return d.nodeType === "inter-router" || d.nodeType === "_topo";
      })
      .classed("on-demand", function (d) {
        return d.nodeType === "on-demand";
      })
      .classed("edge", function (d) {
        return d.nodeType === "edge" || d.nodeType === "_edge";
      })
      .classed("console", function (d) {
        return utils.isConsole(d);
      })
      .classed("artemis", function (d) {
        return utils.isArtemis(d);
      })
      .classed("qpid-cpp", function (d) {
        return utils.isQpid(d);
      })
      .classed("route-container", function (d) {
        return (
          !utils.isArtemis(d) && !utils.isQpid(d) && d.nodeType === "route-container"
        );
      })
      .classed("client", function (d) {
        return d.nodeType === "normal" && !d.properties.console_identifier;
      })
  );
}

export function appendContent(g, legend) {
  // show node IDs
  g.append("svg:text")
    .attr("x", d => Nodes.textOffset(d.nodeType, d.name.length))
    .attr("y", function (d) {
      let y = 7;
      if (utils.isArtemis(d)) y = 8;
      else if (utils.isQpid(d)) y = 9;
      else if (d.nodeType === "inter-router") y = 4;
      else if (d.nodeType === "route-container") y = 5;
      else if (d.nodeType === "edge" || d.nodeType === "_edge") y = 4;
      return y;
    })
    .attr("class", d =>
      d.nodeType === "_topo" || d.nodeType === "_edge" ? "label" : "id"
    )
    .classed("long", d => d.name.length > 4)
    .classed("console", function (d) {
      return utils.isConsole(d);
    })
    .classed("normal", function (d) {
      return d.nodeType === "normal";
    })
    .classed("on-demand", function (d) {
      return d.nodeType === "on-demand";
    })
    .classed("edge", function (d) {
      return d.nodeType === "edge";
    })
    .classed("edge", function (d) {
      return d.nodeType === "_edge";
    })
    .classed("artemis", function (d) {
      return utils.isArtemis(d);
    })
    .classed("qpid-cpp", function (d) {
      return utils.isQpid(d);
    })
    .text(function (d) {
      if (legend && (d.nodeType === "_edge" || d.nodeType === "_topo")) return null;
      if (utils.isConsole(d)) {
        return "\uf108"; // icon-desktop for a console
      } else if (utils.isArtemis(d)) {
        return "\ue900"; // custom font character
      } else if (utils.isQpid(d)) {
        return "\ue901"; // custom font character
      } else if (d.nodeType === "route-container") {
        return d.properties.product ? d.properties.product[0].toUpperCase() : "S";
      } else if (d.nodeType === "normal") {
        return "\uf109"; // icon-laptop for clients
      } else if (d.nodeType === "edge") {
        return "Edges";
      }
      return d.name.length > 15
        ? d.name.substr(0, 5) + "..." + d.name.substr(d.name.length - 5)
        : d.name;
    });
}

export function appendTitle(g) {
  g.append("svg:title").text(function (d) {
    return d.title();
  });
}

// Generate a marker for each combination of:
//  start|end, ''|selected highlighted, and each possible node radius
export function addDefs(svg) {
  let sten = ["start", "end"];
  let states = ["", "selected", "highlighted", "unknown"];
  let radii = Nodes.discrete();
  let defs = [];
  for (let isten = 0; isten < sten.length; isten++) {
    for (let istate = 0; istate < states.length; istate++) {
      for (let iradii = 0; iradii < radii.length; iradii++) {
        defs.push({
          sten: sten[isten],
          state: states[istate],
          r: radii[iradii],
        });
      }
    }
  }
  svg
    .append("svg:defs")
    .attr("class", "marker-defs")
    .selectAll("marker")
    .data(defs)
    .enter()
    .append("svg:marker")
    .attr("id", function (d) {
      return [d.sten, d.state, d.r].join("-");
    })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", function (d) {
      return Nodes.refX(d.sten, d.r);
    })
    .attr("markerWidth", 14)
    .attr("markerHeight", 14)
    .attr("markerUnits", "userSpaceOnUse")
    .attr("orient", "auto")
    .append("svg:path")
    .attr("d", function (d) {
      return d.sten === "end" ? "M 0 -5 L 10 0 L 0 5 z" : "M 10 -5 L 0 0 L 10 5 z";
    });

  // based on http://iros.github.io/patternfills/sample_svg.html
  svg
    .append("svg:defs")
    .append("pattern")
    .attr("id", "diagonal-stripe-1")
    .attr("patternUnits", "userSpaceOnUse")
    .attr("width", 10)
    .attr("height", 10)
    .append("image")
    .attr(
      "xlink:href",
      "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg=="
    )
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", 10)
    .attr("height", 10);

  /*
    addStyles(
    sten,
    {
      selected: "#33F",
      highlighted: "#6F6",
      unknown: "#888",
    },
    radii
  );
  */
}
export function addGradient(svg) {
  // gradient for sender/receiver client
  let grad = svg
    .append("svg:defs")
    .append("linearGradient")
    .attr("id", "half-circle")
    .attr("x1", "0%")
    .attr("x2", "0%")
    .attr("y1", "100%")
    .attr("y2", "0%");
  grad.append("stop").attr("offset", "50%").style("stop-color", "#C0F0C0");
  grad.append("stop").attr("offset", "50%").style("stop-color", "#F0F000");
}

/*
function addStyles(stend, stateColor, radii) {
  // the <style>
  let element = document.querySelector("style");
  // Reference to the stylesheet
  let sheet = element.sheet;

  let states = Object.keys(stateColor);
  // create styles for each combo of 'stend-state-radii'
  for (let istend = 0; istend < stend.length; istend++) {
    for (let istate = 0; istate < states.length; istate++) {
      let selectors = [];
      for (let iradii = 0; iradii < radii.length; iradii++) {
        selectors.push(`#${stend[istend]}-${states[istate]}-${radii[iradii]}`);
      }
      let color = stateColor[states[istate]];
      let sels = `${selectors.join(",")} {fill: ${color}; stroke: ${color};}`;
      sheet.insertRule(sels, 0);
    }
  }
}
*/