@matdata/yasgui 4.6.1

package/src/index.ts

@@ -0,0 +1,373 @@
+import { EventEmitter } from "events";
+import { merge, find, isEqual } from "lodash-es";
+import initializeDefaults from "./defaults";
+import PersistentConfig from "./PersistentConfig";
+import { default as Tab, PersistedJson as PersistedTabJson } from "./Tab";
+
+import { EndpointSelectConfig, CatalogueItem } from "./endpointSelect";
+import * as shareLink from "./linkUtils";
+import TabElements from "./TabElements";
+import { default as Yasqe, PartialConfig as YasqeConfig, RequestConfig } from "@matdata/yasqe";
+import { default as Yasr, Config as YasrConfig } from "@matdata/yasr";
+import { addClass, removeClass } from "@matdata/yasgui-utils";
+import GeoPlugin from "yasgui-geo-tg";
+import GraphPlugin from "@matdata/yasgui-graph-plugin";
+require("./index.scss");
+require("@matdata/yasr/src/scss/global.scss");
+
+// Register plugins to Yasr
+Yasr.registerPlugin("Geo", GeoPlugin);
+Yasr.registerPlugin("Graph", GraphPlugin);
+if (window) {
+  //We're storing yasqe and yasr as a member of Yasgui, but _also_ in the window
+  //That way, we dont have to tweak e.g. pro plugins to register themselves to both
+  //Yasgui.Yasr _and_ Yasr.
+  if (Yasqe) (window as any).Yasqe = Yasqe;
+  if (Yasr) (window as any).Yasr = Yasr;
+}
+export type YasguiRequestConfig = Omit<RequestConfig<Yasgui>, "adjustQueryBeforeRequest"> & {
+  adjustQueryBeforeRequest: RequestConfig<Yasqe>["adjustQueryBeforeRequest"];
+};
+export interface Config<EndpointObject extends CatalogueItem = CatalogueItem> {
+  /**
+   * Autofocus yasqe on load or tab switch
+   */
+  autofocus: boolean;
+  endpointInfo: ((tab?: Tab) => Element) | undefined;
+  copyEndpointOnNewTab: boolean;
+  tabName: string;
+  corsProxy: string | undefined;
+  endpointCatalogueOptions: EndpointSelectConfig<EndpointObject>;
+  //The function allows us to modify the config before we pass it on to a tab
+  populateFromUrl: boolean | ((configFromUrl: PersistedTabJson) => PersistedTabJson);
+  autoAddOnInit: boolean;
+  persistenceId: ((yasr: Yasgui) => string) | string | null;
+  persistenceLabelConfig: string;
+  persistenceLabelResponse: string;
+  persistencyExpire: number;
+  yasqe: Partial<YasqeConfig>;
+  yasr: YasrConfig;
+  requestConfig: YasguiRequestConfig;
+  contextMenuContainer: HTMLElement | undefined;
+  nonSslDomain?: string;
+}
+export type PartialConfig = {
+  [P in keyof Config]?: Config[P] extends object ? Partial<Config[P]> : Config[P];
+};
+
+export type TabJson = PersistedTabJson;
+
+export interface Yasgui {
+  on(event: string | symbol, listener: (...args: any[]) => void): this;
+
+  on(event: "tabSelect", listener: (instance: Yasgui, newTabId: string) => void): this;
+  emit(event: "tabSelect", instance: Yasgui, newTabId: string): boolean;
+  on(event: "tabClose", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "tabClose", instance: Yasgui, tab: Tab): boolean;
+  on(event: "query", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "query", instance: Yasgui, tab: Tab): boolean;
+  on(event: "queryBefore", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "queryBefore", instance: Yasgui, tab: Tab): boolean;
+  on(event: "queryAbort", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "queryAbort", instance: Yasgui, tab: Tab): boolean;
+  on(event: "queryResponse", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "queryResponse", instance: Yasgui, tab: Tab): boolean;
+  on(event: "tabChange", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "tabChange", instance: Yasgui, tab: Tab): boolean;
+  on(event: "tabAdd", listener: (instance: Yasgui, newTabId: string) => void): this;
+  emit(event: "tabAdd", instance: Yasgui, newTabId: string): boolean;
+  on(event: "tabOrderChanged", listener: (instance: Yasgui, tabList: string[]) => void): this;
+  emit(event: "tabOrderChanged", instance: Yasgui, tabList: string[]): boolean;
+  on(event: "fullscreen-enter", listener: (instance: Yasgui) => void): this;
+  emit(event: "fullscreen-enter", instance: Yasgui): boolean;
+  on(event: "fullscreen-leave", listener: (instance: Yasgui) => void): this;
+  emit(event: "fullscreen-leave", instance: Yasgui): boolean;
+  on(event: "endpointHistoryChange", listener: (instance: Yasgui, history: string[]) => void): this;
+  emit(event: "endpointHistoryChange", instance: Yasgui, history: string[]): boolean;
+  on(event: "autocompletionShown", listener: (instance: Yasgui, tab: Tab, widget: any) => void): this;
+  emit(event: "autocompletionShown", instance: Yasgui, tab: Tab, widget: any): boolean;
+  on(event: "autocompletionClose", listener: (instance: Yasgui, tab: Tab) => void): this;
+  emit(event: "autocompletionClose", instance: Yasgui, tab: Tab): boolean;
+}
+export class Yasgui extends EventEmitter {
+  public rootEl: HTMLDivElement;
+  public tabElements: TabElements;
+  public _tabs: { [tabId: string]: Tab } = {};
+  public tabPanelsEl: HTMLDivElement;
+  public config: Config;
+  public persistentConfig: PersistentConfig;
+  public static Tab = Tab;
+  constructor(parent: HTMLElement, config: PartialConfig) {
+    super();
+    this.rootEl = document.createElement("div");
+    addClass(this.rootEl, "yasgui");
+    parent.appendChild(this.rootEl);
+
+    this.config = merge({}, Yasgui.defaults, config);
+    this.persistentConfig = new PersistentConfig(this);
+
+    this.tabElements = new TabElements(this);
+    this.tabPanelsEl = document.createElement("div");
+
+    this.rootEl.appendChild(this.tabElements.drawTabsList());
+    this.rootEl.appendChild(this.tabPanelsEl);
+    let executeIdAfterInit: string | undefined;
+    let optionsFromUrl: PersistedTabJson | undefined;
+    if (this.config.populateFromUrl) {
+      optionsFromUrl = shareLink.getConfigFromUrl(Tab.getDefaults(this));
+      if (optionsFromUrl) {
+        const tabId = this.findTabIdForConfig(optionsFromUrl);
+        if (tabId) {
+          // when a config is already present,
+          const persistentYasr = this.persistentConfig.getTab(tabId).yasr;
+          this.persistentConfig.getTab(tabId).yasr = {
+            // Override the settings
+            settings: optionsFromUrl.yasr.settings,
+            // Keep the old response to save data/time
+            response: persistentYasr.response,
+          };
+          this.persistentConfig.setActive(tabId);
+          if (!persistentYasr.response) {
+            //we did have a tab already open for this link, but there wasnt a response
+            //probably, it's too large to put in local storage
+            //so, lets make sure we execute the query
+            executeIdAfterInit = tabId;
+          }
+        } else {
+          this.persistentConfig.setTab(
+            optionsFromUrl.id,
+            typeof this.config.populateFromUrl === "function"
+              ? this.config.populateFromUrl(optionsFromUrl)
+              : optionsFromUrl,
+          );
+          executeIdAfterInit = optionsFromUrl.id;
+        }
+      }
+    }
+    const tabs = this.persistentConfig.getTabs();
+    if (!tabs.length && this.config.autoAddOnInit) {
+      const newTab = this.addTab(true);
+      this.persistentConfig.setActive(newTab.getId());
+      this.emit("tabChange", this, newTab);
+    } else {
+      for (const tabId of tabs) {
+        this._tabs[tabId] = new Tab(this, this.persistentConfig.getTab(tabId));
+        this._registerTabListeners(this._tabs[tabId]);
+        // this.tabs[tabId].on("close", tab => this.closeTabId(tab.getId()));
+        this.tabElements.drawTab(tabId);
+      }
+      const activeTabId = this.persistentConfig.getActiveId();
+      if (activeTabId) {
+        this.markTabSelected(activeTabId);
+        if (executeIdAfterInit && executeIdAfterInit === activeTabId) {
+          (this.getTab(activeTabId) as Tab).query().catch(() => {});
+        }
+        // }
+      }
+    }
+  }
+  public hasFullscreen(fullscreen: boolean) {
+    if (fullscreen) {
+      this.emit("fullscreen-enter", this);
+      addClass(this.rootEl, "hasFullscreen");
+    } else {
+      this.emit("fullscreen-leave", this);
+      removeClass(this.rootEl, "hasFullscreen");
+    }
+  }
+  public getStorageId(label: string, getter?: Config["persistenceId"]): string | undefined {
+    const persistenceId = getter || this.config.persistenceId;
+    if (!persistenceId) return undefined;
+    if (typeof persistenceId === "string") return persistenceId + "_" + label;
+    return persistenceId(this) + "_" + label;
+  }
+  public createTabName(name?: string, i: number = 0) {
+    if (!name) name = this.config.tabName;
+    var fullName = name + (i > 0 ? " " + i : "");
+    if (this.tabNameTaken(fullName)) fullName = this.createTabName(name, i + 1);
+    return fullName;
+  }
+  public tabNameTaken(name: string) {
+    return find(this._tabs, (tab) => tab.getName() === name);
+  }
+  public getTab(tabId?: string): Tab | undefined {
+    if (tabId) {
+      return this._tabs[tabId];
+    }
+    const currentTabId = this.persistentConfig.currentId();
+    if (currentTabId) return this._tabs[currentTabId];
+  }
+
+  //only handle UI interaction, don't emit or store anything
+  private markTabSelected(tabId: string): boolean {
+    if (!this.persistentConfig.getTab(tabId)) {
+      //there is no tab config for this id. We _probably_ deleted a tab by pressing 'x', which fires the 'selectTab'
+      //event after. I.e., nothing to select anymore, and we should just ignore this
+      return false;
+    }
+    //mark tab active
+    this.tabElements.selectTab(tabId);
+
+    //draw tab content
+    if (!this._tabs[tabId]) {
+      this._tabs[tabId] = new Tab(this, Tab.getDefaults(this));
+    }
+    this._tabs[tabId].show();
+    for (const otherTabId in this._tabs) {
+      if (otherTabId !== tabId) this._tabs[otherTabId].hide();
+    }
+    return true;
+  }
+  public selectTabId(tabId: string) {
+    const tab = this.getTab();
+    if (tab && tab.getId() !== tabId) {
+      if (this.markTabSelected(tabId)) {
+        //emit
+        this.emit("tabSelect", this, tabId);
+        this.persistentConfig.setActive(tabId);
+      }
+    }
+    return tab;
+  }
+  /**
+   * Checks if two persistent tab configuration are the same based.
+   * It isnt a strict equality, as falsy values (e.g. a header that isnt set in one tabjson) isnt taken into consideration
+   * Things like the yasr response are also not taken into consideration
+   * @param tab1 Base comparable object
+   * @param tab2 Second comparable object
+   */
+  private tabConfigEquals(tab1: PersistedTabJson, tab2: PersistedTabJson): boolean {
+    let sameRequest = true;
+
+    /**
+     * Check request config
+     */
+    let key: keyof RequestConfig<Yasgui>;
+    for (key in tab1.requestConfig) {
+      if (!tab1.requestConfig[key]) continue;
+      if (!isEqual(tab2.requestConfig[key], tab1.requestConfig[key])) {
+        sameRequest = false;
+      }
+    }
+    /**
+     * Check yasqe settings
+     */
+    if (sameRequest) {
+      sameRequest = (<Array<keyof PersistedTabJson["yasqe"]>>["endpoint", "value"]).every(
+        (key) => tab1.yasqe[key] === tab2.yasqe[key],
+      );
+    }
+
+    /**
+     * Check yasr settings
+     */
+    if (sameRequest) {
+      sameRequest =
+        tab1.yasr.settings.selectedPlugin === tab2.yasr.settings.selectedPlugin &&
+        isEqual(
+          tab1.yasr.settings.pluginsConfig?.[tab1.yasr.settings?.selectedPlugin || ""],
+          tab2.yasr.settings.pluginsConfig?.[tab2.yasr.settings?.selectedPlugin || ""],
+        );
+    }
+
+    return sameRequest && tab1.name === tab2.name;
+  }
+  private findTabIdForConfig(tabConfig: PersistedTabJson) {
+    return this.persistentConfig.getTabs().find((tabId) => {
+      const tab = this.persistentConfig.getTab(tabId);
+      return this.tabConfigEquals(tab, tabConfig);
+    });
+  }
+
+  private _registerTabListeners(tab: Tab) {
+    tab.on("change", (tab) => this.emit("tabChange", this, tab));
+    tab.on("query", (tab) => this.emit("query", this, tab));
+    tab.on("queryBefore", (tab) => this.emit("queryBefore", this, tab));
+    tab.on("queryAbort", (tab) => this.emit("queryAbort", this, tab));
+    tab.on("queryResponse", (tab) => this.emit("queryResponse", this, tab));
+    tab.on("autocompletionShown", (tab, widget) => this.emit("autocompletionShown", this, tab, widget));
+    tab.on("autocompletionClose", (tab) => this.emit("autocompletionClose", this, tab));
+  }
+  public _setPanel(panelId: string, panel: HTMLDivElement) {
+    for (const id in this._tabs) {
+      if (id !== panelId) this._tabs[id].hide();
+    }
+    this.tabPanelsEl.appendChild(panel);
+  }
+  public _removePanel(panel: HTMLDivElement | undefined) {
+    if (panel) this.tabPanelsEl.removeChild(panel);
+  }
+  /**
+   * Adds a tab to yasgui
+   * @param setActive if the tab should become active when added
+   * @param [partialTabConfig]  config to add to the Tab
+   * @param [opts] extra options, atIndex, at which position the tab should be added, avoidDuplicateTabs: if the config already exists make that tab active
+   *
+   * @returns tab
+   */
+  public addTab(
+    setActive: boolean,
+    partialTabConfig?: Partial<PersistedTabJson>,
+    opts: { atIndex?: number; avoidDuplicateTabs?: boolean } = {},
+  ): Tab {
+    const tabConfig = merge({}, Tab.getDefaults(this), partialTabConfig);
+    if (tabConfig.id && this.getTab(tabConfig.id)) {
+      throw new Error("Duplicate tab ID");
+    }
+    // Check if we should copy the endpoint in the new tab and only copy if the tabConfig doesn't contain an endpoint
+    if (this.config.copyEndpointOnNewTab && !partialTabConfig?.requestConfig?.endpoint) {
+      const currentTab = this.getTab();
+      if (currentTab) {
+        tabConfig.requestConfig.endpoint = currentTab.getEndpoint();
+      }
+    }
+    if (opts.avoidDuplicateTabs) {
+      const foundTabId = this.findTabIdForConfig(tabConfig);
+      if (foundTabId) {
+        return this.selectTabId(foundTabId) as Tab;
+      }
+    }
+    const tabId = tabConfig.id;
+    const index = opts.atIndex;
+    this.persistentConfig.addToTabList(tabId, index);
+    this.emit("tabAdd", this, tabId);
+    this._tabs[tabId] = new Tab(this, tabConfig);
+    this.emit("tabChange", this, this._tabs[tabId]); //do emit, so the default config is persisted
+
+    this.tabElements.addTab(tabId, index);
+    this._registerTabListeners(this._tabs[tabId]);
+    if (setActive) {
+      this.persistentConfig.setActive(tabId);
+      this._tabs[tabId].show();
+    }
+    return this._tabs[tabId];
+  }
+  public restoreLastTab() {
+    const config = this.persistentConfig.retrieveLastClosedTab();
+    if (config) {
+      this.addTab(true, config.tab, { atIndex: config.index });
+    }
+  }
+  public destroy() {
+    this.removeAllListeners();
+    this.tabElements.destroy();
+    for (const tabId in this._tabs) {
+      const tab = this._tabs[tabId];
+      tab.destroy();
+    }
+    this._tabs = {};
+
+    while (this.rootEl.firstChild) this.rootEl.firstChild.remove();
+  }
+  public static linkUtils = shareLink;
+  public static Yasr = Yasr;
+  public static Yasqe = Yasqe;
+  public static defaults = initializeDefaults();
+  public static corsEnabled: { [endpoint: string]: boolean } = {};
+}
+
+export function getRandomId() {
+  return Math.random().toString(36).substring(7);
+}
+
+export default Yasgui;

package/src/linkUtils.ts

@@ -0,0 +1,234 @@
+const JsUri = require("jsuri");
+
+import { default as Tab, PersistedJson } from "./Tab";
+import Yasr from "@matdata/yasr";
+import { PlainRequestConfig } from "@matdata/yasqe";
+import { getAsValue } from "@matdata/yasgui-utils";
+var getUrlParams = function (_url?: string) {
+  var urlFromWindow = false;
+  if (!_url) {
+    _url = window.location.href;
+    urlFromWindow = true;
+  }
+  var url = new JsUri(_url);
+  if (url.anchor().length > 0) {
+    //firefox does some decoding if we're using window.location.hash (e.g. the + sign in contentType settings)
+    //Don't want this. So simply get the hash string ourselves
+    url.query(url.anchor());
+    if (urlFromWindow) window.location.hash = ""; //clear hash
+  }
+  return url;
+};
+
+export type RequestArgs = { [argName: string]: string | string[] };
+export function appendArgsToUrl(_url: string, args: RequestArgs): string {
+  var url = new JsUri(_url);
+  for (const arg in args) {
+    const val = args[arg];
+    if (Array.isArray(val)) {
+      for (const subVal of val) {
+        url.addQueryParam(arg, subVal);
+      }
+    } else {
+      url.addQueryParam(arg, val);
+    }
+  }
+  return url.toString();
+}
+export function createShareLink(forUrl: string, tab: Tab) {
+  const currentUrl = new JsUri(forUrl);
+  const tmpUrl = new JsUri();
+  const configObject = createShareConfig(tab);
+  let key: keyof ShareConfigObject; // Need to specify here because left hand side of a for..in cannot be typed
+  for (key in configObject) {
+    if (!configObject.hasOwnProperty(key)) continue;
+    if (key === "namedGraphs") {
+      configObject.namedGraphs.forEach((ng) => tmpUrl.addQueryParam("namedGraph", ng));
+    } else if (key === "defaultGraphs") {
+      configObject.defaultGraphs.forEach((dg) => tmpUrl.addQueryParam("defaultGraph", dg));
+    } else if (key === "args") {
+      const args = getAsValue(configObject.args, tab.yasgui);
+      args.forEach((arg) => tmpUrl.addQueryParam(arg.name, arg.value));
+    } else if (typeof configObject[key] === "object") {
+      if (configObject[key]) tmpUrl.addQueryParam(key, JSON.stringify(configObject[key]));
+    } else {
+      if (configObject[key]) tmpUrl.addQueryParam(key, configObject[key]);
+    }
+  }
+
+  //extend existing link, so first fetch current arguments. But: make sure we don't include items already used in share link
+  // if (window.location.hash.length > 1) {
+  const currentUrlParams = getUrlParams(forUrl);
+  const currentParams: [string, string][] = (<any>currentUrlParams).queryPairs;
+  currentParams.forEach(function (paramPair) {
+    if (!tmpUrl.hasQueryParam(paramPair[0])) {
+      tmpUrl.addQueryParam(paramPair[0], paramPair[1]);
+    }
+  });
+  // }
+
+  currentUrl.anchor(tmpUrl.query().substr(1));
+  return currentUrl.toString();
+}
+export type ShareConfigObject = {
+  query: string;
+  endpoint: string;
+  requestMethod: PlainRequestConfig["method"];
+  tabTitle: string;
+  headers: PlainRequestConfig["headers"];
+  contentTypeConstruct: string;
+  contentTypeSelect: string;
+  args: PlainRequestConfig["args"];
+  namedGraphs: PlainRequestConfig["namedGraphs"];
+  defaultGraphs: PlainRequestConfig["defaultGraphs"];
+  outputFormat?: string;
+  outputSettings: any;
+};
+
+export function createShareConfig(tab: Tab): ShareConfigObject {
+  const yasgui = tab.yasgui;
+  const requestConfig = tab.getRequestConfig();
+  const yasrPersistentSetting = tab.getPersistedJson().yasr.settings;
+  return {
+    query: tab.getQuery(),
+    endpoint: tab.getEndpoint(),
+    requestMethod: getAsValue(requestConfig.method, yasgui),
+    tabTitle: tab.getName(),
+    // headers: isFunction(requestConfig.headers) ? requestConfig.headers(tab.yasgui) : requestConfig.headers,
+    headers: getAsValue(requestConfig.headers, yasgui),
+    contentTypeConstruct: getAsValue(requestConfig.acceptHeaderGraph, yasgui),
+    contentTypeSelect: getAsValue(requestConfig.acceptHeaderSelect, yasgui),
+    args: getAsValue(requestConfig.args, yasgui),
+    namedGraphs: getAsValue(requestConfig.namedGraphs, yasgui),
+    defaultGraphs: getAsValue(requestConfig.defaultGraphs, yasgui),
+    outputFormat: yasrPersistentSetting.selectedPlugin,
+    outputSettings:
+      yasrPersistentSetting.pluginsConfig && yasrPersistentSetting.selectedPlugin
+        ? yasrPersistentSetting.pluginsConfig[yasrPersistentSetting.selectedPlugin]
+        : undefined,
+  };
+}
+
+export function getConfigFromUrl(defaults: PersistedJson, _url?: string): PersistedJson | undefined {
+  const options = defaults;
+
+  var url = getUrlParams(_url);
+  var hasQuery = false;
+  const currentParams: [string, string][] = (<any>url).queryPairs;
+  var pluginsConfig: any;
+  currentParams.forEach(function ([key, value]) {
+    if (key === "query") {
+      hasQuery = true;
+      options.yasqe.value = value;
+    } else if (key === "outputFormat" && value.length) {
+      if (Yasr.plugins[value]) {
+        options.yasr.settings.selectedPlugin = value;
+      } else {
+        console.warn(`Output format plugin "${value}" not found`);
+      }
+    } else if (key == "outputSettings") {
+      pluginsConfig = JSON.parse(value);
+    } else if (key == "contentTypeConstruct") {
+      options.requestConfig.acceptHeaderGraph = value;
+    } else if (key == "contentTypeSelect") {
+      options.requestConfig.acceptHeaderSelect = value;
+    } else if (key == "endpoint") {
+      options.requestConfig.endpoint = value;
+    } else if (key == "requestMethod") {
+      options.requestConfig.method = <any>value;
+    } else if (key == "tabTitle") {
+      options.name = value;
+    } else if (key == "namedGraph") {
+      if (!Array.isArray(options.requestConfig.namedGraphs)) options.requestConfig.namedGraphs = [];
+      options.requestConfig.namedGraphs.push(value);
+    } else if (key == "defaultGraph") {
+      if (!Array.isArray(options.requestConfig.defaultGraphs)) options.requestConfig.defaultGraphs = [];
+      options.requestConfig.defaultGraphs.push(value);
+    } else if (key == "headers") {
+      if (!options.requestConfig.headers) options.requestConfig.headers = {};
+      options.requestConfig.headers = JSON.parse(value);
+    } else {
+      //regular arguments. So store them as regular arguments
+      if (!options.requestConfig.args) options.requestConfig.args = [];
+      (options.requestConfig.args as Array<{ name: string; value: string }>).push({ name: key, value: value });
+    }
+  });
+  //Only know where to store the plugins config after we've saved the selected plugin
+  //i.e., do this after the previous loop
+  if (pluginsConfig && options.yasr.settings.selectedPlugin && options.yasr.settings.pluginsConfig) {
+    options.yasr.settings.pluginsConfig[options.yasr.settings.selectedPlugin] = pluginsConfig;
+  }
+  if (hasQuery) {
+    return options;
+  }
+}
+
+export function queryCatalogConfigToTabConfig<Q extends QueryCatalogConfig>(
+  catalogConfig: Q,
+  defaults?: PersistedJson,
+): PersistedJson {
+  const options = defaults || Tab.getDefaults();
+  if (catalogConfig.service) {
+    options.requestConfig.endpoint = catalogConfig.service;
+  }
+  if (catalogConfig.requestConfig) {
+    if (catalogConfig.requestConfig.payload) {
+      if (catalogConfig.requestConfig.payload.query) {
+        options.yasqe.value = catalogConfig.requestConfig.payload.query;
+      }
+      if (catalogConfig.requestConfig.payload["default-graph-uri"]) {
+        options.requestConfig.defaultGraphs = Array.isArray(catalogConfig.requestConfig.payload["default-graph-uri"])
+          ? catalogConfig.requestConfig.payload["default-graph-uri"]
+          : [catalogConfig.requestConfig.payload["default-graph-uri"]];
+      }
+      if (catalogConfig.requestConfig.payload["named-graph-uri"]) {
+        options.requestConfig.namedGraphs = Array.isArray(catalogConfig.requestConfig.payload["named-graph-uri"])
+          ? catalogConfig.requestConfig.payload["named-graph-uri"]
+          : [catalogConfig.requestConfig.payload["named-graph-uri"]];
+      }
+    }
+    if (catalogConfig.requestConfig.headers) {
+      options.requestConfig.headers = catalogConfig.requestConfig.headers;
+    }
+  }
+  if (catalogConfig.renderConfig) {
+    if (catalogConfig.renderConfig.output) {
+      if (Yasr.plugins[catalogConfig.renderConfig.output]) {
+        options.yasr.settings.selectedPlugin = catalogConfig.renderConfig.output;
+      } else {
+        console.warn(`Output format plugin "${catalogConfig.renderConfig.output}" not found`);
+      }
+    }
+    if (catalogConfig.renderConfig.settings) {
+      if (Yasr.plugins[catalogConfig.renderConfig.output] && options.yasr.settings.pluginsConfig) {
+        options.yasr.settings.pluginsConfig[catalogConfig.renderConfig.output] = catalogConfig.renderConfig.settings;
+      } else {
+        console.warn(`Output format plugin "${catalogConfig.renderConfig.output}" not found, cannot apply settings`);
+      }
+    }
+  }
+  if (catalogConfig.name) {
+    options.name = catalogConfig.name;
+  }
+  return options;
+}
+
+export interface QueryCatalogConfig {
+  service: string;
+  name: string;
+  description: string;
+  requestConfig?: {
+    payload: {
+      query: string;
+      "default-graph-uri"?: string | string[];
+      "named-graph-uri"?: string | string[];
+    };
+    headers?: {
+      [key: string]: string;
+    };
+  };
+  renderConfig?: {
+    output: string;
+    settings?: any;
+  };
+}

package/src/tab.scss

@@ -0,0 +1,61 @@
+.yasgui {
+  .tabPanel {
+    display: none;
+    position: relative;
+    &.active {
+      display: block;
+    }
+
+    // Hide editor wrapper when yasr is in fullscreen
+    &:has(.yasr.fullscreen) .editorwrapper {
+      display: none;
+    }
+
+    // When yasqe is fullscreen, keep controlbar visible
+    &:has(.yasqe.fullscreen) .controlbar {
+      position: fixed;
+      top: 50px;
+      left: 0;
+      right: 0;
+      z-index: 9999;
+      background: white;
+      border-bottom: 1px solid #ddd;
+      padding: 5px;
+    }
+  }
+  .yasr {
+    margin-top: 5px;
+  }
+
+  .tabContextButton {
+    border: none;
+    background: none;
+    align-self: center;
+    padding-left: 10px;
+    cursor: pointer;
+    color: #505050;
+    fill: #505050;
+
+    .svgImg {
+      width: 15px;
+      height: 15px;
+      font-family: initial; //font families can slightly misalign svgs with the .svgimg div
+    }
+    // IE11 Needs this specified otherwise it will not resize the svg
+    svg {
+      max-width: 15px;
+      max-height: 15px;
+    }
+
+    &:hover {
+      color: black;
+      fill: black;
+    }
+  }
+
+  .controlbar {
+    display: flex;
+    align-content: center;
+    max-height: 35px;
+  }
+}