sqlite-hub 0.9.3 → 0.9.6

package/frontend/js/components/queryHistoryDetail.js

@@ -126,169 +126,98 @@ export function renderQueryHistoryDetail({
     `;
   }
 
-  return `
-    <section class="flex h-full min-h-0 flex-col bg-surface-low">
-      <div class="border-b border-outline-variant/10 px-5 py-4">
-        <div class="flex items-center justify-between gap-3">
-          <div>
-            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Query Detail
-            </div>
-            <h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">
-              ${escapeHtml(item.displayTitle)}
-            </h2>
-          </div>
-          <button
-            class="query-history-icon-button"
-            data-action="clear-query-history-selection"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">close</span>
-          </button>
-        </div>
-        <div class="mt-4 flex flex-wrap gap-2">
-          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
-          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
-          ${item.lastRun ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success") : ""}
-        </div>
-      </div>
-      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">
-        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-          ${renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt))}
-          ${renderDetailMetaItem("First Executed", formatDateTime(item.firstExecutedAt))}
-          ${renderDetailMetaItem("Use Count", formatNumber(item.useCount))}
-          ${renderDetailMetaItem(
-            "Tables",
-            item.tablesDetected?.length ? item.tablesDetected.join(", ") : "None detected"
-          )}
-        </div>
+  const chartButton = canOpenQueryHistoryInCharts(item)
+    ? [
+        '<button class="standard-button" data-action="navigate" data-to="/charts/',
+        encodeURIComponent(item.id),
+        '" type="button"><span class="material-symbols-outlined text-sm">bar_chart</span>Open In Charts</button>',
+      ].join("")
+    : "";
+  const statusMarkup = [
+    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+    item.isSaved ? renderStatusBadge("saved", "primary") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
+    item.lastRun
+      ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success")
+      : "",
+  ].join("");
+  const metaMarkup = [
+    renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt)),
+    renderDetailMetaItem("First Executed", formatDateTime(item.firstExecutedAt)),
+    renderDetailMetaItem("Use Count", formatNumber(item.useCount)),
+    renderDetailMetaItem(
+      "Tables",
+      item.tablesDetected?.length ? item.tablesDetected.join(", ") : "None detected"
+    ),
+  ].join("");
+  const runsMarkup = runs.length
+    ? runs.map((run) => renderRunItem(run)).join("")
+    : '<div class="border border-outline-variant/10 bg-surface-container px-3 py-4 text-sm text-on-surface-variant/65">No execution runs recorded yet.</div>';
 
-        <form class="mt-5" data-form="save-query-history-title">
-          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
-          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            Custom Title
-          </label>
-          <div class="mt-2 flex gap-2">
-            <input
-              class="control-input flex-1 border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
-              name="title"
-              placeholder="${escapeHtml(item.displayTitle)}"
-              type="text"
-              value="${escapeHtml(item.title ?? "")}"
-            />
-            <button
-              class="standard-button"
-              type="submit"
-            >
-              Save
-            </button>
-          </div>
-          <p class="mt-2 text-xs text-on-surface-variant/60">
-            Leave empty to fall back to the auto title generated from the query.
-          </p>
-        </form>
-
-        <div class="mt-5 flex flex-wrap gap-2">
-          <button
-            class="standard-button"
-            data-action="open-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Open In Editor
-          </button>
-          ${
-            canOpenQueryHistoryInCharts(item)
-              ? `
-                <button
-                  class="standard-button"
-                  data-action="navigate"
-                  data-to="/charts/${encodeURIComponent(item.id)}"
-                  type="button"
-                >
-                  <span class="material-symbols-outlined text-sm">bar_chart</span>
-                  Open In Charts
-                </button>
-              `
-              : ""
-          }
-          <button
-            class="standard-button"
-            data-action="run-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Run Now
-          </button>
-          <button
-            class="standard-button"
-            data-action="toggle-query-history-saved"
-            data-history-id="${escapeHtml(item.id)}"
-            data-next-value="${item.isSaved ? "false" : "true"}"
-            type="button"
-          >
-            ${item.isSaved ? "Unsave" : "Save"}
-          </button>
-          <button
-            class="delete-button"
-            data-action="open-delete-query-history-modal"
-            data-history-id="${escapeHtml(item.id)}"
-            type="button"
-          >
-            Delete
-          </button>
-        </div>
-
-        <div class="mt-6">
-          <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            SQL
-          </div>
-          <pre class="query-history-detail-sql custom-scrollbar mt-2 overflow-auto border border-outline-variant/10 bg-surface-container-lowest p-4 font-mono text-sm leading-6 text-on-surface"><code>${highlightSql(
-            item.rawSql
-          )}</code></pre>
-        </div>
-
-        <form class="mt-6" data-form="save-query-history-notes">
-          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
-          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            Notes
-          </label>
-          <textarea class="custom-scrollbar mt-2 min-h-[120px] w-full resize-y border border-outline-variant/20 bg-surface-container px-3 py-3 text-sm leading-6 text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="notes" placeholder="Add context, caveats, or why this query matters...">${escapeHtml(
-            item.notes ?? ""
-          )}</textarea>
-          <div class="mt-2 flex justify-end">
-            <button
-              class="standard-button"
-              type="submit"
-            >
-              Save Notes
-            </button>
-          </div>
-        </form>
-
-        <div class="mt-6">
-          <div class="flex items-center justify-between gap-3">
-            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              Latest Runs
-            </div>
-            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/40">
-              ${escapeHtml(formatNumber(runs.length))}
-            </div>
-          </div>
-          <div class="mt-3 space-y-3">
-            ${
-              runs.length
-                ? runs.map((run) => renderRunItem(run)).join("")
-                : `
-                    <div class="border border-outline-variant/10 bg-surface-container px-3 py-4 text-sm text-on-surface-variant/65">
-                      No execution runs recorded yet.
-                    </div>
-                  `
-            }
-          </div>
-        </div>
-      </div>
-    </section>
-  `;
+  return [
+    '<section class="flex h-full min-h-0 flex-col bg-surface-low">',
+    '<div class="border-b border-outline-variant/10 px-5 py-4">',
+    '<div class="flex items-center justify-between gap-3"><div>',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
+    '<h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">',
+    escapeHtml(item.displayTitle),
+    "</h2></div>",
+    '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',
+    '</div><div class="mt-4 flex flex-wrap gap-2">',
+    statusMarkup,
+    "</div></div>",
+    '<div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">',
+    '<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">',
+    metaMarkup,
+    "</div>",
+    '<form class="mt-5" data-form="save-query-history-title">',
+    '<input name="historyId" type="hidden" value="',
+    escapeHtml(item.id),
+    '" />',
+    '<label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Custom Title</label>',
+    '<div class="mt-2 flex gap-2"><input class="control-input flex-1 border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="title" placeholder="',
+    escapeHtml(item.displayTitle),
+    '" type="text" value="',
+    escapeHtml(item.title ?? ""),
+    '" /><button class="standard-button" type="submit">Save</button></div>',
+    '<p class="mt-2 text-xs text-on-surface-variant/60">Leave empty to fall back to the auto title generated from the query.</p>',
+    "</form>",
+    '<div class="mt-5 flex flex-wrap gap-2">',
+    '<button class="standard-button" data-action="open-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Open In Editor</button>',
+    chartButton,
+    '<button class="standard-button" data-action="run-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Run Now</button>',
+    '<button class="standard-button" data-action="toggle-query-history-saved" data-history-id="',
+    escapeHtml(item.id),
+    '" data-next-value="',
+    item.isSaved ? "false" : "true",
+    '" type="button">',
+    item.isSaved ? "Unsave" : "Save",
+    "</button>",
+    '<button class="delete-button" data-action="open-delete-query-history-modal" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">Delete</button></div>',
+    '<div class="mt-6"><div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">SQL</div>',
+    '<pre class="query-history-detail-sql custom-scrollbar mt-2 overflow-auto border border-outline-variant/10 bg-surface-container-lowest p-4 font-mono text-sm leading-6 text-on-surface"><code>',
+    highlightSql(item.rawSql),
+    "</code></pre></div>",
+    '<form class="mt-6" data-form="save-query-history-notes">',
+    '<input name="historyId" type="hidden" value="',
+    escapeHtml(item.id),
+    '" />',
+    '<label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Notes</label>',
+    '<textarea class="custom-scrollbar mt-2 min-h-[120px] w-full resize-y border border-outline-variant/20 bg-surface-container px-3 py-3 text-sm leading-6 text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="notes" placeholder="Add context, caveats, or why this query matters...">',
+    escapeHtml(item.notes ?? ""),
+    '</textarea><div class="mt-2 flex justify-end"><button class="standard-button" type="submit">Save Notes</button></div></form>',
+    '<div class="mt-6"><div class="flex items-center justify-between gap-3">',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">Latest Runs</div>',
+    '<div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/40">',
+    escapeHtml(formatNumber(runs.length)),
+    '</div></div><div class="mt-3 space-y-3">',
+    runsMarkup,
+    "</div></div></div></section>",
+  ].join("");
 }

package/frontend/js/components/queryHistoryPanel.js

@@ -20,85 +20,69 @@ export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistor
   const isActive = Number(activeHistoryId) === Number(item.id);
   const isSelected = Number(selectedHistoryId) === Number(item.id);
   const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+  const itemClasses = [
+    "query-history-item",
+    isActive ? "is-active" : "",
+    item.lastRun?.status === "error" ? "is-error" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const tableMarkup = visibleTables
+    .map((tableName) =>
+      [
+        '<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">',
+        escapeHtml(tableName),
+        "</span>",
+      ].join("")
+    )
+    .join("");
 
-  return `
-    <article class="query-history-item ${isActive ? "is-active" : ""} ${
-      item.lastRun?.status === "error" ? "is-error" : ""
-    }">
-      <button
-        class="query-history-item-hit ${isActive ? "is-active" : ""}"
-        data-action="select-query-history-item"
-        data-history-id="${escapeHtml(item.id)}"
-        type="button"
-      >
-        <div class="flex flex-wrap items-center gap-2">
-          <span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">
-            ${escapeHtml(item.displayTitle)}
-          </span>
-          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType))}
-          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
-          ${item.isDestructive ? renderStatusBadge("destructive", "warning") : ""}
-        </div>
-        <p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">
-          ${escapeHtml(item.previewSql)}
-        </p>
-      </button>
-      <div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">
-        <div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">
-          ${visibleTables
-            .map(
-              (tableName) => `
-                <span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">
-                  ${escapeHtml(tableName)}
-                </span>
-              `
-            )
-            .join("")}
-        </div>
-        <div class="flex items-center gap-1">
-          <button
-            class="query-history-icon-button"
-            data-action="open-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Open in editor"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">edit_note</span>
-          </button>
-          <button
-            class="query-history-icon-button"
-            data-action="run-query-history"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Run query"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">play_arrow</span>
-          </button>
-          <button
-            class="query-history-icon-button ${item.isSaved ? "is-active" : ""}"
-            data-action="toggle-query-history-saved"
-            data-history-id="${escapeHtml(item.id)}"
-            data-next-value="${item.isSaved ? "false" : "true"}"
-            title="${item.isSaved ? "Remove from saved" : "Save query"}"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">
-              ${item.isSaved ? "bookmark" : "bookmark_add"}
-            </span>
-          </button>
-          <button
-            class="query-history-icon-button ${isSelected ? "is-active" : ""}"
-            data-action="select-query-history-item"
-            data-history-id="${escapeHtml(item.id)}"
-            title="Open query detail"
-            type="button"
-          >
-            <span class="material-symbols-outlined text-[18px]">info</span>
-          </button>
-        </div>
-      </div>
-    </article>
-  `;
+  return [
+    '<article class="',
+    itemClasses,
+    '"><button class="query-history-item-hit ',
+    isActive ? "is-active" : "",
+    '" data-action="select-query-history-item" data-history-id="',
+    escapeHtml(item.id),
+    '" type="button">',
+    '<div class="flex flex-wrap items-center gap-2"><span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">',
+    escapeHtml(item.displayTitle),
+    "</span>",
+    renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType)),
+    item.isSaved ? renderStatusBadge("saved", "primary") : "",
+    item.isDestructive ? renderStatusBadge("destructive", "warning") : "",
+    "</div>",
+    '<p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">',
+    escapeHtml(item.previewSql),
+    "</p></button>",
+    '<div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">',
+    '<div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">',
+    tableMarkup,
+    '</div><div class="flex items-center gap-1">',
+    '<button class="query-history-icon-button" data-action="open-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Open in editor" type="button"><span class="material-symbols-outlined text-[18px]">edit_note</span></button>',
+    '<button class="query-history-icon-button" data-action="run-query-history" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Run query" type="button"><span class="material-symbols-outlined text-[18px]">play_arrow</span></button>',
+    '<button class="query-history-icon-button ',
+    item.isSaved ? "is-active" : "",
+    '" data-action="toggle-query-history-saved" data-history-id="',
+    escapeHtml(item.id),
+    '" data-next-value="',
+    item.isSaved ? "false" : "true",
+    '" title="',
+    item.isSaved ? "Remove from saved" : "Save query",
+    '" type="button"><span class="material-symbols-outlined text-[18px]">',
+    item.isSaved ? "bookmark" : "bookmark_add",
+    "</span></button>",
+    '<button class="query-history-icon-button ',
+    isSelected ? "is-active" : "",
+    '" data-action="select-query-history-item" data-history-id="',
+    escapeHtml(item.id),
+    '" title="Open query detail" type="button"><span class="material-symbols-outlined text-[18px]">info</span></button>',
+    "</div></div></article>",
+  ].join("");
 }
 
 function renderQueryHistoryTabs(activeTab, historyTotal) {
@@ -109,27 +93,25 @@ function renderQueryHistoryTabs(activeTab, historyTotal) {
     { id: "failed", label: "Failed" },
   ];
 
-  return `
-    <div class="flex items-center gap-2">
-      ${tabs
-        .map(
-          (tab) => `
-            <button
-              class="query-history-tab ${activeTab === tab.id ? "is-active" : ""}"
-              data-action="set-query-history-tab"
-              data-tab="${tab.id}"
-              type="button"
-            >
-              ${escapeHtml(tab.label)}
-            </button>
-          `
-        )
-        .join("")}
-      <span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">
-        ${escapeHtml(formatNumber(historyTotal))}
-      </span>
-    </div>
-  `;
+  return [
+    '<div class="flex items-center gap-2">',
+    tabs
+      .map((tab) =>
+        [
+          '<button class="query-history-tab ',
+          activeTab === tab.id ? "is-active" : "",
+          '" data-action="set-query-history-tab" data-tab="',
+          tab.id,
+          '" type="button">',
+          escapeHtml(tab.label),
+          "</button>",
+        ].join("")
+      )
+      .join(""),
+    '<span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">',
+    escapeHtml(formatNumber(historyTotal)),
+    "</span></div>",
+  ].join("");
 }
 
 export function renderQueryHistoryPanel({

package/frontend/js/components/queryResults.js

@@ -76,7 +76,9 @@ export function renderQueryResultsPane(
                       editable ? "cursor-pointer hover:bg-surface-bright" : "hover:bg-surface-bright"
                     }`,
                   getRowAttrs: (_, index) =>
-                    editable ? `data-action="select-editor-row" data-row-index="${index}"` : "",
+                    editable
+                      ? ['data-action="select-editor-row" data-row-index="', index, '"'].join("")
+                      : "",
                 })
             : `
                 <div class="flex h-full flex-col items-center justify-center text-center text-on-surface-variant/35">

package/frontend/js/components/rowEditorPanel.js

@@ -149,43 +149,40 @@ export function renderRowEditorPanel({
 }) {
   const canSubmit = !disabledMessage && editableFields.length > 0;
   const canDelete = !disabledMessage && deleteEnabled;
-  const formId = `${formName}-panel-form`;
+  const formId = [formName, "-panel-form"].join("");
   const headerActions = [
     reloadAction
-      ? `
-          <button
-            class="standard-button"
-            data-action="${escapeHtml(reloadAction)}"
-            type="button"
-          >
-            Reload
-          </button>
-        `
+      ? [
+          '<button class="standard-button" data-action="',
+          escapeHtml(reloadAction),
+          '" type="button">Reload</button>',
+        ].join("")
       : "",
     canSubmit
-      ? `
-          <button
-            class="standard-button"
-            form="${escapeHtml(formId)}"
-            type="submit"
-            ${saving || deleting ? "disabled" : ""}
-          >
-            ${escapeHtml(saving ? "Saving..." : submitLabel)}
-          </button>
-        `
+      ? [
+          '<button class="standard-button" form="',
+          escapeHtml(formId),
+          '" type="submit" ',
+          saving || deleting ? "disabled" : "",
+          ">",
+          escapeHtml(saving ? "Saving..." : submitLabel),
+          "</button>",
+        ].join("")
       : "",
     canDelete
-      ? `
-          <button
-            class="delete-button"
-            data-action="${escapeHtml(deleteAction)}"
-            ${deleteRowIndex === null ? "" : `data-row-index="${escapeHtml(String(deleteRowIndex))}"`}
-            type="button"
-            ${saving || deleting ? "disabled" : ""}
-          >
-            ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
-          </button>
-        `
+      ? [
+          '<button class="delete-button" data-action="',
+          escapeHtml(deleteAction),
+          '" ',
+          deleteRowIndex === null
+            ? ""
+            : ['data-row-index="', escapeHtml(String(deleteRowIndex)), '"'].join(""),
+          ' type="button" ',
+          saving || deleting ? "disabled" : "",
+          ">",
+          escapeHtml(deleting ? "Deleting..." : deleteLabel),
+          "</button>",
+        ].join("")
       : "",
   ]
     .filter(Boolean)

package/frontend/js/components/structureGraph.js

@@ -1,4 +1,5 @@
 import { showToast } from '../store.js';
+import { replaceChildrenFromRenderedMarkup } from '../utils/dom.js';
 import { escapeHtml, formatNumber } from '../utils/format.js';
 
 let cytoscapeFactory = null;
@@ -530,12 +531,12 @@ function updateInspectorToggleButton() {
     }
 
     currentGraph.inspectorToggleButton.classList.toggle('is-active', currentGraph.inspectorHidden);
-    currentGraph.inspectorToggleButton.innerHTML = `
-    <span class="material-symbols-outlined text-sm">${
-        currentGraph.inspectorHidden ? 'right_panel_open' : 'right_panel_close'
-    }</span>
-    ${currentGraph.inspectorHidden ? 'Show Inspector' : 'Hide Inspector'}
-  `;
+    const icon = document.createElement('span');
+    const label = currentGraph.inspectorHidden ? 'Show Inspector' : 'Hide Inspector';
+
+    icon.className = 'material-symbols-outlined text-sm';
+    icon.textContent = currentGraph.inspectorHidden ? 'right_panel_open' : 'right_panel_close';
+    currentGraph.inspectorToggleButton.replaceChildren(icon, document.createTextNode(` ${label}`));
 }
 
 function clearSelection() {
@@ -546,7 +547,7 @@ function clearSelection() {
     currentGraph.selectedTableName = null;
     resetHighlights(currentGraph.cy);
     syncEntryHighlights();
-    currentGraph.inspector.innerHTML = getDefaultInspectorMarkup();
+    replaceChildrenFromRenderedMarkup(currentGraph.inspector, getDefaultInspectorMarkup());
     updateOpenDataButton();
 }
 
@@ -557,7 +558,7 @@ function applyTableSelection(node, { focus = true } = {}) {
 
     const tableData = node.data('table');
     currentGraph.selectedTableName = tableData.name;
-    currentGraph.inspector.innerHTML = renderInspector(tableData);
+    replaceChildrenFromRenderedMarkup(currentGraph.inspector, renderInspector(tableData));
     highlightConnectedElements(currentGraph.cy, node);
     syncEntryHighlights([tableData.name]);
     updateOpenDataButton();
@@ -742,7 +743,7 @@ export async function mountStructureGraph(snapshot) {
 
     if (!schema.tables?.length) {
         empty?.removeAttribute('hidden');
-        inspector.innerHTML = clearInspector();
+        replaceChildrenFromRenderedMarkup(inspector, clearInspector());
         return;
     }