Changed slider order. Inferred relative utility compared to a reference point. However, object structures used in the code remain messy

2021-06-07 19:09:30 +02:00 · 2021-06-07 19:09:30 +02:00 · 9766165060
commit 9766165060
parent 9c0f1e80a6
12 changed files with 358 additions and 527 deletions
--- a/README.md
+++ b/README.md
@ -1,23 +1,18 @@
-# Next.js + Tailwind CSS Example
-
-This example shows how to use [Tailwind CSS](https://tailwindcss.com/) (v2.1) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs).
-
-It uses the new [`Just-in-Time Mode`](https://tailwindcss.com/docs/just-in-time-mode) for Tailwind CSS.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-tailwindcss with-tailwindcss-app
-# or
-yarn create next-app --example with-tailwindcss with-tailwindcss-app
+## Object structure
+The core structure is json array of objects. Only the "name" attribute is necessary; the id is also internally necessary but it's created on the fly if it doesn't exist. The reason that ids are needed is that comparing objects is annoying.
 ```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+[
+    {
+        "id": 1,
+        "name": "Peter Parker",
+        "someOptionalKey": "...",
+        "anotherMoreOptionalKey": "..."
+    },
+    {
+        "id": 2,
+        "name": "Spiderman",
+        "someOptionalKey": "...",
+        "anotherMoreOptionalKey": "..."
+    }
+]
+```
--- a/lib/displayAsMarkdown.js
+++ b/lib/displayAsMarkdown.js
@ -22,7 +22,6 @@ export function DisplayAsMarkdown({markdowntext}){
   return( <ReactMarkdown
        plugins={[gfm]}
        children={markdowntext}
-        allowDangerousHtml
        className="ml-30"
    />)
 }
--- a/lib/displayElement.js
+++ b/lib/displayElement.js
@ -1,14 +1,18 @@
 import React from "react";

+let capitalizeFirstLetter = (string) =>  string.charAt(0).toUpperCase() + string.slice(1)
+
 export function DisplayElement({element}){
+    let otherkeys = Object.keys(element).filter(key => key!="name" && key!="url" && key != "id")
+    let othervalues = otherkeys.map(key => element[key])
+    let otherpairs = otherkeys.map((key,i) => ({key: capitalizeFirstLetter(key), value: othervalues[i]}))
+        
    return(
        <div>
            <a href={element.url} target="_blank">
-                <h1>{`${element.name}`}</h1>
+                <h2>{`${element.name}`}</h2>
            </a>
-            <p>{`Author: ${element.author}`}</p>
-            <p>{`Karma: ${element.karma}`}</p>
-           
+            {otherpairs.map(pair => <p>{`${pair.key}: ${pair.value}`}</p>)}
        </div>
    )
 }
--- a/lib/findPaths.js
+++ b/lib/findPaths.js
@ -0,0 +1,167 @@
+/* Imports*/
+import React from "react";
+
+/* Utilities */
+let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
+
+/* Main function */
+
+function findPathsInner({sourceElementId, targetElementId, pathSoFar, links, listOfElements, maxLengthOfPath}){
+    let paths = []
+
+    if(maxLengthOfPath > 0){
+        for(let link of links){
+            if(
+                ((link.source == sourceElementId) && (link.target == targetElementId)) || 
+                ((link.source == targetElementId) && (link.target == sourceElementId))
+            ){
+                paths.push(pathSoFar.concat(link).flat())
+                //console.log(`Final path found at recursion level: ${maxLengthOfPath}. Source: ${sourceElementId}, target=${targetElementId}`)
+                //console.log(link)
+            } else if((link.source == sourceElementId)){
+                let newPaths = findPathsInner({sourceElementId:link.target, targetElementId, pathSoFar: pathSoFar.concat(link).flat(), links, listOfElements, maxLengthOfPath: (maxLengthOfPath-1)})
+                if(newPaths.length != 0){
+                    //console.log(`New link, at recursion level: ${maxLengthOfPath}. Source: ${sourceElementId}, target=${targetElementId}. PathSoFar: ${pathSoFar}`)
+                    //console.log(link)
+                    //console.log(newPaths)
+                    paths.push(...newPaths)
+                }
+            }else if((link.target == sourceElementId)){
+                let newPaths = findPathsInner({sourceElementId:link.source, targetElementId, pathSoFar: pathSoFar.concat(link).flat(), links, listOfElements, maxLengthOfPath: (maxLengthOfPath-1)})
+                if(newPaths.length != 0){
+                    //console.log(`New link, at recursion level: ${maxLengthOfPath}. Source: ${sourceElementId}, target=${targetElementId}. PathSoFar: ${pathSoFar}`)
+                    //console.log(link)
+                    //console.log(newPaths)
+                    paths.push(...newPaths)
+                }
+            }
+            
+        }
+    }
+
+    return paths
+}
+
+function findPaths({sourceElementId, targetElementId, links, listOfElements}){
+    let positionSourceElement = listOfElements.map((element, i) => (element.id)).indexOf(sourceElementId)
+    let positionTargetElement = listOfElements.map((element, i) => (element.id)).indexOf(targetElementId)
+    let maxLengthOfPath = Math.abs(positionSourceElement - positionTargetElement)
+    console.log(maxLengthOfPath)
+    
+    return findPathsInner({sourceElementId, targetElementId, pathSoFar: [], links, listOfElements, maxLengthOfPath})
+}
+
+function findDistance({sourceElementId, targetElementId, links, listOfElements}){
+    let paths = findPaths({sourceElementId, targetElementId, links, listOfElements})
+    // console.log(paths)
+    let weights = []
+    for(let path of paths){
+        let currentSource = sourceElementId
+        let weight = 1
+        // console.log(path)
+        for(let element of path){
+            // console.log(element)
+            // console.log(element.source)
+            // console.log(element.target)
+            let distance = 0
+            if(element.source == currentSource){
+                // console.log("A")
+                distance = element.distance
+                currentSource = element.target
+            }else if(element.target == currentSource){
+                // console.log("B")
+                distance = 1/Number(element.distance)
+                currentSource = element.source
+            }
+            weight = weight*distance
+            // console.log(weight)
+            
+        }
+        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.map(weight => Math.round(weight*100)/100)
+}
+
+function findDistancesForAllElements({links, listOfElements}){
+    let referenceElement = listOfElements.filter(x => x.isReferenceValue)[0]
+    console.log(referenceElement.id)
+    let distances = listOfElements.map(element =>{
+        if(element.isReferenceValue){
+            return [1]
+        }else{
+            // console.log({sourceElementId: referenceElement.id, targetElementId: element.id, links, listOfElements})
+            return findDistance({sourceElementId: Number(referenceElement.id), targetElementId: Number(element.id), links, listOfElements})
+        }
+    })
+    return distances
+}
+
+export function CreateTableWithDistances({isListOrdered, quantitativeComparisons, listOfElements, referenceValueId}){
+    if(!isListOrdered){ // listOfElements
+        console.log
+        console.log("List of Elements: ")
+        console.log(listOfElements)
+        return (<div></div>)
+    } else {
+        console.log(`isListOrdered: ${isListOrdered}`)
+        console.log("List Of Elements:")
+        console.log(listOfElements)
+        let links = quantitativeComparisons.map(([element1, element2, distance]) => ({source: element1, target: element2, distance: distance}))
+        
+        let distances = findDistancesForAllElements({links, listOfElements})
+
+        let rows = listOfElements.map((element, i) => ({id: element.id, name: element.name, distances: distances[i]}))
+
+        return(<div>
+            <table className="">
+            <thead >
+              <tr >
+                <th >Id</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>
+              {rows.map(row => <tr>
+                    <td className="">{row.id}</td> 
+                    <td>&nbsp;&nbsp;&nbsp;</td>
+                    <td className="">{row.name}</td>
+                    <td>&nbsp;&nbsp;&nbsp;</td>
+                    <td className="">{JSON.stringify(row.distances, null, 2)}</td>
+                    <td>&nbsp;&nbsp;&nbsp;</td>
+                    <td className="">{avg(row.distances).toFixed(2)}</td>
+              </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+)
+    }
+    
+}
+
+/* Testing */
+//import fs from 'fs';
+//import path from 'path';
+/*
+const directory = path.join(process.cwd(),"pages")
+let links = JSON.parse(fs.readFileSync(path.join(directory, 'distancesExample.json'), 'utf8'));
+let listOfElements = JSON.parse(fs.readFileSync(path.join(directory, 'listOfPosts.json'), 'utf8'));
+
+let paths = findPathsInner({sourceElementId:2, targetElementId:0, pathSoFar: [], links, listOfElements, maxLengthOfPath: 2})
+console.log(JSON.stringify(paths, null, 2))
+*/
+/* 
+let paths = findPaths({sourceElementId:2, targetElementId:0, links, listOfElements})
+console.log(JSON.stringify(paths, null, 2))
+*/
+/*
+let distances = findDistance({sourceElementId:2, targetElementId:4, links, listOfElements})
+console.log(distances)
+*/
--- a/lib/slider.js
+++ b/lib/slider.js
@ -84,6 +84,7 @@ export function SliderElement({ onChange, value, displayFunction }) {
      domain={[-3,3]}
      values={[value]}
      onChange={onChange}
+      reversed={true}
    >
      <Rail>
        {({ getRailProps }) => (
--- a/package-lock.json
+++ b/package-lock.json
@ -20,7 +20,7 @@
      "devDependencies": {
        "autoprefixer": "^10.0.4",
        "postcss": "^8.1.10",
-        "tailwindcss": "^2.1.1"
+        "tailwindcss": "^2.0.4"
      }
    },
    "node_modules/@babel/code-frame": {
@ -205,41 +205,6 @@
        }
      }
    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz",
-      "integrity": "sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/@opentelemetry/api": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz",
@ -1365,12 +1330,6 @@
      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
    "node_modules/domain-browser": {
      "version": "4.19.0",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@ -1526,32 +1485,6 @@
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
-    "node_modules/fast-glob": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
-      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
-      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -1681,49 +1614,6 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
-    "node_modules/glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "dependencies": {
-        "glob-parent": "^2.0.0",
-        "is-glob": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/glob-base/node_modules/glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^2.0.0"
-      }
-    },
-    "node_modules/glob-base/node_modules/is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/glob-base/node_modules/is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@ -2047,15 +1937,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -2314,12 +2195,6 @@
      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
      "dev": true
    },
-    "node_modules/lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
    "node_modules/longest-streak": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
@ -2551,15 +2426,6 @@
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
    "node_modules/micromark": {
      "version": "2.11.4",
      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
@ -2674,19 +2540,6 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
-    "node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
    "node_modules/miller-rabin": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
@ -3222,42 +3075,6 @@
        "url": "https://github.com/sponsors/wooorm"
      }
    },
-    "node_modules/parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "dependencies": {
-        "glob-base": "^0.3.0",
-        "is-dotfile": "^1.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/parse-glob/node_modules/is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/parse-glob/node_modules/is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/path": {
      "version": "0.12.7",
      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
@ -3572,38 +3389,6 @@
        "node": ">=0.4.x"
      }
    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
    "node_modules/randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -3833,16 +3618,6 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
    "node_modules/ripemd160": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@ -3852,29 +3627,6 @@
        "inherits": "^2.0.1"
      }
    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
    "node_modules/rw": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@ -4139,36 +3891,29 @@
      }
    },
    "node_modules/tailwindcss": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.4.tgz",
-      "integrity": "sha512-fh1KImDLg6se/Suaelju/5oFbqq1b0ntagmGLu0aG9LlnNPGHgO1n/4E57CbKcCtyz/VYnvVXUiWmfyfBBZQ6g==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.4.tgz",
+      "integrity": "sha512-WhgR0oiBxGOZ9jY0yVfaJCHnckR7U74Fs/BMsYxGdwGJQ5Hd/HlaKD26bEJFZOvYScJo0QcUj2ImldzedsG7Bw==",
      "dev": true,
      "dependencies": {
        "@fullhuman/postcss-purgecss": "^3.1.3",
        "bytes": "^3.0.0",
        "chalk": "^4.1.0",
-        "chokidar": "^3.5.1",
        "color": "^3.1.3",
        "detective": "^5.2.0",
        "didyoumean": "^1.2.1",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.5",
        "fs-extra": "^9.1.0",
        "html-tags": "^3.1.0",
        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
        "modern-normalize": "^1.0.0",
        "node-emoji": "^1.8.1",
-        "normalize-path": "^3.0.0",
        "object-hash": "^2.1.1",
-        "parse-glob": "^3.0.4",
        "postcss-functions": "^3",
        "postcss-js": "^3.0.3",
-        "postcss-nested": "5.0.5",
+        "postcss-nested": "^5.0.5",
        "postcss-selector-parser": "^6.0.4",
        "postcss-value-parser": "^4.1.0",
        "pretty-hrtime": "^1.0.3",
-        "quick-lru": "^5.1.1",
        "reduce-css-calc": "^2.1.8",
        "resolve": "^1.20.0"
      },
@ -4812,32 +4557,6 @@
      "integrity": "sha512-qtBF56vPC6d6a8p7LYd0iRjW89fhY80kAIzmj+VonvIGjK/nymBjcFUhbKiMFqlhsarCksnhwX+Zmn95Dw9qvA==",
      "requires": {}
    },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      }
-    },
-    "@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
-    },
-    "@nodelib/fs.walk": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz",
-      "integrity": "sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      }
-    },
    "@opentelemetry/api": {
      "version": "0.14.0",
      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-0.14.0.tgz",
@ -5796,12 +5515,6 @@
        }
      }
    },
-    "dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
    "domain-browser": {
      "version": "4.19.0",
      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@ -5923,29 +5636,6 @@
      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
    },
-    "fast-glob": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
-      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
-      "dev": true,
-      "requires": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
-      }
-    },
-    "fastq": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
-      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
-      "dev": true,
-      "requires": {
-        "reusify": "^1.0.4"
-      }
-    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@ -6044,42 +5734,6 @@
        "path-is-absolute": "^1.0.0"
      }
    },
-    "glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "requires": {
-        "glob-parent": "^2.0.0",
-        "is-glob": "^2.0.0"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-          "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-          "dev": true,
-          "requires": {
-            "is-glob": "^2.0.0"
-          }
-        },
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        }
-      }
-    },
    "glob-parent": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
@ -6294,12 +5948,6 @@
      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz",
      "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw=="
    },
-    "is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
-    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -6473,12 +6121,6 @@
      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
      "dev": true
    },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
-      "dev": true
-    },
    "longest-streak": {
      "version": "2.0.4",
      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz",
@ -6645,12 +6287,6 @@
      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
    },
-    "merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
-    },
    "micromark": {
      "version": "2.11.4",
      "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.11.4.tgz",
@ -6725,16 +6361,6 @@
        "micromark": "~2.11.0"
      }
    },
-    "micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
-      "requires": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
-      }
-    },
    "miller-rabin": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
@ -7169,35 +6795,6 @@
        "is-hexadecimal": "^1.0.0"
      }
    },
-    "parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "requires": {
-        "glob-base": "^0.3.0",
-        "is-dotfile": "^1.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.0"
-      },
-      "dependencies": {
-        "is-extglob": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-          "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-          "dev": true
-        },
-        "is-glob": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-          "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-          "dev": true,
-          "requires": {
-            "is-extglob": "^1.0.0"
-          }
-        }
-      }
-    },
    "path": {
      "version": "0.12.7",
      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
@ -7445,18 +7042,6 @@
      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
    },
-    "queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
-    },
-    "quick-lru": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
-      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
-      "dev": true
-    },
    "randombytes": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@ -7642,12 +7227,6 @@
        "path-parse": "^1.0.6"
      }
    },
-    "reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
-    },
    "ripemd160": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
@ -7657,15 +7236,6 @@
        "inherits": "^2.0.1"
      }
    },
-    "run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "requires": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
    "rw": {
      "version": "1.3.3",
      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@ -7876,36 +7446,29 @@
      }
    },
    "tailwindcss": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.1.4.tgz",
-      "integrity": "sha512-fh1KImDLg6se/Suaelju/5oFbqq1b0ntagmGLu0aG9LlnNPGHgO1n/4E57CbKcCtyz/VYnvVXUiWmfyfBBZQ6g==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.0.4.tgz",
+      "integrity": "sha512-WhgR0oiBxGOZ9jY0yVfaJCHnckR7U74Fs/BMsYxGdwGJQ5Hd/HlaKD26bEJFZOvYScJo0QcUj2ImldzedsG7Bw==",
      "dev": true,
      "requires": {
        "@fullhuman/postcss-purgecss": "^3.1.3",
        "bytes": "^3.0.0",
        "chalk": "^4.1.0",
-        "chokidar": "^3.5.1",
        "color": "^3.1.3",
        "detective": "^5.2.0",
        "didyoumean": "^1.2.1",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.2.5",
        "fs-extra": "^9.1.0",
        "html-tags": "^3.1.0",
        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
        "modern-normalize": "^1.0.0",
        "node-emoji": "^1.8.1",
-        "normalize-path": "^3.0.0",
        "object-hash": "^2.1.1",
-        "parse-glob": "^3.0.4",
        "postcss-functions": "^3",
        "postcss-js": "^3.0.3",
-        "postcss-nested": "5.0.5",
+        "postcss-nested": "^5.0.5",
        "postcss-selector-parser": "^6.0.4",
        "postcss-value-parser": "^4.1.0",
        "pretty-hrtime": "^1.0.3",
-        "quick-lru": "^5.1.1",
        "reduce-css-calc": "^2.1.8",
        "resolve": "^1.20.0"
      },
--- a/package.json
+++ b/package.json
@ -21,6 +21,6 @@
  "devDependencies": {
    "autoprefixer": "^10.0.4",
    "postcss": "^8.1.10",
-    "tailwindcss": "^2.1.1"
+    "tailwindcss": "^2.0.4"
  }
 }
--- a/pages/distancesExample.json
+++ b/pages/distancesExample.json
@ -0,0 +1,53 @@
+[
+
+    {
+    
+        "source": 3,
+    
+        "target": 4,
+    
+        "distance": 5
+    
+    },
+    
+    {
+    
+        "source": 2,
+    
+        "target": 3,
+    
+        "distance": 4
+    
+    },
+    
+    {
+    
+        "source": 0,
+    
+        "target": 1,
+    
+        "distance": 4
+    
+    },
+    
+    {
+    
+        "source": 0,
+    
+        "target": 2,
+    
+        "distance": 5
+    
+    },
+    
+    {
+    
+        "source": 1,
+    
+        "target": 2,
+    
+        "distance": 5
+    
+    }
+    
+    ]
--- a/pages/index.js
+++ b/pages/index.js
@ -3,9 +3,10 @@ import React, { useState } from "react";
 import fs from 'fs';
 import path from 'path';
 import {DrawGraph} from '../lib/labeledgraph';
-import { SliderElement } from "../lib/slider.js";
+import { SliderElement } from "../lib/slider";
 import {DisplayElement} from '../lib/displayElement'
 import {DisplayAsMarkdown} from '../lib/displayAsMarkdown'
+import {CreateTableWithDistances} from '../lib/findPaths'

 // Utilities

@ -19,7 +20,7 @@ Array.prototype.containsArray = function(val) {
  return hash.hasOwnProperty(val);
 }

-let checkIfListIsOrdered = (arr, binaryComparisons) => {
+let checkIfListIsOrdered = (arr, binaryComparisons) => { // list of ids
  let l = arr.length
  let isOrdered = true
  for(let i=0; i<l-1; i++){
@ -62,8 +63,8 @@ export async function getStaticProps() {
 // Main
 export default function Home({listOfPosts}) {
  // State
-  let list = increasingList(listOfPosts.length)//[1,2,3,4,5,6,7,8,9,10]
-
+  let list = increasingList(listOfPosts.length)//[1,2,3,4,5,6,7,8,9,10] // listOfPosts.map(element => element.id)// 
+  let referenceValueId = 1//listOfPosts.filter(post => post.isReferenceValue || false)[0].id
  const [toComparePair, setToComparePair] = useState([list[list.length-2], list[list.length-1]])
  const [binaryComparisons, setBinaryComparisons] = useState([])

@ -185,19 +186,19 @@ export default function Home({listOfPosts}) {
                className="flex m-auto border-gray-300 border-4 h-72 w-72"
                //onClick={() => nextStep(binaryComparisons, toComparePair[0], toComparePair[1])}
              >
-                <p className="block m-auto text-center">  
+                <div className="block m-auto text-center">  
                  <DisplayElement element={listOfPosts[toComparePair[0]]}>
                  </DisplayElement>
-                </p>
+                </div>
              </div>
              <div 
                className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
                //onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
              >
-                <p className="block m-auto text-center">  
+                <div className="block m-auto text-center">  
                  <DisplayElement element={listOfPosts[toComparePair[1]]}>
                  </DisplayElement>
-                </p>
+                </div>
              </div>
          </div>
          <div className={`flex row-start-3 row-end-3  col-start-1 col-end-4 md:col-start-3 md:col-end-3 md:row-start-1 md:row-end-1 lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-1 items-center justify-center mb-4 mt-10 ${isListOrdered? "hidden" : ""}`}>
@ -220,7 +221,15 @@ export default function Home({listOfPosts}) {
          list={orderedList}
          quantitativeComparisons={quantitativeComparisons}>
        </DrawGraph>
-
+          <div className={`inline items-center text-center mt-10 ${isListOrdered? "": "hidden" }`}>
+            <CreateTableWithDistances
+              isListOrdered={isListOrdered}
+              quantitativeComparisons={quantitativeComparisons}
+              listOfElements={orderedList.map(i => listOfPosts[i])}
+              referenceValueId={referenceValueId}
+            >
+            </CreateTableWithDistances>
+        </div>
        
      </main>

@ -232,9 +241,7 @@ export default function Home({listOfPosts}) {
          <p>{`Quantitative comparisons: ${JSON.stringify(quantitativeComparisons, null, 4)}`}</p> 

          */}
-
-        </div>
-
+      </div>
    </div>
  )
 }
--- a/pages/listOfPosts.json
+++ b/pages/listOfPosts.json
@ -1,72 +1,38 @@
 [
  {
-    "id": "0",
+    "id": 0,
    "name": "Relative Impact of the First 10 EA Forum Prize Winners",
    "url": "https://forum.effectivealtruism.org/posts/pqphZhx2nJocGCpwc/relative-impact-of-the-first-10-ea-forum-prize-winners",
    "author": "Nuño Sempere",
    "karma": 80
  },
  {
-    "id": "1",
+    "id": 1,
    "name": "Introducing Metaforecast: A Forecast Aggregator and Search Tool",
    "url": "https://forum.effectivealtruism.org/posts/tEo5oXeSNcB3sYr8m/introducing-metaforecast-a-forecast-aggregator-and-search",
    "author": "Nuño Sempere",
    "karma": 115
  },
  {
-    "id": "2",
+    "id": 2,
    "name": "Forecasting Prize Results",
    "url": "https://forum.effectivealtruism.org/posts/8QFWHzmur4roAcnCf/forecasting-prize-results",
    "author": "Nuño Sempere",
-    "karma": 44
+    "karma": 44,
+    "isReferenceValue": true
  },
  {
-    "id": "3",
+    "id": 3,
    "name": "A Funnel for Cause Candidates",
    "url": "https://forum.effectivealtruism.org/posts/iRA4Dd2bfX9nukSo3/a-funnel-for-cause-candidates",
    "author": "Nuño Sempere",
    "karma": 34
  },
  {
-    "id": "4",
+    "id": 4,
    "name": "2020: Forecasting in Review",
    "url": "https://forum.effectivealtruism.org/posts/8shCj2eoQygQvtoZP/2020-forecasting-in-review",
    "author": "Nuño Sempere",
    "karma": 35
-  },
-  {
-    "id": "5",
-    "name": "Big List of Cause Candidates",
-    "url": "https://forum.effectivealtruism.org/posts/SCqRu6shoa8ySvRAa/big-list-of-cause-candidates",
-    "author": "Nuño Sempere",
-    "karma": 182
-  },
-  {
-    "id": "6",
-    "name": "An experiment to evaluate the value of one researcher's work",
-    "url": "https://forum.effectivealtruism.org/posts/udGBF8YWshCKwRKTp/an-experiment-to-evaluate-the-value-of-one-researcher-s-work",
-    "author": "Nuño Sempere",
-    "karma": 55
-  },
-  {
-    "id": "7",
-    "name": "Predicting the Value of Small Altruistic Projects: A Proof of Concept Experiment",
-    "url": "https://forum.effectivealtruism.org/posts/qb56nicbnj9asSemx/predicting-the-value-of-small-altruistic-projects-a-proof-of",
-    "author": "Nuño Sempere",
-    "karma": 51
-  },
-  {
-    "id": "8",
-    "name": "Incentive Problems With Current Forecasting Competitions",
-    "url": "https://forum.effectivealtruism.org/posts/ztmBA8v6KvGChxw92/incentive-problems-with-current-forecasting-competitions",
-    "author": "Nuño Sempere",
-    "karma": 54
-  },
-  {
-    "id": "9",
-    "name": "Shapley Values: Better Than Counterfactuals",
-    "url": "https://forum.effectivealtruism.org/posts/XHZJ9i7QBtAJZ6byW/shapley-values-better-than-counterfactuals",
-    "author": "Nuño Sempere",
-    "karma": 92
  }
 ]
--- a/pages/listOfPosts_full.json
+++ b/pages/listOfPosts_full.json
@ -0,0 +1,72 @@
+[
+  {
+    "id": "0",
+    "name": "Relative Impact of the First 10 EA Forum Prize Winners",
+    "url": "https://forum.effectivealtruism.org/posts/pqphZhx2nJocGCpwc/relative-impact-of-the-first-10-ea-forum-prize-winners",
+    "author": "Nuño Sempere",
+    "karma": 80
+  },
+  {
+    "id": "1",
+    "name": "Introducing Metaforecast: A Forecast Aggregator and Search Tool",
+    "url": "https://forum.effectivealtruism.org/posts/tEo5oXeSNcB3sYr8m/introducing-metaforecast-a-forecast-aggregator-and-search",
+    "author": "Nuño Sempere",
+    "karma": 115
+  },
+  {
+    "id": "2",
+    "name": "Forecasting Prize Results",
+    "url": "https://forum.effectivealtruism.org/posts/8QFWHzmur4roAcnCf/forecasting-prize-results",
+    "author": "Nuño Sempere",
+    "karma": 44
+  },
+  {
+    "id": "3",
+    "name": "A Funnel for Cause Candidates",
+    "url": "https://forum.effectivealtruism.org/posts/iRA4Dd2bfX9nukSo3/a-funnel-for-cause-candidates",
+    "author": "Nuño Sempere",
+    "karma": 34
+  },
+  {
+    "id": "4",
+    "name": "2020: Forecasting in Review",
+    "url": "https://forum.effectivealtruism.org/posts/8shCj2eoQygQvtoZP/2020-forecasting-in-review",
+    "author": "Nuño Sempere",
+    "karma": 35
+  },
+  {
+    "id": "5",
+    "name": "Big List of Cause Candidates",
+    "url": "https://forum.effectivealtruism.org/posts/SCqRu6shoa8ySvRAa/big-list-of-cause-candidates",
+    "author": "Nuño Sempere",
+    "karma": 182
+  },
+  {
+    "id": "6",
+    "name": "An experiment to evaluate the value of one researcher's work",
+    "url": "https://forum.effectivealtruism.org/posts/udGBF8YWshCKwRKTp/an-experiment-to-evaluate-the-value-of-one-researcher-s-work",
+    "author": "Nuño Sempere",
+    "karma": 55
+  },
+  {
+    "id": "7",
+    "name": "Predicting the Value of Small Altruistic Projects: A Proof of Concept Experiment",
+    "url": "https://forum.effectivealtruism.org/posts/qb56nicbnj9asSemx/predicting-the-value-of-small-altruistic-projects-a-proof-of",
+    "author": "Nuño Sempere",
+    "karma": 51
+  },
+  {
+    "id": "8",
+    "name": "Incentive Problems With Current Forecasting Competitions",
+    "url": "https://forum.effectivealtruism.org/posts/ztmBA8v6KvGChxw92/incentive-problems-with-current-forecasting-competitions",
+    "author": "Nuño Sempere",
+    "karma": 54
+  },
+  {
+    "id": "9",
+    "name": "Shapley Values: Better Than Counterfactuals",
+    "url": "https://forum.effectivealtruism.org/posts/XHZJ9i7QBtAJZ6byW/shapley-values-better-than-counterfactuals",
+    "author": "Nuño Sempere",
+    "karma": 92
+  }
+]
--- a/styles/globals.css
+++ b/styles/globals.css
@ -45,4 +45,8 @@ p, ul {
 ul {
  list-style-type: square;
  margin-left: 20px;
+}
+
+th, td {
+  font-size: 17px;
 }