Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add double-click functionality and error messages

Browse source 
Implement double-click to replace drag-and-drop for applying inference rules. Add error messages to be displayed when an incompatible inference rule is applied.
This commit is contained in:
gpt-engineer-app[bot] 2025-08-11 10:11:19 +00:00
parent b6a3ad2c59
commit 9fff3deb07
1 changed files with 41 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/RulesOfInferencePlayground.tsx
View file

@ -88,12 +88,18 @@ function parseDragData(e: React.DragEvent): { type: DragType; value: string } |
}
}
function DraggableChip({ label, onDragStart: handle, disabled = false }: { label: string; onDragStart: (e: React.DragEvent) => void; disabled?: boolean }) {
function DraggableChip({ label, onDragStart: handle, onDoubleClick, disabled = false }: {
label: string;
onDragStart: (e: React.DragEvent) => void;
onDoubleClick?: () => void;
disabled?: boolean;
}) {
return (
<div
role="button"
draggable={!disabled}
onDragStart={disabled ? undefined : handle}
onDoubleClick={disabled ? undefined : onDoubleClick}
className={`select-none rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground shadow-sm transition-colors ${
disabled
? 'opacity-50 cursor-not-allowed'
@ -255,6 +261,26 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
const removeActivePremise = (p: string) =>
setActivePremises((prev) => prev.filter((x) => x !== p));
// Double-click handlers
const handlePremiseDoubleClick = (premise: string) => {
if (reachedTarget) return;
if (!availableStatements.includes(premise)) return;
setActivePremises((prev) => (prev.includes(premise) ? prev : [...prev, premise]));
};
const handleRuleDoubleClick = (rule: string) => {
if (reachedTarget) return;
setActiveRule(rule);
};
// Check for invalid rule combination and show error
useEffect(() => {
if (activeRule && activePremises.length > 0 && candidates.length === 0) {
setShowInvalidRuleModal(true);
setActiveRule(undefined);
}
}, [activeRule, activePremises, candidates.length]);
return (
<div className={`min-h-[70vh] space-y-4 transition-colors duration-500 ${reachedTarget && !onComplete ? 'bg-green-50/50 dark:bg-green-950/20' : ''}`}>
{/* Top controls */}
@ -290,7 +316,13 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
<p className="text-xs text-muted-foreground">Initial premises</p>
<div className="flex flex-wrap gap-2">
{example.premises.map((p) => (
<DraggableChip key={p} label={p} onDragStart={(e) => onDragStart(e, "premise", p)} disabled={reachedTarget} />
<DraggableChip
key={p}
label={p}
onDragStart={(e) => onDragStart(e, "premise", p)}
onDoubleClick={() => handlePremiseDoubleClick(p)}
disabled={reachedTarget}
/>
))}
</div>
</div>
@ -303,6 +335,7 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
key={`${s.result}-${idx}`}
label={s.result}
onDragStart={(e) => onDragStart(e, "statement", s.result)}
onDoubleClick={() => handlePremiseDoubleClick(s.result)}
disabled={reachedTarget}
/>
))}
@ -317,7 +350,12 @@ export default function RulesOfInferencePlayground({ onComplete }: { onComplete?
<div className="space-y-2">
{example.rules.map((r) => (
<div key={r.id} className="space-y-1">
<DraggableChip label={r.id} onDragStart={(e) => onDragStart(e, "rule", r.id)} disabled={reachedTarget} />
<DraggableChip
label={r.id}
onDragStart={(e) => onDragStart(e, "rule", r.id)}
onDoubleClick={() => handleRuleDoubleClick(r.id)}
disabled={reachedTarget}
/>
{r.help && <p className="text-xs text-muted-foreground pl-1">{r.help}</p>}
</div>
))}