sidebar POC WIP

src/public/javascripts/services/sidebar.js

@@ -3,12 +3,12 @@ import LinkMapWidget from "../widgets/link_map.js";
 
 const WIDGET_TPL = `
 <div class="card widget">
-    <div class="card-header">
-        <h5 class="mb-0">
-            <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#collapseOne">
-                Collapsible Group Item
-            </button>
-        </h5>
+    <div class="card-header">        
+        <button class="btn btn-sm widget-title" data-toggle="collapse" data-target="#collapseOne">
+            Collapsible Group Item
+        </button>
+        
+        <div class="widget-header-actions"></div>
     </div>
 
     <div id="collapseOne" class="collapse show body-wrapper">

src/public/javascripts/widgets/link_map.js

@@ -1,4 +1,5 @@
 import libraryLoader from "../services/library_loader.js";
+import linkMapDialog from "../dialogs/link_map.js";
 import server from "../services/server.js";
 import treeCache from "../services/tree_cache.js";
 import linkService from "../services/link.js";
@@ -31,6 +32,14 @@ class LinkMapWidget {
         this.$widget = $widget;
         this.$title = this.$widget.find('.widget-title');
         this.$title.text("Link map");
+        this.$headerActions = this.$widget.find('.widget-header-actions');
+
+        const $showFullButton = $("<a>").append("show full").addClass('widget-header-action');
+        $showFullButton.click(() => {
+            linkMapDialog.showDialog();
+        });
+
+        this.$headerActions.append($showFullButton);
     }
 
     async renderBody() {
@@ -61,7 +70,8 @@ class LinkMapWidget {
 
         const links = await server.post(`notes/${noteId}/link-map`, {
             linkTypes,
-            maxNotes
+            maxNotes,
+            maxDepth: 1
         });
 
         const noteIds = new Set(links.map(l => l.noteId).concat(links.map(l => l.targetNoteId)));
@@ -190,7 +200,7 @@ class LinkMapWidget {
         this.$linkMapContainer.empty();
 
         // reset zoom/pan
-        this.pzInstance.zoomTo(0, 0, 0.5);
+        this.pzInstance.zoomTo(0, 0, 0.7);
         this.pzInstance.moveTo(0, 0);
     }
 

src/public/stylesheets/style.css

@@ -123,30 +123,36 @@ ul.fancytree-container {
     font-size: 90%;
 }
 
-.note-detail-sidebar .widget-title {
-    width: 100%;
-    border-radius: 0;
-    padding: 0;
-    border-left: 0;
-    border-right: 0;
-}
-
 .note-detail-sidebar .card {
     border: 0;
 }
 
 .note-detail-sidebar .card-header {
     background: inherit;
+    padding: 5px;
+    width: 100%;
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    border-width: 1px 0 1px 0;
+    border-style: solid;
+    display: flex;
+    justify-content: space-between;
+}
+
+.note-detail-sidebar .widget-title {
+    border-radius: 0;
     padding: 0;
     border: 0;
+    background: inherit;
+    font-weight: bold;
 }
 
-.note-detail-sidebar .card-header button {
-
+.note-detail-sidebar .widget-header-actions {
 }
 
-.note-detail-sidebar .card-header h5 {
-    font-size: 1rem;
+.note-detail-sidebar .widget-header-action {
+    color: var(--link-color) !important;
+    cursor: pointer;
 }
 
 .note-detail-sidebar .card-body {

src/routes/api/link_map.js

@@ -19,14 +19,21 @@ async function getLinks(noteIds, linkTypes) {
 
 async function getLinkMap(req) {
     const {noteId} = req.params;
-    const {linkTypes, maxNotes} = req.body;
+    const {linkTypes, maxNotes, maxDepth} = req.body;
 
     let noteIds = new Set([noteId]);
     let links = [];
 
+    let depth = 0;
+
     while (true) {
-        const newLinks = await getLinks(noteIds, linkTypes);
-        const newNoteIds = new Set(newLinks.map(l => l.noteId).concat(newLinks.map(l => l.targetNoteId)));
+        links = await getLinks(noteIds, linkTypes);
+
+        if (depth === maxDepth) {
+            break;
+        }
+
+        const newNoteIds = new Set(links.map(l => l.noteId).concat(links.map(l => l.targetNoteId)));
 
         if (newNoteIds.size === noteIds.size) {
             // no new note discovered, no need to search any further
@@ -39,7 +46,8 @@ async function getLinkMap(req) {
         }
 
         noteIds = newNoteIds;
-        links = newLinks;
+
+        depth++;
     }
 
     // keep only links coming from and targetting some note in the noteIds set