@matdata/yasr 5.0.1 → 5.2.0

package/package.json

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

package/src/main.scss

@@ -1,5 +1,9 @@
 @use "scss/variables.scss";
 .yasr {
+  display: flex;
+  flex-direction: column;
+  min-height: 400px; // Minimum height for vertical layout to give plugins space
+
   .yasr_btn {
     border: none;
     background: inherit;
@@ -56,7 +60,7 @@
       // redeclared here to target yasr_btns in btnGroup
       border-bottom: 2px solid transparent;
       &.selected {
-        border-bottom: 2px solid #337ab7;
+        border-bottom: 2px solid var(--yasgui-accent-color, #337ab7);
       }
       padding-left: 6px;
       padding-right: 6px;
@@ -81,8 +85,10 @@
   .yasr_header {
     display: flex;
     flex-wrap: wrap;
+    flex-shrink: 0;
   }
   .yasr_fallback_info:not(:empty) {
+    flex-shrink: 0;
     margin-top: 5px;
     border: 1px solid #d1d1d1;
     padding: 0.5rem;
@@ -123,8 +129,8 @@
     }
   }
   .yasr_btn {
-    color: #505050;
-    fill: #505050;
+    color: var(--yasgui-button-text, #505050);
+    fill: var(--yasgui-button-text, #505050);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -145,8 +151,8 @@
       box-shadow: none;
     }
     &:not(.disabled):hover {
-      fill: black;
-      color: black;
+      fill: var(--yasgui-button-hover, black);
+      color: var(--yasgui-button-hover, black);
     }
   }
 
@@ -191,8 +197,8 @@
     }
     &:focus,
     &.selected {
-      color: #337ab7;
-      fill: #337ab7;
+      color: var(--yasgui-accent-color, #337ab7);
+      fill: var(--yasgui-accent-color, #337ab7);
     }
   }
 
@@ -226,4 +232,10 @@
     flex-grow: 1;
     min-width: 10px;
   }
+
+  .yasr_results {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+  }
 }

package/src/parsers/json.ts

@@ -2,7 +2,7 @@ import Parser from "./";
 export default function (queryResponse: any, postProcessBinding: Parser.PostProcessBinding): Parser.SparqlResults {
   if (typeof queryResponse == "string") {
     const json = JSON.parse(queryResponse);
-    if (postProcessBinding) {
+    if (postProcessBinding && json.results) {
       for (const binding in json.results.bindings) {
         json.results.bindings[binding] = postProcessBinding(json.results.bindings[binding]);
       }

package/src/plugins/response/index.ts

@@ -15,6 +15,7 @@ import "codemirror/mode/xml/xml.js";
 
 import "codemirror/mode/javascript/javascript.js";
 import "codemirror/lib/codemirror.css";
+import "codemirror/theme/material-palenight.css";
 import { drawSvgStringAsElement, addClass, removeClass, drawFontAwesomeIconAsSvg } from "@matdata/yasgui-utils";
 import * as faAlignIcon from "@fortawesome/free-solid-svg-icons/faAlignLeft";
 import { DeepReadonly } from "ts-essentials";
@@ -78,6 +79,10 @@ export default class Response implements Plugin<PluginConfig> {
       value = lines.slice(0, config.maxLines).join("\n");
     }
 
+    // Detect current theme from document
+    const isDarkTheme = document.documentElement.getAttribute("data-theme") === "dark";
+    const cmTheme = isDarkTheme ? "material-palenight" : "default";
+
     const codemirrorOpts: Partial<CodeMirror.EditorConfiguration> = {
       readOnly: true,
       lineNumbers: true,
@@ -86,6 +91,7 @@ export default class Response implements Plugin<PluginConfig> {
       gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
       value: value,
       extraKeys: { Tab: false },
+      theme: cmTheme,
     };
     const mode = this.yasr.results?.getType();
     if (mode === "json") {