@matdata/yasgui 5.20.3 → 6.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
-  "description": "Yet Another SPARQL GUI",
-  "version": "5.20.3",
+  "description": "MatGUI: a modern SPARQL query editor and results viewer for knowledge graphs and linked data (formerly Yasgui).",
+  "version": "6.0.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -14,10 +14,10 @@
     "Semantic Web",
     "Linked Data"
   ],
-  "bugs": "https://github.com/Matdata-eu/Yasgui/issues/",
+  "bugs": "https://github.com/Matdata-eu/Matgui/issues/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/Matdata-eu/Yasgui.git",
+    "url": "https://github.com/Matdata-eu/Matgui.git",
     "directory": "packages/yasgui"
   },
   "dependencies": {

package/src/ConfigExportImport.ts

@@ -1,11 +1,11 @@
 /**
  * Export/Import Configuration Module
- * Handles serialization and deserialization of YASGUI configuration to/from RDF Turtle format
+ * Handles serialization and deserialization of Matgui configuration to/from RDF Turtle format
  */
 
 import { PersistedJson } from "./PersistentConfig";
 
-// YASGUI Configuration Ontology
+// Matgui Configuration Ontology
 export const YASGUI_NS = "https://yasgui.matdata.eu/ontology#";
 export const RDF_NS = "http://www.w3.org/1999/02/22-rdf-syntax-ns#";
 export const RDFS_NS = "http://www.w3.org/2000/01/rdf-schema#";
@@ -328,7 +328,7 @@ export function parseFromTurtle(turtle: string): Partial<PersistedJson> {
 /**
  * Download configuration as a file
  */
-export function downloadConfigAsFile(config: PersistedJson, filename: string = "yasgui-config.ttl") {
+export function downloadConfigAsFile(config: PersistedJson, filename: string = "matgui-config.ttl") {
   const turtle = serializeToTurtle(config);
   const blob = new Blob([turtle], { type: "text/turtle;charset=utf-8" });
   const url = URL.createObjectURL(blob);

package/src/PersistentConfig.ts

@@ -126,7 +126,7 @@ export default class PersistentConfig {
   }
 
   private handleLocalStorageQuotaFull(_e: any) {
-    console.warn("Localstorage quota exceeded. Clearing all YASGUI configurations");
+    console.warn("Localstorage quota exceeded. Clearing all Matgui configurations");
     PersistentConfig.clear();
   }
 
@@ -312,6 +312,22 @@ export default class PersistentConfig {
     this.toStorage();
   }
 
+  /**
+   * Get the persisted layout orientation
+   */
+  public getOrientation(): "vertical" | "horizontal" | undefined {
+    const orientation = this.persistedJson.orientation;
+    return orientation === "vertical" || orientation === "horizontal" ? orientation : undefined;
+  }
+
+  /**
+   * Set and persist the layout orientation
+   */
+  public setOrientation(orientation: "vertical" | "horizontal") {
+    this.persistedJson.orientation = orientation;
+    this.toStorage();
+  }
+
   /**
    * Get list of disabled developer-configured endpoint buttons
    */

package/src/Tab.ts

@@ -9,6 +9,8 @@ import {
   Config as YasrConfig,
   PersistentConfig as YasrPersistentConfig,
   PluginQueryOptions as YasrPluginQueryOptions,
+  buildSubjectOfQuery,
+  buildObjectOfQuery,
 } from "@matdata/yasr";
 import { mapValues, eq, mergeWith, words, deburr, invert } from "lodash-es";
 import * as shareLink from "./linkUtils";
@@ -380,7 +382,7 @@ export class Tab extends EventEmitter {
 
     // We group controlbar and Yasqe, so that users can easily .appendChild() to the .editorwrapper div
     // to add a div that goes alongside the controlbar and editor, while YASR still goes full width
-    // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
+    // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Matgui class
     const editorWrapper = document.createElement("div");
     editorWrapper.className = "editorwrapper";
     this.editorWrapperEl = editorWrapper;
@@ -621,6 +623,9 @@ export class Tab extends EventEmitter {
     // Update global config
     this.yasgui.config.orientation = newOrientation;
 
+    // Persist orientation
+    this.yasgui.persistentConfig.setOrientation(newOrientation);
+
     // Apply to all tabs
     for (const tabId in this.yasgui._tabs) {
       const tab = this.yasgui._tabs[tabId];
@@ -1246,7 +1251,7 @@ export class Tab extends EventEmitter {
   }
 
   /**
-   * The Yasgui configuration object may contain a custom request config
+   * The Matgui configuration object may contain a custom request config
    * This request config object can contain getter functions, or plain json
    * The plain json data is stored in persisted config, and editable via the
    * tab pane.
@@ -1283,7 +1288,7 @@ export class Tab extends EventEmitter {
       value: this.persistentJson.yasqe.value,
       editorHeight: this.persistentJson.yasqe.editorHeight ? this.persistentJson.yasqe.editorHeight : undefined,
       persistenceId: null, //yasgui handles persistent storing
-      consumeShareLink: null, //not handled by this tab, but by parent yasgui instance
+      consumeShareLink: null, //not handled by this tab, but by parent Matgui instance
       createShareableLink: () => this.getShareableLink(),
       // Use global showSnippetsBar setting if it exists
       showSnippetsBar: this.yasgui.config.showSnippetsBar !== false,
@@ -1561,21 +1566,15 @@ export class Tab extends EventEmitter {
       }
     }
 
-    // Construct the query
-    const constructQuery = `CONSTRUCT {   
-  ?s_left ?p_left ?target .
-  ?target ?p_right ?o_right .
-}
-WHERE {
-  BIND(<${uri}> as ?target)
-  {
-    ?s_left ?p_left ?target .
-  }
-  UNION
-  {
-    ?target ?p_right ?o_right .
-  }  
-} LIMIT 1000`;
+    // Construct the query based on whether Shift is held
+    let constructQuery: string;
+    if (event.shiftKey) {
+      // Ctrl+Shift+Click: find all triples where URI is the object
+      constructQuery = buildObjectOfQuery(uri);
+    } else {
+      // Ctrl+Click: find all triples where URI is the subject
+      constructQuery = buildSubjectOfQuery(uri);
+    }
 
     // Execute query in background without changing editor content
     // Note: void operator is intentional - errors are handled in the catch block of executeBackgroundQuery
@@ -1659,7 +1658,7 @@ WHERE {
     if (!this.yasrWrapperEl) throw new Error("Wrapper for yasr does not exist");
 
     const yasrConf: Partial<YasrConfig> = {
-      persistenceId: null, //yasgui handles persistent storing
+      persistenceId: null, //Matgui handles persistent storing
       prefixes: (yasr) => {
         // Prefixes defined in YASR's config
         const prefixesFromYasrConf =
@@ -1826,7 +1825,7 @@ WHERE {
   public static getDefaults(yasgui?: Yasgui): PersistedJson {
     return {
       yasqe: {
-        value: yasgui ? yasgui.config.yasqe.value : Yasgui.defaults.yasqe.value,
+        value: (yasgui ? yasgui.config.yasqe.value : Yasgui.defaults.yasqe.value) ?? "",
       },
       yasr: {
         response: undefined,
@@ -1875,7 +1874,7 @@ function getCorsErrorRenderer(tab: Tab) {
           tab.getEndpoint(),
         )}</a>) from an HTTP<strong>S</strong> website (<a href="${safeEndpoint(window.location.href)}">${safeEndpoint(
           window.location.href,
-        )}</a>).<br>This can be blocked in modern browsers, see <a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy</a>. See also <a href="https://yasgui-doc.matdata.eu/docs/user-guide#querying-local-endpoints">the YasGUI documentation</a> for possible workarounds.`;
+        )}</a>).<br>This can be blocked in modern browsers, see <a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy</a>. See also <a href="https://matgui-doc.matdata.eu/docs/user-guide#querying-local-endpoints">the Matgui documentation</a> for possible workarounds.`;
         errorEl.appendChild(errorSpan);
         return errorEl;
       }

package/src/TabSettingsModal.ts

@@ -509,43 +509,17 @@ export default class TabSettingsModal {
       return;
     }
 
-    // Available CodeMirror themes
+    // Available editor themes. Each theme is a `cm-s-<name>` class applied to the
+    // CodeMirror 6 editor root; the styles for these ship with yasgui.
     const themes = [
-      { value: "default", label: "Default" },
+      { value: "default", label: "Default (Light)" },
+      { value: "eclipse", label: "Eclipse (Light)" },
+      { value: "idea", label: "IntelliJ IDEA (Light)" },
+      { value: "solarized-light", label: "Solarized Light" },
       { value: "github-dark", label: "GitHub Dark Default" },
-      { value: "material-palenight", label: "Material Palenight" },
-      { value: "monokai", label: "Monokai" },
-      { value: "dracula", label: "Dracula" },
-      { value: "nord", label: "Nord" },
-      { value: "solarized dark", label: "Solarized Dark" },
-      { value: "solarized light", label: "Solarized Light" },
-      { value: "twilight", label: "Twilight" },
-      { value: "material", label: "Material" },
-      { value: "cobalt", label: "Cobalt" },
-      { value: "darcula", label: "Darcula" },
-      { value: "gruvbox-dark", label: "Gruvbox Dark" },
-      { value: "oceanic-next", label: "Oceanic Next" },
-      { value: "material-darker", label: "Material Darker" },
-      { value: "blackboard", label: "Blackboard" },
-      { value: "base16-dark", label: "Base16 Dark" },
-      { value: "base16-light", label: "Base16 Light" },
-      { value: "eclipse", label: "Eclipse" },
-      { value: "elegant", label: "Elegant" },
-      { value: "idea", label: "IntelliJ IDEA" },
-      { value: "mbo", label: "MBO" },
-      { value: "neat", label: "Neat" },
-      { value: "neo", label: "Neo" },
-      { value: "night", label: "Night" },
-      { value: "paraiso-dark", label: "Paraiso Dark" },
-      { value: "paraiso-light", label: "Paraiso Light" },
-      { value: "pastel-on-dark", label: "Pastel on Dark" },
-      { value: "rubyblue", label: "Ruby Blue" },
-      { value: "the-matrix", label: "The Matrix" },
-      { value: "tomorrow-night-bright", label: "Tomorrow Night Bright" },
-      { value: "tomorrow-night-eighties", label: "Tomorrow Night 80s" },
-      { value: "vibrant-ink", label: "Vibrant Ink" },
-      { value: "xq-dark", label: "XQ Dark" },
-      { value: "xq-light", label: "XQ Light" },
+      { value: "monokai", label: "Monokai (Dark)" },
+      { value: "dracula", label: "Dracula (Dark)" },
+      { value: "material-darker", label: "Material Darker (Dark)" },
     ];
 
     // Light Mode Theme Section
@@ -610,20 +584,6 @@ export default class TabSettingsModal {
     themeDarkSection.appendChild(themeDarkSelect);
     container.appendChild(themeDarkSection);
 
-    // Theme reference link
-    const themeReferenceSection = document.createElement("div");
-    addClass(themeReferenceSection, "settingsSection");
-
-    const themeReferenceLink = document.createElement("a");
-    themeReferenceLink.href = "https://codemirror.net/5/demo/theme.html";
-    themeReferenceLink.target = "_blank";
-    themeReferenceLink.rel = "noopener noreferrer";
-    themeReferenceLink.textContent = "Preview CodeMirror themes →";
-    addClass(themeReferenceLink, "settingsLink");
-
-    themeReferenceSection.appendChild(themeReferenceLink);
-    container.appendChild(themeReferenceSection);
-
     // Formatter Type Section
     const formatterSection = document.createElement("div");
     addClass(formatterSection, "settingsSection");
@@ -1917,7 +1877,7 @@ export default class TabSettingsModal {
 
     const exportHelp = document.createElement("div");
     exportHelp.textContent =
-      "Export your YASGUI configuration in RDF Turtle format. This includes tabs, queries, endpoints, and preferences.";
+      "Export your Matgui configuration in RDF Turtle format. This includes tabs, queries, endpoints, and preferences.";
     addClass(exportHelp, "settingsHelp");
 
     const exportButtonsContainer = document.createElement("div");
@@ -2072,7 +2032,8 @@ export default class TabSettingsModal {
           { keys: ["Ctrl+Shift+D", "Cmd+Shift+D"], description: "Duplicate current line" },
           { keys: ["Ctrl+Shift+K", "Cmd+Shift+K"], description: "Delete current line" },
           { keys: ["Esc"], description: "Remove focus from editor" },
-          { keys: ["Ctrl+Click"], description: "Explore URI connections (on URI)" },
+          { keys: ["Ctrl+Click"], description: "Find triples where URI is subject" },
+          { keys: ["Ctrl+Shift+Click"], description: "Find triples where URI is object" },
         ],
       },
       {
@@ -2085,15 +2046,15 @@ export default class TabSettingsModal {
         ],
       },
       {
-        category: "YASGUI Tabs",
+        category: "Matgui Tabs",
         shortcuts: [
           {
             keys: ["Ctrl+Alt+Tab", "Cmd+Alt+Tab"],
-            description: "Switch to previously used YASGUI tab",
+            description: "Switch to previously used Matgui tab",
           },
           {
             keys: ["Ctrl+Alt+Shift+Tab", "Cmd+Alt+Shift+Tab"],
-            description: "Switch to next YASGUI tab in recently used order",
+            description: "Switch to next Matgui tab in recently used order",
           },
         ],
       },
@@ -2238,12 +2199,12 @@ export default class TabSettingsModal {
     const aboutSection = document.createElement("div");
     addClass(aboutSection, "settingsSection", "aboutSection");
 
-    // YASGUI Title and Version
+    // Matgui Title and Version
     const titleContainer = document.createElement("div");
     addClass(titleContainer, "aboutTitle");
 
     const title = document.createElement("h3");
-    title.textContent = "YASGUI";
+    title.textContent = "MatGUI";
     addClass(title, "aboutMainTitle");
 
     const versionBadge = document.createElement("span");
@@ -2256,7 +2217,7 @@ export default class TabSettingsModal {
 
     // Subtitle
     const subtitle = document.createElement("p");
-    subtitle.textContent = "Yet Another SPARQL GUI";
+    subtitle.textContent = "A modern knowledge graph and SPARQL workbench";
     addClass(subtitle, "aboutSubtitle");
     aboutSection.appendChild(subtitle);
 
@@ -2267,7 +2228,7 @@ export default class TabSettingsModal {
     // Documentation Link
     const docsLink = this.createAboutLink(
       "📚 Documentation",
-      "https://yasgui-doc.matdata.eu/docs/",
+      "https://matgui-doc.matdata.eu/docs/",
       "View the complete documentation and guides",
     );
     linksSection.appendChild(docsLink);
@@ -2275,7 +2236,7 @@ export default class TabSettingsModal {
     // Release Notes Link
     const releasesLink = this.createAboutLink(
       "📝 Release Notes",
-      "https://github.com/Matdata-eu/Yasgui/releases",
+      "https://github.com/Matdata-eu/Matgui/releases",
       "See what's new in the latest releases",
     );
     linksSection.appendChild(releasesLink);
@@ -2283,7 +2244,7 @@ export default class TabSettingsModal {
     // Issues/Support Link
     const issuesLink = this.createAboutLink(
       "🐛 Report Issues & Get Support",
-      "https://github.com/Matdata-eu/Yasgui/issues",
+      "https://github.com/Matdata-eu/Matgui/issues",
       "Report bugs, request features, or ask for help",
     );
     linksSection.appendChild(issuesLink);
@@ -2295,7 +2256,7 @@ export default class TabSettingsModal {
     addClass(footerInfo, "aboutFooter");
 
     const paragraph1 = document.createElement("p");
-    paragraph1.textContent = "YASGUI is an open-source project maintained by ";
+    paragraph1.textContent = "MatGUI is an open-source project maintained by ";
     const matdataLink = document.createElement("a");
     matdataLink.href = "https://matdata.eu";
     matdataLink.target = "_blank";

package/src/editor-themes.scss

@@ -0,0 +1,268 @@
+// Additional CodeMirror 6 editor themes for YASQE.
+//
+// Each theme is a `cm-s-<name>` class applied to the editor root element by the
+// yasqe editor facade (see packages/yasqe/src/editor/facade.ts). The `default`
+// (light) and `github-dark` themes ship elsewhere; this file adds the extra
+// themes offered in the tab settings.
+//
+// Selectors target the CodeMirror 6 DOM (`.cm-editor` / `.cm-*`). The mixin below
+// keeps the (fairly repetitive) token colouring consistent across themes.
+
+@mixin cm-theme(
+  $bg,
+  $fg,
+  $gutter-bg,
+  $gutter-fg,
+  $border,
+  $cursor,
+  $selection,
+  $active-line,
+  $keyword,
+  $atom,
+  $number,
+  $string,
+  $string-2,
+  $variable-3,
+  $meta,
+  $comment,
+  $punc,
+  $bracket
+) {
+  &.cm-editor,
+  &.CodeMirror {
+    background-color: $bg;
+    color: $fg;
+  }
+
+  .cm-gutters {
+    background: $gutter-bg;
+    border-right: 1px solid $border;
+    color: $gutter-fg;
+  }
+  .cm-gutterElement {
+    color: $gutter-fg;
+  }
+  .cm-foldGutter .cm-gutterElement {
+    color: $fg;
+  }
+  .cm-activeLine {
+    background: $active-line;
+  }
+  .cm-activeLineGutter {
+    background: $active-line;
+  }
+
+  .cm-cursor,
+  .cm-dropCursor {
+    border-left: 1px solid $cursor;
+  }
+  .cm-selectionBackground,
+  &.cm-focused .cm-selectionBackground {
+    background: $selection !important;
+  }
+  .cm-content ::selection,
+  .cm-line::selection {
+    background: $selection !important;
+  }
+
+  span.cm-keyword {
+    color: $keyword;
+  }
+  span.cm-atom {
+    color: $atom;
+  }
+  span.cm-number {
+    color: $number;
+  }
+  span.cm-string {
+    color: $string;
+  }
+  span.cm-string-2 {
+    color: $string-2;
+  }
+  span.cm-variable-3 {
+    color: $variable-3;
+  }
+  span.cm-meta {
+    color: $meta;
+  }
+  span.cm-comment {
+    color: $comment;
+    font-style: italic;
+  }
+  span.cm-punc {
+    color: $punc;
+  }
+  span.cm-bracket {
+    color: $bracket;
+  }
+  span.cm-error {
+    color: #f00;
+  }
+
+  // Rainbow brackets
+  span.cm-bracket-level-0 {
+    color: #ffd700;
+  }
+  span.cm-bracket-level-1 {
+    color: #da70d6;
+  }
+  span.cm-bracket-level-2 {
+    color: #6bb0cc;
+  }
+  span.cm-bracket-level-3 {
+    color: #439143;
+  }
+  span.cm-bracket-paren {
+    color: $punc;
+  }
+  span.cm-bracket-mismatch {
+    color: #f00;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Dark themes
+// ---------------------------------------------------------------------------
+
+.cm-s-monokai {
+  @include cm-theme(
+    $bg: #272822,
+    $fg: #f8f8f2,
+    $gutter-bg: #272822,
+    $gutter-fg: #75715e,
+    $border: #3a3b35,
+    $cursor: #f8f8f0,
+    $selection: rgba(73, 72, 62, 0.99),
+    $active-line: rgba(255, 255, 255, 0.05),
+    $keyword: #f92672,
+    $atom: #ae81ff,
+    $number: #ae81ff,
+    $string: #e6db74,
+    $string-2: #a6e22e,
+    $variable-3: #66d9ef,
+    $meta: #75715e,
+    $comment: #75715e,
+    $punc: #f8f8f2,
+    $bracket: #f8f8f2
+  );
+}
+
+.cm-s-dracula {
+  @include cm-theme(
+    $bg: #282a36,
+    $fg: #f8f8f2,
+    $gutter-bg: #282a36,
+    $gutter-fg: #6272a4,
+    $border: #3a3c4e,
+    $cursor: #f8f8f0,
+    $selection: rgba(68, 71, 90, 0.99),
+    $active-line: rgba(255, 255, 255, 0.05),
+    $keyword: #ff79c6,
+    $atom: #bd93f9,
+    $number: #bd93f9,
+    $string: #f1fa8c,
+    $string-2: #8be9fd,
+    $variable-3: #8be9fd,
+    $meta: #6272a4,
+    $comment: #6272a4,
+    $punc: #f8f8f2,
+    $bracket: #f8f8f2
+  );
+}
+
+.cm-s-material-darker {
+  @include cm-theme(
+    $bg: #212121,
+    $fg: #eeffff,
+    $gutter-bg: #212121,
+    $gutter-fg: #545454,
+    $border: #2a2a2a,
+    $cursor: #ffcc00,
+    $selection: rgba(97, 97, 97, 0.6),
+    $active-line: rgba(255, 255, 255, 0.05),
+    $keyword: #c792ea,
+    $atom: #f78c6c,
+    $number: #f78c6c,
+    $string: #c3e88d,
+    $string-2: #82aaff,
+    $variable-3: #89ddff,
+    $meta: #546e7a,
+    $comment: #546e7a,
+    $punc: #89ddff,
+    $bracket: #eeffff
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Light themes
+// ---------------------------------------------------------------------------
+
+.cm-s-solarized-light {
+  @include cm-theme(
+    $bg: #fdf6e3,
+    $fg: #657b83,
+    $gutter-bg: #eee8d5,
+    $gutter-fg: #93a1a1,
+    $border: #e6dfc6,
+    $cursor: #657b83,
+    $selection: rgba(7, 54, 66, 0.12),
+    $active-line: rgba(0, 0, 0, 0.04),
+    $keyword: #859900,
+    $atom: #d33682,
+    $number: #d33682,
+    $string: #2aa198,
+    $string-2: #6c71c4,
+    $variable-3: #268bd2,
+    $meta: #cb4b16,
+    $comment: #93a1a1,
+    $punc: #657b83,
+    $bracket: #657b83
+  );
+}
+
+.cm-s-eclipse {
+  @include cm-theme(
+    $bg: #ffffff,
+    $fg: #000000,
+    $gutter-bg: #f7f7f7,
+    $gutter-fg: #999999,
+    $border: #dddddd,
+    $cursor: #000000,
+    $selection: rgba(215, 209, 255, 0.99),
+    $active-line: rgba(0, 0, 0, 0.04),
+    $keyword: #7f0055,
+    $atom: #219,
+    $number: #164,
+    $string: #2a00ff,
+    $string-2: #f50,
+    $variable-3: #085,
+    $meta: #555,
+    $comment: #3f7f5f,
+    $punc: #000000,
+    $bracket: #000000
+  );
+}
+
+.cm-s-idea {
+  @include cm-theme(
+    $bg: #ffffff,
+    $fg: #000000,
+    $gutter-bg: #ffffff,
+    $gutter-fg: #999999,
+    $border: #dddddd,
+    $cursor: #000000,
+    $selection: rgba(163, 214, 255, 0.99),
+    $active-line: #fffae3,
+    $keyword: #000080,
+    $atom: #009695,
+    $number: #0000ff,
+    $string: #008000,
+    $string-2: #a11,
+    $variable-3: #20999d,
+    $meta: #808000,
+    $comment: #808080,
+    $punc: #000000,
+    $bracket: #000000
+  );
+}

package/src/endpointSelect.ts

@@ -7,9 +7,9 @@ import parse from "autosuggest-highlight/parse";
 import DOMPurify from "dompurify";
 
 //Export this here instead of from our custom-types folder of autocomplete-js
-//as this interface is exported via the yasgui config. The custom typings are
-//not exported as part of the yasgui typings, so we'd get typing errors.
-//instead, include this interface in the yasgui typings itself by defining it here
+//as this interface is exported via the Matgui config. The custom typings are
+//not exported as part of the Matgui typings, so we'd get typing errors.
+//instead, include this interface in the Matgui typings itself by defining it here
 interface AutocompleteItem<T> {
   index: number; //index of suggestion in array of suggestions
   value: T; //suggestion object