From 73a709ff92484f22d3aa598fcae84957e7375c8c Mon Sep 17 00:00:00 2001
From: Suzanne Soy <ligo@suzanne.soy>
Date: Wed, 23 Jun 2021 17:38:59 +0100
Subject: [PATCH] Suggestions from Gabriel: Fixed typo, added legend for the
 graph view (also gives a hint at the conventions for the table view), renamed
 sha1 to sha1_from_bytes_returns_hex to make the input & output types clear

---
 git-tutorial.css |  7 ++++--
 git-tutorial.js  | 56 +++++++++++++++++++++++++++++++++++++-----------
 index.html       |  8 +++----
 3 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/git-tutorial.css b/git-tutorial.css
index ef6684c..b732422 100644
--- a/git-tutorial.css
+++ b/git-tutorial.css
@@ -101,7 +101,9 @@ article#git-tutorial .onlytoc { display: none; }
 /* Graph view */
 
 #git-tutorial .dimmed_previous:hover [stroke] { stroke: black; }
-#git-tutorial .dimmed_previous:hover [fill=#c0c0c0] { fill: black; }
+#git-tutorial .dimmed_previous:hover [fill=#808080] { fill: black; }
+#git-tutorial .dimmed_previous_directory [stroke] { stroke: darkcyan; }
+#git-tutorial .dimmed_previous_directory:hover [fill=#80c5c5] { fill: darkcyan; }
 #git-tutorial .graph-view { text-align: center; }
 #git-tutorial .graph-view-tooltips { white-space: nowrap; margin: 1em 0.3em; background: #f8f8f8; border: thin solid #444; text-align: left; }
 #git-tutorial .graph-view-tooltips > * { display: inline-block; white-space: normal; width: 100%; margin-right: -100%; vertical-align: middle; }
@@ -109,4 +111,5 @@ article#git-tutorial .onlytoc { display: none; }
 #git-tutorial .graph-view-tooltips tr { border: none; }
 #git-tutorial .graph-view-tooltips tr th { opacity: 1; border: none; border-bottom:thin solid #444; text-align: left; }
 #git-tutorial .graph-view-tooltips tr td { opacity: 1; border: none; border-top:thin solid: #444; }
-#git-tutorial .graph-view-tooltips > .graph-view-tooltips-default { color: #444; text-align: center; }
\ No newline at end of file
+#git-tutorial .graph-view-tooltips > .graph-view-tooltips-default { color: #444; text-align: center; }
+#git-tutorial .graph-view .legend { padding: 0.8em 0.3em 0.3em; }
\ No newline at end of file
diff --git a/git-tutorial.js b/git-tutorial.js
index 76ec903..7481199 100644
--- a/git-tutorial.js
+++ b/git-tutorial.js
@@ -33,7 +33,7 @@ function ___hex_to_bin(hex) {
 }
 
 // These three functions are accessible in the user scripts.
-sha1 = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); };
+sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); };
 deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); }
 inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); }
 
@@ -380,6 +380,8 @@ function ___specialchars_and_colour_and_hex(s) {
     return { type: 'commit', target_hashes: target_hashes, html: html };
   } else if (s.substr(0, 5) == "blob ") {
     return { type: 'blob', target_hashes: target_hashes, html: ___specialchars_and_colour(s) };
+  } else if (s.substr(0, 11) == "type length") {
+    return { type: 'example object', target_hashes: target_hashes, html: ___specialchars_and_colour(s) };
   } else {
     return { type: 'regular file', target_hashes: target_hashes, html: ___specialchars_and_colour(s) };
   }
@@ -618,17 +620,23 @@ function ___file_contents_to_graphview(filesystem, path_of_this_file, s) {
   for (var i = 0; i < paths.length; i++) {
     if (___is_hashed_object_path(paths[i])) {
       if (target_hashes.indexOf(___get_hashed_object_path(paths[i])) != -1) {
-        gv += ___quote_gv(path_of_this_file) + ' -> ' + ___quote_gv(paths[i]);
+        gv += ___quote_gv(path_of_this_file) + ' -> ' + ___quote_gv(paths[i]) + ' ['+___ref_edge_style+']';
       }
     }
     if (___is_ref_path(paths[i])) {
       if (target_hashes.indexOf(___get_ref_path(paths[i])) != -1) {
-        gv += ___quote_gv(path_of_this_file) + ' -> ' + ___quote_gv(paths[i]);
+        gv += ___quote_gv(path_of_this_file) + ' -> ' + ___quote_gv(paths[i]) + ' ['+___ref_edge_style+']';
       }
     }
   }
   return { gv:gv, type: type };
-}  
+}
+
+var ___directory_edge_style = 'color="#c0c0ff", style=dashed';
+var ___ref_edge_style = 'color="red", penwidth=2';
+var ___previous_file_node_style = 'color = "#808080", fontcolor = "#808080", class = dimmed_previous';
+var ___previous_directory_node_style = 'color = "#80c5c5", fontcolor = "#80c5c5", class = dimmed_previous_directory';
+var ___directory_node_style = 'color = "#008b8b", fontcolor = "#008b8b"'; // darkcyan = #008b8b
 
 function ___quote_gv(name) {
   console.log('TODO: escape GV')
@@ -651,7 +659,7 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) {
   var parent = components.slice(0, components.length - 1).join('/');
   if (parent != '') {
     if (filesystem.hasOwnProperty(parent)) {
-      gv += ___quote_gv(parent) + ' -> ' + ___quote_gv(x[0]) + '[color="#c0c0ff"];\n';
+      gv += ___quote_gv(parent) + ' -> ' + ___quote_gv(x[0]) + ' ['+___directory_edge_style+'];\n';
     } else {
       shortname = parent + '/' + shortname;
     }
@@ -660,24 +668,28 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) {
   // Put a transparent background to make the nodes clickable.
   gv += ___quote_gv(x[0]) + ' [ style="filled", fillcolor="transparent" ]';
 
-  // dim nodes that existed in the previous_filesystem
-  if (previous_filesystem.hasOwnProperty(x[0])) {
-    gv += ___quote_gv(x[0]) + ' [ color = gray, fontcolor = gray, class = dimmed_previous ]';
-  }
-
   // contents of the file as a tooltip:
-  gv += ___quote_gv(x[0]) + ' [ tooltip = ' + '"CONTENTS x[1]"' + ' ]';
+  gv += ___quote_gv(x[0]) + ' [ tooltip = ' + ___quote_gv(x[0]) + ' ]';
 
   var id = ___global_unique_id++;
   gv += ___quote_gv(x[0]) + ' [ id=' + id + ' ]';
 
   if (x[1] === null) {
     shortname = shortname + '\ndirectory';
-    // This is a directory, nothing else to do.
+    if (previous_filesystem.hasOwnProperty(x[0])) {
+      // dim nodes that existed in the previous_filesystem
+      gv += ___quote_gv(x[0]) + ' [' + ___previous_directory_node_style + ']';
+    } else {
+      gv += ___quote_gv(x[0]) + ' [ ' + ___directory_node_style + ' ]';
+    }
   } else {
     var contents = ___file_contents_to_graphview(filesystem, x[0], x[1]);
     shortname = shortname + '\n(' + contents.type + ')';
     gv += contents.gv;
+    if (previous_filesystem.hasOwnProperty(x[0])) {
+      // dim nodes that existed in the previous_filesystem
+      gv += ___quote_gv(x[0]) + ' [' + ___previous_file_node_style + ']';
+    }
   }
 
   // shortname as a label
@@ -730,7 +742,25 @@ function ___filesystem_to_graphview(filesystem, previous_filesystem) {
   var html = '';
   html += '<div class="graph-view-tooltips hilite-nodest">';
   var entry_hover_default_id = ___global_unique_id++;
-  html += '<div class="graph-view-tooltips-default" id="'+entry_hover_default_id+'">Hover a node to view its contents, click or tap to pin it.</div>'
+  html += '<div class="graph-view-tooltips-default" id="'+entry_hover_default_id+'">';
+  html += 'Hover a node to view its contents, click or tap to pin it.';
+  html += '<div class="legend">';
+  html += '<div class="legend-title">Legend:</div>';
+  html += Viz(
+    'digraph legend {\n' +
+    '  bgcolor=transparent;\n' +
+    '  "parent"   [label="parent directory",    style=filled, fillcolor=white, ' + ___directory_node_style + '];\n' +
+    '  "child"    [label="child",               style=filled, fillcolor=white];\n' +
+    '  "ref"      [label="reference to abcdef", style=filled, fillcolor=white];\n' +
+    '  "abcdef"   [label="…/.git/ab/cdef",      style=filled, fillcolor=white];\n' +
+    '  "existing" [label=<existing file/<font color="#80c5c5">dir</font>>,   style=filled, fillcolor=white, ' + ___previous_file_node_style + '];\n' +
+    '  "new"      [label="new file/dir",        style=filled, fillcolor=white];\n' +
+    '  "parent" -> "child" ['+___directory_edge_style+'];\n' +
+    '  "ref" -> "abcdef" ['+___ref_edge_style+'];\n' +
+    '  "existing" -> "new" [style=invis];\n' +
+    '}');
+  html += '</div>';
+  html += '</div>';
   var gv = "digraph graph_view {";
   var ids = [];
   var entries = ___sort_filesystem_entries(filesystem);
diff --git a/index.html b/index.html
index 527f835..542c371 100644
--- a/index.html
+++ b/index.html
@@ -211,7 +211,7 @@ copy will be stored in <code>.git/objects/0a/1bd…</code></p>
 <script class="example">
   ___example('example-blob-object-template', function() {
     var object_contents = 'type length\000Contents of path_or_data';
-    var hash = sha1(object_contents);
+    var hash = sha1_from_bytes_returns_hex(object_contents);
     var path = ___h2f(hash);
     write(path, deflate(object_contents));
     return { filesystem: filesystem, names: [path], previous_names: [] };
@@ -247,7 +247,7 @@ function hash_object(must_write, type, is_data, path_or_data) {
 
   object_contents = type + ' ' + data.length + '\0' + data;
 
-  var hash = sha1(object_contents);
+  var hash = sha1_from_bytes_returns_hex(object_contents);
 
   if (must_write) {
     mkdir(join_paths(current_directory, '.git/objects'));
@@ -312,7 +312,7 @@ files, but it would be nice to also store the filenames.
 This is done by creating a <em>tree</em> object</p>
 
 <p>A tree object can contain files (by associating the blob's hash to its name), or directories (by associating the hash of other subtrees to their name).
-  The mode (<code>100644</code> for the file and <code>40000</code> for the folder) incidates the permissions, and is given in octal using <a href="https://unix.stackexchange.com/a/145118/19059">the values used by *nix</a></p>
+  The mode (<code>100644</code> for the file and <code>40000</code> for the folder) indicates the permissions, and is given in octal using <a href="https://unix.stackexchange.com/a/145118/19059">the values used by *nix</a></p>
 
 <div id="example-tree-objects"></div>
 <script class="example">
@@ -1322,7 +1322,7 @@ function store_index(paths) {
     index += entry;
   }
 
-  index += hex_to_raw_bytes(sha1(index));
+  index += hex_to_raw_bytes(sha1_from_bytes_returns_hex(index));
 
   write(join_paths(current_directory, '.git/index'), index)
 }