Spaces:
Running
Running
File size: 2,974 Bytes
19abe39 1e49495 19abe39 1e49495 19abe39 1e49495 19abe39 1e49495 19abe39 1e49495 19abe39 1e49495 19abe39 1e49495 19abe39 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | import { useEffect, useRef } from 'react';
function compactnessDelta(step, prevStep) {
if (!step || !step.metrics) return null;
const curr = step.metrics.compactness;
if (curr == null) return null;
if (prevStep && prevStep.metrics && prevStep.metrics.compactness != null) {
return curr - prevStep.metrics.compactness;
}
return curr;
}
function foldAssignment(fold) {
if (!fold) return null;
const t = fold.type || '';
if (t === 'valley') return 'V';
if (t === 'mountain') return 'M';
if (t === 'pleat') return 'P';
if (t === 'crimp') return 'C';
return t.charAt(0).toUpperCase() || null;
}
function foldLabel(fold) {
if (!fold) return '';
const type = fold.type || 'fold';
const angle = fold.angle != null ? ` ${fold.angle}°` : '';
return `${type.toUpperCase()} FOLD${angle}`;
}
export default function StepFeed({ steps, currentStep }) {
const feedRef = useRef(null);
const activeRef = useRef(null);
useEffect(() => {
if (activeRef.current) {
activeRef.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
}
}, [currentStep]);
if (!steps || steps.length === 0) {
return (
<div className="step-feed">
<div style={{ padding: '16px', color: 'var(--text-dim)', fontFamily: 'var(--font-display)', fontSize: '11px' }}>
NO STEPS LOADED
</div>
</div>
);
}
return (
<div className="step-feed" ref={feedRef}>
{steps.map((step, idx) => {
const stepNum = idx + 1;
const isActive = currentStep === stepNum;
const delta = compactnessDelta(step, idx > 0 ? steps[idx - 1] : null);
const asgn = foldAssignment(step.fold);
const label = foldLabel(step.fold);
const m = step.metrics || {};
return (
<div
key={stepNum}
className={`step-entry${isActive ? ' active' : ''}`}
ref={isActive ? activeRef : null}
>
<div className="step-entry-top">
<span className="step-num">#{stepNum}</span>
<span className="step-instruction">{label}</span>
{asgn && (
<span className={`assign-badge ${asgn}`}>{asgn}</span>
)}
</div>
{delta !== null && (
<div className="step-reward-delta">
{'\u0394'} compact:{' '}
<span className={delta >= 0 ? 'delta-positive' : 'delta-negative'}>
{delta >= 0 ? '+' : ''}{delta.toFixed(3)}
</span>
{m.max_strain != null && (
<span style={{ color: 'var(--text-dim)' }}>
{' '}| strain: {m.max_strain.toFixed(4)}
{m.is_valid != null && (
<span> | {m.is_valid ? '✓' : '✗'}</span>
)}
</span>
)}
</div>
)}
</div>
);
})}
</div>
);
}
|