Add scatter plot for duration vs dependents

finchie

Dec 15, 2023, 10:58 AM

4OATQEBXRS3ZVQK2APYX2G3OJRPZBJUL4U7NNH6BZTNJGXCGLWHQC

Dependencies

• [2] BCGZCHJB Add initial POC

Change contents

• edit in timings.html at line 9
  [2.238]

  [2.238]
  + body {

  + display: flex;

  + flex-direction: row;

  + }

  +
• edit in timings.html at line 45
  [2.872]

  [2.872]
  + }

  +

  + .graph-node {

  + background-color: hotpink;

  + position: absolute;

  + /* display: inline-block; */
• edit in timings.html at line 57
  [2.965]

  [2.965]
  +

  + #scatter {

  + flex-grow: 1;

  + position: relative;

  + margin-right: 50px;

  + }
• edit in timings.html at line 68
  [2.1035]

  [2.1035]
  + <div id="scatter"></div>
• replacement in layout.js at line 632
  [2.12917]→[2.12917:12931](∅→∅)
  − "utf8parse"];
  [2.12917]

  [2.12931]
  + "utf8parse",

  + "proc-macro2",

  + "unicode-ident",

  + "quote",

  + "syn",

  + "serde_derive",

  + "thiserror-impl"];
• replacement in layout.js at line 650
  [2.13180]→[2.13180:13235](∅→∅)
  − console.assert(this.node_index !== undefined);
  [2.13180]

  [2.13235]
  + console.assert(this.node_index !== undefined, `Cannot find correspoding entry for ${name}`);
• edit in layout.js at line 790
  [2.16879]→[2.16879:16905](∅→∅)
  −

  − console.log(l_1, l_2);
• replacement in layout.js at line 795
  [2.17008]→[2.17008:17049](∅→∅)
  − // const ctx = heatmap.getContext("2d");
  [2.17008]

  [2.17049]
  + const root = new Crate("cargo-depgraph");

  + split(root.dependencies, heatmap)

  +

  +

  + const scatter = document.getElementById("scatter")

  + const SCALE_FACTOR = 100;

  + const RADIUS = 5;

  +

  + let longest_duration = 0;

  + let most_unlocked = 0;

  +

  + for (const name of NODES) {

  + const crate = new Crate(name);

  + longest_duration = Math.max(longest_duration, crate.sum_duration());

  + most_unlocked = Math.max(most_unlocked, crate.total_unlocked)

  + }

  +

  + console.assert(longest_duration > 0);

  +

  + function createGraphNode(crate) {

  + const node = document.createElement("div");

  + node.classList.add("graph-node");
• replacement in layout.js at line 818
  [2.17050]→[2.17050:17256](∅→∅)
  − // for (const item of UNIT_DATA) {

  − // ctx.beginPath();

  − // ctx.arc(item.duration * 100, (item.unlocked_units,length + item.unlocked_rmeta_units.length) * 100, 5, 0, 2 * Math.PI);

  − // ctx.stroke();

  − // }
  [2.17050]

  [2.17256]
  + // X position

  + const duration = crate.sum_duration();

  + // Half margin on either side, so divide by 2

  + const marginX = `${(duration / longest_duration) * 100}%`;

  + node.style.left = marginX;
• replacement in layout.js at line 824
  [2.17257]→[2.17257:17299](∅→∅)
  − const root = new Crate("cargo-depgraph");
  [2.17257]

  [2.17299]
  + // Y position

  + const unlocked = crate.total_unlocked;

  + const marginY = `${(unlocked / most_unlocked) * 100}%`;

  + node.style.bottom = marginY;

  +

  + // Styling

  + node.title = crate.name;

  + node.style.width = `10px`

  + node.style.height = "10px";
• replacement in layout.js at line 834
  [2.17300]→[2.17300:17333](∅→∅)
  − split(root.dependencies, heatmap)
  [2.17300]
  + console.log(crate.name, duration, unlocked, marginX, marginY)

  + return node;

  + }

  +

  + for (const item of UNIT_DATA) {

  + const crate = new Crate(item.name);

  +

  + scatter.appendChild(createGraphNode(crate));

  + }