improvements to note tooltip - include (some) notePath and attributes

src/public/app/services/attribute_renderer.js

@@ -1,29 +1,32 @@
 import ws from "./ws.js";
-import linkService from "./link.js";
+import treeCache from "./tree_cache.js";
 
-function renderAttribute(attribute, $container, renderIsInheritable) {
+async function renderAttribute(attribute, renderIsInheritable) {
     const isInheritable = renderIsInheritable && attribute.isInheritable ? `(inheritable)` : '';
+    const $attr = $("<span>");
 
     if (attribute.type === 'label') {
-        $container.append(document.createTextNode('#' + attribute.name + isInheritable));
+        $attr.append(document.createTextNode('#' + attribute.name + isInheritable));
 
         if (attribute.value) {
-            $container.append('=');
+            $attr.append('=');
-            $container.append(document.createTextNode(formatValue(attribute.value)));
+            $attr.append(document.createTextNode(formatValue(attribute.value)));
         }
     } else if (attribute.type === 'relation') {
         if (attribute.isAutoLink) {
-            return;
+            return $attr;
         }
 
         // when the relation has just been created then it might not have a value
         if (attribute.value) {
-            $container.append(document.createTextNode('~' + attribute.name + isInheritable + "="));
+            $attr.append(document.createTextNode('~' + attribute.name + isInheritable + "="));
-            $container.append(createNoteLink(attribute.value));
+            $attr.append(await createNoteLink(attribute.value));
         }
     } else {
         ws.logError("Unknown attr type: " + attribute.type);
     }
+
+    return $attr;
 }
 
 function formatValue(val) {
@@ -44,18 +47,39 @@ function formatValue(val) {
     }
 }
 
-function createNoteLink(noteId) {
+async function createNoteLink(noteId) {
-    const $link = $("<a>", {
+    const note = await treeCache.getNote(noteId);
+
+    if (!note) {
+        return;
+    }
+
+    return $("<a>", {
         href: '#' + noteId,
         class: 'reference-link',
         'data-note-path': noteId
-    });
+    })
+        .text(note.title);
+}
 
-    linkService.loadReferenceLinkTitle(noteId, $link);
+async function renderAttributes(attributes, renderIsInheritable) {
+    const $container = $("<span>");
 
-    return $link;
+    for (let i = 0; i < attributes.length; i++) {
+        const attribute = attributes[i];
+
+        const $attr = await renderAttribute(attribute, renderIsInheritable);
+        $container.append($attr.html()); // .html() to get only inner HTML, we don't want any spans
+
+        if (i < attributes.length - 1) {
+            $container.append(" ");
+        }
+    }
+
+    return $container;
 }
 
 export default {
-    renderAttribute
+    renderAttribute,
+    renderAttributes
 }

src/public/app/services/note_tooltip.js

@@ -2,6 +2,7 @@ import treeService from "./tree.js";
 import linkService from "./link.js";
 import treeCache from "./tree_cache.js";
 import utils from "./utils.js";
+import attributeRenderer from "./attribute_renderer.js";
 
 function setupGlobalTooltip() {
     $(document).on("mouseenter", "a", mouseEnterHandler);
@@ -82,51 +83,16 @@ async function renderTooltip(note, noteComplement) {
         return '<div>Note has been deleted.</div>';
     }
 
-    const attributes = note.getAttributes();
+    const someNotePath = treeService.getSomeNotePath(note);
+    let content = $("<h5>").text(await treeService.getNotePathTitle(someNotePath)).prop('outerHTML');
 
-    let content = '';
+    const attributes = note.getAttributes()
+        .filter(attr => !attr.isDefinition());
 
-    const promoted = attributes
+    if (attributes.length > 0) {
-        .filter(attr => attr.type === 'label-definition' || attr.type === 'relation-definition')
+        content += '<div class="tooltip-attributes"><strong>Attributes: </strong> '
-        .filter(attr => !attr.name.startsWith("child:"))
+                +  (await attributeRenderer.renderAttributes(attributes)).html()
-        .filter(attr => {
+                + '</div>'
-            const json = attr.jsonValue;
-
-            return json && json.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) {
-                if (!valueAttr.value) {
-                    continue;
-                }
-
-                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' && !utils.isHtmlEmpty(noteComplement.content)) {

src/public/app/widgets/attribute_editor.js

@@ -465,19 +465,7 @@ export default class AttributeEditorWidget extends TabAwareWidget {
     async renderOwnedAttributes(ownedAttributes, saved) {
         ownedAttributes = ownedAttributes.filter(oa => !oa.isDeleted);
 
-        const $attributesContainer = $("<div>");
+        let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html();
-
-        for (let i = 0; i < ownedAttributes.length; i++) {
-            const attribute = ownedAttributes[i];
-
-            attributeRenderer.renderAttribute(attribute, $attributesContainer, true);
-
-            if (i < ownedAttributes.length - 1) {
-                $attributesContainer.append(" ");
-            }
-        }
-
-        let htmlAttrs = $attributesContainer.html();
 
         if (htmlAttrs.length > 0) {
             htmlAttrs += "&nbsp;";

src/public/app/widgets/attribute_list.js

@@ -205,9 +205,9 @@ export default class AttributeListWidget extends TabAwareWidget {
         return 'attribute' + (number === 1 ? '' : 's');
     }
 
-    renderInheritedAttributes(attributes, $container) {
+    async renderInheritedAttributes(attributes, $container) {
         for (const attribute of attributes) {
-            const $span = $("<span>")
+            const $attr = await attributeRenderer.renderAttribute(attribute, false)
                 .on('click', e => this.attributeDetailWidget.showAttributeDetail({
                     attribute: {
                         noteId: attribute.noteId,
@@ -220,10 +220,8 @@ export default class AttributeListWidget extends TabAwareWidget {
                     y: e.pageY
                 }));
 
-            attributeRenderer.renderAttribute(attribute, $span, false);
-
             $container
-                .append($span)
+                .append($attr)
                 .append(" ");
         }
     }

src/public/stylesheets/style.css

@@ -387,12 +387,19 @@ table.promoted-attributes-in-tooltip td, table.promoted-attributes-in-tooltip th
 }
 
 .tooltip-inner {
+    padding: 15px 15px 0 15px;
     background-color: var(--tooltip-background-color) !important;
     border: 1px solid var(--main-border-color);
     border-radius: 5px;
     text-align: left;
     color: var(--main-text-color) !important;
     max-width: 500px;
+    box-shadow: 10px 10px 93px -25px #aaaaaa;
+}
+
+.tooltip-attributes {
+    color: var(--muted-text-color);
+    margin-bottom: 7px;
 }
 
 .note-tooltip-content {