quantified.uncertainty/hierarchical-estimates-visualizer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Refactored and added comments

Browse Source
This commit is contained in:
NunoSempere 2021-12-08 12:35:18 +01:00
parent 3d6a544a72
commit 849a09207e
4 changed files with 174 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/comparisonView.js
View File

@ -1,7 +1,7 @@
/* Imports */
import Head from 'next/head'
import React, { useState } from "react";
import { DrawGraph, removeOldSvg } from './labeledgraph';
import { DrawGraph, removeOldSvg } from './labeledGraph';
import { SubmitSliderButton } from "./slider";
import { DisplayElement } from './displayElement'
import { DisplayAsMarkdown } from './displayAsMarkdown'

319
lib/findPaths.js
View File

@ -1,49 +1,55 @@
/* Imports*/
import React, { useState, useEffect } from 'react';
import { toLocale, truncateValueForDisplay, numToAlphabeticalString, formatLargeOrSmall } from "../lib/utils.js"
import React from 'react';
import { numToAlphabeticalString, formatLargeOrSmall, avg } from "../lib/utils.js"
/* Utilities */
let avg = arr => arr.reduce((a, b) => (a + b), 0) / arr.length
/* Functions */
/* Main function */
const pathPlusLink = (pathSoFar, link) => {
return [...pathSoFar, link]
// previously: pathSoFar.concat(link).flat()
// Note that concat is not destructive
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
}
async function findPathsInner({
sourceElementId, sourceElementPosition,
targetElementId, targetElementPosition,
links, nodes,
maxLengthOfPath, pathSoFar
async function findPathsWithoutPrunning({
sourceElementId, targetElementId,
maxLengthOfPath, pathSoFar,
links, nodes
}) {
// This is an un-used function which might make findPaths more understandable
// It uses the same recursive functionality
// but has no path prunning
let paths = []
let minPos = Math.min(sourceElementPosition, targetElementPosition)
let maxPos = Math.max(sourceElementPosition, targetElementPosition)
let linksInner = links.filter(link =>
(minPos <= link.sourceElementPosition && link.sourceElementPosition <= maxPos) &&
(minPos <= link.targetElementPosition && link.targetElementPosition <= maxPos)
)
let linksNow = linksInner.filter(link => (link.source == sourceElementId || link.target == sourceElementId))
/* Path traversing */
if (maxLengthOfPath > 0) {
for (let link of linksNow) {
for (let link of links) { // vs let link of linksNow in findPaths
if (
((link.source == sourceElementId) && (link.target == targetElementId)) ||
((link.source == targetElementId) && (link.target == sourceElementId))
) {
paths.push(pathSoFar.concat(link).flat())
) { // direct Path
let newPath = pathPlusLink(pathSoFar, link)
paths.push(newPath)
} else if ((link.source == sourceElementId)) {
let newPaths = await findPathsInner({
sourceElementId: link.target, sourceElementPosition: link.sourceElementPosition,
targetElementId, targetElementPosition,
pathSoFar: pathSoFar.concat(link).flat(),
links: linksInner, nodes, maxLengthOfPath: (maxLengthOfPath - 1)
let newPaths = await findPaths({
pathSoFar: pathPlusLink(pathSoFar, link),
maxLengthOfPath: (maxLengthOfPath - 1),
sourceElementId: link.target,
targetElementId,
links: links, // vs let link of linksInner in findPaths
nodes
})
if (newPaths.length != 0) {
paths.push(...newPaths)
}
} else if ((link.target == sourceElementId)) {
let newPaths = await findPathsInner({
sourceElementId: link.source, sourceElementPosition: link.sourceElementPosition,
targetElementId, targetElementPosition,
pathSoFar: pathSoFar.concat(link).flat(),
links: linksInner, nodes, maxLengthOfPath: (maxLengthOfPath - 1)
let newPaths = await findPaths({
pathSoFar: pathPlusLink(pathSoFar, link),
maxLengthOfPath: (maxLengthOfPath - 1),
sourceElementId: link.source,
targetElementId,
links: links, // vs let link of linksInner in findPaths
nodes
})
if (newPaths.length != 0) {
paths.push(...newPaths)
@ -54,40 +60,93 @@ async function findPathsInner({
return paths
}
/*
function findPaths({
async function findPaths({
sourceElementId, sourceElementPosition,
targetElementId, targetElementPosition,
nodes, links, direction
maxLengthOfPath, pathSoFar,
links, nodes
}) {
let positionSourceElement = nodes.map((element, i) => (element.id)).indexOf(sourceElementId)
let positionTargetElement = nodes.map((element, i) => (element.id)).indexOf(targetElementId)
let maxLengthOfPath = Math.abs(positionSourceElement - positionTargetElement)
return findPathsInner({
sourceElementId, sourceElementPosition,
// This is the key path finding function
// It finds the path from one element to another, recursively
// It used to be very computationally expensive until I added
// the path prunning step: Instead of traversing all links,
// traverse only those which are between the origin and target links
// this requires us to have a notion of "between"
let paths = []
/* Path prunning*/
let minPos = Math.min(sourceElementPosition, targetElementPosition)
let maxPos = Math.max(sourceElementPosition, targetElementPosition)
let linksInner = links.filter(link =>
(minPos <= link.sourceElementPosition && link.sourceElementPosition <= maxPos) &&
(minPos <= link.targetElementPosition && link.targetElementPosition <= maxPos)
)
let linksNow = linksInner.filter(link => (link.source == sourceElementId || link.target == sourceElementId))
/* Path traversing */
if (maxLengthOfPath > 0) {
for (let link of linksNow) {
if (
((link.source == sourceElementId) && (link.target == targetElementId)) ||
((link.source == targetElementId) && (link.target == sourceElementId))
) { // direct Path
let newPath = pathPlusLink(pathSoFar, link)
paths.push(newPath)
} else if ((link.source == sourceElementId)) {
let newPaths = await findPaths({
pathSoFar: pathPlusLink(pathSoFar, link),
maxLengthOfPath: (maxLengthOfPath - 1),
sourceElementPosition: link.sourceElementPosition,
sourceElementId: link.target,
targetElementId, targetElementPosition,
links, nodes, direction,
maxLengthOfPath, pathSoFar: []
links: linksInner,
nodes
})
if (newPaths.length != 0) {
paths.push(...newPaths)
}
} else if ((link.target == sourceElementId)) {
let newPaths = await findPaths({
pathSoFar: pathPlusLink(pathSoFar, link),
maxLengthOfPath: (maxLengthOfPath - 1),
sourceElementPosition: link.sourceElementPosition,
sourceElementId: link.source,
targetElementPosition,
targetElementId,
links: linksInner,
nodes
})
if (newPaths.length != 0) {
paths.push(...newPaths)
}
}
}
}
return paths
}
*/
async function findDistance({
sourceElementId, sourceElementPosition,
targetElementId, targetElementPosition,
nodes, links, direction
nodes, links
}) {
// This function gets all possible paths using findPaths
// then orders them correctly in the for loop
// (by flipping the distance to 1/distance when necessary)
// and then gets the array of weights for the different paths.
console.log(`findDistance@findPaths.js from ${sourceElementPosition} to ${targetElementPosition}`)
let maxLengthOfPath = Math.abs(sourceElementPosition - targetElementPosition)
let paths = await findPathsInner({
let paths = await findPaths({
sourceElementId, sourceElementPosition,
targetElementId, targetElementPosition,
links, nodes, direction,
links, nodes,
maxLengthOfPath, pathSoFar: []
});
console.log(`findDistance from ${sourceElementPosition} to ${targetElementPosition}`)
console.log(targetElementId)
console.log(direction)
console.log(paths)
let weights = []
for (let path of paths) {
let currentSource = sourceElementId
@ -106,25 +165,26 @@ async function findDistance({
}
weights.push(weight)
}
//let sum = JSON.stringify(weights)//weights.length > 0 ? weights.reduce((a,b) => (a+b)) / weights.length : "Not found"
//return sum
return weights
//return weights.map(weight => Math.round(weight*100)/100)
}
async function findDistancesForAllElements({ nodes, links }) {
// Simple wrapper function around findDistance
// Needs to find the reference point first
console.log("findDistancesForAllElements@findPaths.js")
/* Get or build reference element */
let referenceElements = nodes.filter(x => x.isReferenceValue)
let midpoint = Math.round(nodes.length / 2)
let referenceElement = referenceElements.length > 0 ? referenceElements[0] : nodes[midpoint]
// console.log(nodes)
console.log(`referenceElement.position: ${referenceElement.position}`)
/* Get distances. */
let distances = nodes.map(node => {
if (node.isReferenceValue || (node.id == referenceElement.id)) {
return [1]
} else {
console.log("node")
console.log(node)
let isUpwardsDirection = referenceElement.position < node.position
let distance = findDistance({
sourceElementId: referenceElement.id,
sourceElementPosition: referenceElement.position,
@ -132,7 +192,6 @@ async function findDistancesForAllElements({ nodes, links }) {
targetElementPosition: node.position,
nodes: nodes,
links: links,
direction: isUpwardsDirection ? "upwards" : "downwards"
})
return distance
}
@ -141,23 +200,11 @@ async function findDistancesForAllElements({ nodes, links }) {
return distances
}
function abridgeArrayAndDisplay(array) {
let newArray
let formatForDisplay
if (array.length > 10) {
newArray = array.slice(0, 9)
formatForDisplay = newArray.map(d => formatLargeOrSmall(d))
formatForDisplay[9] = "..."
} else {
newArray = array
formatForDisplay = newArray.map(d => formatLargeOrSmall(d))
}
let result = JSON.stringify(formatForDisplay, null, 2).replaceAll(`"`, "")
return result
}
export async function buildRows({ isListOrdered, orderedList, listOfElements, links, rows, setTableRows }) {
// Not used yet.
console.log("buildRows@findPaths.js")
// This function is used in pages/comparisonView.js to create the rows that will be displayed.
// it is in there because it needs to be deployed after isListOrdered becomes true,
// and using an useEffect inside CreateTable was too messy.
if (isListOrdered && !(orderedList.length < listOfElements.length) && rows.length == 0) {
let nodes = []
let positionDictionary = ({})
@ -165,8 +212,6 @@ export async function buildRows({ isListOrdered, orderedList, listOfElements, li
nodes.push({ ...listOfElements[id], position: pos })
positionDictionary[id] = pos
})
// let nodes = orderedList.map((id, pos) => ({ ...listOfElements[id], position: pos }))
/* Pre-process links to talk in terms of distances */
links = links.map(link => ({
...link,
sourceElementPosition: positionDictionary[link.source],
@ -180,51 +225,27 @@ export async function buildRows({ isListOrdered, orderedList, listOfElements, li
name: element.name,
distances: distances[i]
}))
console.log("rows@CreateTableWithDistances")
console.log(rows)
setTableRows(rows)
} else {
// rows = []
// Do nothing
}
// return rows
}
export function CreateTableWithDistancesWithUseEffect({ isListOrdered, orderedList, listOfElements, links, tableRows, setTableRows }) {
useEffect(async () => {
await buildRows({ isListOrdered, orderedList, listOfElements, links, rows: tableRows, setTableRows })
/*
// https://stackoverflow.com/questions/57847626/using-async-await-inside-a-react-functional-component
// https://stackoverflow.com/questions/54936559/using-async-await-in-react-component
// https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
if (isListOrdered && ! (orderedList.length < listOfElements.length) && rows.length == 0) {
let nodes = []
let positionDictionary=({})
orderedList.forEach((id, pos) => {
nodes.push({ ...listOfElements[id], position: pos })
positionDictionary[id] = pos
})
// let nodes = orderedList.map((id, pos) => ({ ...listOfElements[id], position: pos }))
// Pre-process links to talk in terms of distances
links = links.map(link => ({...link,
sourceElementPosition: positionDictionary[link.source],
targetElementPosition: positionDictionary[link.target]
}))
let distances = await findDistancesForAllElements({ nodes, links })
setRows(nodes.map((element, i) => ({
id: numToAlphabeticalString(element.position),
position: element.position,
name: element.name,
distances: distances[i]
})))
console.log("rows@CreateTableWithDistances")
console.log(rows)
export function CreateTable({ tableRows }) {
/* This function receives a list of rows, and displays them nicely. */
function abridgeArrayAndDisplay(array) {
let newArray
let formatForDisplay
if (array.length > 10) {
newArray = array.slice(0, 9)
formatForDisplay = newArray.map(d => formatLargeOrSmall(d))
formatForDisplay[9] = "..."
} else {
newArray = array
formatForDisplay = newArray.map(d => formatLargeOrSmall(d))
}
let result = JSON.stringify(formatForDisplay, null, 2).replaceAll(`"`, "")
return result
}
*/
}); // this useEffect should ideally only work when isListOrdered changes, but I haven't bothered to program that.
return (
<div>
<table className="">
@ -261,80 +282,6 @@ export function CreateTableWithDistancesWithUseEffect({ isListOrdered, orderedLi
}
export function CreateTableWithDistances({ tableRows }) {
return (
<div>
<table className="">
<thead>
<tr >
<th >Id</th>
<th>&nbsp;&nbsp;&nbsp;</th>
<th >Position</th>
<th>&nbsp;&nbsp;&nbsp;</th>
<th >Element</th>
<th> &nbsp;&nbsp;&nbsp;</th>
<th >Possible relative values</th>
<th> &nbsp;&nbsp;&nbsp;</th>
<th >Average relative value</th>
</tr>
</thead>
<tbody>
{tableRows.map(row => <tr key={row.id}>
<td className="" >{row.id}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="" >{row.position}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="">{row.name}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="">{abridgeArrayAndDisplay(row.distances)}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="">{formatLargeOrSmall(avg(row.distances))}</td>
</tr>
)}
</tbody>
</table>
</div>
)
}
function CreateTableWithoutDistances({ isListOrdered, orderedList, listOfElements, links }) {
if (!isListOrdered || orderedList.length < listOfElements.length) {
return (<div>{""}</div>)
} else {
let nodes = orderedList.map(i => listOfElements[i])
let rows = nodes.map((element, i) => ({ id: numToAlphabeticalString(element.id), name: element.name }))
console.log("rows@CreateTableWithoutDistances")
console.log(rows)
return (
<div>
<table className="">
<thead >
<tr >
<th >Id</th>
<th>&nbsp;&nbsp;&nbsp;</th>
<th >Element</th>
<th> &nbsp;&nbsp;&nbsp;</th>
</tr>
</thead>
<tbody>
{rows.map(row => <tr key={row.id}>
<td className="" >{row.id}</td>
<td>&nbsp;&nbsp;&nbsp;</td>
<td className="">{row.name}</td>
</tr>
)}
{ }
</tbody>
</table>
</div>
)
}
}
export const CreateTable = CreateTableWithDistances // CreateTableWithoutDistances;
/* Testing */
//import fs from 'fs';
//import path from 'path';
@ -343,7 +290,7 @@ const directory = path.join(process.cwd(),"pages")
let links = JSON.parse(fs.readFileSync(path.join(directory, 'distancesExample.json'), 'utf8'));
let nodes = JSON.parse(fs.readFileSync(path.join(directory, 'listOfPosts.json'), 'utf8'));
let paths = findPathsInner({sourceElementId:2, targetElementId:0, pathSoFar: [], links, nodes, maxLengthOfPath: 2})
let paths = findPaths({sourceElementId:2, targetElementId:0, pathSoFar: [], links, nodes, maxLengthOfPath: 2})
console.log(JSON.stringify(paths, null, 2))
*/
/*

2
lib/labeledgraph.js → lib/labeledGraph.js
View File

@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import * as d3 from 'd3';
import { toLocale, truncateValueForDisplay, numToAlphabeticalString, formatLargeOrSmall } from "../lib/utils.js"
import { toLocale, truncateValueForDisplay, numToAlphabeticalString, formatLargeOrSmall } from "./utils.js"
let getlength = (number) => number.toString().length;

2
lib/utils.js
View File

@ -68,3 +68,5 @@ export function expectedNumMergeSortSteps(n) {
return Math.ceil((n ** 2) / (n + 2)) + expectedNumMergeSortSteps(Math.ceil(n / 2))
}
}
export const avg = arr => arr.reduce((a, b) => (a + b), 0) / arr.length