sqlite-hub 0.9.1 → 0.9.4

package/frontend/js/components/rowEditorPanel.js

@@ -50,15 +50,7 @@ function renderReadonlyField(label, value) {
     <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </div>
       ${
         jsonPreview
@@ -72,37 +64,68 @@ function renderReadonlyField(label, value) {
 function renderEditableField(field) {
   const badges = Array.isArray(field.badges) ? field.badges : [];
   const jsonPreview = getJsonPreview(field.value);
+  const inputType = field.inputType === "number" ? "number" : "text";
+  const numberStep = field.numberStep === "1" ? "1" : "any";
 
   return `
     <label class="block space-y-2">
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
-        ${badges
-          .map(
-            (badge) => `
-              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
-                ${escapeHtml(badge)}
-              </span>
-            `
-          )
-          .join("")}
+        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
       </span>
       ${
         jsonPreview
           ? renderJsonViewer(jsonPreview, "JSON Preview")
           : ""
       }
-      <textarea
-        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
-          jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
-        }"
-        name="field:${escapeHtml(field.name)}"
-        spellcheck="false"
-      >${escapeHtml(field.value ?? "")}</textarea>
+      ${
+        inputType === "number" && !jsonPreview
+          ? `
+              <input
+                class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                name="field:${escapeHtml(field.name)}"
+                step="${escapeHtml(numberStep)}"
+                type="number"
+                value="${escapeHtml(field.value ?? "")}"
+              />
+            `
+          : `
+              <textarea
+                class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
+                  jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
+                }"
+                name="field:${escapeHtml(field.name)}"
+                spellcheck="false"
+              >${escapeHtml(field.value ?? "")}</textarea>
+            `
+      }
     </label>
   `;
 }
 
+function getFieldBadgeClassName(tone) {
+  if (tone === "primary-key") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (tone === "foreign-key") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
+  return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
+}
+
+function renderFieldBadge(badge) {
+  const label = typeof badge === "object" ? badge.label : badge;
+  const tone = typeof badge === "object" ? badge.tone : "";
+
+  return `
+    <span class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName(tone)}">
+      ${escapeHtml(label)}
+    </span>
+  `;
+}
+
 export function renderRowEditorPanel({
   title,
   sectionLabel = "Row Editor",
@@ -126,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/tableDesignerEditor.js

@@ -57,123 +57,98 @@ function getReferencedColumns(draft, catalogTables, referencesTable) {
 
 function renderColumnRow(column, draft, catalogTables) {
   const referenceColumns = getReferencedColumns(draft, catalogTables, column.referencesTable);
+  const typeOptions = draft.supportedTypes
+    .map((type) =>
+      [
+        '<option value="',
+        escapeHtml(type),
+        '" ',
+        type === column.type ? "selected" : "",
+        ">",
+        escapeHtml(type),
+        "</option>",
+      ].join("")
+    )
+    .join("");
+  const referenceTableOptions = catalogTables
+    .map((table) =>
+      [
+        '<option value="',
+        escapeHtml(table.name),
+        '" ',
+        table.name === column.referencesTable ? "selected" : "",
+        ">",
+        escapeHtml(table.name),
+        "</option>",
+      ].join("")
+    )
+    .join("");
+  const referenceColumnOptions = referenceColumns
+    .map((name) =>
+      [
+        '<option value="',
+        escapeHtml(name),
+        '" ',
+        name === column.referencesColumn ? "selected" : "",
+        ">",
+        escapeHtml(name),
+        "</option>",
+      ].join("")
+    )
+    .join("");
 
-  return `
-    <div class="table-designer-grid__row">
-      <input
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="name"
-        placeholder="column_name"
-        spellcheck="false"
-        type="text"
-        value="${escapeHtml(column.name)}"
-      />
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="type"
-      >
-        ${draft.supportedTypes
-          .map(
-            (type) => `
-              <option value="${escapeHtml(type)}" ${type === column.type ? "selected" : ""}>
-                ${escapeHtml(type)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="notNull"
-          type="checkbox"
-          ${column.notNull ? "checked" : ""}
-        />
-        <span>Not null</span>
-      </label>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="unique"
-          type="checkbox"
-          ${column.unique ? "checked" : ""}
-        />
-        <span>Unique</span>
-      </label>
-      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
-        <input
-          data-bind="table-designer-column-flag"
-          data-column-id="${escapeHtml(column.id)}"
-          data-field="primaryKey"
-          type="checkbox"
-          ${column.primaryKey ? "checked" : ""}
-        />
-        <span>PK</span>
-      </label>
-      <input
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="defaultValue"
-        placeholder="SQL default"
-        spellcheck="false"
-        type="text"
-        value="${escapeHtml(column.defaultValue)}"
-      />
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="referencesTable"
-      >
-        <option value="">No FK table</option>
-        ${catalogTables
-          .map(
-            (table) => `
-              <option
-                value="${escapeHtml(table.name)}"
-                ${table.name === column.referencesTable ? "selected" : ""}
-              >
-                ${escapeHtml(table.name)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <select
-        class="table-designer-field"
-        data-bind="table-designer-column-field"
-        data-column-id="${escapeHtml(column.id)}"
-        data-field="referencesColumn"
-      >
-        <option value="">No FK column</option>
-        ${referenceColumns
-          .map(
-            (name) => `
-              <option value="${escapeHtml(name)}" ${name === column.referencesColumn ? "selected" : ""}>
-                ${escapeHtml(name)}
-              </option>
-            `
-          )
-          .join("")}
-      </select>
-      <button
-        class="delete-button"
-        data-action="remove-table-designer-column"
-        data-column-id="${escapeHtml(column.id)}"
-        type="button"
-      >
-        <span class="material-symbols-outlined text-base">delete</span>
-        <span>Remove</span>
-      </button>
-    </div>
-  `;
+  const columnId = escapeHtml(column.id);
+
+  return [
+    '<div class="table-designer-grid__row">',
+    '<input class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="name" placeholder="column_name" spellcheck="false" type="text" value="',
+    escapeHtml(column.name),
+    '" />',
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="type">',
+    typeOptions,
+    "</select>",
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="notNull" type="checkbox" ',
+    column.notNull ? "checked" : "",
+    ' /><span>Not null</span></label>',
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="unique" type="checkbox" ',
+    column.unique ? "checked" : "",
+    ' /><span>Unique</span></label>',
+    '<label class="standard-checkbox table-designer-check table-designer-checkbox-override">',
+    '<input data-bind="table-designer-column-flag" data-column-id="',
+    columnId,
+    '" data-field="primaryKey" type="checkbox" ',
+    column.primaryKey ? "checked" : "",
+    ' /><span>PK</span></label>',
+    '<input class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="defaultValue" placeholder="SQL default" spellcheck="false" type="text" value="',
+    escapeHtml(column.defaultValue),
+    '" />',
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="referencesTable"><option value="">No FK table</option>',
+    referenceTableOptions,
+    "</select>",
+    '<select class="table-designer-field" data-bind="table-designer-column-field" data-column-id="',
+    columnId,
+    '" data-field="referencesColumn"><option value="">No FK column</option>',
+    referenceColumnOptions,
+    "</select>",
+    '<button class="delete-button" data-action="remove-table-designer-column" data-column-id="',
+    columnId,
+    '" type="button"><span class="material-symbols-outlined text-base">delete</span><span>Remove</span></button>',
+    "</div>",
+  ].join("");
 }
 
 function renderColumnGrid(draft, catalogTables) {

package/frontend/js/lib/queryChartOptions.js

@@ -5,6 +5,7 @@ import {
   formatQueryChartAxisValue,
   getAnalysisColumn,
   sortQueryChartRows,
+  sortQueryChartRowsByNumericColumn,
 } from "./queryCharts.js";
 
 const CHART_PALETTE = ["#FCE300", "#2DFAFF", "#FFB4AB", "#CDC7AB", "#7DD3FC", "#86EFAC"];
@@ -55,7 +56,10 @@ function buildLineLabelConfig(enabled) {
 }
 
 export function buildBarChartOption(chart, rows) {
-  const sortedRows = sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
+  const sortedRows =
+    chart.config.sort_by === "y"
+      ? sortQueryChartRowsByNumericColumn(rows, chart.config.y_column, chart.config.sort_direction)
+      : sortQueryChartRows(rows, chart.config.x_column, chart.config.sort_direction);
 
   return {
     ...buildCommonOption(),

package/frontend/js/lib/queryCharts.js

@@ -312,7 +312,43 @@ function getFirstColumn(columns, predicate) {
 
 function getNextNumericColumn(analysis, excludedNames = []) {
   const excluded = new Set(excludedNames);
-  return getFirstColumn(analysis?.numberColumns, (column) => !excluded.has(column.name));
+  const candidates = (analysis?.numberColumns ?? []).filter((column) => !excluded.has(column.name));
+
+  if (!candidates.length) {
+    return null;
+  }
+
+  const scoredCandidates = candidates
+    .map((column, index) => ({
+      column,
+      index,
+      score: getNumericMeasureScore(column.name),
+    }))
+    .sort((left, right) => right.score - left.score || left.index - right.index);
+
+  return scoredCandidates[0]?.column ?? null;
+}
+
+function getNumericMeasureScore(columnName = "") {
+  const normalized = String(columnName ?? "")
+    .trim()
+    .toLowerCase();
+
+  let score = 0;
+
+  if (
+    /(count|total|sum|avg|average|amount|score|size|value|price|cost|rate|percent|pct|percentage|number)/.test(
+      normalized
+    )
+  ) {
+    score += 20;
+  }
+
+  if (/(^|_)(id|uuid|pk|key)$/.test(normalized) || /(^|_)id$/.test(normalized)) {
+    score -= 40;
+  }
+
+  return score;
 }
 
 function getPrimaryDimensionColumn(analysis) {
@@ -406,7 +442,8 @@ export function buildSuggestedChartConfig(chartType, analysis) {
         y_column: firstNumeric?.name ?? "",
         show_legend: true,
         show_labels: false,
-        sort_direction: "asc",
+        sort_by: "y",
+        sort_direction: "desc",
       };
   }
 }
@@ -524,6 +561,17 @@ export function sortQueryChartRows(rows, columnName, direction = "asc") {
   );
 }
 
+export function sortQueryChartRowsByNumericColumn(rows, columnName, direction = "asc") {
+  const multiplier = direction === "desc" ? -1 : 1;
+
+  return [...(rows ?? [])].sort((left, right) => {
+    const leftValue = coerceNumericChartValue(left?.[columnName]);
+    const rightValue = coerceNumericChartValue(right?.[columnName]);
+
+    return compareValues(leftValue, rightValue) * multiplier;
+  });
+}
+
 export function formatQueryChartAxisValue(value) {
   if (value === null || value === undefined) {
     return "NULL";