tweaks: Id now alphabetical strings rather than numbers

lib/findPaths.js

@@ -1,6 +1,6 @@
 /* Imports*/
 import React from "react";
-import { toLocale, truncateValueForDisplay } from "../lib/utils.js"
+import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js"
 
 /* Utilities */
 let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
@@ -8,9 +8,9 @@ let formatLargeOrSmall = num => {
     if(num > 1){
         return toLocale(truncateValueForDisplay(num))
     }else if(num > 0){
-        return num.toFixed(-Math.floor(Math.log(num)/Math.log(10)));
+        return num.toFixed(-Math.floor(Math.log(num)/Math.log(10))+1);
     }else if(num > -1){
-        return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10)));
+        return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10))+1);
     }else{
         return toLocale(num)//return "~0"
 
@@ -99,7 +99,7 @@ export function CreateTableWithDistances({isListOrdered, orderedList, listOfElem
     } else {
         let nodes = orderedList.map(i => listOfElements[i])
         let distances = findDistancesForAllElements({nodes, links})
-        let rows = nodes.map((element, i) => ({id: element.id, name: element.name, distances: distances[i]}))
+        let rows = nodes.map((element, i) => ({id: numToAlphabeticalString(element.id), name: element.name, distances: distances[i]}))
         console.log("rows@CreateTableWithDistances")
         console.log(rows)
         return(

lib/labeledgraph.js

@@ -1,34 +1,34 @@
 import React, { useState, useEffect } from "react";
 import * as d3 from 'd3';
-import { toLocale, truncateValueForDisplay } from "../lib/utils.js"
+import { toLocale, truncateValueForDisplay, numToAlphabeticalString } from "../lib/utils.js"
 
 let getlength = (number) => number.toString().length;
 
-export function removeOldSvg(){
+export function removeOldSvg() {
     d3.select("#graph").select("svg").remove();
 }
 
-function drawGraphInner({nodes, links}){
+function drawGraphInner({ nodes, links }) {
-    
+
     // List of node ids for convenience
     var nodeids = nodes.map(node => node.id)
     var positionById = {}
-    nodeids.forEach((nodeid, i) => positionById[nodeid]=i)
+    nodeids.forEach((nodeid, i) => positionById[nodeid] = i)
     console.log("NodeIds/positionById")
     console.log(nodeids)
     console.log(positionById)
-    
+
     // Calculate the dimensions
-    let margin = {top: 0, right: 30, bottom: 20, left: 30};
+    let margin = { top: 0, right: 30, bottom: 20, left: 30 };
     let width = 900 - margin.left - margin.right;
     var x = d3.scalePoint()
         .range([0, width])
         .domain(nodeids)
 
     let heights = links.map(link => {
-        let start = x(positionById[link.source])   
+        let start = x(positionById[link.source])
         let end = x(positionById[link.target])
-        return Math.abs(start-end)/2+70 // Magic constant.
+        return Math.abs(start - end) / 2 + 70 // Magic constant.
     })
     console.log(heights)
     let maxheight = Math.max(...heights)
@@ -44,32 +44,32 @@ function drawGraphInner({nodes, links}){
         .attr("height", height + margin.top + margin.bottom)
         .append("g")
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-    
+
     // A linear scale to position the nodes on the X axis
 
-    
+
     // Add the circle for the nodes
     svg
         .selectAll("mynodes")
         .data(nodes)
         .enter()
         .append("circle")
-        .attr("cx", function(d){ return(x(d.id))})
+        .attr("cx", function (d) { return (x(d.id)) })
-        .attr("cy", height-30)
+        .attr("cy", height - 30)
         .attr("r", 8)
         .style("fill", "#69b3a2")
-    
+
     // And give them a label
     svg
         .selectAll("mylabels")
         .data(nodes)
         .enter()
         .append("text")
-        .attr("x", function(d){ return(x(d.id))})
+        .attr("x", function (d) { return (x(d.id)) })
-        .attr("y", height-10)
+        .attr("y", height - 10)
-        .text(function(d){ return(d.id)})
+        .text(function (d) { return numToAlphabeticalString(d.id) })
         .style("text-anchor", "middle")
-        
+
     // Add the links
     svg
         .selectAll('mylinks')
@@ -77,58 +77,58 @@ function drawGraphInner({nodes, links}){
         .enter()
         .append('path')
         .attr('d', function (d) {
-            let start = x(d.source)    
+            let start = x(d.source)
-                // X position of start node on the X axis
+            // X position of start node on the X axis
-            let end = x(d.target)      
+            let end = x(d.target)
-                // X position of end node
+            // X position of end node
-            return ['M', 
+            return ['M',
-                start, 
+                start,
-                height-30,    
+                height - 30,
-                    // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
+                // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
-                'A',                            
+                'A',
-                    // This means we're gonna build an elliptical arc
+                // This means we're gonna build an elliptical arc
-                (start - end)/2, ',',    
+                (start - end) / 2, ',',
-                    // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
+                // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
-                (start - end)/2, 0, 0, ',',
+                (start - end) / 2, 0, 0, ',',
-                start < end ? 1 : 0, end, ',', height-30] 
+                start < end ? 1 : 0, end, ',', height - 30]
-                    // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
+                // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
-            .join(' ');
+                .join(' ');
         })
         .style("fill", "none")
         .attr("stroke", "black")
-    
+
     // labels for links
     svg
         .selectAll('mylinks')
         .data(links)
         .enter()
         .append("text")
-        .attr("x", function(d){ 
+        .attr("x", function (d) {
-            let start = x(d.source)    
+            let start = x(d.source)
-                // X position of start node on the X axis
+            // X position of start node on the X axis
-            let end = x(d.target)      
+            let end = x(d.target)
-                // X position of end node
+            // 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){ 
+        .attr("y", function (d) {
-            let start = x(d.source)    
+            let start = x(d.source)
-                // X position of start node on the X axis
+            // X position of start node on the X axis
-            let end = x(d.target)      
+            let end = x(d.target)
-                // X position of end node
+            // X position of end node
-            return height-32-(Math.abs(start-end)/2)//height-30
+            return height - 32 - (Math.abs(start - end) / 2)//height-30
         })
-        .text(function(d){ 
+        .text(function (d) {
             return Number(d.distance)
-            return(truncateValueForDisplay(Number(d.distance)))
+            return (truncateValueForDisplay(Number(d.distance)))
             //return(Number(d.distance).toPrecision(2).toString())
         })
         .style("text-anchor", "middle")
 }
 
-export function DrawGraph({isListOrdered, orderedList, listOfElements, links}) {
+export function DrawGraph({ isListOrdered, orderedList, listOfElements, links }) {
-    if(isListOrdered){
+    if (isListOrdered) {
         let nodes = orderedList.map(i => listOfElements[i])
-        drawGraphInner({ nodes, links});
+        drawGraphInner({ nodes, links });
     }
     return (
         <div>

lib/utils.js

@@ -20,12 +20,12 @@ export const _transformSliderValueToPracticalValue = value => truncateValueForDi
 
 export function numToAlphabeticalString(num){
     // https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487
+    num=num+1
     var s = '', t;
-
     while (num > 0) {
         t = (num - 1) % 26;
         s = String.fromCharCode(65 + t) + s;
         num = (num - t)/26 | 0;
     }
-    return s || undefined;
+    return `#${s}` || undefined;
 }

pages/index.js

@@ -221,9 +221,9 @@ export default function Home({ listOfElementsDefault }) {
   }
 
   let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
-    if (sliderValue < 1) {
+    if (sliderValue < 1 && sliderValue > 0) {
-      // sliderValue = -sliderValue;
+      sliderValue = 1/sliderValue;
-      // [element1, element2] = [element2, element1]
+      [element1, element2] = [element2, element1]
     }
     console.log(`posList@nextStepSlider:`)
     console.log(posList)