promoted attributes are visible in tooltip preview, fixes #158

src/public/javascripts/services/tooltip.js

@@ -1,6 +1,7 @@
 import noteDetailService from "./note_detail.js";
 import treeUtils from "./tree_utils.js";
 import linkService from "./link.js";
+import server from "./server.js";
 
 function setupTooltip() {
     $(document).tooltip({
@@ -21,19 +22,11 @@ function setupTooltip() {
             if (notePath) {
                 const noteId = treeUtils.getNoteIdFromNotePath(notePath);
 
-                noteDetailService.loadNote(noteId).then(note => {
+                const notePromise = noteDetailService.loadNote(noteId);
-                    if (!note.content.trim()) {
+                const attributePromise = server.get('notes/' + noteId + '/attributes');
-                        return;
-                    }
 
-                    if (note.type === 'text') {
+                Promise.all([notePromise, attributePromise])
-                        callback(note.content);
+                    .then(([note, attributes]) => renderTooltip(callback, note, attributes));
-                    }
-                    else if (note.type === 'code') {
-                        callback($("<pre>").text(note.content).prop('outerHTML'));
-                    }
-                    // other types of notes don't have tooltip preview
-                });
             }
         },
         close: function (event, ui) {
@@ -49,6 +42,57 @@ function setupTooltip() {
     });
 }
 
+async function renderTooltip(callback, note, attributes) {
+    let content = '';
+    const promoted = attributes.filter(attr => (attr.type === 'label-definition' || attr.type === 'relation-definition') && attr.value.isPromoted);
+
+    if (promoted.length > 0) {
+        const $table = $("<table>").addClass("promoted-attributes-in-tooltip");
+
+        for (const definitionAttr of promoted) {
+            const definitionType = definitionAttr.type;
+            const valueType = definitionType.substr(0, definitionType.length - 11);
+
+            let valueAttrs = attributes.filter(el => el.name === definitionAttr.name && el.type === valueType);
+
+            for (const valueAttr of valueAttrs) {
+                let $value = "";
+
+                if (valueType === 'label') {
+                    $value = $("<td>").text(valueAttr.value);
+                }
+                else if (valueType === 'relation' && valueAttr.value) {
+                    $value = $("<td>").append(await linkService.createNoteLink(valueAttr.value));
+                }
+
+                const $row = $("<tr>")
+                    .append($("<th>").text(definitionAttr.name))
+                    .append($value);
+
+                $table.append($row);
+            }
+        }
+
+        content += $table.prop('outerHTML');
+    }
+
+    if (note.type === 'text') {
+        content += note.content;
+    }
+    else if (note.type === 'code') {
+        content += $("<pre>").text(note.content).prop('outerHTML');
+    }
+    // other types of notes don't have tooltip preview
+
+    console.log(content);
+
+    if (!content.trim()) {
+        return;
+    }
+
+    callback(content);
+}
+
 export default {
     setupTooltip
 }

src/public/stylesheets/style.css

@@ -445,4 +445,12 @@ html.theme-dark body {
 .show-recent-notes-button {
     background: url('/images/icons/clock-16.png') no-repeat center;
     cursor: pointer;
+}
+
+table.promoted-attributes-in-tooltip {
+    margin: auto;
+}
+
+table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th {
+    padding: 10px;
 }