[mod] msg

bundles/cm6/lsp.js

@@ -4,7 +4,7 @@ import { EditorState, StateEffect, Compartment } from '@codemirror/state';
 import {
     lineNumbers, highlightActiveLineGutter, highlightWhitespace,
     drawSelection, rectangularSelection, crosshairCursor, highlightActiveLine,
-    keymap, dropCursor, EditorView
+    keymap, dropCursor, EditorView,tooltips
 } from '@codemirror/view';
 
 import { openSearchPanel, highlightSelectionMatches, searchKeymap } from '@codemirror/search';
@@ -90,7 +90,7 @@ const baseExts = [
     drawSelection(),
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
-
+    tooltips({  }), // clipped
     keymap.of([indentWithTab]),
     indentOnInput(),
     syntaxHighlighting(defaultHighlightStyle, { fallback: true }),

webapp/lsp/context.xqm

@@ -18,7 +18,7 @@ declare function ctx:map($fn as element(fos:function))
 {
   $fn!map{
    "label":string(@name),
-   "kind": 3,
+   "kind": $lspt:CompletionItemKindMap("Function"),
    "detail":string($fn/fos:summary/*),
    "documentation":`{ ctx:summary(.) } <a href="{ $ctx:doclink }{ string(@name) }" target="_blank">Spec</a>`
                    !lspt:MarkupContent("markdown",.)

webapp/static/clients/codemirror/grail.html

@@ -138,7 +138,7 @@
                 <summary>Messages 
                     <i  id="msgIcon" class='codicon codicon-kebab-vertical' style="float:right"></i>
                 </summary>
-                <div id="msg">(msgs)<i class='codicon codicon-symbol-method'></i></div>
+                <qd-list id="msgList" style="flex-grow:1;"></qd-list>
             </details>
         </aside>
 

webapp/static/clients/codemirror/lsp.bundle.js

@@ -13958,6 +13958,12 @@ var lsp = (function (exports) {
           return true;
       }
   }
+  /**
+  Creates an extension that configures tooltip behavior.
+  */
+  function tooltips(config = {}) {
+      return tooltipConfig.of(config);
+  }
   function windowSpace(view) {
       let docElt = view.dom.ownerDocument.documentElement;
       return { top: 0, left: 0, bottom: docElt.clientHeight, right: docElt.clientWidth };
@@ -31359,7 +31365,7 @@ ${text}</tr>
       drawSelection(),
       dropCursor(),
       EditorState.allowMultipleSelections.of(true),
-
+      tooltips({  }), // clipped
       keymap.of([indentWithTab]),
       indentOnInput(),
       syntaxHighlighting(defaultHighlightStyle, { fallback: true }),

webapp/static/clients/codemirror/script.js

@@ -177,12 +177,10 @@ function incoming(msg) {
 
 function log(rpc) {
     console.log("<-", rpc)
-    if (rpc.id) return
-    const text = rpc.method;
-    const li = document.createElement("li");
-    const n = $("traffic").childElementCount + " ";
-    li.appendChild(document.createTextNode(n + text));
-    $("traffic").insertBefore(li, $("traffic").firstChild)
+    if (rpc.id) return;
+    const msg = {name:rpc.method, detail:JSON.stringify (rpc).slice(0,5), kind:23 /* event */ };
+    //name,details,kind
+    $("msgList").setData([msg],true)
 };
 
 function formFromStore(name) {

webapp/static/clients/codemirror/wc-qd-list.js

@@ -1,6 +1,6 @@
 /* Define a web component providing a settable and selectable list
  $("symList").setData(r, append = false);
- where r is array of objects with properties name,details,kind
+ where r is array of objects with properties name,detail,kind
 
 https://stackoverflow.com/questions/50404970/web-components-pass-data-to-and-from
 https://www.w3schools.com/howto/howto_js_treeview.asp
@@ -64,9 +64,7 @@ class ListComponent extends HTMLElement {
 
     /* Render the list items #data */
     render() {
-        const list = document.createElement('ul');
-        list.style = "overflow: auto;";
-
+        // eventhandler for click and keyboard, updates usage of selected class and raises event
         const select = e => {
             if(e.type ==="keyup" && !(e.key==="Enter" )) return;
             this.#shadow.querySelectorAll('li.selected').forEach(item => { item.className = ''; });
@@ -80,6 +78,9 @@ class ListComponent extends HTMLElement {
                 composed: true
             }));
         };
+        // create list and items
+         const list = document.createElement('ul');
+        list.style = "overflow: auto;"; 
         this.#data.forEach((item, index) => {
             const listItem = document.createElement('li');
             const icon=this.#iconKinds[item.kind];