text: /*
  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);
      }
    }
  }
  