@matdata/yasgui 5.6.0 → 5.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.6.0",
+  "version": "5.8.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "jsuri": "^1.3.1",
     "lodash-es": "^4.17.15",
     "sortablejs": "^1.10.2",
-    "@matdata/yasgui-graph-plugin": "^1.0.0"
+    "@matdata/yasgui-graph-plugin": "^1.4.0",
+    "@matdata/yasgui-table-plugin": "^1.1.0"
   },
   "devDependencies": {
     "@types/autosuggest-highlight": "^3.1.0",

package/src/ConfigExportImport.ts

@@ -307,6 +307,7 @@ export function parseFromTurtle(turtle: string): Partial<PersistedJson> {
             basicAuth: undefined,
             bearerAuth: undefined,
             apiKeyAuth: undefined,
+            oauth2Auth: undefined,
           },
           yasr: {
             settings: {},

package/src/OAuth2Utils.ts

@@ -0,0 +1,315 @@
+/**
+ * OAuth 2.0 Utility Functions
+ * Handles OAuth 2.0 Authorization Code flow with PKCE
+ */
+
+/**
+ * Generate a random string for PKCE code verifier
+ */
+function generateRandomString(length: number): string {
+  const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
+  const values = crypto.getRandomValues(new Uint8Array(length));
+  return Array.from(values)
+    .map((v) => possible[v % possible.length])
+    .join("");
+}
+
+/**
+ * Generate SHA-256 hash and base64url encode it
+ */
+async function sha256(plain: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(plain);
+  const hash = await crypto.subtle.digest("SHA-256", data);
+  return base64urlEncode(hash);
+}
+
+/**
+ * Base64url encode (without padding)
+ */
+function base64urlEncode(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+export interface OAuth2Config {
+  clientId: string;
+  authorizationEndpoint: string;
+  tokenEndpoint: string;
+  redirectUri: string;
+  scope?: string;
+}
+
+export interface OAuth2TokenResponse {
+  access_token: string;
+  id_token?: string; // ID token for authentication (Azure AD, OIDC)
+  refresh_token?: string;
+  expires_in?: number; // seconds
+  token_type: string;
+}
+
+/**
+ * Check if a token has expired
+ */
+export function isTokenExpired(tokenExpiry?: number): boolean {
+  if (!tokenExpiry) return true;
+  // Add 60 second buffer to refresh before actual expiration
+  return Date.now() >= tokenExpiry - 60000;
+}
+
+/**
+ * Start OAuth 2.0 Authorization Code flow with PKCE
+ * Opens a popup window for user authentication
+ */
+export async function startOAuth2Flow(config: OAuth2Config): Promise<OAuth2TokenResponse> {
+  // Generate PKCE code verifier and challenge
+  const codeVerifier = generateRandomString(128);
+  const codeChallenge = await sha256(codeVerifier);
+
+  // Generate state for CSRF protection
+  const state = generateRandomString(32);
+
+  // Generate unique flow ID to prevent collisions across multiple OAuth flows
+  const flowId = generateRandomString(16);
+
+  // Store code verifier and state in sessionStorage for later retrieval with unique keys
+  sessionStorage.setItem(`oauth2_code_verifier_${flowId}`, codeVerifier);
+  sessionStorage.setItem(`oauth2_state_${flowId}`, state);
+
+  // Build authorization URL
+  const authUrl = new URL(config.authorizationEndpoint);
+  authUrl.searchParams.set("client_id", config.clientId);
+  authUrl.searchParams.set("response_type", "code");
+  authUrl.searchParams.set("redirect_uri", config.redirectUri);
+  authUrl.searchParams.set("code_challenge", codeChallenge);
+  authUrl.searchParams.set("code_challenge_method", "S256");
+  // Include flowId in state to link the callback to this specific flow
+  authUrl.searchParams.set("state", `${state}:${flowId}`);
+  if (config.scope) {
+    authUrl.searchParams.set("scope", config.scope);
+  }
+
+  // Open popup window
+  const width = 600;
+  const height = 700;
+  const left = window.screenX + (window.outerWidth - width) / 2;
+  const top = window.screenY + (window.outerHeight - height) / 2;
+  const popup = window.open(
+    authUrl.toString(),
+    "OAuth2 Authorization",
+    `width=${width},height=${height},left=${left},top=${top},popup=yes,scrollbars=yes`,
+  );
+
+  if (!popup) {
+    throw new Error("Failed to open OAuth 2.0 authorization popup. Please allow popups for this site.");
+  }
+
+  // Wait for the OAuth callback
+  return new Promise<OAuth2TokenResponse>((resolve, reject) => {
+    // Flag to prevent race condition between polling and messageHandler
+    let flowCompleted = false;
+
+    const cleanup = () => {
+      clearInterval(checkInterval);
+      window.removeEventListener("message", messageHandler);
+      // Clean up sessionStorage
+      sessionStorage.removeItem(`oauth2_code_verifier_${flowId}`);
+      sessionStorage.removeItem(`oauth2_state_${flowId}`);
+    };
+
+    const checkInterval = setInterval(() => {
+      try {
+        // Check if popup is closed
+        if (popup.closed) {
+          if (!flowCompleted) {
+            flowCompleted = true;
+            cleanup();
+            reject(new Error("OAuth 2.0 authorization was cancelled"));
+          }
+          return;
+        }
+
+        // Try to read popup URL (will throw if cross-origin)
+        try {
+          const popupUrl = popup.location.href;
+          if (popupUrl.startsWith(config.redirectUri) && !flowCompleted) {
+            flowCompleted = true;
+            cleanup();
+            popup.close();
+
+            // Parse the authorization code from URL
+            const url = new URL(popupUrl);
+            const code = url.searchParams.get("code");
+            const returnedState = url.searchParams.get("state");
+            const error = url.searchParams.get("error");
+            const errorDescription = url.searchParams.get("error_description");
+
+            if (error) {
+              reject(new Error(`OAuth 2.0 error: ${error}${errorDescription ? " - " + errorDescription : ""}`));
+              return;
+            }
+
+            if (!code) {
+              reject(new Error("No authorization code received"));
+              return;
+            }
+
+            // Validate state includes our flowId
+            const expectedState = `${state}:${flowId}`;
+            if (returnedState !== expectedState) {
+              reject(new Error("State mismatch - possible CSRF attack"));
+              return;
+            }
+
+            // Exchange code for tokens
+            exchangeCodeForToken(config, code, codeVerifier).then(resolve).catch(reject);
+          }
+        } catch (e) {
+          // Cross-origin error is expected when on OAuth provider's domain
+          // Keep waiting
+        }
+      } catch (e) {
+        // Ignore errors while checking popup
+      }
+    }, 500);
+
+    // Also listen for postMessage from redirect page (alternative method)
+    const messageHandler = (event: MessageEvent) => {
+      // Validate origin if needed (should match redirect URI origin)
+      if (event.data && event.data.type === "oauth2_callback" && !flowCompleted) {
+        flowCompleted = true;
+        cleanup();
+        if (popup && !popup.closed) {
+          popup.close();
+        }
+
+        const { code, state: returnedState, error, error_description } = event.data;
+
+        if (error) {
+          reject(new Error(`OAuth 2.0 error: ${error}${error_description ? " - " + error_description : ""}`));
+          return;
+        }
+
+        if (!code) {
+          reject(new Error("No authorization code received"));
+          return;
+        }
+
+        // Validate state includes our flowId
+        const expectedState = `${state}:${flowId}`;
+        if (returnedState !== expectedState) {
+          reject(new Error("State mismatch - possible CSRF attack"));
+          return;
+        }
+
+        // Exchange code for tokens
+        exchangeCodeForToken(config, code, codeVerifier).then(resolve).catch(reject);
+      }
+    };
+
+    window.addEventListener("message", messageHandler);
+
+    // Cleanup timeout after 5 minutes
+    setTimeout(
+      () => {
+        if (!flowCompleted) {
+          flowCompleted = true;
+          cleanup();
+          if (popup && !popup.closed) {
+            popup.close();
+          }
+          reject(new Error("OAuth 2.0 authorization timeout"));
+        }
+      },
+      5 * 60 * 1000,
+    );
+  });
+}
+
+/**
+ * Exchange authorization code for access token
+ */
+async function exchangeCodeForToken(
+  config: OAuth2Config,
+  code: string,
+  codeVerifier: string,
+): Promise<OAuth2TokenResponse> {
+  const tokenUrl = config.tokenEndpoint;
+
+  const body = new URLSearchParams();
+  body.set("grant_type", "authorization_code");
+  body.set("code", code);
+  body.set("redirect_uri", config.redirectUri);
+  body.set("client_id", config.clientId);
+  body.set("code_verifier", codeVerifier);
+
+  try {
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: body.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Token exchange failed: ${response.status} ${response.statusText} - ${errorText}`);
+    }
+
+    const tokenResponse: OAuth2TokenResponse = await response.json();
+
+    // Note: sessionStorage cleanup is handled by the caller
+    return tokenResponse;
+  } catch (error) {
+    // Note: sessionStorage cleanup is handled by the caller
+    throw error;
+  }
+}
+
+/**
+ * Refresh an OAuth 2.0 access token using a refresh token
+ */
+export async function refreshOAuth2Token(
+  config: Omit<OAuth2Config, "authorizationEndpoint" | "redirectUri">,
+  refreshToken: string,
+): Promise<OAuth2TokenResponse> {
+  const tokenUrl = config.tokenEndpoint;
+
+  const body = new URLSearchParams();
+  body.set("grant_type", "refresh_token");
+  body.set("refresh_token", refreshToken);
+  body.set("client_id", config.clientId);
+
+  try {
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: body.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Token refresh failed: ${response.status} ${response.statusText} - ${errorText}`);
+    }
+
+    const tokenResponse: OAuth2TokenResponse = await response.json();
+    return tokenResponse;
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * Calculate token expiry timestamp from expires_in value
+ */
+export function calculateTokenExpiry(expiresIn?: number): number | undefined {
+  if (!expiresIn) return undefined;
+  return Date.now() + expiresIn * 1000;
+}

package/src/Tab.ts

@@ -9,6 +9,7 @@ import * as shareLink from "./linkUtils";
 import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
+import * as OAuth2Utils from "./OAuth2Utils";
 
 // Layout orientation toggle icons
 const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
@@ -77,6 +78,8 @@ export class Tab extends EventEmitter {
   private settingsModal?: TabSettingsModal;
   private currentOrientation: "vertical" | "horizontal";
   private orientationToggleButton?: HTMLButtonElement;
+  private verticalResizerEl?: HTMLDivElement;
+  private editorWrapperEl?: HTMLDivElement;
 
   constructor(yasgui: Yasgui, conf: PersistedJson) {
     super();
@@ -114,6 +117,7 @@ export class Tab extends EventEmitter {
     // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
     const editorWrapper = document.createElement("div");
     editorWrapper.className = "editorwrapper";
+    this.editorWrapperEl = editorWrapper;
     const controlbarAndYasqeDiv = document.createElement("div");
     //controlbar
     this.controlBarEl = document.createElement("div");
@@ -131,6 +135,10 @@ export class Tab extends EventEmitter {
 
     this.initTabSettingsMenu();
     this.rootEl.appendChild(editorWrapper);
+
+    // Add vertical resizer for horizontal layout
+    this.drawVerticalResizer();
+
     this.rootEl.appendChild(this.yasrWrapperEl);
     this.initControlbar();
     this.initYasqe();
@@ -320,6 +328,12 @@ export class Tab extends EventEmitter {
           tab.updateOrientationToggleIcon();
         }
 
+        // Reset editor wrapper width when switching orientations
+        if (tab.editorWrapperEl) {
+          tab.editorWrapperEl.style.width = "";
+          tab.editorWrapperEl.style.flex = "";
+        }
+
         // Refresh components to adjust to new layout
         if (tab.yasqe) {
           tab.yasqe.refresh();
@@ -477,9 +491,15 @@ export class Tab extends EventEmitter {
   public getName() {
     return this.persistentJson.name;
   }
-
-  public query(): Promise<any> {
+  public async query(): Promise<any> {
     if (!this.yasqe) return Promise.reject(new Error("No yasqe editor initialized"));
+
+    // Check and refresh OAuth 2.0 token if needed
+    const tokenValid = await this.ensureOAuth2TokenValid();
+    if (!tokenValid) {
+      return Promise.reject(new Error("OAuth 2.0 authentication failed"));
+    }
+
     return this.yasqe.query();
   }
 
@@ -528,11 +548,85 @@ export class Tab extends EventEmitter {
           apiKey: auth.apiKey,
         },
       };
+    } else if (auth.type === "oauth2") {
+      // For OAuth 2.0, return the current access token and ID token
+      // Token refresh is handled separately before query execution
+      if (auth.accessToken) {
+        return {
+          type: "oauth2" as const,
+          config: {
+            accessToken: auth.accessToken,
+            idToken: auth.idToken,
+          },
+        };
+      }
     }
 
     return undefined;
   }
 
+  /**
+   * Check and refresh OAuth 2.0 token if needed
+   * Should be called before query execution
+   */
+  private async ensureOAuth2TokenValid(): Promise<boolean> {
+    const endpoint = this.getEndpoint();
+    if (!endpoint) return true;
+
+    const endpointConfig = this.yasgui.persistentConfig.getEndpointConfig(endpoint);
+    if (!endpointConfig || !endpointConfig.authentication) return true;
+
+    const auth = endpointConfig.authentication;
+    if (auth.type !== "oauth2") return true;
+
+    // Check if token is expired
+    if (OAuth2Utils.isTokenExpired(auth.tokenExpiry)) {
+      // Try to refresh the token if we have a refresh token
+      if (auth.refreshToken) {
+        try {
+          const tokenResponse = await OAuth2Utils.refreshOAuth2Token(
+            {
+              clientId: auth.clientId,
+              tokenEndpoint: auth.tokenEndpoint,
+            },
+            auth.refreshToken,
+          );
+
+          const tokenExpiry = OAuth2Utils.calculateTokenExpiry(tokenResponse.expires_in);
+
+          // Update stored authentication with new tokens
+          this.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              ...auth,
+              accessToken: tokenResponse.access_token,
+              idToken: tokenResponse.id_token,
+              refreshToken: tokenResponse.refresh_token || auth.refreshToken,
+              tokenExpiry,
+            },
+          });
+
+          return true;
+        } catch (error) {
+          console.error("Failed to refresh OAuth 2.0 token:", error);
+          // Token refresh failed, user needs to re-authenticate
+          alert(
+            "Your OAuth 2.0 session has expired and could not be refreshed. Please re-authenticate by clicking the Settings button (gear icon) and selecting the SPARQL Endpoints tab.",
+          );
+          return false;
+        }
+      } else {
+        // No refresh token available, user needs to re-authenticate
+        alert(
+          "Your OAuth 2.0 session has expired. Please re-authenticate by clicking the Settings button (gear icon) and selecting the SPARQL Endpoints tab.",
+        );
+        return false;
+      }
+    }
+
+    // Token is still valid
+    return true;
+  }
+
   /**
    * The Yasgui configuration object may contain a custom request config
    * This request config object can contain getter functions, or plain json
@@ -606,6 +700,8 @@ export class Tab extends EventEmitter {
             processedReqConfig.bearerAuth = endpointAuth.config;
           } else if (endpointAuth.type === "apiKey" && typeof processedReqConfig.apiKeyAuth === "undefined") {
             processedReqConfig.apiKeyAuth = endpointAuth.config;
+          } else if (endpointAuth.type === "oauth2" && typeof processedReqConfig.oauth2Auth === "undefined") {
+            processedReqConfig.oauth2Auth = endpointAuth.config;
           }
         }
 
@@ -903,7 +999,94 @@ WHERE {
     });
   }
 
+  private drawVerticalResizer() {
+    if (this.verticalResizerEl || !this.rootEl) return;
+    this.verticalResizerEl = document.createElement("div");
+    addClass(this.verticalResizerEl, "verticalResizeWrapper");
+    const chip = document.createElement("div");
+    addClass(chip, "verticalResizeChip");
+    this.verticalResizerEl.appendChild(chip);
+    this.verticalResizerEl.addEventListener("mousedown", this.initVerticalDrag, false);
+    this.verticalResizerEl.addEventListener("dblclick", this.resetVerticalSplit, false);
+    this.rootEl.appendChild(this.verticalResizerEl);
+  }
+
+  private initVerticalDrag = () => {
+    document.documentElement.addEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.addEventListener("mouseup", this.stopVerticalDrag, false);
+  };
+
+  private calculateVerticalDragOffset(event: MouseEvent): number {
+    if (!this.rootEl) return 0;
+
+    let parentOffset = 0;
+    if (this.rootEl.offsetParent) {
+      parentOffset = (this.rootEl.offsetParent as HTMLElement).offsetLeft;
+    }
+
+    let scrollOffset = 0;
+    let parentElement = this.rootEl.parentElement;
+    while (parentElement) {
+      scrollOffset += parentElement.scrollLeft;
+      parentElement = parentElement.parentElement;
+    }
+
+    return event.clientX - parentOffset - this.rootEl.offsetLeft + scrollOffset;
+  }
+
+  private doVerticalDrag = (event: MouseEvent) => {
+    if (!this.editorWrapperEl || !this.rootEl) return;
+
+    const offset = this.calculateVerticalDragOffset(event);
+    const totalWidth = this.rootEl.offsetWidth;
+
+    // Ensure minimum widths (at least 200px for each panel)
+    const minWidth = 200;
+    const maxWidth = totalWidth - minWidth - 10; // 10px for resizer
+
+    const newWidth = Math.max(minWidth, Math.min(maxWidth, offset));
+    this.editorWrapperEl.style.width = newWidth + "px";
+    this.editorWrapperEl.style.flex = "0 0 " + newWidth + "px";
+  };
+
+  private stopVerticalDrag = () => {
+    document.documentElement.removeEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.removeEventListener("mouseup", this.stopVerticalDrag, false);
+
+    // Refresh editors after resizing
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  };
+
+  private resetVerticalSplit = () => {
+    if (!this.editorWrapperEl) return;
+
+    // Reset to 50/50 split
+    this.editorWrapperEl.style.width = "";
+    this.editorWrapperEl.style.flex = "1 1 50%";
+
+    // Refresh editors after resizing
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  };
+
   destroy() {
+    // Clean up vertical resizer event listeners
+    if (this.verticalResizerEl) {
+      this.verticalResizerEl.removeEventListener("mousedown", this.initVerticalDrag, false);
+      this.verticalResizerEl.removeEventListener("dblclick", this.resetVerticalSplit, false);
+    }
+    document.documentElement.removeEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.removeEventListener("mouseup", this.stopVerticalDrag, false);
+
     this.removeAllListeners();
     this.settingsModal?.destroy();
     this.endpointSelect?.destroy();

package/src/TabElements.scss

@@ -1,14 +1,19 @@
 @use "sass:color";
+
 $minTabHeight: 35px;
+
 .yasgui {
   .tabsList {
+    flex-shrink: 0; // Prevent tabs from shrinking
+    display: flex;
+    flex-wrap: wrap;
+
     .sortable-placeholder {
       min-width: 100px;
       min-height: $minTabHeight;
       border: 2px dotted color.adjust(#555, $lightness: 20%);
     }
-    display: flex;
-    flex-wrap: wrap;
+
     a {
       cursor: pointer;
       display: flex;
@@ -18,6 +23,7 @@ $minTabHeight: 35px;
       border-bottom: 2px solid transparent;
       box-sizing: border-box;
     }
+
     .themeToggle {
       cursor: pointer;
       height: 100%;
@@ -60,10 +66,12 @@ $minTabHeight: 35px;
       &:focus-visible {
         transform: scale(1.1);
       }
+
       &:focus {
         color: #faa857;
       }
     }
+
     .tab {
       position: relative;
       $activeColor: #337ab7;
@@ -82,6 +90,7 @@ $minTabHeight: 35px;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
       }
+
       @keyframes slide {
         0% {
           left: 0;
@@ -96,24 +105,30 @@ $minTabHeight: 35px;
           right: 0;
         }
       }
+
       &.active .loader {
         background-color: $hoverColor;
       }
+
       &:hover .loader {
         background-color: $activeColor;
       }
+
       &.querying .loader {
         display: block;
       }
+
       &.active a {
         border-bottom-color: $activeColor;
         color: var(--yasgui-text-primary, #555);
       }
+
       input {
         display: none;
         outline: none;
         border: none;
       }
+
       &.renaming {
         span {
           display: none;
@@ -125,6 +140,7 @@ $minTabHeight: 35px;
           display: block;
         }
       }
+
       a {
         font-weight: 600;
         color: var(--yasgui-text-secondary, color.adjust(#555, $lightness: 20%));
@@ -135,14 +151,17 @@ $minTabHeight: 35px;
         padding: 0px 24px 0px 30px;
         white-space: nowrap;
         overflow: hidden;
+
         &:hover {
           border-bottom-color: $hoverColor;
           color: var(--yasgui-text-primary, #555);
         }
+
         &:focus {
           border-bottom-color: #faa857;
           color: var(--yasgui-text-primary, #555);
         }
+
         .closeTab {
           color: var(--yasgui-text-primary, #000);
           margin-left: 7px;
@@ -151,6 +170,7 @@ $minTabHeight: 35px;
           opacity: 0.2;
           font-weight: 700;
           padding: 2px;
+
           &:hover {
             opacity: 0.5;
           }