small visual tweaks to link map, including displaying the note icon

src/public/app/entities/note_short.js

@@ -5,6 +5,16 @@ import noteAttributeCache from "../services/note_attribute_cache.js";
 const LABEL = 'label';
 const RELATION = 'relation';
 
+const NOTE_TYPE_ICONS = {
+    "file": "bx bx-file",
+    "image": "bx bx-image",
+    "code": "bx bx-code",
+    "render": "bx bx-extension",
+    "search": "bx bx-file-find",
+    "relation-map": "bx bx-map-alt",
+    "book": "bx bx-book"
+};
+
 /**
  * FIXME: since there's no "full note" anymore we can rename this to Note
  *
@@ -254,6 +264,31 @@ class NoteShort {
         return this.getAttributes(LABEL, name);
     }
 
+    getIcon(isFolder = false) {
+        const iconCassLabels = this.getLabels('iconClass');
+
+        if (iconCassLabels.length > 0) {
+            return iconCassLabels.map(l => l.value).join(' ');
+        }
+        else if (this.noteId === 'root') {
+            return "bx bx-chevrons-right";
+        }
+        else if (this.type === 'text') {
+            if (isFolder) {
+                return "bx bx-folder";
+            }
+            else {
+                return "bx bx-note";
+            }
+        }
+        else if (this.type === 'code' && this.mime.startsWith('text/x-sql')) {
+            return "bx bx-data";
+        }
+        else {
+            return NOTE_TYPE_ICONS[this.type];
+        }
+    }
+
     /**
      * @param {string} [name] - relation name to filter
      * @returns {Attribute[]} all note's relations (attributes with type relation), including inherited ones

src/public/app/services/link_map.js

@@ -63,6 +63,27 @@ export default class LinkMap {
             noteIds.add(this.note.noteId);
         }
 
+        await treeCache.getNotes(Array.from(noteIds));
+
+        // pre-fetch the link titles, it's important to have hte construction afterwards synchronous
+        // since jsPlumb caculates width of the element
+        const $linkTitles = {};
+
+        for (const noteId of noteIds) {
+            const note = await treeCache.getNote(noteId);
+
+            $linkTitles[noteId] = await linkService.createNoteLink(noteId, {title: note.title});
+
+            $linkTitles[noteId].on('click', e => {
+                try {
+                    $linkTitles[noteId].tooltip('dispose');
+                }
+                catch (e) {}
+
+                linkService.goToLink(e);
+            })
+        }
+
         // preload all notes
         const notes = await treeCache.getNotes(Array.from(noteIds), true);
 
@@ -98,18 +119,15 @@ export default class LinkMap {
                 .addClass("note-box")
                 .prop("id", noteBoxId);
 
-            linkService.createNoteLink(noteId, {title: note.title}).then($link => {
+            const $link = $linkTitles[noteId];
-                $link.on('click', e => {
-                    try {
-                        $link.tooltip('dispose');
-                    }
-                    catch (e) {}
 
-                    linkService.goToLink(e);
+            $noteBox.append(
-                });
+                $("<span>")
-
+                    .addClass(note.getIcon()),
-                $noteBox.append($("<span>").addClass("title").append($link));
+                $("<span>")
-            });
+                    .addClass("title")
+                    .append($link)
+            );
 
             if (noteId === this.note.noteId) {
                 $noteBox.addClass("link-map-active-note");
@@ -273,4 +291,4 @@ export default class LinkMap {
     noteIdToId(noteId) {
         return this.linkMapContainerId + "-note-" + noteId;
     }
-}
+}

src/public/app/widgets/note_tree.js

@@ -159,16 +159,6 @@ const TPL = `
 </div>
 `;
 
-const NOTE_TYPE_ICONS = {
-    "file": "bx bx-file",
-    "image": "bx bx-image",
-    "code": "bx bx-code",
-    "render": "bx bx-extension",
-    "search": "bx bx-file-find",
-    "relation-map": "bx bx-map-alt",
-    "book": "bx bx-book"
-};
-
 export default class NoteTreeWidget extends TabAwareWidget {
     constructor(treeName) {
         super();
@@ -562,40 +552,14 @@ export default class NoteTreeWidget extends TabAwareWidget {
         return noteList;
     }
 
-    getIconClass(note) {
-        const labels = note.getLabels('iconClass');
-
-        return labels.map(l => l.value).join(' ');
-    }
-
     getIcon(note, isFolder) {
         const hoistedNoteId = hoistedNoteService.getHoistedNoteId();
 
-        const iconClass = this.getIconClass(note);
+        if (note.noteId !== 'root' && note.noteId === hoistedNoteId) {
-
-        if (iconClass) {
-            return iconClass;
-        }
-        else if (note.noteId === 'root') {
-            return "bx bx-chevrons-right";
-        }
-        else if (note.noteId === hoistedNoteId) {
             return "bx bxs-arrow-from-bottom";
         }
-        else if (note.type === 'text') {
+
-            if (isFolder) {
+        return note.getIcon(isFolder);
-                return "bx bx-folder";
-            }
-            else {
-                return "bx bx-note";
-            }
-        }
-        else if (note.type === 'code' && note.mime.startsWith('text/x-sql')) {
-            return "bx bx-data";
-        }
-        else {
-            return NOTE_TYPE_ICONS[note.type];
-        }
     }
 
     updateNode(node) {

src/public/stylesheets/link_map.css

@@ -4,22 +4,21 @@
 }
 
 .link-map-container .note-box {
-    padding: 8px;
+    padding: 0px 8px 8px 8px;
     position: absolute !important;
     background-color: var(--main-background-color);
     color: var(--main-text-color);
     z-index: 4;
     border: 1px solid #666;
-    box-shadow: 2px 2px 19px #999;
     border-radius: 8px;
     opacity: 0.8;
     font-size: 11px;
     width: auto;
-    height: auto;
-    max-width: 200px;
     min-width: 120px;
-    max-height: 100px;
+    max-width: 250px;
     overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .link-map-container .note-box:hover {
@@ -47,4 +46,21 @@
 
 .link-map-widget .note-box .title {
     font-size: 19px !important;
-}
+    font-weight: 600
+}
+
+#link-map-dialog .note-box .bx {
+    font-size: 24px !important;
+    position: relative;
+    top: 6px;
+    display: inline-block;
+    margin-right: 5px;
+}
+
+.link-map-widget .note-box .bx {
+    font-size: 30px !important;
+    position: relative;
+    top: 6px;
+    display: inline-block;
+    margin-right: 5px;
+}