@profullstack/hqtui-demo 0.3.0 → 0.5.0

package/src/screens/services.ts

@@ -13,7 +13,7 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
   const t = state.sample.telemetry;
   const failed = t.services.filter((s) => s.active === "failed");
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  ui.row({ size: "1fr", gap }, (row) => {
     row.panel({
       title: "Services",
       subtitle: failed.length ? `${failed.length} failed` : `${t.services.length} units`,
@@ -50,7 +50,7 @@ export function servicesScreen(ui: Container, state: DemoState, theme: Theme): v
       });
     });
 
-    row.column({ width: "0.85fr", gap }, (column) => {
+    row.column({ width: "0.85fr", gap, bordered: true }, (column) => {
       column.panel({ title: "Kernel", size: 11, borderColor: theme.accent }, (p) => {
         const k = t.kernel;
         p.keyValues([

package/src/screens/sessions.ts

@@ -43,7 +43,7 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
     });
   });
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
+  ui.row({ size: "1fr", gap }, (row) => {
     row.panel({ title: "Recent Logins", subtitle: `${t.logins.length} from wtmp`, borderColor: theme.accent }, (p) => {
       if (t.logins.length === 0) {
         p.label("No login history available.");
@@ -75,7 +75,7 @@ export function sessionsScreen(ui: Container, state: DemoState, theme: Theme): v
       });
     });
 
-    row.column({ width: "0.8fr", gap }, (column) => {
+    row.column({ width: "0.8fr", gap, bordered: true }, (column) => {
       column.panel({ title: "Failed Logins", borderColor: theme.danger }, (p) => {
         if (t.failedLogins.length === 0) {
           p.label("None recorded.");

package/src/screens/themes.ts

@@ -1,13 +1,14 @@
 import type { Container, Theme } from "@profullstack/hqtui";
 import { themeList } from "@profullstack/hqtui";
-import type { DemoState } from "../state.ts";
+import { panelGap, type DemoState } from "../state.ts";
 
 /** Live theme switching. Every theme renders the same content side by side. */
 export function themesScreen(ui: Container, state: DemoState, theme: Theme): void {
   const values = state.sample.cpu.history;
+  const gap = panelGap(state);
   ui.label(`Theme ${state.themeIndex + 1}/${themeList.length}: ${theme.name}   ←/→ or F2 to change`, { size: 1 });
   ui.spacer(1);
-  ui.grid({ columns: 3, rows: Math.ceil(themeList.length / 3), gap: 1 }, (grid) => {
+  ui.grid({ columns: 3, rows: Math.ceil(themeList.length / 3), gap }, (grid) => {
     themeList.forEach((entry, i) => {
       grid.panel({
         title: entry.name,

package/src/screens/traffic.ts

@@ -86,8 +86,8 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
     });
   });
 
-  ui.row({ size: "1fr", gap: 1 }, (row) => {
-    row.column({ gap }, (column) => {
+  ui.row({ size: "1fr", gap }, (row) => {
+    row.column({ gap, bordered: true }, (column) => {
       column.panel({
         title: "HTTP",
         subtitle: http ? `${num(http.requestsPerSecond, 1)} req/s` : "no access log",
@@ -136,7 +136,7 @@ export function trafficScreen(ui: Container, state: DemoState, theme: Theme): vo
       });
     });
 
-    row.column({ width: "0.85fr", gap }, (column) => {
+    row.column({ width: "0.85fr", gap, bordered: true }, (column) => {
       column.panel({ title: "SSH Activity", subtitle: String(t.ssh.length), borderColor: theme.warning }, (p) => {
         if (t.ssh.length === 0) {
           p.label("No sshd events in the journal.");

package/src/screens/world.ts

@@ -0,0 +1,102 @@
+import type { Container, Theme } from "@profullstack/hqtui";
+import { WORLD_COUNTRIES, WORLD_X, WORLD_Y, countryBounds } from "@profullstack/hqtui";
+import { focusPane, pane, panelGap, scrollPane, type DemoState } from "../state.ts";
+
+/** How many coordinates a country's outlines are drawn from. */
+function pointCount(rings: number[][]): number {
+  let total = 0;
+  for (const ring of rings) total += ring.length / 2;
+  return total;
+}
+
+function degrees(value: number, positive: string, negative: string): string {
+  return `${Math.abs(value).toFixed(1)}°${value >= 0 ? positive : negative}`;
+}
+
+/**
+ * The clickable world map.
+ *
+ * The country list and the map are two views of one selection rather than two
+ * selections that have to be kept in step: the list's pane index *is* which
+ * country is picked, so the arrows move the highlight on the map for free, and
+ * a click on the map only has to move the list.
+ */
+export function worldScreen(ui: Container, state: DemoState, theme: Theme): void {
+  const gap = panelGap(state);
+  const countries = pane(state, "world.countries", WORLD_COUNTRIES.length);
+  const selected = WORLD_COUNTRIES[countries.selected];
+  const hovered = state.worldHovered ? WORLD_COUNTRIES.find((c) => c.name === state.worldHovered) : undefined;
+
+  // Zooming is only meaningful with something to zoom to, and a country whose
+  // outlines are a single pixel would otherwise zoom to an empty window.
+  const window = state.worldZoom && selected ? countryBounds(selected) : { x: WORLD_X, y: WORLD_Y };
+
+  ui.row({ size: "1fr", gap }, (row) => {
+    row.panel({
+      title: "World",
+      subtitle: hovered ? hovered.name : selected?.name ?? "click a country",
+      subtitleColor: hovered ? theme.accent : theme.muted,
+      borderColor: theme.primary,
+      footer: state.worldZoom ? "click select · z zoom · r whole globe" : "click select · z zoom to selection",
+    }, (p) => {
+      p.worldMap({
+        ...window,
+        color: theme.border,
+        highlight: [selected?.iso || selected?.name || "", hovered?.iso || hovered?.name || ""],
+        highlightColor: theme.accent,
+        onSelect: (country) => {
+          if (!country) return;
+          const index = WORLD_COUNTRIES.findIndex((c) => c.name === country.name);
+          if (index >= 0) {
+            countries.selected = index;
+            focusPane(state, "world.countries");
+          }
+        },
+        onHover: (country) => {
+          state.worldHovered = country?.name ?? "";
+        },
+      });
+    });
+
+    row.column({ width: 34, gap, bordered: true }, (column) => {
+      column.panel({ title: "Selection", size: 9, borderColor: theme.accent }, (p) => {
+        if (!selected) {
+          p.label("Nothing selected.");
+          return;
+        }
+        const b = countryBounds(selected);
+        p.keyValues([
+          { label: "Country", value: selected.name, color: theme.accent },
+          { label: "ISO", value: selected.iso || "—" },
+          { label: "Longitude", value: `${degrees(b.x.min, "E", "W")} – ${degrees(b.x.max, "E", "W")}`, color: theme.primary },
+          { label: "Latitude", value: `${degrees(b.y.min, "N", "S")} – ${degrees(b.y.max, "N", "S")}`, color: theme.primary },
+          { label: "Outlines", value: String(selected.rings.length), color: theme.muted },
+          { label: "Points", value: String(pointCount(selected.rings)), color: theme.muted },
+        ], { spread: false });
+      });
+
+      column.panel({
+        title: "Countries",
+        subtitle: String(WORLD_COUNTRIES.length),
+        size: "1fr",
+        borderColor: theme.secondary,
+      }, (p) => {
+        p.table({
+          rows: WORLD_COUNTRIES as unknown as Array<{ name: string; iso: string }>,
+          selected: countries.selected,
+          offset: countries.offset,
+          followSelection: true,
+          onScroll: (delta) => scrollPane(countries, delta),
+          onFocus: () => focusPane(state, "world.countries"),
+          onSelectRow: (row) => { countries.selected = countries.offset + row; },
+          zebra: true,
+          scrollbar: true,
+          columns: [
+            { key: "name", title: "Country", min: 16, color: theme.foreground },
+            { key: "iso", title: "ISO", width: 4, color: theme.muted },
+          ],
+        });
+      });
+    });
+  });
+}

package/src/state.ts

@@ -3,13 +3,23 @@ import type { SystemSample } from "./system/index.ts";
 
 export type ScreenName =
   | "dashboard" | "traffic" | "sessions" | "network" | "services"
-  | "components" | "graphics" | "themes" | "input" | "stress";
+  | "components" | "graphics" | "themes" | "input" | "stress" | "world";
 
 export const SCREENS: ScreenName[] = [
   "dashboard", "traffic", "sessions", "network", "services",
-  "components", "graphics", "themes", "input", "stress",
+  "components", "graphics", "themes", "input", "stress", "world",
 ];
 
+/**
+ * The key that jumps straight to each screen. Digits run out at ten, so the
+ * eleventh takes a letter rather than a second "1" that would shadow the first.
+ */
+export const SCREEN_KEYS: Record<ScreenName, string> = {
+  dashboard: "1", traffic: "2", sessions: "3", network: "4", services: "5",
+  components: "6", graphics: "7", themes: "8", input: "9", stress: "0",
+  world: "w",
+};
+
 export interface DemoState {
   sample: SystemSample;
   screen: ScreenName;
@@ -42,6 +52,10 @@ export interface DemoState {
   paletteIndex: number;
   themeIndex: number;
   /** Component-showcase interactive state. */
+  /** The country under the pointer on the world map, by name; "" for open water. */
+  worldHovered: string;
+  /** Whether the world map is framed on the selection rather than the globe. */
+  worldZoom: boolean;
   toggle: boolean;
   checkbox: boolean;
   selectOpen: boolean;
@@ -142,6 +156,8 @@ export function createState(
     focused: {},
     sort: "cpu",
     collapsed: false,
+    worldHovered: "",
+    worldZoom: false,
     filter: "",
     filtering: false,
     showHelp: false,