tweak: General code cleanup.

This commit is contained in:
NunoSempere 2022-06-19 20:50:53 -04:00
parent f11baba423
commit 94f16a12f0
19 changed files with 59 additions and 3551 deletions

File diff suppressed because one or more lines are too long

View File

@ -40,6 +40,8 @@ Given an (ordered) list of elements and a list of utility comparisons, find all
_Note_: Some elements will have many more paths than others.
_Note_: The `findPaths.js` file has a few un-used functions which should make it easier to understand the code.
### Aggregate paths (`aggregatePaths`)
Given a list of path, aggregate them to finally produce an estimate of the relative utility of each element.

View File

@ -18,10 +18,8 @@ export async function aggregatePathsThroughMixtureOfDistributions({
);
console.group();
print("Number of paths: ", multipliedDistributions.length);
// print(multipliedDistributions.slice(0, 10));
let squiggleCode = `aggregatePath = mx(${multipliedDistributions
.filter((distributions) => distributions != undefined)
// .slice(0, 600)
.join(", ")})`;
// Start measuring time
@ -54,6 +52,7 @@ export async function aggregatePathsThroughMixtureOfDistributions({
4
)}`
);
// Stop measuring time
let end = Date.now();
print(`${(end - start) / 1000} seconds needed for processing`);
@ -77,7 +76,6 @@ export const avg = (arr) => sum(arr) / arr.length;
export const geomMean = (arr) => {
let n = arr.length;
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better
// console.log(logavg);
let result = Math.exp(logavg / n);
return result;
};

View File

@ -13,7 +13,7 @@ const outputFilePath = "./output/output.json";
// MAIN
async function main() {
// read file
// Read file
const inputLinksAsString = fs.readFileSync(inputLinksFilePath);
const inputListAsString = fs.readFileSync(inputListFilePath);
const links = JSON.parse(inputLinksAsString);
@ -21,7 +21,6 @@ async function main() {
// Merge sort
let mergeSortOutput = mergeSort({ list, links });
// console.log("Output: ");
if (mergeSortOutput.finishedOrderingList == false) {
console.log("Merge could not proceed");
console.group();
@ -30,7 +29,6 @@ async function main() {
console.groupEnd();
} else {
let orderedList = mergeSortOutput.orderedList;
// console.log(orderedList);
console.log("Sorted output: ");
console.group();
console.log(orderedList.map((x) => x.name));
@ -39,7 +37,6 @@ async function main() {
// find Paths
let paths = await findDistances({ orderedList, links });
// console.log(JSON.stringify(paths, null, 4));
// Aggregate paths.
let aggregatedPaths = await aggregatePaths({

View File

@ -13,6 +13,8 @@ const findElementPosition = (name, nodes) => {
};
async function findPathsWithoutPrunning({
// DO NOT DELETE THIS UN-USED FUNCTION
// USEFUL FOR UNDERSTANDING AGAIN HOW THIS CODE WORKS AFTER A FEW MONTHS
sourceElementName,
targetElementName,
maxLengthOfPath,
@ -110,10 +112,11 @@ async function findPaths({
link.target == targetElementName) ||
(link.source == targetElementName && link.target == sourceElementName)
) {
// direct Path
// We have found a direct path.
let newPath = pathPlusLink(pathSoFar, link);
paths.push(newPath);
} else if (link.source == sourceElementName) {
// Recursively call find Paths
let newPaths = await findPaths({
pathSoFar: pathPlusLink(pathSoFar, link),
maxLengthOfPath: maxLengthOfPath - 1,
@ -160,11 +163,7 @@ async function findExpectedValuesAndDistributionsForElement({
// 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 findPaths({
sourceElementName,
@ -207,49 +206,6 @@ async function findExpectedValuesAndDistributionsForElement({
});
}
return processedPaths;
/*
let expectedValues = [];
for (let path of paths) {
let currentSource = sourceElementName;
let weight = 1;
for (let element of path) {
let distance = 0;
if (element.source == currentSource) {
distance = element.distance;
currentSource = element.target;
} else if (element.target == currentSource) {
distance = 1 / Number(element.distance);
currentSource = element.source;
}
weight = weight * distance;
}
expectedValues.push(weight);
}
let distributionalForm = [];
for (let path of paths) {
let currentSource = sourceElementName;
let multipliedDistributionsInPath = 1;
for (let element of path) {
let anotherDistributionInPath;
if (element.source == currentSource) {
distributionInPath = element.squiggleString;
currentSource = element.target;
} else if (element.target == currentSource) {
distance = `1 / (${element.squiggleString})`;
currentSource = element.source;
}
multipliedDistributionsInPath = `${multipliedDistributionsInPath} * (${anotherDistributionInPath})`;
}
distributionalForm.push(multipliedDistributionsInPath);
}
return {
expectedValues,
distributionalForm,
// paths,
};
*/
}
async function findDistancesFromAllElementsToReferencePoint({
@ -263,15 +219,12 @@ async function findDistancesFromAllElementsToReferencePoint({
/* Get or build reference element */
let midpoint = Math.round(nodes.length / 2);
referenceElement = referenceElement || nodes[midpoint];
// console.log(`referenceElement.position: ${referenceElement.position}`);
/* Get distances. */
let distancesArray = nodes.map((node) => {
if (node.name == referenceElement.name) {
return [1];
} else {
// console.log("node");
// console.log(node);
let expectedValuesAndDistributionsForElement =
findExpectedValuesAndDistributionsForElement({
sourceElementName: referenceElement.name,
@ -303,7 +256,6 @@ export async function findDistancesFromAllElementsToAllReferencePoints({
links,
referenceElement: node,
});
// alert(`distancesFromNode.length: ${distancesFromNode.length}`);
distancesForAllElements = distancesForAllElements.map((arr, i) => {
return !!arr && arr.length > 0
? [...arr, ...distancesFromNode[i]]

View File

@ -7,7 +7,6 @@ function isFirstElementGreater(links, element1, element2) {
(link.source == element2.name && link.target == element1.name)
);
if (relevantComparisons.length == 0) {
// console.log(element1, "vs", element2);
let answer = {
foundAnswer: false,
error: errorMsg,
@ -15,7 +14,6 @@ function isFirstElementGreater(links, element1, element2) {
return answer;
} else {
const firstLink = relevantComparisons[0];
// console.log(firstLink);
const firstElementFirst =
firstLink.source == element1.name && firstLink.target == element2.name
? true
@ -34,16 +32,11 @@ function isFirstElementGreater(links, element1, element2) {
}
function merge(links, left, right) {
let sortedArr = []; // the sorted elements will go here
let sortedArr = [];
while (left.length && right.length) {
// insert the biggest element to the sortedArr
let getComparisonAnswer = isFirstElementGreater(links, left[0], right[0]);
if (getComparisonAnswer.foundAnswer == false) {
// console.log("Error@:");
// console.group();
// console.log({ left, right });
// console.groupEnd();
let result = {
finishedMerge: false,
uncomparedElements: [left[0], right[0]],
@ -53,6 +46,8 @@ function merge(links, left, right) {
} else if (getComparisonAnswer.foundAnswer == true) {
if (getComparisonAnswer.isFirstElementFirst == true) {
// left[0] > right[0]
// note that we can order from smallest to largest or the reverse
// ; I forget which one this is.
sortedArr.push(right.shift());
} else {
sortedArr.push(left.shift());
@ -70,7 +65,6 @@ function merge(links, left, right) {
}
export function mergeSortInner({ recursiveInput, links }) {
// console.log({ l: list.length });
if (recursiveInput.bottleneckedByComparison == true) {
let result = {
recursiveInput: {
@ -97,7 +91,7 @@ export function mergeSortInner({ recursiveInput, links }) {
}
const left = recursiveInput.list.slice(0, half); // the first half of the list
const right = recursiveInput.list.slice(half, recursiveInput.list.length); // Note that splice is destructive.
const right = recursiveInput.list.slice(half, recursiveInput.list.length); // Note that splice is destructive, and that slice instead creates a new array.
let orderedFirstHalfAnswer = mergeSortInner({
recursiveInput: { list: left, bottleneckedByComparison: false },
links,
@ -164,7 +158,7 @@ export function mergeSort({ list, links }) {
return result;
}
/*
// otherwise
// otherwise, test all other permutations:
let permutation = list.slice();
var length = list.length;
// let result = [list.slice()];

File diff suppressed because one or more lines are too long

View File

@ -4,15 +4,21 @@ This repository creates a react webpage that allows to extract a utility functio
It presents the users with a series of elements to compare, using merge-sort in the background to cleverly minimize the number of choices needed.
![](./public/example-prompt.png)
<p align="center">
<img width="50%" height="50%" src="./public/example-prompt.png">
</p>
Then, it cleverly aggregates them, on the one hand by producing a graphical representation:
![](./public/example-graph.png)
<p align="center">
<img width="50%" height="50%" src="./public/example-graph.png">
</p>
and on the other hand doing some fast and clever mean aggregation [^1]:
![](./public/example-table.png)
<p align="center">
<img width="50%" height="50%" src="./public/example-table.png">
</p>
Initially, users could only input numbers, e.g., "A is `3` times better than B". But now, users can also input distributions, using the [squiggle](https://www.squiggle-language.com/) syntax, e.g., "A is `1 to 10` times better than B", or "A is `mm(normal(1, 10), uniform(0,100))` better than B".
@ -65,7 +71,7 @@ The core structure for links is as follows:
},
{
"source": "Spiderman",
"target": "Doctor Octopus",
"target": "Jonah Jameson",
"squiggleString": "20 to 2000",
"distance": 6.76997149080232
},
@ -93,13 +99,11 @@ Distributed under the MIT License. See LICENSE.txt for more information.
- [x] Paths table
- [x] Add paths table
- [x] warn that the paths table is approximate.
- However, I really don't feel like re-adding this after having worked out the distribution rather than the mean aggregation
- However, I think it does make it more user to other users.
- I really don't feel like re-adding this after having worked out the distribution rather than the mean aggregation
- On the other hand, I think it does make it more user to other users.
- [x] Change README.
- [ ] Add functionality like names, etc.
- I also don't feel like doing this
- [ ] Look back at Amazon thing which has been running
- [x] Change README.
## Footnotes
[^1]: The program takes each element as a reference point in turn, and computing the possible distances from that reference point to all other points, and taking the geometric mean of these distances. This produces a number representing the value of each element, such that the ratios between elements represent the user's preferences: a utility function. However, this isn't perfect; the principled approach woud be to aggregate the distributions rather than their means. But this principled approach is much more slowly. For the principled approach, see the `utility-tools` repository.

View File

@ -64,7 +64,8 @@ export function AdvancedOptions({
);
})}
{/* Element: Show comparisons */}
<ShowComparisons links={links} show={showComparisons} />
{/* <ShowComparisons links={links} show={showComparisons} /> */}
{/* Element: Change comparisons */}
<ComparisonsChanger
setLinks={setLinks}
@ -73,6 +74,8 @@ export function AdvancedOptions({
moveToNextStep={moveToNextStep}
links={links}
/>
{/* Element: Dataset changer */}
<DataSetChanger
onChangeOfDataset={onChangeOfDataset}
show={showChangeDataset}

View File

@ -1,9 +1,6 @@
import React, { useState, useEffect } from "react";
import { Separator } from "../separator.js";
// import JSONInput from "react-json-editor-ajrm/index";
// import locale from "react-json-editor-ajrm/locale/en";
const checkLinksAreOk = (links, listOfElements) => {
let linkSourceNames = links.map((link) => link.source.name);
let linkTargetNames = links.map((link) => link.target.name);
@ -68,7 +65,6 @@ export function ComparisonsChanger({
useEffect(async () => {
setValue(JSON.stringify(links, null, 4));
// console.log(JSON.stringify(config, null, 10));
}, [links]);
return (
@ -87,27 +83,6 @@ export function ComparisonsChanger({
cols={90}
className="text-left text-gray-600 bg-white rounded text-normal p-10 border-0 shadow outline-none focus:outline-none focus:ring "
/>
{/* */}
{/*
<div className="flex text-left text-xl justify-around ">
<JSONInput
placeholder={value} // data to display
theme="dark_vscode_tribute" //"light_mitsuketa_tribute" //
locale={locale}
colors={{
string: "#DAA520", // overrides theme colors with whatever color value you want
}}
height="550px"
style={{
body: {
fontSize: "20px",
},
}}
onChange={onChangeForJsonEditor}
/>
</div>
*/}
<br />
<button
className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mt-5 p-10"

View File

@ -33,14 +33,10 @@ export function DataSetChanger({ onChangeOfDataset, show, listOfElements }) {
let handleSubmitInner = (event) => {
clearTimeout(displayingDoneMessageTimer);
event.preventDefault();
//console.log(event)
console.log("value@handleSubmitInner@DataSetChanger");
//console.log(typeof(value));
console.log(value);
try {
let newData = JSON.parse(value);
//console.log(typeof(newData))
//console.log(newData)
if (!newData.length || newData.length < 2) {
throw Error("Not enough objects");
}

View File

@ -1,7 +1,6 @@
import React, { state } from "react";
import { CopyBlock, googlecode } from "react-code-blocks";
import { Separator } from "../separator.js";
// googlecode
export function ShowComparisons({ links, show }) {
return (

View File

@ -1,5 +1,4 @@
import React, { useState } from "react";
// import { SubmitButton } from "./submitButton";
export function ComparisonActuator({
listOfElements,
@ -16,7 +15,6 @@ export function ComparisonActuator({
};
const onClickSubmitEvent = (event) => {
// console.log(event.target.value);
if (!isListOrdered) {
moveToNextStep({
listOfElements,

View File

@ -1,7 +1,6 @@
import React, { useEffect, useState, useRef } from "react";
import colormap from "colormap";
import cytoscape from "cytoscape";
import spread from "cytoscape-spread";
import {
resolveToNumIfPossible,
@ -10,6 +9,7 @@ import {
import { truncateValueForDisplay } from "../../lib/truncateNums.js";
import { cutOffLongNames } from "../../lib/stringManipulations.js";
// import spread from "cytoscape-spread";
// import dagre from "cytoscape-dagre";
// import cola from "cytoscape-cola";
// import fcose from "cytoscape-fcose";
@ -36,7 +36,7 @@ const getEdgeLabel = async (squiggleString) => {
//alert("▁▁▁▁▁▁▁▁▁▁▁");
}
return squiggleString + sparklineConcat; //sparkline;
return squiggleString + sparklineConcat;
};
const getColors = (n) => {
@ -50,7 +50,7 @@ const getColors = (n) => {
});
} else {
colors = colormap({
colormap: "greys", // hot,
colormap: "greys", // other themes: hot, winter, etc.
nshades: n,
format: "hex",
alpha: 1,
@ -77,7 +77,7 @@ export function Graph({
//setVisibility("invisible");
let layoutName = "circle"; //
// cytoscape.use(circle); // spread, circle,
// cytoscape.use(spread); // necessary for non-default themes,
let listOfElementsForGraph = isListOrdered
? listAfterMergeSort
: listOfElements;
@ -122,7 +122,6 @@ export function Graph({
content: "data(id)",
"background-color": "data(color)",
"text-wrap": "wrap",
//"text-overflow-wrap": "anywhere",
"text-max-width": 70,
"z-index": 1,
},
@ -166,8 +165,6 @@ export function Graph({
"text-border-width": 0.5,
"text-border-opacity": 1,
"z-index": 3,
// "text-rotation": "autorotate"
},
},
];
@ -175,28 +172,22 @@ export function Graph({
const config = {
container: containerRef.current,
style: cytoscapeStylesheet,
elements: [
/* Dummy data:
{ data: { id: "n1" } },
{ data: { id: "n2" } },
{ data: { id: "e1", source: "n1", target: "n2" } },
Real data:*/
...nodeElements,
...linkElements,
],
elements: [...nodeElements, ...linkElements],
layout: {
name: layoutName, // circle, grid, dagre
minDist: 10,
//prelayout: false,
// animate: false, // whether to transition the node positions
// animationDuration: 250, // duration of animation in ms if enabled
// the cytoscape documentation is pretty good here.
},
userZoomingEnabled: false,
userPanningEnabled: false,
};
cytoscape(config);
// setTimeout(() => setVisibility(""), 700);
// necessary for themes like spread, which have
// a confusing animation at the beginning
};
useEffect(async () => {
await callEffect({
@ -205,7 +196,6 @@ export function Graph({
isListOrdered,
listAfterMergeSort,
});
// console.log(JSON.stringify(config, null, 10));
}, [listOfElements, links, isListOrdered, listAfterMergeSort]);
return (

View File

@ -15,6 +15,7 @@ import { resolveToNumIfPossible } from "../lib/squiggle.js";
export function Homepage({ listOfElementsInit }) {
const SLICE = false;
/* Statefull elements */
// list of elements
@ -43,6 +44,8 @@ export function Homepage({ listOfElementsInit }) {
pairCurrentlyBeingComparedInit
);
/* Effects */
// dataset changer
const onChangeOfDataset = (newListOfElements) => {
setListOfElements(newListOfElements);
@ -67,14 +70,11 @@ export function Homepage({ listOfElementsInit }) {
} else {
setListAfterMergeSort(mergeSortOutput.orderedList);
pushToMongo({ mergeSortOutput, links });
setIsListOrdered(true); // good if it's at the end.
// alert(JSON.stringify(mergeSortOutput, null, 4));
// chooseNextPairToCompareRandomly({ listOfElements });
// return 1;
setIsListOrdered(true); // should be at the end, because some useEffects are triggered by it.
}
};
// full
// Main mergesort step
const moveToNextStep = async ({
listOfElements,
pairCurrentlyBeingCompared,
@ -82,8 +82,8 @@ export function Homepage({ listOfElementsInit }) {
whileChangingStuff,
newLinksFromChangingStuff,
}) => {
// In the normal course of things:
if (!whileChangingStuff) {
// In the normal course of things:
let newLink = {
source: pairCurrentlyBeingCompared[0].name,
target: pairCurrentlyBeingCompared[1].name,
@ -94,8 +94,6 @@ export function Homepage({ listOfElementsInit }) {
if (numOption.asNum == false) {
alert(JSON.stringify(numOption.errorMsg));
} else if (numOption.asNum == true) {
// addLink({ ...newLink, distance: numOption.num }, links);
/// let newLinks = [...links, { ...newLink, distance: numOption.num }];
newLink = { ...newLink, distance: numOption.num };
addLink(newLink, links);
let newLinks = [...links, newLink];
@ -103,14 +101,13 @@ export function Homepage({ listOfElementsInit }) {
mergeSortStep({ list: listOfElements, links: newLinks });
}
} else {
// When changing comparisons:
mergeSortStep({
list: listOfElements,
links: newLinksFromChangingStuff,
});
setNumStepsNow(0); // almost no guarantees of how many left.
}
// When changing comparisons:
};
return (

View File

@ -13,7 +13,6 @@ async function fullResultsTable({ listAfterMergeSort, links }) {
orderedList: listAfterMergeSort,
links: links,
});
// console.log(pathsArray);
let aggregatedPaths = await aggregatePaths({
pathsArray: pathsArray,
orderedList: listAfterMergeSort,
@ -39,7 +38,7 @@ function getStdev(arr) {
export const geomMean = (arr) => {
let n = arr.length;
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better
let logavg = sum(arr.map((x) => Math.log(x))); // works for low numbers much better, numerically
let result = Math.exp(logavg / n);
return result;
};
@ -92,8 +91,6 @@ function getRow(row, i) {
}
function reactTableContents(tableContents) {
// alert(JSON.stringify(tableContents));
// return "Hello";
return tableContents.map((row, i) => getRow(row, i));
}
@ -102,16 +99,14 @@ export function ResultsTable({ isListOrdered, listAfterMergeSort, links }) {
const [tableContents, setTableContents] = useState([]);
useEffect(async () => {
// console.log(JSON.stringify(config, null, 10));
if (isListOrdered && listAfterMergeSort.length > 0) {
// both necessary because there is a small moment when list is ordered
// but listAfterMergeSort wasn't ready yet
// both comparisons aren't strictly necessary,
// but it bit me once, so I'm leaving it
let tableContentsResult = await fullResultsTable({
listAfterMergeSort,
links,
});
console.log(tableContentsResult);
// alert(JSON.stringify(tableContentsResult));
setTableContents(tableContentsResult);
setIsTableComputed(true);
}

View File

@ -13,4 +13,3 @@ export async function pushToMongo(data) {
console.log(response);
}
}
// pushToMongo()

View File

@ -1,5 +1,4 @@
let topOutAt100AndValidate = (x) => {
// return 10;
if (x == x) {
return x > 99 ? 99 : x < 0 ? 2 : x;
} else {

View File

@ -1,6 +1,6 @@
/* Notes */
// This function is just a simple wrapper around lib/comparisonView.
// This function is just a simple wrapper around components/homepage.
// Most of the time, I'll want to edit that instead
/* Imports */