style(yasgui): compact Build query bar with icon actions

One row at the top of the Build query view: All checkbox with a ticked count on the left,
Replace block and icon buttons for insert at cursor and new tab on the right.

Author: MathiasVDA

.changeset/sparql-anything-builder-tweaks.md

@@ -2,4 +2,4 @@
 "@matdata/yasgui": minor
 ---
 
-SPARQL Anything source inspector: **Load structure** on the chip (and in the Ctrl+K search) now opens the Source view of the side panel. The **Build query** view has its buttons at the top, and an **All values** checkbox to tick every value of the source at once.
+SPARQL Anything source inspector: **Load structure** on the chip (and in the Ctrl+K search) now opens the Source view of the side panel. The **Build query** view has one compact bar at the top with an **All** checkbox to tick every value of the source at once, **Replace block**, and icon buttons to insert at the cursor or open in a new tab.

docs/user-guide.md

@@ -1084,7 +1084,7 @@ The structure is remembered per endpoint and set of options for a day; the reloa
 
 - **Structure**: the tree of the file as SPARQL Anything sees it: the document (`fx:root`), its rows, array items or elements, and their properties, each with a count and an example value. Click a property or element to insert it at the cursor.
 - **Preview**: the first 100 triples of the converted file, in Turtle, fetched with a `CONSTRUCT ... LIMIT 100` query. **Open as query** puts that query in a new tab.
-- **Build query**: tick the values you need, or **All values** at the top to tick them all (click it again to clear the selection). MatGUI writes the patterns from the root to each value: `fx:anySlot` for rows and array items, `a xyz:<element>` for XML elements, and `OPTIONAL` for values you mark as optional (the first value you tick is required, later ones optional; click the label to switch). The buttons stay at the top of the view: **Replace block** puts the patterns in the SERVICE block (keeping its `fx:properties` options; `Ctrl+Z` undoes it), **Insert at cursor** inserts them, and **New tab** opens a complete SELECT query.
+- **Build query**: tick the values you need, or **All** at the top to tick them all (click it again to clear the selection; next to it you see how many are ticked). MatGUI writes the patterns from the root to each value: `fx:anySlot` for rows and array items, `a xyz:<element>` for XML elements, and `OPTIONAL` for values you mark as optional (the first value you tick is required, later ones optional; click the label to switch). The bar with **All** stays at the top of the view and has the actions: **Replace block** puts the patterns in the SERVICE block (keeping its `fx:properties` options; `Ctrl+Z` undoes it), the text cursor button inserts them at the cursor, and the arrow button opens a complete SELECT query in a new tab.
 
 CSV, JSON and XML sources are shown best; other formats SPARQL Anything supports work too, with a more generic tree. A site can switch all of this off with `sparqlAnything: false`. To try it, the repository has a Docker Compose setup with a SPARQL Anything server and sample files in `dev/sparql-anything`.
 

packages/yasgui/src/icons.ts

@@ -54,6 +54,10 @@ const paths = {
     '<path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M4.268 21a2 2 0 0 0 1.727 1H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3"/><path d="m9 18-1.5-1.5"/><circle cx="5" cy="14" r="3"/>',
   refresh:
     '<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>',
+  externalLink:
+    '<path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>',
+  textCursor:
+    '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1"/><path d="M7 22h1a4 4 0 0 0 4-4v-1"/><path d="M7 2h1a4 4 0 0 1 4 4v1"/>',
   cornerDownLeft: '<path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/>',
   code: '<path d="m16 18 6-6-6-6"/><path d="m8 6-6 6 6 6"/>',
   command: '<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/>',

packages/yasgui/src/sparqlAnything/SourceView.ts

@@ -498,8 +498,8 @@ export default class SourceView {
     const pickedValues: PickedValue[] = picks.map((p) => ({ node: nodesByKey.get(p.key)!, optional: p.optional }));
     const built = pickedValues.length ? buildPatterns(pickedValues, source, queryPrefixes) : undefined;
 
-    // The actions stay on top, so they're in reach without scrolling past a long tree
-    const toolbar = el("div", "yasgui-sa__actions top");
+    // One bar on top with the selection and the actions, so they're in reach without scrolling past a long tree
+    const toolbar = el("div", "yasgui-sa__buildbar");
     const allLabel = el("label", "yasgui-sa__all");
     const all = el("input", "yasgui-sa__check");
     all.type = "checkbox";
@@ -515,15 +515,20 @@ export default class SourceView {
       }
       setPicks(next);
     });
-    allLabel.title = "Select all values, or clear the selection";
-    allLabel.append(all, el("span", undefined, picks.length ? `${picks.length} of ${values.length}` : "All values"));
+    allLabel.title = picks.length ? "Clear the selection" : "Select all values";
+    allLabel.append(
+      all,
+      el("span", undefined, "All"),
+      el("span", "yasgui-sa__allCount", `${picks.length}/${values.length}`),
+    );
     toolbar.append(allLabel);
 
-    const replace = button(
-      "Replace block",
-      "yasgui-sa__button primary",
-      "Replace the content of the SERVICE block (Ctrl+Z undoes it)",
-    );
+    const replace = iconButton("braces", "Replace block", {
+      className: "yasgui-sa__buildButton primary",
+      showLabel: true,
+      title: "Replace the content of the SERVICE block (Ctrl+Z undoes it)",
+      size: 14,
+    });
     replace.addEventListener("click", () => {
       if (!yasqe || !built) return;
       const current = yasqe.getSparqlAnythingSources().find((s) => s.key === source.key);
@@ -550,19 +555,29 @@ export default class SourceView {
       yasqe.addPrefixes(used);
       yasqe.focus();
     });
-    const insert = button("Insert at cursor", "yasgui-sa__button", "Insert the patterns at the cursor");
+    const insert = iconButton("textCursor", "Insert at cursor", {
+      className: "yasgui-sa__buildButton",
+      title: "Insert the patterns at the cursor",
+      size: 15,
+    });
     insert.addEventListener("click", () => {
       if (!yasqe || !built) return;
       yasqe.replaceSelection(built.lines.join("\n"));
       yasqe.addPrefixes(built.prefixes);
       yasqe.focus();
     });
-    const newTab = button("New tab", "yasgui-sa__button", "Open a SELECT query for these values in a new tab");
+    const newTab = iconButton("externalLink", "New tab", {
+      className: "yasgui-sa__buildButton",
+      title: "Open a SELECT query for these values in a new tab",
+      size: 15,
+    });
     newTab.addEventListener("click", () => {
       if (built) this.openInNewTab(tab, buildQuery(pickedValues, source, queryPrefixes));
     });
     for (const action of [replace, insert, newTab]) action.disabled = !built;
-    toolbar.append(replace, insert, newTab);
+    const actions = el("div", "yasgui-sa__buildActions");
+    actions.append(replace, insert, newTab);
+    toolbar.append(actions);
     wrapper.append(toolbar);
     wrapper.append(el("p", "yasgui-sa__hint", "Tick the values you need. Rows and array items become fx:anySlot."));
 

packages/yasgui/src/sparqlAnything/SparqlAnything.scss

@@ -488,39 +488,94 @@
     color: var(--yasgui-ink-muted, #56606c);
   }
 
-  &__actions {
+  // The query builder's bar: selection on the left, actions on the right; stays at the top of the scrolling body
+  &__buildbar {
+    position: sticky;
+    z-index: 1;
+    top: -8px;
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
     gap: 6px;
-    margin-top: 10px;
-
-    // The query builder's actions stay at the top of the scrolling body
-    &.top {
-      position: sticky;
-      z-index: 1;
-      top: -8px;
-      align-items: center;
-      margin: -8px -6px 8px;
-      padding: 8px 6px;
-      border-bottom: 1px solid var(--yasgui-line, #dfe5ec);
-      background: var(--yasgui-surface-raised, #fff);
-    }
+    margin: -8px -6px 6px;
+    padding: 6px 4px 6px 10px;
+    border-bottom: 1px solid var(--yasgui-line, #dfe5ec);
+    background: var(--yasgui-surface-raised, #fff);
   }
 
-  // Below the action buttons, on its own line
   &__all {
     display: flex;
-    flex-basis: 100%;
-    order: 1;
     align-items: center;
     gap: 6px;
-    padding: 2px 0 0 4px;
     color: var(--yasgui-ink-body, #3a4552);
     font-size: 12px;
     cursor: pointer;
     user-select: none;
   }
 
+  &__allCount {
+    padding: 0 6px;
+    border-radius: 999px;
+    background: var(--yasgui-surface-sunken, #f2f5f8);
+    color: var(--yasgui-ink-subtle, #6a7380);
+    font-size: 11px;
+    font-variant-numeric: tabular-nums;
+    line-height: 18px;
+  }
+
+  &__buildActions {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    margin-left: auto;
+  }
+
+  &__buildButton {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--yasgui-radius-sm, 6px);
+    background: transparent;
+    color: var(--yasgui-ink-muted, #56606c);
+    font: inherit;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+
+    .yasgui-btnLabel {
+      font-size: 12px;
+    }
+
+    &:hover {
+      background: var(--yasgui-surface-sunken, #f2f5f8);
+      color: var(--yasgui-ink, #1c2633);
+    }
+
+    &.primary {
+      margin-right: 2px;
+      padding: 0 9px 0 7px;
+      background: var(--yasgui-brand-fill, #0563bb);
+      color: var(--yasgui-on-brand, #fff);
+
+      &:hover {
+        background: var(--yasgui-brand-fill-strong, #044a8c);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+
   &__footer {
     display: flex;
     flex-wrap: wrap;

test/sparql-anything-browser.ts

@@ -171,12 +171,12 @@ describe("SPARQL Anything", function () {
     // The actions are above the tree and wait for a selection
     expect(
       await page.$eval(".yasgui-sa__section", (section) => {
-        const actions = section.querySelector(".yasgui-sa__actions")!;
+        const actions = section.querySelector(".yasgui-sa__buildbar")!;
         const tree = section.querySelector(".yasgui-sa__tree")!;
         return !!(actions.compareDocumentPosition(tree) & Node.DOCUMENT_POSITION_FOLLOWING);
       }),
     ).to.equal(true);
-    expect(await page.$eval(".yasgui-sa__actions .primary", (b) => (b as HTMLButtonElement).disabled)).to.equal(true);
+    expect(await page.$eval(".yasgui-sa__buildbar .primary", (b) => (b as HTMLButtonElement).disabled)).to.equal(true);
 
     // The view redraws often, so click the current checkbox rather than a handle to it
     await page.evaluate(() => document.querySelector<HTMLInputElement>(".yasgui-sa__all input")?.click());
@@ -185,8 +185,8 @@ describe("SPARQL Anything", function () {
     );
     expect(checked.length).to.be.greaterThan(1);
     expect(checked.every(Boolean)).to.equal(true);
-    expect(await page.$eval(".yasgui-sa__all", (el) => el.textContent)).to.equal(
-      `${checked.length} of ${checked.length}`,
+    expect(await page.$eval(".yasgui-sa__allCount", (el) => el.textContent)).to.equal(
+      `${checked.length}/${checked.length}`,
     );
     const code = await page.$eval(".yasgui-sa__code", (el) => el.textContent || "");
     expect(code).to.contain("xyz:email");
@@ -249,8 +249,8 @@ describe("SPARQL Anything", function () {
       );
       row?.querySelector<HTMLInputElement>(".yasgui-sa__check")?.click();
     });
-    await page.waitForSelector(".yasgui-sa__actions .primary", { visible: true });
-    await page.click(".yasgui-sa__actions .primary");
+    await page.waitForSelector(".yasgui-sa__buildbar .primary", { visible: true });
+    await page.click(".yasgui-sa__buildbar .primary");
     const value = await page.evaluate(() => (window as any).yasgui.getTab().getYasqe().getValue());
     expect(value).to.contain("?root fx:anySlot ?row .");
     expect(value).to.contain("?row xyz:email ?email .");