// load d3
d3 = require("d3@7")

// d3 force graph function
// modified from https://observablehq.com/@d3/force-directed-graph
// Original copyright 2021-2024 Observable, Inc.
// Released under the ISC license.

function ForceGraph({
  nodes, // an iterable of node objects (typically [{id}, …])
  links // an iterable of link objects (typically [{source, target}, …])
}, {
  nodeId = d => d.id, // given d in nodes, returns a unique identifier (string)
  nodeGroup, // given d in nodes, returns an (ordinal) value for color
  nodeGroups, // an array of ordinal values representing the node groups
  nodeTitle, // given d in nodes, a title string
  nodeLink, // given d in nodes, returns a URL string
  nodeFill = "currentColor", // node stroke fill (if not using a group color encoding)
  nodeStroke = "#fff", // node stroke color
  nodeStrokeWidth = 1.5, // node stroke width, in pixels
  nodeStrokeOpacity = 1, // node stroke opacity
  nodeRadius = 5, // node radius, in pixels
  nodeStrength,
  linkSource = ({source}) => source, // given d in links, returns a node identifier string
  linkTarget = ({target}) => target, // given d in links, returns a node identifier string
  linkStroke = "#999", // link stroke color
  linkStrokeOpacity = 0.6, // link stroke opacity
  linkStrokeWidth = 1.5, // given d in links, returns a stroke width in pixels
  linkStrokeLinecap = "round", // link stroke linecap
  linkStrength,
  repulsion,
  colors = d3.schemeTableau10, // an array of color strings, for the node groups
  width = 640, // outer width, in pixels
  height = 400, // outer height, in pixels
  invalidation // when this promise resolves, stop the simulation
} = {}) {
  // Compute values.
  const N = d3.map(nodes, nodeId).map(intern);
  const R = typeof nodeRadius !== "function" ? null : d3.map(nodes, nodeRadius);
  const LS = d3.map(links, linkSource).map(intern);
  const LT = d3.map(links, linkTarget).map(intern);
  if (nodeTitle === undefined) nodeTitle = (_, i) => N[i];
  const T = nodeTitle == null ? null : d3.map(nodes, nodeTitle);
  const G = nodeGroup == null ? null : d3.map(nodes, nodeGroup).map(intern);
  const W = typeof linkStrokeWidth !== "function" ? null : d3.map(links, linkStrokeWidth);
  const L = typeof linkStroke !== "function" ? null : d3.map(links, linkStroke);
  const LU = nodeLink == null ? null : d3.map(nodes, nodeLink);

  // Replace the input nodes and links with mutable objects for the simulation.
  nodes = d3.map(nodes, (_, i) => ({id: N[i]}));
  links = d3.map(links, (_, i) => ({source: LS[i], target: LT[i]}));

  // Compute default domains.
  if (G && nodeGroups === undefined) nodeGroups = d3.sort(G);

  // Construct the scales.
  const color = nodeGroup == null ? null : d3.scaleOrdinal(nodeGroups, colors);

  // Construct the forces.
  const forceNode = d3.forceManyBody().strength(repulsion);
  const forceLink = d3.forceLink(links).id(({index: i}) => N[i]);
  if (nodeStrength !== undefined) forceNode.strength(nodeStrength);
  if (linkStrength !== undefined) forceLink.strength(linkStrength);

  const simulation = d3.forceSimulation(nodes)
      .force("link", forceLink)
      .force("charge", forceNode)
      //.force("center",  d3.forceCenter())
      .force("center", d3.forceCenter(width / 2, height / 2))
      //.force("collision", d3.forceCollide().radius(d => d.collisionRadius || nodeRadius + 2))
      .force("collision", d3.forceCollide().radius(d => d.collisionRadius || nodeRadius + 2).iterations(3))
      .alphaDecay(0.02) // Slower cooling for better settling
      .velocityDecay(0.3) // Less velocity damping for more movement
      .on("tick", ticked);

      
  const svg = d3.create("svg")
      .attr("width", width)
      .attr("height", height)
      //.attr("viewBox", [-width / 2, -height / 2, width, height])
      .attr("viewBox", [0, 0, width, height])
      //.attr("preserveAspectRatio", "xMidYMin")
      .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

  const link = svg.append("g")
      .attr("stroke", typeof linkStroke !== "function" ? linkStroke : null)
      .attr("stroke-opacity", linkStrokeOpacity)
      .attr("stroke-width", typeof linkStrokeWidth !== "function" ? linkStrokeWidth : null)
      .attr("stroke-linecap", linkStrokeLinecap)
    .selectAll("line")
    .data(links)
    .join("line");

  const node = svg.append("g")
      .attr("fill", nodeFill)
      .attr("stroke", nodeStroke)
      .attr("stroke-opacity", nodeStrokeOpacity)
      .attr("stroke-width", nodeStrokeWidth)
    .selectAll("circle")
    .data(nodes)
    .join("circle")
      .attr("r", nodeRadius)
      .style("cursor", LU ? "pointer" : null)
      .call(drag(simulation))
      .on("click", function(event, d) {
        if (LU && LU[d.index]) {
          window.open(LU[d.index], '_blank');
        }
      });
      /*
      .on("mouseover", function(event, d) {
        // Show corresponding label
        label.filter((_, i) => i === d.index)
          .transition()
          .duration(200)
          .style("opacity", 1);
      })
      .on("mouseout", function(event, d) {
        // Hide corresponding label
        label.filter((_, i) => i === d.index)
          .transition()
          .duration(200)
          .style("opacity", 0);
      });
      */

  const label = svg.append("g")
      .attr("font-size", 12)
      .attr("fill", "#333")
      .attr("text-anchor", "start")
    .selectAll("text")
    .data(nodes)
    .join("text")
      .text(({index: i}) => T ? T[i] : N[i])
      .attr("dx", nodeRadius + 3) // offset from node center
      .attr("dy", "0.35em") // vertical centering
      .style("cursor", LU ? "pointer" : null)
      //.style("opacity", 0) // Hidden by default
      //.style("pointer-events", "none") // Don't interfere with mouse events
      .call(drag(simulation))
      .on("click", function(event, d) {
        if (LU && LU[d.index]) {
          window.open(LU[d.index], '_blank');
        }
      });
      
  label.each(function(d) {
    const bbox = this.getBBox();
    const labelWidth = bbox.width;
    const labelHeight = bbox.height;
    // Extend collision radius to account for label
    const baseRadius = R ? R[d.index] : nodeRadius;
    //d.collisionRadius = baseRadius + 2;
    //d.collisionRadius = Math.max(baseRadius + 2, (labelWidth + nodeRadius + 16) / 2);
    d.collisionRadius = Math.max(baseRadius + 8, (labelWidth + nodeRadius * 2 + 12) / 2);
  });
      
  if (W) link.attr("stroke-width", ({index: i}) => W[i]);
  if (L) link.attr("stroke", ({index: i}) => L[i]);
  if (G) node.attr("fill", ({index: i}) => color(G[i]));
  if (G) label.attr("fill", ({index: i}) => color(G[i]));
  if (R) node.attr("r", ({index: i}) => R[i]);
  if (T) node.append("title").text(({index: i}) => T[i]);
  if (invalidation != null) invalidation.then(() => simulation.stop());

  function intern(value) {
    return value !== null && typeof value === "object" ? value.valueOf() : value;
  }

  function ticked() {
    link
      .attr("x1", d => d.source.x)
      .attr("y1", d => d.source.y)
      .attr("x2", d => d.target.x)
      .attr("y2", d => d.target.y);

     node
      .attr("cx", d => {
        const radius = d.collisionRadius || (R ? R[d.index] : nodeRadius);
        //return d.x = Math.max(radius - width/2, Math.min(width/2 - radius, d.x));
        return d.x = Math.max(radius, Math.min(width - radius, d.x));
      })
      .attr("cy", d => {
        const radius = d.collisionRadius || (R ? R[d.index] : nodeRadius);
        //return d.y = Math.max(radius - height/2, Math.min(height/2 - radius, d.y));
        return d.y = Math.max(radius, Math.min(height - radius, d.y));
      });
      
    label
      .attr("x", d => d.x)
      .attr("y", d => d.y);
  }

  function drag(simulation) {    
    function dragstarted(event) {
      if (!event.active) simulation.alphaTarget(0.3).restart();
      event.subject.fx = event.subject.x;
      event.subject.fy = event.subject.y;
    }
    
    function dragged(event) {
      event.subject.fx = event.x;
      event.subject.fy = event.y;
    }
    
    function dragended(event) {
      if (!event.active) simulation.alphaTarget(0);
      event.subject.fx = null;
      event.subject.fy = null;
    }
    
    return d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended);
  }

  return Object.assign(svg.node(), {scales: {color}});
}

nt = transpose(nodes)
lt = transpose(links)
tt = transpose(themes)
ct = transpose(clusters)

Filter articles by…

viewof theme = Inputs.select(d3.group(tt, d => d.theme), {
  label: "Theme",
  value: "All"
})

viewof group = Inputs.select(d3.group(ct, d => d.group), {
  label: "Network cluster",
  value: "All"
})

Link articles by…

metrics = new Map([["GloVe distance", "similarity"], ["Crosslink", "crosslink"]])
viewof metric = Inputs.select(metrics, {
  label: "Similarity metric",
  value: "similarity"
})

Include links that are either…

viewof k = Inputs.range([0, 8], {
  label: "Each article's k closest neighbors or",
  step: 1,
  value: 2,
  disabled: metric !== "similarity"
})

viewof s = Inputs.range([0.7, 1], {
  label: "Edge weight at least",
  step: 0.01,
  value: 0.92,
  disabled: metric !== "similarity"
})

html`<button class="btn btn-quarto btn-reset" onclick="location.reload()">Reset</button>`

theme_ids = theme.map(d => d.id)
group_ids = group.map(d => d.id)

// filter links based on theme and group
ltg = lt.filter(d => theme_ids.includes(d.source))
        .filter(d => theme_ids.includes(d.target))
        .filter(d => group_ids.includes(d.source))
        .filter(d => group_ids.includes(d.target))

function filterEdges(lt, metric, k, s) {
  if (metric === 'crosslink') {
    // filter links based on presence of crosslink
    return ltg.filter(d => d.crosslink === 1)
               .map(d => ({ ...d, w: 1 }))
    
  } else if (metric === 'similarity') {
    // filter links based on edge weight inputs (k and s)
    const ltw = d3.groups(ltg, d => d.source) // group by source node
      .flatMap(([source, values]) => // iterate over node's links
        values
          // sort link valued in descending order
          .sort((a, b) => b.value - a.value)
          // keep k highest values and any values of at least s
          .filter((d, i) => i < k || d.similarity >= s)
    )
    
    // renormalize edge weights
    const vmin = Math.min(... ltw.map(d => d.similarity))
    const ltw_min = ltw.map(d => ({ ...d, similarity_norm: d.similarity - vmin }))
    const vmax = Math.max(... ltw_min.map(d => d.similarity_norm))
    const ltw_norm = ltw_min.map(d => ({ ...d, similarity_norm: d.similarity_norm / vmax }))
    
    return ltw_norm.map(d => ({ ...d, w: d.similarity >= s ? d.similarity_norm * 2 : 0.5 }))
  }
}
ltf = filterEdges(lt, metric, k, s)

// filter nodes based on theme and group
//ntf = nt.filter(d => theme_ids.includes(d.id))
//        .filter(d => group_ids.includes(d.id))

// filter nodes based on filtered links
ntf = nt.filter(d => ltf.map(d => d.source).includes(d.id) || ltf.map(d => d.target).includes(d.id))

groups = [...new Set(ct.map(d => d.group))]
nodeGroups = [...groups.keys()].splice(1).map(d => d.toString())

ForceGraph({nodes: ntf, links: ltf}, {
  nodeTitle: d => d.id,
  nodeLink: d => `https://oecs.mit.edu/pub/${d.slug}`,
  nodeGroup: d => d.group,
  nodeGroups: nodeGroups,
  colors: d3.schemeCategory10.slice(0, nodeGroups.length),
  linkStrokeWidth: l => l.w,
  repulsion: -100,
  width: 1250,
  height: 750
})