Skip to content

Commit a7a811c

Browse files
author
karei
committed
Frontend: tighten UI gating and polish results typography
- standardize title/body font sizing across Results/Match/Stream detail - refine sidebar footer layout and place GitHub icon next to Load - adjust stream table UI (hidden kinds, column layout tweaks) - make Cp validation an error (required to proceed)
1 parent bd9f096 commit a7a811c

11 files changed

Lines changed: 264 additions & 168 deletions

‎src/App.tsx‎

Lines changed: 156 additions & 97 deletions
Large diffs are not rendered by default.

‎src/assets/GitHub_Invertocat_Black.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/assets/GitHub_Invertocat_White.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/components/ScalarSpecInline.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,4 +114,3 @@ export function ScalarSpecInline(props: {
114114
</div>
115115
);
116116
}
117-

‎src/components/StreamTable.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Fragment, useEffect, useMemo, useState } from "react";
1+
import { Fragment, useEffect, useMemo, useState } from "react";
22
import { StreamDetail } from "./StreamDetail";
33
import { ScalarSpecInline } from "./ScalarSpecInline";
44
import { applyKindCanonicalization } from "../lib/streamKind";
@@ -11,9 +11,6 @@ const kindOptions: StreamKind[] = [
1111
"Common",
1212
"IsothermalFixed",
1313
"IsothermalVariable",
14-
"MVR",
15-
"MHP",
16-
"RankineCycle",
1714
];
1815
const thermalOptions: ThermalKind[] = ["hot", "cold"];
1916
const flowUnits = ["mol/s", "kmol/h", "kmol/s"] as const;
@@ -54,21 +51,22 @@ export function StreamTable(props: {
5451
}, [visibleColumns]);
5552

5653
const panelSurface = "bg-white text-neutral-900 dark:bg-neutral-950/60 dark:text-neutral-100";
57-
const stickyBg = "bg-white dark:bg-neutral-950/60";
58-
const headerBg = "bg-gray-50 dark:bg-neutral-900/60";
54+
const stickyBg = "bg-white dark:bg-neutral-950";
55+
const headerBg = "bg-gray-50 dark:bg-neutral-900";
5956
const borderTone = "border-gray-200 dark:border-neutral-800";
6057
const cellTone = "border-neutral-300 bg-white text-neutral-900 placeholder:text-gray-400 dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-100 dark:placeholder:text-neutral-600";
6158
const summaryColMinWidthPx = 184;
6259
const cellPad = "px-[0.375rem] py-[0.45rem]";
6360
const colW = {
61+
expand: "40px",
6462
name: "96px",
6563
type: "80px",
6664
kind: "120px",
67-
actions: "120px",
65+
actions: "80px",
6866
} as const;
6967
const fixedColsPx = (s: string) => (s.endsWith("rem") ? Number.parseFloat(s) * 16 : Number.parseFloat(s) || 0);
70-
const fixedMinWidthPx = fixedColsPx(colW.name) + fixedColsPx(colW.type) + fixedColsPx(colW.kind) + fixedColsPx(colW.actions);
71-
const tableMinWidthPx = fixedMinWidthPx + (3 + extraColumns.length) * summaryColMinWidthPx;
68+
const fixedMinWidthPx = fixedColsPx(colW.expand) + fixedColsPx(colW.name) + fixedColsPx(colW.type) + fixedColsPx(colW.kind);
69+
const tableMinWidthPx = fixedMinWidthPx + (3 + extraColumns.length) * summaryColMinWidthPx + fixedColsPx(colW.actions);
7270

7371
function applySpecUpdate(s: StreamRowUI, key: "F" | "Tin" | "Tout", nextSpec: ScalarSpecUI): StreamRowUI {
7472
let spec = nextSpec;
@@ -94,6 +92,7 @@ export function StreamTable(props: {
9492
style={{ minWidth: `${tableMinWidthPx}px` }}
9593
>
9694
<colgroup>
95+
<col style={{ width: colW.expand }} />
9796
<col style={{ width: colW.name }} />
9897
<col style={{ width: colW.type }} />
9998
<col style={{ width: colW.kind }} />
@@ -105,7 +104,8 @@ export function StreamTable(props: {
105104
</colgroup>
106105
<thead className={headerBg}>
107106
<tr className="text-left">
108-
<th className={`${cellPad} sticky left-0 z-20 ${headerBg}`}>Name</th>
107+
<th className={`${cellPad} sticky left-0 z-20 ${headerBg}`}></th>
108+
<th className={`${cellPad} sticky left-0 z-20 ${headerBg}`} style={{ left: colW.expand }}>Name</th>
109109
<th className={`${cellPad} ${headerBg}`}>Type</th>
110110
<th className={`${cellPad} ${headerBg}`}>Kind</th>
111111
<th className={`${cellPad} ${headerBg}`} style={{ minWidth: `${summaryColMinWidthPx}px` }}>F</th>
@@ -114,7 +114,7 @@ export function StreamTable(props: {
114114
{extraColumns.map((col) => (
115115
<th key={col.key} className={`${cellPad} ${headerBg}`} style={{ minWidth: `${summaryColMinWidthPx}px` }}>{col.label}</th>
116116
))}
117-
<th className={`${cellPad} sticky right-0 z-20 ${headerBg}`}>Actions</th>
117+
<th className={`${cellPad} ${headerBg}`}></th>
118118
</tr>
119119
</thead>
120120
<tbody>
@@ -126,6 +126,23 @@ export function StreamTable(props: {
126126
<Fragment key={s.id}>
127127
<tr className={`${active ? activeRow : baseRow} align-top`}>
128128
<td className={`${cellPad} sticky left-0 z-10 ${stickyBg} ${active ? activeRow : ""}`}>
129+
<button
130+
className="px-2 py-1 border rounded tone-button-muted"
131+
onClick={(e) => {
132+
e.stopPropagation();
133+
setExpanded((prev) => {
134+
const next = new Set(prev);
135+
if (next.has(s.id)) next.delete(s.id);
136+
else next.add(s.id);
137+
return next;
138+
});
139+
}}
140+
title={active ? "Collapse" : "Expand details"}
141+
>
142+
{active ? "▾" : "▸"}
143+
</button>
144+
</td>
145+
<td className={`${cellPad} sticky left-0 z-10 ${stickyBg} ${active ? activeRow : ""}`} style={{ left: colW.expand }}>
129146
<input
130147
className={`control-h w-full border rounded px-2 py-1 ${cellTone}`}
131148
value={s.name}
@@ -206,23 +223,8 @@ export function StreamTable(props: {
206223
</td>
207224
))}
208225

209-
<td className={`${cellPad} sticky right-0 z-10 ${stickyBg} ${active ? activeRow : ""}`}>
226+
<td className={cellPad}>
210227
<div className="flex items-center gap-2">
211-
<button
212-
className="px-2 py-1 border rounded tone-button-muted"
213-
onClick={(e) => {
214-
e.stopPropagation();
215-
setExpanded((prev) => {
216-
const next = new Set(prev);
217-
if (next.has(s.id)) next.delete(s.id);
218-
else next.add(s.id);
219-
return next;
220-
});
221-
}}
222-
title={active ? "Collapse" : "Expand details"}
223-
>
224-
{active ? "▾" : "▸"}
225-
</button>
226228
<button
227229
className="px-2 py-1 border rounded tone-button-muted"
228230
onClick={(e) => {
@@ -253,7 +255,7 @@ export function StreamTable(props: {
253255
</tr>
254256
{active ? (
255257
<tr className="bg-white dark:bg-neutral-950">
256-
<td className={`p-0 border-t ${borderTone}`} colSpan={7 + extraColumns.length}>
258+
<td className={`p-0 border-t ${borderTone}`} colSpan={8 + extraColumns.length}>
257259
<div className="sticky left-0 w-full max-w-[calc(100vw-2rem)]">
258260
<StreamDetail
259261
stream={s}
@@ -269,7 +271,7 @@ export function StreamTable(props: {
269271
})}
270272
{streams.length === 0 ? (
271273
<tr>
272-
<td className="p-3 text-gray-500 dark:text-neutral-400" colSpan={7 + extraColumns.length}>No streams. Add one.</td>
274+
<td className="p-3 text-gray-500 dark:text-neutral-400" colSpan={8 + extraColumns.length}>No streams. Add one.</td>
273275
</tr>
274276
) : null}
275277
</tbody>

‎src/components/steps/BuildStep.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ export function BuildStep({
3535
</div>
3636

3737
<Panel className={panelTone}>
38-
<div className="font-semibold mb-2">HEN summary</div>
38+
<div className="font-semibold mb-2 ui-title">HEN summary</div>
3939
<div className="text-gray-600 text-sm dark:text-neutral-400">
4040
This tab will show pinch, grid, buckets, and problem table stats.
4141
</div>
4242
</Panel>
4343

4444
{henPlot ? (
4545
<Panel className={panelTone}>
46-
<div className="font-semibold mb-2">Composite curve</div>
46+
<div className="font-semibold mb-2 ui-title">Composite curve</div>
4747
<div className="w-full overflow-hidden">
4848
<PlotlyFigure fig={henPlot} theme={theme} />
4949
</div>

‎src/components/steps/ResultsStep.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export function ResultsStep({
115115

116116
return (
117117
<div className="space-y-3">
118-
<div className="flex items-center gap-2">
118+
<div className="flex items-center gap-2 h-9">
119119
<div className="text-xl font-bold">Results</div>
120120
</div>
121121

@@ -126,7 +126,7 @@ export function ResultsStep({
126126
) : (
127127
<>
128128
<Panel className={panelTone}>
129-
<div className="flex flex-wrap items-center gap-4 text-sm">
129+
<div className="flex flex-wrap items-center gap-4 ui-body">
130130
<div><span className="font-semibold">Hot streams:</span> {resultHotOrder.length}</div>
131131
<div><span className="font-semibold">Cold streams:</span> {resultColdOrder.length}</div>
132132
{Number.isFinite(resultObjValue ?? NaN) ? (
@@ -136,11 +136,11 @@ export function ResultsStep({
136136
</Panel>
137137

138138
<Panel className={panelTone}>
139-
<div className="font-semibold mb-2">Solution Report</div>
139+
<div className="font-semibold mb-2 ui-title">Solution Report</div>
140140
{solutionReportRows.length === 0 ? (
141-
<div className="text-xs text-gray-500 dark:text-neutral-400">No solution report.</div>
141+
<div className="ui-body text-gray-500 dark:text-neutral-400">No solution report.</div>
142142
) : (
143-
<table className="text-xs border-collapse w-full">
143+
<table className="ui-body border-collapse w-full">
144144
<thead>
145145
<tr>
146146
<th className="text-left px-2 py-1 border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/40">Items</th>
@@ -167,11 +167,11 @@ export function ResultsStep({
167167
</Panel>
168168

169169
<Panel className={panelTone}>
170-
<div className="font-semibold mb-2">Economic Report</div>
170+
<div className="font-semibold mb-2 ui-title">Economic Report</div>
171171
{!economicReport || economicReport.data.length === 0 ? (
172-
<div className="text-xs text-gray-500 dark:text-neutral-400">No economic report.</div>
172+
<div className="ui-body text-gray-500 dark:text-neutral-400">No economic report.</div>
173173
) : (
174-
<table className="text-xs border-collapse w-max">
174+
<table className="ui-body border-collapse w-max">
175175
<thead>
176176
<tr>
177177
<th className="px-2 py-1 border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/40"></th>
@@ -210,9 +210,9 @@ export function ResultsStep({
210210
</Panel>
211211

212212
<Panel className={panelTone}>
213-
<div className="font-semibold mb-2">Match matrix</div>
213+
<div className="font-semibold mb-2 ui-title">Match matrix</div>
214214
<div className="matrix-resize" onMouseLeave={onCellLeave}>
215-
<table className="matrix-table text-xs border-collapse">
215+
<table className="matrix-table ui-body border-collapse">
216216
<thead>
217217
<tr>
218218
<th className="matrix-first-col text-left px-2 py-1 border border-gray-200 dark:border-neutral-800 bg-white dark:bg-neutral-900/40"></th>

0 commit comments

Comments
 (0)