fix: graph display

lib/labeledgraph.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from "react";
 import * as d3 from 'd3';
+import { toLocale, truncateValueForDisplay } from "../lib/utils.js"
 
 let getlength = (number) => number.toString().length;
+
 export function removeOldSvg(){
     d3.select("#graph").select("svg").remove();
 }
@@ -106,7 +108,7 @@ function drawGraphInner({nodes, links}){
                 // X position of start node on the X axis
             let end = x(d.target)      
                 // X position of end node
-            return start + (end-start)/2 -4*getlength(d.distance)
+            return start + (end-start)/2 //-4*getlength(d.distance)
         })
         .attr("y", function(d){ 
             let start = x(d.source)    
@@ -115,8 +117,11 @@ function drawGraphInner({nodes, links}){
                 // X position of end node
             return height-32-(Math.abs(start-end)/2)//height-30
         })
-        .text(function(d){ return(`${d.distance}`)})
-        .style("text-anchor", "top")
+        .text(function(d){ 
+            return(truncateValueForDisplay(Number(d.distance)))
+            //return(Number(d.distance).toPrecision(2).toString())
+        })
+        .style("text-anchor", "middle")
 }
 
 export function DrawGraph({isListOrdered, orderedList, listOfElements, links}) {

lib/utils.js

@@ -1,3 +1,8 @@
 import crypto from "crypto"
 
 export const hashString = (string) => crypto.createHash('md5').update(string).digest('hex');
+
+export const transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
+export const toLocale = x => Number(x).toLocaleString()
+export const truncateValueForDisplay = value => value > 10 ? Number(Math.round(value).toPrecision(2)) : Math.round(value * 10) / 10
+export const transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))

pages/index.js

@@ -14,6 +14,7 @@ import { DisplayAsMarkdown } from '../lib/displayAsMarkdown'
 import { CreateTableWithDistances } from '../lib/findPaths'
 import { TextAreaForJson } from "../lib/textAreaForJson"
 import { pushToMongo } from "../lib/pushToMongo.js"
+import { toLocale, transformSliderValueToPracticalValue } from "../lib/utils.js"
 
 /* Helpers */
 let increasingList = (n) => Array.from(Array(n).keys())
@@ -36,11 +37,6 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
   return isOrdered
 }
 
-let transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
-let toLocale = x => Number(x).toLocaleString()
-let truncateValueForDisplay = value => value > 10 ? Number(Math.round(value)).toPrecision(2) : Math.round(value * 10) / 10
-let transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
-
 let displayFunctionSlider = (value) => {
   let result
   if (value >= 0) {

pages/listOfResearchOutputs.json

@@ -13,8 +13,7 @@
     },
     {
         "name": "Categorizing Variants of Goodhart's Law",
-        "url": "https://arxiv.org/abs/1803.04585",
-        "isReferenceValue": true
+        "url": "https://arxiv.org/abs/1803.04585"
     },
     {
         "name": "The Vulnerable World Hypothesis",