FIX: Representing a diary as a list or a network of memos (#55).

Given a network is heavier to generate, a list is used as a default to browse memos.
Hypertopic · Mar 26, 2017 · 08de6ad · 08de6ad
1 parent a6485a8
commit 08de6ad
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 78 deletions.
diff --git a/lists/diary.js b/lists/diary.js
@@ -18,7 +18,6 @@ function(head, req) {
       case ('M'):
         var name = row.value.name.replace(/"/g, '\\"').replace(/\s/g, ' ');
         memos[row.value.id] = row.value.name;
-        if (name.length > 25) {var name = name.substring(0, 25)+'...';}
         data.memos.push({
           diary: row.key,
           id: row.value.id,

diff --git a/templates/diary.html b/templates/diary.html
@@ -11,6 +11,8 @@
       <header>
         <div id="header" class="menu">
           <button type="button" id="diaries">{{i18n.i_diaries}}</button>
+          <button type="button" id="list">{{i18n.i_list}}</button>
+          <button type="button" id="drawNetwork">{{i18n.i_network}}</button>
           {{i18n.i_sort}}
           <select id="sort">
             <option value="name">{{i18n.i_title}}</option>
@@ -69,11 +71,18 @@ <h1>{{diary_name}}</h1>
           </li>
         {{/activity}}
         </ul></div>
-        <div id="network"></div>
+        <div id="network" hidden="hidden"></div>
         <ul id="memos" hidden="hidden">
+          {{#memos}}
+          <li class="{{type}}"> {{date}}&nbsp;–
+            <a href="{{id}}">{{name}}</a>
+          </li>
+          {{/memos}}
+        </ul>
+        <ul id="selectable-memos" hidden="hidden">
           {{#memos}}
           <li class="{{type}}"> <input type="checkbox" id="{{id}}" name="{{rev}}" />{{date}}&nbsp;–
-            <a href="{{id}}" class="memo">{{name}}</a>
+            <a class="memo">{{name}}</a>
           </li>
           {{/memos}}
         </ul>
@@ -90,92 +99,27 @@ <h1>{{diary_name}}</h1>
   <script>
   $(document).ready(function() {
     resetUI();
-    var nodes = [];
-    var edges = [];
-    var diagrams = [];
-    var graphs = [];
-    {{#memos}}
-      memo_id = "{{id}}";
-      memo_type = "{{type}}";
-      memo_name = "{{{name}}}";
-      memo_date = "{{date}}";
-      switch (memo_type) {
-        case "field":
-          node_level = '2';
-          break;
-        case "coding":
-          node_level = '3';
-          break;
-        case "theoretical":
-          node_level = '0';
-          break;
-        case "diagram":
-          diagrams.push(memo_id);
-          node_level = '4';
-          break;
-        case "operational":
-          node_level = '1';
-          break;
-        case "graph":
-          graphs.push(memo_id);
-          node_level = '5';
-          break;
-        case "storyline":
-          node_level = '6';
-          break;
-      }
-      nodes.push({id: memo_id, shape: 'image', image: '../../style/'+memo_type+'.png', label: memo_date+"\n"+memo_name, y: memo_date, level:node_level });
-      {{#groundings}}
-        if (memo_type == "field") {
-           edges.push({from: memo_id, to: "{{.}}", arrows:'from'});
-        } else {
-           edges.push({from: "{{.}}", to: memo_id, arrows:'to'});
-        }
-      {{/groundings}}
-    {{/memos}}
-    var container = document.getElementById('network');
-    var data = {
-      nodes: nodes,
-      edges: edges
-    };
-    var options = {
-      layout: {
-        hierarchical: {
-          direction: "LR",
-          levelSeparation: 250
-        }
-      },
-      interaction: {
-        navigationButtons: true,
-        keyboard: true
-      }
-    };
-    network = new vis.Network(container, data, options);
-    network.on('click', function (selected) {
-      if (selected.nodes[0].length == 32) {
-        if($.inArray(selected.nodes[0], diagrams) != -1) {
-          self.location = '../../diagram/{{diary}}/'+selected.nodes[0];
-        } else if($.inArray(selected.nodes[0], graphs) != -1) {
-          self.location = '../../graph/{{diary}}/'+selected.nodes[0];
-        } else {
-          self.location = selected.nodes[0];
-        }
-      }
-    });
   });
 
   $('#header')
     .on('click', '#diaries', function() {
       self.location = '..';
     })
+    .on('click', '#list', function() {
+      resetUI();
+    })
+    .on('click', '#drawNetwork', function() {
+      drawNetwork();
+    })
     .on('click', '#patterns', function() {
       self.location = '../../kwic/{{diary}}';
     });
 
   $('#footer')
     .on('click', '#show_delete', function() {
       $("#network").hide();
-      $("#memos").show();
+      $("#memos").hide();
+      $("#selectable-memos").show();
       $("#footer").html(
         '<button id="cancel" type="button">{{i18n.i_cancel}}</button>'
         + '<input id="toggle" type="checkbox">{{i18n.i_select}}</button>'
@@ -257,14 +201,103 @@ <h1>{{diary_name}}</h1>
   });
 
   function resetUI() {
-    $("#memos").hide();
-    $("#network").show();
+    var listed = $("#memos>li");
+    listed.each(function() {
+      var type = $(this).attr('class');
+      switch(type){
+        case "graph":
+        case "diagram":
+          $(this).find('a').attr('href', '../../'+type+'/{{diary}}/'+$(this).find('a').attr('href'));
+          break;
+      }
+    });
+    $("#memos").show();
+    $("#selectable-memos").hide();
+    $("#network").hide();
     $("#footer").html(
       '<button type="button" id="show_delete">{{i18n.i_delete}}...</button>'
       + '<a href="https://github.com/Hypertopic/Cassandre/wiki">Cassandre</a>'
     );
   }
 
+  function drawNetwork() {
+    var nodes = [];
+    var edges = [];
+    var diagrams = [];
+    var graphs = [];
+    {{#memos}}
+      memo_id = "{{id}}";
+      memo_type = "{{type}}";
+      memo_name = "{{{name}}}";
+      memo_date = "{{date}}";
+      switch (memo_type) {
+        case "field":
+          node_level = '2';
+          break;
+        case "coding":
+          node_level = '3';
+          break;
+        case "theoretical":
+          node_level = '0';
+          break;
+        case "diagram":
+          diagrams.push(memo_id);
+          node_level = '4';
+          break;
+        case "operational":
+          node_level = '1';
+          break;
+        case "graph":
+          graphs.push(memo_id);
+          node_level = '5';
+          break;
+        case "storyline":
+          node_level = '6';
+          break;
+      }
+      if (memo_name.length > 25) {
+        memo_name = memo_name.substring(0, 12)+memo_name.substring(12, 30).replace(/\s/,"\n")+'...';
+      }
+      nodes.push({id: memo_id, shape: 'image', image: '../../style/'+memo_type+'.png', label: memo_name+"\n"+memo_date, y: memo_date, level:node_level });
+      {{#groundings}}
+        if (memo_type == "field") {
+           edges.push({from: memo_id, to: "{{.}}", arrows:'from'});
+        } else {
+           edges.push({from: "{{.}}", to: memo_id, arrows:'to'});
+        }
+      {{/groundings}}
+    {{/memos}}
+    var container = document.getElementById('network');
+    var data = {
+      nodes: nodes.reverse(),
+      edges: edges.reverse()
+    };
+    var options = {
+      layout: {
+        hierarchical: {
+        }
+      },
+      interaction: {
+        navigationButtons: true,
+        keyboard: true
+      }
+    };
+    network = new vis.Network(container, data, options);
+    network.on('click', function (selected) {
+      if (selected.nodes[0].length == 32) {
+        if($.inArray(selected.nodes[0], diagrams) != -1) {
+          self.location = '../../diagram/{{diary}}/'+selected.nodes[0];
+        } else if($.inArray(selected.nodes[0], graphs) != -1) {
+          self.location = '../../graph/{{diary}}/'+selected.nodes[0];
+        } else {
+          self.location = selected.nodes[0];
+        }
+      }
+    });
+    $("#memos").hide();
+    $("#network").show();
+  }
+
   var reload = function() {
     location.reload();
   };