@matdata/yasgui 5.3.0 → 5.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",

package/src/Tab.ts

@@ -266,7 +266,7 @@ export class Tab extends EventEmitter {
     this.controlBarEl.appendChild(this.orientationToggleButton);
   }
 
-  private updateOrientationToggleIcon() {
+  public updateOrientationToggleIcon() {
     if (!this.orientationToggleButton) return;
 
     // Show the icon for the layout we'll switch TO (not the current layout)
@@ -279,24 +279,38 @@ export class Tab extends EventEmitter {
   public toggleOrientation() {
     if (!this.rootEl) return;
 
-    // Remove old orientation class
-    removeClass(this.rootEl, `orientation-${this.currentOrientation}`);
-
     // Toggle orientation
-    this.currentOrientation = this.currentOrientation === "vertical" ? "horizontal" : "vertical";
+    const newOrientation = this.currentOrientation === "vertical" ? "horizontal" : "vertical";
 
-    // Add new orientation class
-    addClass(this.rootEl, `orientation-${this.currentOrientation}`);
+    // Update global config
+    this.yasgui.config.orientation = newOrientation;
 
-    // Update button icon
-    this.updateOrientationToggleIcon();
+    // Apply to all tabs
+    for (const tabId in this.yasgui._tabs) {
+      const tab = this.yasgui._tabs[tabId];
+      if (tab && tab.rootEl) {
+        // Remove old orientation class
+        removeClass(tab.rootEl, `orientation-${tab.currentOrientation}`);
 
-    // Refresh components to adjust to new layout
-    if (this.yasqe) {
-      this.yasqe.refresh();
-    }
-    if (this.yasr) {
-      this.yasr.refresh();
+        // Update tab's orientation
+        tab.currentOrientation = newOrientation;
+
+        // Add new orientation class
+        addClass(tab.rootEl, `orientation-${newOrientation}`);
+
+        // Update button icon if it exists
+        if (tab.orientationToggleButton) {
+          tab.updateOrientationToggleIcon();
+        }
+
+        // Refresh components to adjust to new layout
+        if (tab.yasqe) {
+          tab.yasqe.refresh();
+        }
+        if (tab.yasr) {
+          tab.yasr.refresh();
+        }
+      }
     }
   }
   public getYasqe() {

package/src/TabSettingsModal.scss

@@ -49,7 +49,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: var(--yasgui-overlay-bg, rgba(0, 0, 0, 0.5));
   z-index: 10000;
   align-items: center;
   justify-content: center;
@@ -185,7 +185,8 @@
   padding: 10px;
   border: 1px solid var(--yasgui-input-border, #ccc);
   border-radius: 4px;
-  font-family: monospace;
+  font-family:
+    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   font-size: 13px;
   resize: vertical;
   box-sizing: border-box;
@@ -436,3 +437,184 @@
     opacity: 1;
   }
 }
+
+// Keyboard Shortcuts styles
+.shortcutsSection {
+  margin-bottom: 30px;
+}
+
+.shortcutsCategory {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--yasgui-text-primary, #000);
+  margin-bottom: 15px;
+  padding-bottom: 8px;
+  border-bottom: 2px solid var(--yasgui-border-color, #e0e0e0);
+}
+
+.shortcutsTable {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    th {
+      padding: 10px 8px;
+      text-align: left;
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--yasgui-text-primary, #333);
+      background-color: var(--yasgui-bg-secondary, #f5f5f5);
+      border-bottom: 2px solid var(--yasgui-border-color, #e0e0e0);
+    }
+  }
+
+  tbody {
+    tr {
+      border-bottom: 1px solid var(--yasgui-border-color, #e8e8e8);
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background-color: var(--yasgui-bg-secondary, #f9f9f9);
+      }
+    }
+  }
+
+  td {
+    padding: 12px 8px;
+    vertical-align: middle;
+  }
+}
+
+.shortcutsKeys {
+  width: 40%;
+  font-weight: 500;
+
+  kbd {
+    display: inline-block;
+    padding: 4px 8px;
+    font-size: 12px;
+    font-family:
+      SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    line-height: 1.4;
+    color: var(--yasgui-text-primary, #333);
+    background-color: var(--yasgui-bg-secondary, #f7f7f7);
+    border: 1px solid var(--yasgui-border-color, #ccc);
+    border-radius: 4px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+  }
+}
+
+.shortcutsSeparator {
+  color: var(--yasgui-text-secondary, #999);
+  margin: 0 4px;
+  font-weight: normal;
+}
+
+.shortcutsDescription {
+  width: 60%;
+  color: var(--yasgui-text-primary, #333);
+  font-size: 14px;
+}
+
+// About tab styles
+.aboutSection {
+  text-align: center;
+  padding: 20px;
+}
+
+.aboutTitle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.aboutMainTitle {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--yasgui-accent-color, #337ab7);
+  margin: 0;
+}
+
+.versionBadge {
+  background: var(--yasgui-accent-color, #337ab7);
+  color: white;
+  padding: 4px 12px;
+  border-radius: 12px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.aboutSubtitle {
+  font-size: 16px;
+  color: var(--yasgui-text-secondary, #666);
+  margin: 0 0 30px 0;
+  font-style: italic;
+}
+
+.aboutLinks {
+  margin: 30px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  text-align: left;
+}
+
+.aboutLinkItem {
+  padding: 15px;
+  border: 1px solid var(--yasgui-border-color, #ddd);
+  border-radius: 6px;
+  background: var(--yasgui-bg-secondary, #f9f9f9);
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: var(--yasgui-accent-color, #337ab7);
+    background: var(--yasgui-bg-primary, #fff);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.aboutLink {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--yasgui-accent-color, #337ab7);
+  text-decoration: none;
+  display: block;
+  margin-bottom: 5px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.aboutLinkDescription {
+  font-size: 14px;
+  color: var(--yasgui-text-secondary, #666);
+  margin: 0;
+}
+
+.aboutFooter {
+  margin-top: 40px;
+  padding-top: 20px;
+  border-top: 1px solid var(--yasgui-border-color, #e0e0e0);
+  font-size: 14px;
+  color: var(--yasgui-text-secondary, #666);
+
+  p {
+    margin: 5px 0;
+  }
+
+  a {
+    color: var(--yasgui-accent-color, #337ab7);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

package/src/TabSettingsModal.ts

@@ -2,6 +2,7 @@ import { addClass, removeClass } from "@matdata/yasgui-utils";
 import "./TabSettingsModal.scss";
 import Tab from "./Tab";
 import * as ConfigExportImport from "./ConfigExportImport";
+import { VERSION } from "./version";
 
 // Theme toggle icons
 const MOON_ICON = `<svg viewBox="0 0 24 24" fill="currentColor">
@@ -142,11 +143,23 @@ export default class TabSettingsModal {
     addClass(importExportTab, "modalTabButton");
     importExportTab.onclick = () => this.switchTab("importexport");
 
+    const shortcutsTab = document.createElement("button");
+    shortcutsTab.textContent = "Keyboard Shortcuts";
+    addClass(shortcutsTab, "modalTabButton");
+    shortcutsTab.onclick = () => this.switchTab("shortcuts");
+
+    const aboutTab = document.createElement("button");
+    aboutTab.textContent = "About";
+    addClass(aboutTab, "modalTabButton");
+    aboutTab.onclick = () => this.switchTab("about");
+
     tabsContainer.appendChild(requestTab);
     tabsContainer.appendChild(prefixTab);
     tabsContainer.appendChild(editorTab);
     tabsContainer.appendChild(endpointsTab);
     tabsContainer.appendChild(importExportTab);
+    tabsContainer.appendChild(shortcutsTab);
+    tabsContainer.appendChild(aboutTab);
     body.appendChild(tabsContainer);
 
     // Tab content containers
@@ -175,11 +188,23 @@ export default class TabSettingsModal {
     importExportContent.id = "importexport-content";
     this.drawImportExportSettings(importExportContent);
 
+    const shortcutsContent = document.createElement("div");
+    addClass(shortcutsContent, "modalTabContent");
+    shortcutsContent.id = "shortcuts-content";
+    this.drawKeyboardShortcuts(shortcutsContent);
+
+    const aboutContent = document.createElement("div");
+    addClass(aboutContent, "modalTabContent");
+    aboutContent.id = "about-content";
+    this.drawAboutSettings(aboutContent);
+
     body.appendChild(requestContent);
     body.appendChild(prefixContent);
     body.appendChild(editorContent);
     body.appendChild(endpointsContent);
     body.appendChild(importExportContent);
+    body.appendChild(shortcutsContent);
+    body.appendChild(aboutContent);
 
     this.modalContent.appendChild(body);
 
@@ -216,7 +241,9 @@ export default class TabSettingsModal {
         (tabName === "prefix" && index === 1) ||
         (tabName === "editor" && index === 2) ||
         (tabName === "endpoints" && index === 3) ||
-        (tabName === "importexport" && index === 4)
+        (tabName === "importexport" && index === 4) ||
+        (tabName === "shortcuts" && index === 5) ||
+        (tabName === "about" && index === 6)
       ) {
         addClass(btn as HTMLElement, "active");
       } else {
@@ -378,6 +405,35 @@ export default class TabSettingsModal {
     constructValidationSection.appendChild(constructValidationCheckboxContainer);
     constructValidationSection.appendChild(constructValidationHelp);
     container.appendChild(constructValidationSection);
+
+    // Code Snippets Bar Visibility Section
+    const snippetsBarSection = document.createElement("div");
+    addClass(snippetsBarSection, "settingsSection");
+
+    const snippetsBarCheckboxContainer = document.createElement("div");
+    addClass(snippetsBarCheckboxContainer, "checkboxContainer");
+
+    const snippetsBarCheckbox = document.createElement("input");
+    snippetsBarCheckbox.type = "checkbox";
+    snippetsBarCheckbox.id = "showSnippetsBar";
+    snippetsBarCheckbox.checked = yasqe.getSnippetsBarVisible();
+
+    const snippetsBarLabel = document.createElement("label");
+    snippetsBarLabel.htmlFor = "showSnippetsBar";
+    snippetsBarLabel.textContent = "Show code snippets bar";
+
+    const snippetsBarHelp = document.createElement("div");
+    snippetsBarHelp.textContent =
+      "Display the code snippets bar above the editor for quick insertion of common SPARQL patterns.";
+    addClass(snippetsBarHelp, "settingsHelp");
+    snippetsBarHelp.style.marginTop = "5px";
+
+    snippetsBarCheckboxContainer.appendChild(snippetsBarCheckbox);
+    snippetsBarCheckboxContainer.appendChild(snippetsBarLabel);
+
+    snippetsBarSection.appendChild(snippetsBarCheckboxContainer);
+    snippetsBarSection.appendChild(snippetsBarHelp);
+    container.appendChild(snippetsBarSection);
   }
 
   private drawRequestSettings(container: HTMLElement) {
@@ -499,6 +555,10 @@ export default class TabSettingsModal {
       if (constructValidationCheckbox) {
         yasqe.setCheckConstructVariables(constructValidationCheckbox.checked);
       }
+      const snippetsBarCheckbox = document.getElementById("showSnippetsBar") as HTMLInputElement;
+      if (snippetsBarCheckbox) {
+        yasqe.setSnippetsBarVisible(snippetsBarCheckbox.checked);
+      }
       yasqe.saveQuery();
     }
 
@@ -885,6 +945,112 @@ export default class TabSettingsModal {
     container.appendChild(importSection);
   }
 
+  private drawKeyboardShortcuts(container: HTMLElement) {
+    const shortcutsData = [
+      {
+        category: "Query Editor (YASQE)",
+        shortcuts: [
+          { keys: ["Ctrl+Enter", "Cmd+Enter"], description: "Execute query" },
+          { keys: ["Ctrl+Space", "Cmd+Space"], description: "Trigger autocomplete" },
+          { keys: ["Ctrl+S", "Cmd+S"], description: "Save query to local storage" },
+          { keys: ["Ctrl+Shift+F", "Cmd+Shift+F"], description: "Format query" },
+          { keys: ["Ctrl+/", "Cmd+/"], description: "Toggle comment on selected lines" },
+          { 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)" },
+        ],
+      },
+      {
+        category: "Fullscreen",
+        shortcuts: [
+          { keys: ["F11"], description: "Toggle YASQE (editor) fullscreen" },
+          { keys: ["F10"], description: "Toggle YASR (results) fullscreen" },
+          { keys: ["F9"], description: "Switch between YASQE and YASR fullscreen" },
+          { keys: ["Esc"], description: "Exit fullscreen mode" },
+        ],
+      },
+    ];
+
+    shortcutsData.forEach((section) => {
+      const sectionEl = document.createElement("div");
+      addClass(sectionEl, "shortcutsSection");
+
+      const categoryLabel = document.createElement("h3");
+      categoryLabel.textContent = section.category;
+      addClass(categoryLabel, "shortcutsCategory");
+      sectionEl.appendChild(categoryLabel);
+
+      const table = document.createElement("table");
+      addClass(table, "shortcutsTable");
+      table.setAttribute("role", "table");
+      table.setAttribute("aria-label", `${section.category} keyboard shortcuts`);
+
+      // Add table caption for screen readers
+      const caption = document.createElement("caption");
+      caption.textContent = `${section.category} keyboard shortcuts`;
+      caption.style.position = "absolute";
+      caption.style.left = "-10000px";
+      caption.style.width = "1px";
+      caption.style.height = "1px";
+      caption.style.overflow = "hidden";
+      table.appendChild(caption);
+
+      // Add thead with proper headers
+      const thead = document.createElement("thead");
+      const headerRow = document.createElement("tr");
+
+      const keysHeader = document.createElement("th");
+      keysHeader.textContent = "Keys";
+      keysHeader.setAttribute("scope", "col");
+      addClass(keysHeader, "shortcutsKeysHeader");
+      headerRow.appendChild(keysHeader);
+
+      const descHeader = document.createElement("th");
+      descHeader.textContent = "Description";
+      descHeader.setAttribute("scope", "col");
+      addClass(descHeader, "shortcutsDescHeader");
+      headerRow.appendChild(descHeader);
+
+      thead.appendChild(headerRow);
+      table.appendChild(thead);
+
+      // Add tbody
+      const tbody = document.createElement("tbody");
+
+      section.shortcuts.forEach((shortcut) => {
+        const row = document.createElement("tr");
+
+        const keysCell = document.createElement("td");
+        addClass(keysCell, "shortcutsKeys");
+        shortcut.keys.forEach((key, index) => {
+          if (index > 0) {
+            const separator = document.createElement("span");
+            separator.textContent = " / ";
+            addClass(separator, "shortcutsSeparator");
+            keysCell.appendChild(separator);
+          }
+          const kbd = document.createElement("kbd");
+          kbd.textContent = key;
+          keysCell.appendChild(kbd);
+        });
+        row.appendChild(keysCell);
+
+        const descCell = document.createElement("td");
+        addClass(descCell, "shortcutsDescription");
+        descCell.textContent = shortcut.description;
+        row.appendChild(descCell);
+
+        tbody.appendChild(row);
+      });
+
+      table.appendChild(tbody);
+
+      sectionEl.appendChild(table);
+      container.appendChild(sectionEl);
+    });
+  }
+
   private async importConfiguration(turtleContent: string) {
     try {
       const parsedConfig = ConfigExportImport.parseFromTurtle(turtleContent);
@@ -940,6 +1106,108 @@ export default class TabSettingsModal {
     }, 5000);
   }
 
+  private drawAboutSettings(container: HTMLElement) {
+    // About Section
+    const aboutSection = document.createElement("div");
+    addClass(aboutSection, "settingsSection", "aboutSection");
+
+    // YASGUI Title and Version
+    const titleContainer = document.createElement("div");
+    addClass(titleContainer, "aboutTitle");
+
+    const title = document.createElement("h3");
+    title.textContent = "YASGUI";
+    addClass(title, "aboutMainTitle");
+
+    const versionBadge = document.createElement("span");
+    versionBadge.textContent = `v${VERSION}`;
+    addClass(versionBadge, "versionBadge");
+
+    titleContainer.appendChild(title);
+    titleContainer.appendChild(versionBadge);
+    aboutSection.appendChild(titleContainer);
+
+    // Subtitle
+    const subtitle = document.createElement("p");
+    subtitle.textContent = "Yet Another SPARQL GUI";
+    addClass(subtitle, "aboutSubtitle");
+    aboutSection.appendChild(subtitle);
+
+    // Links Section
+    const linksSection = document.createElement("div");
+    addClass(linksSection, "aboutLinks");
+
+    // Documentation Link
+    const docsLink = this.createAboutLink(
+      "📚 Documentation",
+      "https://yasgui-doc.matdata.eu/docs/",
+      "View the complete documentation and guides",
+    );
+    linksSection.appendChild(docsLink);
+
+    // Release Notes Link
+    const releasesLink = this.createAboutLink(
+      "📝 Release Notes",
+      "https://github.com/Matdata-eu/Yasgui/releases",
+      "See what's new in the latest releases",
+    );
+    linksSection.appendChild(releasesLink);
+
+    // Issues/Support Link
+    const issuesLink = this.createAboutLink(
+      "🐛 Report Issues & Get Support",
+      "https://github.com/Matdata-eu/Yasgui/issues",
+      "Report bugs, request features, or ask for help",
+    );
+    linksSection.appendChild(issuesLink);
+
+    aboutSection.appendChild(linksSection);
+
+    // Footer info
+    const footerInfo = document.createElement("div");
+    addClass(footerInfo, "aboutFooter");
+
+    const paragraph1 = document.createElement("p");
+    paragraph1.textContent = "YASGUI is an open-source project maintained by ";
+    const matdataLink = document.createElement("a");
+    matdataLink.href = "https://matdata.eu";
+    matdataLink.target = "_blank";
+    matdataLink.rel = "noopener noreferrer";
+    matdataLink.textContent = "Matdata";
+    paragraph1.appendChild(matdataLink);
+    paragraph1.appendChild(document.createTextNode("."));
+
+    const paragraph2 = document.createElement("p");
+    paragraph2.textContent = "Licensed under the MIT License.";
+
+    footerInfo.appendChild(paragraph1);
+    footerInfo.appendChild(paragraph2);
+    aboutSection.appendChild(footerInfo);
+
+    container.appendChild(aboutSection);
+  }
+
+  private createAboutLink(label: string, url: string, description: string): HTMLElement {
+    const linkContainer = document.createElement("div");
+    addClass(linkContainer, "aboutLinkItem");
+
+    const link = document.createElement("a");
+    link.href = url;
+    link.target = "_blank";
+    link.rel = "noopener noreferrer";
+    link.textContent = label;
+    addClass(link, "aboutLink");
+
+    const desc = document.createElement("p");
+    desc.textContent = description;
+    addClass(desc, "aboutLinkDescription");
+
+    linkContainer.appendChild(link);
+    linkContainer.appendChild(desc);
+
+    return linkContainer;
+  }
+
   public destroy() {
     if (this.modalOverlay && this.modalOverlay.parentNode) {
       this.modalOverlay.parentNode.removeChild(this.modalOverlay);

package/src/tab.scss

@@ -36,15 +36,13 @@
         gap: 10px;
         // Allow flexible height - can use 100vh or be constrained by parent
         min-height: var(--yasgui-min-height);
-        height: calc(100vh - var(--yasgui-header-height));
+        max-height: calc(100vh - var(--yasgui-header-height));
       }
 
       .editorwrapper {
         flex: 1;
-        min-width: 0;
         display: flex;
         flex-direction: column;
-        overflow: hidden;
       }
 
       // Make YASQE fill the vertical space in horizontal mode
@@ -53,9 +51,10 @@
         flex-direction: column;
         flex: 1;
         min-height: 0;
+        overflow: hidden;
 
         .CodeMirror {
-          height: 100% !important;
+          height: calc(100vh - var(--yasgui-header-height)) !important;
         }
       }
 

package/src/themes.scss

@@ -39,7 +39,7 @@
   --yasgui-match-highlight-bg: #dbdeed;
 
   // Layout dimensions (used for horizontal orientation)
-  --yasgui-header-height: 100px; // Height to subtract from viewport in horizontal layout
+  --yasgui-header-height: 150px; // Height to subtract from viewport in horizontal layout
   --yasgui-min-height: 400px; // Minimum height for horizontal layout panels
 
   --yasgui-endpoint-button-bg: #337ab7;

package/src/version.ts

@@ -0,0 +1,3 @@
+// Version information for YASGUI
+// This file is auto-generated during build - do not edit manually
+export const VERSION = "4.6.1";