TreeMap fixes

README.md

@@ -16,7 +16,7 @@ This is the exact same version. Your bookmarks will still be saved in localStora
 
 But if you'd like faster performance or to self-host this, say in your company's intranet, you need a general-purpose computer (that means Linux/Windows/Mac but not crippled OSes like Android or iOS) with Datasette (which is an exploratory tool for SQLite databases) installed. You can find [installation instructions specific to your operating system here](https://docs.datasette.io/en/stable/installation.html).
 
-After cloning this git repository on your local machine, run `datasette . -o` in the top-level directory to start the datasette serve and open the app in your browser.
+After cloning this git repository on your local machine, run `npm run start` in the top-level directory to start the datasette server and open the app in your browser.
 
 ## To contribute:
 
@@ -26,7 +26,7 @@ This is a Wikipedia-scale project and we could use all kind of help:
 - To donate funds, [visit our OpenCollective](https://opencollective.com/learnawesome)
 - To report bugs, [create an issue](https://github.com/learn-awesome/learndb/issues)
 - To improve our topic taxonomy (improve sub-topics / prerequisites etc), [raise a PR on our Github with changes in `db/topics.csv` file](https://github.com/learn-awesome/learndb/tree/main/db)
-- To improve the data about learning resources, [raise a PR on our Github with changes in `db/items.csv` file](https://github.com/learn-awesome/learndb/tree/main/db)
+- To improve the data about learning resources, first read [db/README.md](db/README.md) and [raise a PR on our Github with changes in `db/items.csv` file](https://github.com/learn-awesome/learndb/tree/main/db)
 - To improve design and suggest features, [start a discussion](https://github.com/learn-awesome/learndb/discussions)
 - To fix technical bugs, [propose solutions on the issues](https://github.com/learn-awesome/learndb/issues)
 - For anything else, [start a discussion](https://github.com/learn-awesome/learndb/discussions)
@@ -34,8 +34,7 @@ This is a Wikipedia-scale project and we could use all kind of help:
 ## To develop:
 
 When you modify the *.csv files in `db/`, you should re-generate the sqlite database with `./generatedb.sh`.
-Run `npm run dev` to keep live-building the JS bundle as you edit the source code.
-And then run `datasette . -o` to open the app in your browser.
+Run `npm run dev` to keep live-building the JS bundle as you edit the source code. This automatically runs `datasette . -o` to open the app in your browser.
 
 You can install Datasette's Vercel plugin with: `datasette install datasette-publish-vercel`.
 To publish this, we first run `npm run build` followed by `npm run publish`.
@@ -44,7 +43,8 @@ To publish this, we first run `npm run build` followed by `npm run publish`.
 
 The dataset here is identical to https://learnawesome.org/. But there are no user accounts, no social features like learning feeds or ActivityPub. Users' bookmarks are saved in browser's localStorage.
 
-The source data is in `db/*.csv` files. This is imported into a sqlite database with `./generatedb.sh`.
+The source data is in `db/*.csv` files. The schema is described in [db/README.md](db/README.md).
+These CSV files get imported into a sqlite database with `./generatedb.sh`.
 We then rely on datasette to load this file and offer JSON APIs over HTTP.
 Settings and metadata are specified in `settings.json` and `metadata.json` which datasette uses.
 

db/README.md

@@ -0,0 +1,38 @@
+# CSV format
+
+## topics.csv
+
+`name` is used as primary key and therefore, must be unique and avoid uppercase and special characters other than hyphen and slash. Here are some examples: `physics`, `linear-algebra`, `nations/india`, `programming-languages/objective-c`.
+
+`display_name` is used as human-readable name and can preserve uppercase. For eg: `ADHD`.
+
+`parent_id` should be the name of the parent topic. This makes it possible to show a hierarchical view. If a topic does not have `parent_id`, it would be at the top-level but if it doesn't have children topics of its own, it will be clubbed under a dummy top-level topic called `Misc`.
+
+`sort_index` is an integer that's used for controlling the ordering in which topics are displayed.
+
+
+## items.csv
+
+`iid` should be a unique UUID. It is needed because `reviews.csv` needs to refer to items and there is no other natural primary key. Later, if we'd want to build collections of items, the same `iid` key would be helpful.
+
+`description` can contain markdown with multiple lines.
+
+`links` is an array value separated by `;`. Each item in this array a pair of `format` and `url` separated by `|`. For eg, `links` can have a value like this: `summary|https://sivers.org/book/Decisive;book|https://www.goodreads.com/book/show/15798078-decisive;summary|https://fourminutebooks.com/decisive-summary/`.
+
+We are considering including other fields like `ipfsHash` and `image` in each value of `links`. This decision is yet to be made.
+
+`topics` is a array value of topic names separated by `;`. These should exactly match `topics` table's `name` column.
+
+`creators` is arbitrary string for now. For eg: `Charles Darwin`. In future, this might become a full record on its own including fields like `name`,`website`,`twitter`,`email`. In that case, we will have to somehow figure out unique key for each creator that could serve the role of primary key and foreign key.
+
+`difficulty` must be empty or one of these: `childlike`, `beginner`, `intermediate`, `advanced`, `research`.
+
+`rating` is on a 5.0 point scale with up to two decimal places allowed. This is a curated value and should not be simply copied from external sources.
+
+`tags` can describe quality: `visual`, `entertaining`, `challenging`, `inspirational`, `interactive`.
+
+## reviews.csv
+
+`item_id` is a foreign key to `items.csv`.
+`by` is the name of the person or item.
+`blurb` is small description in markdown format.

package.json

@@ -6,7 +6,7 @@
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
+    "start": "datasette . -o",
     "publish": "datasette publish vercel learn.db --project learnawesome -m metadata.json --template-dir templates --static static:static --setting max_returned_rows 20000"
   },
   "devDependencies": {

rollup.config.js

@@ -20,7 +20,7 @@ function serve() {
 	return {
 		writeBundle() {
 			if (server) return;
-			server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+			server = require('child_process').spawn('npm', ['run', 'start'], {
 				stdio: ['ignore', 'inherit', 'inherit'],
 				shell: true
 			});

static/map.html

@@ -21,7 +21,7 @@ body {
 }
 
 text {
-  pointer-events: none;
+  cursor: pointer;
 }
 
 .grandparent text {
@@ -51,6 +51,16 @@ rect.parent,
   cursor: pointer;
 }
 
+.leaf rect.parent {
+  cursor: pointer;
+  fill: #c9d9ff;
+}
+
+.leaf rect.parent:hover {
+  cursor: pointer;
+  fill: #d9e9ff;
+}
+
 .children rect.parent {
   fill: #99F6E4;
   fill-opacity: .5;
@@ -203,7 +213,11 @@ grandparent.append("text")
       .classed("children", true)
       .on("click", transition);
 
-    g.selectAll(".child")
+    g.filter(function(d) { return !d._children; })
+      .classed("leaf", true)
+      .on("click",(n) => { window.parent.location.href = "/#/topic/" + n.name;});
+
+    g.filter(function(d) { return d._children; }).selectAll(".child")
       .data(function(d) { return d._children || [d]; })
       .enter().append("rect")
       .attr("class", "child")
@@ -217,6 +231,7 @@ grandparent.append("text")
 
     g.append("text")
       .attr("dy", ".75em")
+      .on("click", (n) => { window.parent.location.href = "/#/topic/" + n.name;})
       .text(function(d) { return d.name.split('{')[0].split('(')[0]
 			  .split('[')[0]; })
       .call(text);
@@ -260,7 +275,8 @@ grandparent.append("text")
 
   function text(text) {
     text.attr("x", function(d) { return x(d.x) + 10; })
-      .attr("y", function(d) { return y(d.y) + 10; });
+      .attr("y", function(d) { return y(d.y) + 10; })
+      .attr("text-decoration","underline");
   }
 
   function rect(rect) {