Better display results at the end

lib/displayAsMarkdown.js

@@ -0,0 +1,28 @@
+import React from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+
+if (!String.prototype.replaceAll) {
+	String.prototype.replaceAll = function(str, newStr){
+
+		// If a regex pattern
+		if (Object.prototype.toString.call(str).toLowerCase() === '[object regexp]') {
+			return this.replace(str, newStr);
+		}
+
+		// If a string
+		return this.replace(new RegExp(str, 'g'), newStr);
+
+	};
+}
+
+export function DisplayAsMarkdown({markdowntext}){
+    console.log(markdowntext)
+    markdowntext = markdowntext.replaceAll("\n", "\n\n")
+   return( <ReactMarkdown
+        plugins={[gfm]}
+        children={markdowntext}
+        allowDangerousHtml
+        className="ml-30"
+    />)
+}

lib/displayElement.js

@@ -5,8 +5,10 @@ export function DisplayElement({element}){
         <div>
             <a href={element.url} target="_blank">
                 <h1>{`${element.name}`}</h1>
-                <p>{`Karma: ${1}`}</p>
             </a>
+            <p>{`Author: ${element.author}`}</p>
+            <p>{`Karma: ${element.karma}`}</p>
+           
         </div>
     )
 }

lib/labeledgraph.js

@@ -9,7 +9,7 @@ function drawGraphInner(list, quantitativeComparisons){
     
     // Build the graph object
     let nodes = list.map((x,i) => ({id: i, name: x}))
-    let links = quantitativeComparisons.map(([element1, element2, weight]) => ({source: list.indexOf(element1), target: list.indexOf(element2), weight: weight}))
+    let links = quantitativeComparisons.map(([element1, element2, distance]) => ({source: list.indexOf(element1), target: list.indexOf(element2), distance: distance}))
     console.log("Links")
     console.log(links)
 
@@ -113,7 +113,7 @@ function drawGraphInner(list, quantitativeComparisons){
                 // X position of start node on the X axis
             let end = x(nodesById[d.target].name)      
                 // X position of end node
-            return start + (end-start)/2 -4*getlength(d.weight)
+            return start + (end-start)/2 -4*getlength(d.distance)
         })
         .attr("y", function(d){ 
             let start = x(nodesById[d.source].name)    
@@ -122,7 +122,7 @@ function drawGraphInner(list, quantitativeComparisons){
                 // X position of end node
             return height-32-(Math.abs(start-end)/2)//height-30
         })
-        .text(function(d){ return(`${d.weight}`)})
+        .text(function(d){ return(`${d.distance}`)})
         .style("text-anchor", "top")
 
     

package.json

@@ -14,7 +14,9 @@
     "path": "^0.12.7",
     "react": "^17.0.1",
     "react-compound-slider": "^3.3.1",
-    "react-dom": "^17.0.1"
+    "react-dom": "^17.0.1",
+    "react-markdown": "^6.0.2",
+    "remark-gfm": "^1.0.0"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.4",

pages/_app.js

@@ -1,4 +1,6 @@
-import 'tailwindcss/tailwind.css'
+// import 'tailwindcss/tailwind.css'
+import "../styles/tailwind.css";
+import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />

pages/index.js

@@ -5,6 +5,8 @@ import path from 'path';
 import {DrawGraph} from '../lib/labeledgraph';
 import { SliderElement } from "../lib/slider.js";
 import {DisplayElement} from '../lib/displayElement'
+import {DisplayAsMarkdown} from '../lib/displayAsMarkdown'
+
 // Utilities
 
 let increasingList = (n) => Array.from(Array(n).keys())
@@ -40,6 +42,8 @@ let displayFunctionSlider = (value) => {
 
 };
 
+let nicelyFormatLinks = (quantitativeComparisons , list) => quantitativeComparisons.map(([element1, element2, distance]) => ({source: list.indexOf(element1), target: list.indexOf(element2), distance: distance}))
+
 // data
 export async function getStaticProps() {
   //getServerSideProps
@@ -164,9 +168,9 @@ export default function Home({listOfPosts}) {
 
   // Html
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen py-2">
+    <div className="flex flex-col items-center justify-center min-h-screen py-2 mt-10">
       <Head>
-        <title>Welcome to Hot Or Not</title>
+        <title>Utility Function Extractor</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
@@ -178,7 +182,7 @@ export default function Home({listOfPosts}) {
         <div className = {`${isListOrdered ? "hidden" : ""}`}>
           <div className="flex flex-wrap items-center max-w-4xl mt-6 sm:w-full mt-20">
               <div 
-                className="flex m-auto border-gray-300 border-4 h-64 w-64"
+                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">  
@@ -187,7 +191,7 @@ export default function Home({listOfPosts}) {
                 </p>
               </div>
               <div 
-                className="flex m-auto border-gray-300 border-4 h-64 w-64"
+                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">  
@@ -217,13 +221,19 @@ export default function Home({listOfPosts}) {
           quantitativeComparisons={quantitativeComparisons}>
         </DrawGraph>
 
-        <div className={`mt-10 ${isListOrdered? "": "hidden" }`}>
-          <p>{`Ordered list: ${JSON.stringify(orderedList, null, 4)}`}</p> 
+        
+      </main>
+
+      <div className={`inline text-left w-full flex-1 px-20 ${isListOrdered? "": "hidden" }`}>
+          <DisplayAsMarkdown markdowntext={"## Ordered list\n\n" + JSON.stringify(orderedList.map(i => listOfPosts[i]), null, 4)}></DisplayAsMarkdown>
+          <DisplayAsMarkdown markdowntext={"## Distances\n\n" + JSON.stringify(nicelyFormatLinks(quantitativeComparisons, list), null, 4)}></DisplayAsMarkdown>
+          {/*
                     <p>{`Binary comparisons: ${JSON.stringify(binaryComparisons, null, 4)}`}</p> 
           <p>{`Quantitative comparisons: ${JSON.stringify(quantitativeComparisons, null, 4)}`}</p> 
 
+          */}
+
         </div>
-      </main>
 
     </div>
   )

pages/listOfPosts.json

@@ -2,51 +2,71 @@
   {
     "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "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"
+    "url": "https://forum.effectivealtruism.org/posts/XHZJ9i7QBtAJZ6byW/shapley-values-better-than-counterfactuals",
+    "author": "Nuño Sempere",
+    "karma": 92
   }
 ]

styles/globals.css

@@ -0,0 +1,48 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #ECECF1;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  font-size: 24px;
+  font-weight: bold;
+  margin-bottom: 10px;
+  color: #1F2937;
+}
+
+h2 {
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  color: #1F2937;
+}
+
+h3 {
+  font-weight: bold;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  color: #1F2937;
+}
+
+a {
+  color: blue;
+  text-decoration: underline;
+}
+
+p, ul {
+  margin-bottom: 10px;
+}
+
+ul {
+  list-style-type: square;
+  margin-left: 20px;
+}

styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;