Improve configuration input display and config comparison

Author: O2eg

web/configurator.template.html

@@ -83,21 +83,24 @@ <h1 class="pc-title">pg-configurator<small>Explainable, hardware-aware PostgreSQ
 const applyTheme = () => {
   document.documentElement.setAttribute('data-pv-theme', toggle.checked ? 'light' : 'dark');
 };
-toggle.addEventListener('change', () => {
-  applyTheme();
+// Embedded hosts own the theme; ignore this page's standalone preference.
+if (!document.documentElement.hasAttribute('data-pc-embedded')) {
+  toggle.addEventListener('change', () => {
+    applyTheme();
+    try {
+      localStorage.setItem('pgc-theme', toggle.checked ? 'light' : 'dark');
+    } catch {
+      // Storage can be unavailable; the toggle still works for this visit.
+    }
+  });
   try {
-    localStorage.setItem('pgc-theme', toggle.checked ? 'light' : 'dark');
+    const stored = localStorage.getItem('pgc-theme');
+    if (stored) toggle.checked = stored === 'light';
   } catch {
-    // Storage can be unavailable; the toggle still works for this visit.
+    // ignored, see above
   }
-});
-try {
-  const stored = localStorage.getItem('pgc-theme');
-  if (stored) toggle.checked = stored === 'light';
-} catch {
-  // ignored, see above
+  applyTheme();
 }
-applyTheme();
 </script>
 </body>
 </html>

web/css/pgc.css

@@ -169,6 +169,10 @@ body {
   user-select: none;
 }
 
+[data-pc-embedded] .pc-theme-toggle {
+  display: none;
+}
+
 .pc-theme-toggle input {
   appearance: none;
   position: relative;
@@ -465,7 +469,7 @@ body {
 }
 
 .pc-readout {
-  width: 8ch;
+  width: calc(8ch + 22px);
   flex: 0 0 auto;
   padding: 5px 10px;
   border: 1px solid var(--vw-border);

web/src/config-diff.js

@@ -22,6 +22,7 @@
  */
 
 import { numericValueInSettingUnits } from './make-conf.js';
+import { sizeTo, SYS_PG } from './units.js';
 
 const NAME_PATTERN = /^[A-Za-z_][A-Za-z0-9_.]*$/;
 const CONF_ASSIGNMENT = /^([A-Za-z_][A-Za-z0-9_.]*)\s*(?:=\s*|\s+)(.*)$/;
@@ -85,33 +86,50 @@ export function parseConfText(text) {
   return { entries, skipped };
 }
 
-/** One delimited line into cells; double quotes wrap a cell, `""` is one quote. */
+/** Logical CSV records: embedded newlines belong to a quoted value. */
+function delimitedRecords(text) {
+  const records = [];
+  let start = 0;
+  let quoted = false;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === '"') {
+      if (quoted && text[i + 1] === '"') i += 1;
+      else quoted = !quoted;
+    } else if ((text[i] === '\n' || text[i] === '\r') && !quoted) {
+      records.push(text.slice(start, i));
+      if (text[i] === '\r' && text[i + 1] === '\n') i += 1;
+      start = i + 1;
+    }
+  }
+  if (start < text.length) records.push(text.slice(start));
+  return records;
+}
+
+/** One logical record into cells; quoted whitespace is part of the value. */
 function splitDelimited(line, delimiter) {
   const cells = [];
   let cell = '';
   let quoted = false;
+  let wasQuoted = false;
+  const finish = () => {
+    cells.push(wasQuoted ? cell : cell.trim());
+    cell = ''; wasQuoted = false;
+  };
   for (let index = 0; index < line.length; index += 1) {
     const char = line[index];
     if (quoted) {
       if (char === '"' && line[index + 1] === '"') {
-        cell += '"';
-        index += 1;
-      } else if (char === '"') {
-        quoted = false;
-      } else {
-        cell += char;
-      }
+        cell += '"'; index += 1;
+      } else if (char === '"') quoted = false;
+      else cell += char;
     } else if (char === '"') {
-      quoted = true;
-    } else if (char === delimiter) {
-      cells.push(cell);
-      cell = '';
-    } else {
-      cell += char;
-    }
+      quoted = true; wasQuoted = true;
+    } else if (char === delimiter) finish();
+    else cell += char;
   }
-  cells.push(cell);
-  return cells.map((item) => item.trim());
+  if (quoted) return null; // An incomplete record is not a partial setting.
+  finish();
+  return cells;
 }
 
 /** A pg_settings export, with or without a header row, into name → value. */
@@ -121,9 +139,10 @@ export function parseDelimitedText(text, delimiter) {
   let header = false;
   let columns = { name: 0, value: 1, unit: null };
   let first = true;
-  for (const rawLine of text.split(/\r?\n/)) {
+  for (const rawLine of delimitedRecords(text)) {
     if (!rawLine.trim()) continue;
     const cells = splitDelimited(rawLine, delimiter);
+    if (cells === null) { skipped += 1; continue; }
     if (first) {
       first = false;
       const lowered = cells.map((cell) => cell.toLowerCase());
@@ -156,12 +175,21 @@ export function parseDelimitedText(text, delimiter) {
 export function detectFormat(text) {
   const lines = text.split(/\r?\n/).filter((line) => line.trim() && !line.trim().startsWith('#'));
   if (!lines.length) return { format: 'empty', delimiter: null };
+  // A named CSV header is stronger evidence than the contents of multiline
+  // values, which may themselves contain assignments or other delimiters.
+  for (const delimiter of DELIMITERS) {
+    const header = splitDelimited(lines[0], delimiter)?.map(cell => cell.toLowerCase());
+    if (header?.includes('name') && HEADER_VALUE_COLUMNS.some(name => header.includes(name))) {
+      return { format: 'csv', delimiter };
+    }
+  }
   const assignments = lines.filter((line) => /^\s*[A-Za-z_][A-Za-z0-9_.]*\s*=\s*\S/.test(line));
   if (assignments.length * 2 >= lines.length) return { format: 'conf', delimiter: null };
   let best = null;
+  const records = delimitedRecords(text).filter(record => record.trim());
   for (const delimiter of DELIMITERS) {
-    const count = lines.filter((line) => line.includes(delimiter)).length;
-    if (count * 2 >= lines.length && (best === null || count > best.count)) {
+    const count = records.filter(record => (splitDelimited(record, delimiter)?.length ?? 0) > 1).length;
+    if (count * 2 >= records.length && (best === null || count > best.count)) {
       best = { delimiter, count };
     }
   }
@@ -241,6 +269,36 @@ export function normalizeSettingValue(rawValue, sourceUnit, metadata) {
   }
 }
 
+/** Display current values in the calculated configuration's PostgreSQL units. */
+export function formatCurrentSettingValue(rawValue, sourceUnit, metadata) {
+  const raw = String(rawValue ?? '');
+  if (['string', 'enum', 'bool'].includes(metadata?.vartype)) return raw;
+  const match = NUMERIC_PATTERN.exec(stripSingleQuotes(raw.trim()));
+  if (match === null) return raw;
+  const amount = Number(match[1]);
+  const unit = match[2] || sourceUnit || metadata?.unit || '';
+  if (!Number.isFinite(amount) || !unit) return raw;
+  // Disabled, unlimited and automatic values are not negative durations/sizes.
+  if (amount <= 0) return String(amount);
+  try {
+    if (/^(us|ms|s|min|h|d)$/.test(unit)) {
+      for (const suffix of ['d', 'h', 'min', 's', 'ms', 'us']) {
+        const value = numericValueInSettingUnits(amount, unit, suffix);
+        if (value >= 1 && Number.isInteger(value)) return `${value}${suffix}`;
+      }
+      return `${match[1]}${unit}`;
+    }
+    const bytes = numericValueInSettingUnits(amount, unit, 'B');
+    // Reuse the engine's unit selection, but do not truncate collected values
+    // as sizeTo does when constructing an integer-valued candidate setting.
+    const suffix = sizeTo(bytes, SYS_PG).match(/[A-Za-z]+$/)?.[0] || 'B';
+    return `${numericValueInSettingUnits(bytes, 'B', suffix)}${suffix}`;
+  } catch {
+    // Unknown units or non-numeric/redacted values retain the original text.
+    return raw;
+  }
+}
+
 /**
  * The settings this run calculated that the pasted configuration sets to a
  * different value. `matching` counts agreement, `missing` the calculated
@@ -267,7 +325,7 @@ export function diffConfigurations(parameters, entries, metadata) {
     rows.push({
       name,
       calculated: detail.value,
-      yours: entry.unit ? `${entry.value} (${entry.unit})` : entry.value,
+      yours: formatCurrentSettingValue(entry.value, entry.unit, meta),
       apply_mode: detail.apply_mode,
       context: detail.context,
       source: detail.source,

web/src/make-conf.js

@@ -310,7 +310,8 @@ const SIZE_FACTORS = {
   TB: 1024 ** 4,
 };
 
-const TIME_FACTORS = { ms: 0.001, s: 1, min: 60, h: 3600, d: 86400 };
+// Integer microsecond factors avoid fractional arithmetic for exact conversions.
+const TIME_FACTORS = { us: 1, ms: 1000, s: 1_000_000, min: 60_000_000, h: 3_600_000_000, d: 86_400_000_000 };
 
 export function numericValueInSettingUnits(amount, sourceUnit, targetUnit) {
   if (!sourceUnit) return amount;

web/src/render.js

@@ -20,7 +20,7 @@ import {
 } from './make-conf.js';
 import { diffConfigurations, parseUserConfig } from './config-diff.js';
 import { createEnums } from './configurator.js';
-import { numberOf, PyNumber, pyStr, sizeTo, SYS_IEC } from './units.js';
+import { numberOf, PyNumber, pyStr, sizeFrom, sizeTo, SYS_IEC } from './units.js';
 
 /**
  * The input groups, in the order someone actually settles them.
@@ -536,7 +536,15 @@ export class ConfiguratorPage {
         item.value = choice;
         input.append(item);
       }
-      input.value = String(this.values[option.dest] ?? localChoices[0]);
+      const current = this.values[option.dest] ?? localChoices[0];
+      const displayed = formatInputValue(option.dest, current);
+      if (!localChoices.includes(displayed)) {
+        // Collected initdb sizes can be valid without being a common preset.
+        const item = el('option', null, displayed);
+        item.value = displayed;
+        input.append(item);
+      }
+      input.value = displayed;
     } else if (option.choices !== null) {
       input = el('select');
       for (const choice of option.choices) {
@@ -684,7 +692,16 @@ export class ConfiguratorPage {
     };
 
     const write = (value) => {
-      readout.value = value === null ? '' : String(value);
+      readout.value = formatInputValue(option.dest, value);
+      readout.removeAttribute('data-pc-tip');
+      if (spec.unit && value !== null && value !== '') {
+        try {
+          const bytes = numberOf(sizeFrom(value, SYS_IEC));
+          if (Number.isFinite(bytes)) readout.setAttribute('data-pc-tip', `Exact value used for calculation: ${bytes} B`);
+        } catch {
+          // Invalid input is explained by the calculation error, not a size tip.
+        }
+      }
       const numeric = sliderPosition(value, spec);
       if (numeric !== null) range.value = String(rangePosition(numeric, spec));
       showUnset();
@@ -701,6 +718,7 @@ export class ConfiguratorPage {
     readout.addEventListener('input', () => {
       const raw = readout.value.trim();
       this.values[option.dest] = raw === '' && spec.optional ? null : coerceReadout(raw, option);
+      readout.removeAttribute('data-pc-tip');
       const numeric = sliderPosition(this.values[option.dest], spec);
       if (numeric !== null) range.value = String(rangePosition(numeric, spec));
       this.calculate();
@@ -1170,8 +1188,19 @@ export class ConfiguratorPage {
     for (const item of rows) {
       const row = el('tr');
       row.append(el('td', null, item.name));
-      row.append(el('td', null, item.calculated));
-      row.append(el('td', 'pc-diff-yours', item.yours));
+      for (const [value, className] of [[item.calculated, null], [item.yours, 'pc-diff-yours']]) {
+        const cell = el('td', className);
+        if (item.name === 'shared_preload_libraries') {
+          const libraries = String(value).split(',');
+          libraries.forEach((library, index) => {
+            if (index > 0) cell.append(document.createElement('br'));
+            cell.append(document.createTextNode(library + (index < libraries.length - 1 ? ',' : '')));
+          });
+        } else {
+          cell.textContent = value;
+        }
+        row.append(cell);
+      }
       const apply = el('td');
       apply.append(el('span', `pc-apply pc-apply-${item.apply_mode}`, item.apply_mode));
       row.append(apply);
@@ -1279,6 +1308,22 @@ const round2 = (value) => Math.round(value * 100) / 100;
 
 const UNIT_BYTES = { Ki: 1024, Mi: 1024 ** 2, Gi: 1024 ** 3, Ti: 1024 ** 4 };
 
+/** Compact size readouts; the model retains the exact collected input. */
+export function formatInputValue(dest, value) {
+  if (value === null || value === undefined) return '';
+  const raw = String(value);
+  if (raw === '' || (!SLIDERS[dest]?.unit && dest !== 'wal_segment_size')) return raw;
+  try {
+    const bytes = numberOf(sizeFrom(value, SYS_IEC));
+    if (!Number.isFinite(bytes) || bytes < 0) return raw;
+    const [factor, unit] = SYS_IEC.find(([factor]) => bytes >= factor) ?? [1, ''];
+    return `${Number((bytes / factor).toFixed(2))}${unit || 'B'}`;
+  } catch {
+    // Preserve incomplete/invalid input so validation can explain it.
+    return raw;
+  }
+}
+
 /**
  * Render a size in the largest IEC unit that divides it exactly.
  *
@@ -1316,10 +1361,12 @@ function sliderPosition(value, spec) {
     const numeric = Number(value);
     return Number.isFinite(numeric) ? numeric : null;
   }
-  const match = /^\s*(\d+(?:\.\d+)?)\s*(Ki|Mi|Gi|Ti)?\s*$/.exec(String(value));
-  if (match === null) return null;
-  const bytes = Number(match[1]) * (UNIT_BYTES[match[2] ?? spec.unit] ?? 1);
-  return bytes / UNIT_BYTES[spec.unit];
+  try {
+    const bytes = numberOf(sizeFrom(value, SYS_IEC));
+    return Number.isFinite(bytes) ? bytes / UNIT_BYTES[spec.unit] : null;
+  } catch {
+    return null;
+  }
 }
 
 /** Render a slider position in the syntax the option expects. */