fixes & tweaks

src/public/javascripts/dialogs/options/sidebar.js

@@ -136,7 +136,11 @@ export default class SidebarOptions {
         // need to find them dynamically since they change
         const $sidebar = $(".note-detail-sidebar");
 
+        const $content = $(".note-detail-content");
+
         $sidebar.css("width", sidebarWidthPercent + '%');
         $sidebar.css("min-width", sidebarMinWidth + 'px');
+
+        $content.css("width", (100 - sidebarWidthPercent) + '%');
     }
 }

src/public/javascripts/services/link_map.js

@@ -63,9 +63,10 @@ export default class LinkMap {
 
         const layout = new Springy.Layout.ForceDirected(
             graph,
-            400.0, // Spring stiffness
+            // param explanation here: https://github.com/dhotson/springy/issues/58
+            800.0, // Spring stiffness
             400.0, // Node repulsion
-            0.5 // Damping
+            0.2 // Damping
         );
 
         const getNoteBox = noteId => {
@@ -123,7 +124,12 @@ export default class LinkMap {
                     type: 'link'
                 });
 
+                if (connection) {
                     connection.canvas.id = connectionId;
+                }
+                else {
+                    console.log(`connection not created for`, edge);
+                }
             },
             (node, p) => {
                 const $noteBox = getNoteBox(node.id);

src/public/javascripts/services/sidebar.js

@@ -53,6 +53,10 @@ class Sidebar {
             return;
         }
 
+        for (const widget of this.widgets) {
+            widget.cleanup();
+        }
+
         this.widgets = [];
         this.$widgetContainer.empty();
 

src/public/javascripts/widgets/link_map.js

@@ -30,12 +30,18 @@ class LinkMapWidget extends StandardWidget {
 
         const LinkMapServiceClass = (await import('../services/link_map.js')).default;
 
-        const linkMapService = new LinkMapServiceClass(this.ctx.note, $linkMapContainer, {
+        this.linkMapService = new LinkMapServiceClass(this.ctx.note, $linkMapContainer, {
             maxDepth: 1,
             zoom: 0.7
         });
 
-        await linkMapService.render();
+        await this.linkMapService.render();
+    }
+
+    cleanup() {
+        if (this.linkMapService) {
+            this.linkMapService.cleanup();
+        }
     }
 }
 

src/public/javascripts/widgets/standard_widget.js

@@ -104,6 +104,8 @@ class StandardWidget {
     }
 
     syncDataReceived(syncData) {}
+
+    cleanup() {}
 }
 
 export default StandardWidget;

src/public/javascripts/widgets/what_links_here.js

@@ -6,6 +6,16 @@ class WhatLinksHereWidget extends StandardWidget {
 
     getMaxHeight() { return "200px"; }
 
+    getHeaderActions() {
+        const $showFullButton = $("<a>").append("show link map").addClass('widget-header-action');
+        $showFullButton.click(async () => {
+            const linkMapDialog = await import("../dialogs/link_map.js");
+            linkMapDialog.showDialog();
+        });
+
+        return [$showFullButton];
+    }
+
     async doRenderBody() {
         const targetRelations = await this.ctx.note.getTargetRelations();
 

src/public/stylesheets/desktop.css

@@ -345,6 +345,57 @@ body {
     transition: transform 120ms ease-in-out;
 }
 
+.hide-sidebar-button {
+    color: var(--main-text-color);
+}
+
+.note-detail-sidebar {
+    overflow: auto;
+    padding-top: 12px;
+    padding-left: 7px;
+    font-size: 90%;
+}
+
+.note-detail-sidebar .card {
+    border: 0;
+}
+
+.note-detail-sidebar .card-header {
+    background: inherit;
+    padding: 5px 10px 5px 10px;
+    width: 99%; /* to give minimal right margin */
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    border-width: 1px 0 1px 0;
+    border-radius: 3px;
+    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 .widget-header-actions {
+    padding-right: 10px;
+}
+
+.note-detail-sidebar .widget-header-action {
+    color: var(--link-color) !important;
+    cursor: pointer;
+}
+
+.note-detail-sidebar .card-body {
+    width: 100%;
+    padding: 8px;
+    border: 0;
+}
+
 #widgets-configuration {
     margin: 0;
 }

src/public/stylesheets/style.css

@@ -100,54 +100,6 @@ ul.fancytree-container {
     height: 100%;
 }
 
-.note-detail-sidebar {
-    min-width: 350px;
-    width: 50%;
-    overflow: auto;
-    padding-top: 12px;
-    padding-left: 7px;
-    font-size: 90%;
-}
-
-.note-detail-sidebar .card {
-    border: 0;
-}
-
-.note-detail-sidebar .card-header {
-    background: inherit;
-    padding: 3px 10px 3px 10px;
-    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 .widget-header-actions {
-    padding-right: 10px;
-}
-
-.note-detail-sidebar .widget-header-action {
-    color: var(--link-color) !important;
-    cursor: pointer;
-}
-
-.note-detail-sidebar .card-body {
-    width: 100%;
-    padding: 8px;
-    border: 0;
-}
-
 .note-detail-component-wrapper {
     flex-grow: 100;
     position: relative;
@@ -866,7 +818,3 @@ a.external:after, a[href^="http://"]:after, a[href^="https://"]:after {
 .modal-header {
     padding: 0.7rem 1rem !important; /* make modal header padding slightly smaller */
 }
-
-.hide-sidebar-button {
-    color: var(--main-text-color);
-}

src/routes/index.js

@@ -23,6 +23,7 @@ async function index(req, res) {
         rightPaneWidthPercent: 100 - parseInt(options.leftPaneWidthPercent),
         sidebarMinWidth: parseInt(options.sidebarMinWidth),
         sidebarWidthPercent: parseInt(options.sidebarWidthPercent),
+        contentWidthPercent: 100 - parseInt(options.sidebarWidthPercent),
         mainFontSize: parseInt(options.mainFontSize),
         treeFontSize: parseInt(options.treeFontSize),
         detailFontSize: parseInt(options.detailFontSize),

src/views/tabs.ejs

@@ -4,7 +4,7 @@
 
 <div id="note-tab-container">
     <div class="note-tab-content note-tab-content-template">
-        <div class="note-detail-content">
+        <div class="note-detail-content" style="width: <%= contentWidthPercent %>%">
             <% include title.ejs %>
 
             <div class="note-detail-script-area"></div>