Polish workbench workspace usability

frontend/src/components/segmentation/SegmentationLab.tsx

@@ -86,52 +86,71 @@ export function SegmentationLab({
 }: SegmentationLabProps): JSX.Element {
   return (
     <section>
-      <h2>Segmentation Lab</h2>
-      <button type="button" onClick={onLoadModels} disabled={loadingSegmentationModels}>
-        Refresh segmentation models
-      </button>
+      <div className="panel-title-row">
+        <div>
+          <p className="eyebrow">Polygon segmentation</p>
+          <h2>Segmentation Lab</h2>
+        </div>
+        <button className="secondary-action" type="button" onClick={onLoadModels} disabled={loadingSegmentationModels}>
+          Refresh models
+        </button>
+      </div>
       {loadingSegmentationModels ? <p>Loading segmentation models...</p> : null}
       {segmentationModelError ? <p className="error">{segmentationModelError}</p> : null}
       {segmentationModels.length === 0 && !loadingSegmentationModels ? <p>No segmentation models reported by backend</p> : null}
-      <ul>
+      <ul className="model-list">
         {segmentationModels.map((model) => (
-          <li key={model.model_id}>
+          <li className={model.configured ? 'model-card model-card-ready' : 'model-card'} key={model.model_id}>
             <strong>{model.display_name}</strong>
-            <div>model: {model.model_id}</div>
-            <div>framework: {model.framework}</div>
-            <div>task: {model.task_type}</div>
-            <div>status: {model.status}</div>
-            <div>configured: {model.configured ? 'yes' : 'no'}</div>
-            <div>classes: {model.supported_classes.join(', ')}</div>
-            <div>limitation: {model.limitation_message}</div>
+            <span className={model.configured ? 'status-badge status-badge-ready' : 'status-badge'}>{model.status}</span>
+            <div className="entity-meta">
+              <span>{model.model_id}</span>
+              <span>{model.framework}</span>
+              <span>{model.task_type}</span>
+            </div>
+            <p className="muted">classes: {model.supported_classes.join(', ')}</p>
+            <p className="muted">{model.limitation_message}</p>
           </li>
         ))}
       </ul>
-      <div>
-        <select value={selectedSegmentationDatasetId} onChange={(event) => onSelectDataset(event.target.value)}>
-          <option value="">Select raster dataset</option>
-          {rasterDatasets.map((dataset) => (
-            <option key={dataset.id} value={dataset.id}>
-              {dataset.name}
-            </option>
-          ))}
-        </select>
-        <select value={selectedSegmentationModelId} onChange={(event) => onSelectModel(event.target.value)}>
-          {segmentationModels.map((model) => (
-            <option key={model.model_id} value={model.model_id}>
-              {model.display_name}
-            </option>
-          ))}
-        </select>
-        <input
-          type="number"
-          min="0"
-          max="1"
-          step="0.05"
-          value={segmentationConfidenceThreshold}
-          onChange={(event) => onSetConfidenceThreshold(Number(event.target.value))}
-        />
+      <div className="lab-block">
+        <h3>Run segmentation</h3>
+        <div className="lab-form-grid">
+          <label>
+            Raster dataset
+            <select value={selectedSegmentationDatasetId} onChange={(event) => onSelectDataset(event.target.value)}>
+              <option value="">Select raster dataset</option>
+              {rasterDatasets.map((dataset) => (
+                <option key={dataset.id} value={dataset.id}>
+                  {dataset.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Model
+            <select value={selectedSegmentationModelId} onChange={(event) => onSelectModel(event.target.value)}>
+              {segmentationModels.map((model) => (
+                <option key={model.model_id} value={model.model_id}>
+                  {model.display_name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Min confidence
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              value={segmentationConfidenceThreshold}
+              onChange={(event) => onSetConfidenceThreshold(Number(event.target.value))}
+            />
+          </label>
+        </div>
         <button
+          className="primary-action"
           type="button"
           onClick={onRunSegmentation}
           disabled={runningSegmentation || !selectedProjectId || rasterDatasets.length === 0 || !selectedSegmentationModelConfigured}
@@ -153,34 +172,47 @@ export function SegmentationLab({
           {segmentationRunResult.error_code ? <p className="error">Code: {segmentationRunResult.error_code}</p> : null}
         </div>
       ) : null}
-      <div>
-        <h3>Segmentation results</h3>
-        <button type="button" onClick={onLoadRuns} disabled={!selectedProjectId}>
-          Refresh segmentation runs
-        </button>
-        <select value={selectedSegmentationRunId} onChange={(event) => onSelectRun(event.target.value)}>
-          <option value="">Select segmentation run</option>
-          {segmentationRuns.map((run) => (
-            <option key={run.id} value={run.id}>
-              {run.model_name || 'segmentation'} - {run.status} - {run.id}
-            </option>
-          ))}
-        </select>
-        <input
-          type="text"
-          placeholder="Class filter"
-          value={segmentationClassFilter}
-          onChange={(event) => onSetClassFilter(event.target.value)}
-        />
-        <input
-          type="number"
-          min="0"
-          max="1"
-          step="0.05"
-          value={segmentationMinConfidenceFilter}
-          onChange={(event) => onSetMinConfidenceFilter(Number(event.target.value))}
-        />
-        <button type="button" onClick={onLoadResults} disabled={!selectedSegmentationRunId || loadingSegmentationResults}>
+      <div className="lab-block">
+        <div className="panel-title-row">
+          <h3>Segmentation results</h3>
+          <button className="secondary-action" type="button" onClick={onLoadRuns} disabled={!selectedProjectId}>
+            Refresh runs
+          </button>
+        </div>
+        <div className="lab-form-grid">
+          <label>
+            Run
+            <select value={selectedSegmentationRunId} onChange={(event) => onSelectRun(event.target.value)}>
+              <option value="">Select segmentation run</option>
+              {segmentationRuns.map((run) => (
+                <option key={run.id} value={run.id}>
+                  {run.model_name || 'segmentation'} - {run.status} - {run.id}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label>
+            Class
+            <input
+              type="text"
+              placeholder="Class filter"
+              value={segmentationClassFilter}
+              onChange={(event) => onSetClassFilter(event.target.value)}
+            />
+          </label>
+          <label>
+            Min confidence
+            <input
+              type="number"
+              min="0"
+              max="1"
+              step="0.05"
+              value={segmentationMinConfidenceFilter}
+              onChange={(event) => onSetMinConfidenceFilter(Number(event.target.value))}
+            />
+          </label>
+        </div>
+        <button className="primary-action" type="button" onClick={onLoadResults} disabled={!selectedSegmentationRunId || loadingSegmentationResults}>
           Load segmentations
         </button>
         {loadingSegmentationResults ? <p>Loading segmentation results...</p> : null}
@@ -212,17 +244,20 @@ export function SegmentationLab({
           </table>
         ) : null}
       </div>
-      <div>
+      <div className="lab-block">
         <h3>Segmentation QA</h3>
-        <select value={segmentationReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
-          <option value="">Select reference dataset</option>
-          {referenceDatasets.map((dataset) => (
-            <option key={dataset.id} value={dataset.id}>
-              {dataset.name}
-            </option>
-          ))}
-        </select>
-        <button type="button" onClick={onRunQa} disabled={runningSegmentationQa || !selectedSegmentationRunId || !segmentationReferenceDatasetId}>
+        <label>
+          Reference dataset
+          <select value={segmentationReferenceDatasetId} onChange={(event) => onSelectReferenceDataset(event.target.value)}>
+            <option value="">Select reference dataset</option>
+            {referenceDatasets.map((dataset) => (
+              <option key={dataset.id} value={dataset.id}>
+                {dataset.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <button className="primary-action" type="button" onClick={onRunQa} disabled={runningSegmentationQa || !selectedSegmentationRunId || !segmentationReferenceDatasetId}>
           Compare segmentations to reference
         </button>
         {segmentationQaError ? <p className="error">{segmentationQaError}</p> : null}