pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'feat/editable-norms-and-goals' into 'dev'

Browse Source 
Make nodes editable: norms, goals and keyword triggers

See merge request ics/sp/2025/n25b/pepperplus-ui!18
This commit was merged in pull request #18.
This commit is contained in:
Gerla, J. (Justin)
2025-11-13 10:50:12 +00:00
parent f534f0cefa aeaf526797
commit e5fee333fb
14 changed files with 580 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@@ -109,6 +109,10 @@ main {
padding: 1rem 0;
}
input[type="checkbox"] {
cursor: pointer;
}
.flex-row {
display: flex;
flex-direction: row;

27
src/components/TextField.module.css Normal file
View File

@@ -0,0 +1,27 @@
.text-field {
border: 1px solid transparent;
border-radius: 5pt;
padding: 4px 8px;
outline: none;
background-color: canvas;
transition: border-color 0.2s, box-shadow 0.2s;
cursor: text;
}
.text-field.invalid {
border-color: red;
color: red;
}
.text-field:focus:not(.invalid) {
border-color: color-mix(in srgb, canvas, #777 10%);
}
.text-field:read-only {
cursor: pointer;
background-color: color-mix(in srgb, canvas, #777 5%);
}
.text-field:read-only:hover:not(.invalid) {
border-color: color-mix(in srgb, canvas, #777 10%);
}

101
src/components/TextField.tsx Normal file
View File

@@ -0,0 +1,101 @@
import {useState} from "react";
import styles from "./TextField.module.css";
/**
* A text input element in our own style that calls `setValue` at every keystroke.
*
* @param {Object} props - The component props.
* @param {string} props.value - The value of the text input.
* @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
* @param {string} [props.placeholder] - The placeholder text for the text input.
* @param {string} [props.className] - Additional CSS classes for the text input.
* @param {string} [props.id] - The ID of the text input.
* @param {string} [props.ariaLabel] - The ARIA label for the text input.
*/
export function RealtimeTextField({
value = "",
setValue,
onCommit,
placeholder,
className,
id,
ariaLabel,
invalid = false,
} : {
value: string,
setValue: (value: string) => void,
onCommit: () => void,
placeholder?: string,
className?: string,
id?: string,
ariaLabel?: string,
invalid?: boolean,
}) {
const [readOnly, setReadOnly] = useState(true);
const updateData = () => {
setReadOnly(true);
onCommit();
};
const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
return <input
type={"text"}
placeholder={placeholder}
value={value}
onChange={(e) => setValue(e.target.value)}
onFocus={() => setReadOnly(false)}
onBlur={updateData}
onKeyDown={updateOnEnter}
readOnly={readOnly}
id={id}
// ReactFlow uses the "drag" / "nodrag" classes to enable / disable dragging of nodes
className={`${readOnly ? "drag" : "nodrag"} ${styles.textField} ${invalid ? styles.invalid : ""} ${className}`}
aria-label={ariaLabel}
/>;
}
/**
* A text input element in our own style that calls `setValue` once the user presses the enter key or clicks outside the input.
*
* @param {Object} props - The component props.
* @param {string} props.value - The value of the text input.
* @param {(value: string) => void} props.setValue - A function that sets the value of the text input.
* @param {string} [props.placeholder] - The placeholder text for the text input.
* @param {string} [props.className] - Additional CSS classes for the text input.
* @param {string} [props.id] - The ID of the text input.
* @param {string} [props.ariaLabel] - The ARIA label for the text input.
*/
export function TextField({
value = "",
setValue,
placeholder,
className,
id,
ariaLabel,
invalid = false,
} : {
value: string,
setValue: (value: string) => void,
placeholder?: string,
className?: string,
id?: string,
ariaLabel?: string,
invalid?: boolean,
}) {
const [inputValue, setInputValue] = useState(value);
const onCommit = () => setValue(inputValue);
return <RealtimeTextField
placeholder={placeholder}
value={inputValue}
setValue={setInputValue}
onCommit={onCommit}
id={id}
className={className}
ariaLabel={ariaLabel}
invalid={invalid}
/>;
}

26
src/pages/VisProgPage/VisProg.module.css
View File

@@ -71,6 +71,16 @@
filter: drop-shadow(0 0 0.25rem forestgreen);
}
.node-goal {
outline: yellow solid 2pt;
filter: drop-shadow(0 0 0.25rem yellow);
}
.node-trigger {
outline: teal solid 2pt;
filter: drop-shadow(0 0 0.25rem teal);
}
.node-phase {
outline: dodgerblue solid 2pt;
filter: drop-shadow(0 0 0.25rem dodgerblue);
@@ -102,6 +112,22 @@
filter: drop-shadow(0 0 0.25rem forestgreen);
}
.draggable-node-goal {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: yellow solid 2pt;
filter: drop-shadow(0 0 0.25rem yellow);
}
.draggable-node-trigger {
padding: 3px 10px;
background-color: canvas;
border-radius: 5pt;
outline: teal solid 2pt;
filter: drop-shadow(0 0 0.25rem teal);
}
.draggable-node-phase {
padding: 3px 10px;
background-color: canvas;

9
src/pages/VisProgPage/VisProg.tsx
View File

@@ -13,13 +13,15 @@ import {
StartNodeComponent,
EndNodeComponent,
PhaseNodeComponent,
NormNodeComponent
NormNodeComponent,
GoalNodeComponent,
} from './visualProgrammingUI/components/NodeDefinitions.tsx';
import {DndToolbar} from './visualProgrammingUI/components/DragDropSidebar.tsx';
import graphReducer from "./visualProgrammingUI/GraphReducer.ts";
import useFlowStore from './visualProgrammingUI/VisProgStores.tsx';
import type {FlowState} from './visualProgrammingUI/VisProgTypes.tsx';
import styles from './VisProg.module.css'
import TriggerNodeComponent from "./visualProgrammingUI/components/TriggerNodeComponent.tsx";
// --| config starting params for flow |--
@@ -30,7 +32,9 @@ const NODE_TYPES = {
start: StartNodeComponent,
end: EndNodeComponent,
phase: PhaseNodeComponent,
norm: NormNodeComponent
norm: NormNodeComponent,
goal: GoalNodeComponent,
trigger: TriggerNodeComponent,
};
/**
@@ -126,6 +130,7 @@ function VisualProgrammingUI() {
function runProgram() {
const program = graphReducer();
console.log(program);
console.log(JSON.stringify(program, null, 2));
}
/**

37
src/pages/VisProgPage/visualProgrammingUI/GraphReducer.ts
View File

@@ -15,14 +15,15 @@ import type {
Phase,
PhaseReducer,
PreparedGraph,
PreparedPhase
PreparedPhase, Reduced, TriggerReducer
} from "./GraphReducerTypes.ts";
import type {
AppNode,
GoalNode,
NormNode,
PhaseNode
PhaseNode, TriggerNode
} from "./VisProgTypes.tsx";
import type {TriggerNodeProps} from "./components/TriggerNodeComponent.tsx";
/**
* Reduces the current graph inside the visual programming editor into a BehaviorProgram
@@ -31,13 +32,15 @@ import type {
* @param {PhaseReducer} phaseReducer
* @param {NormReducer} normReducer
* @param {GoalReducer} goalReducer
* @param {TriggerReducer} triggerReducer
* @returns {BehaviorProgram}
*/
export default function graphReducer(
graphPreprocessor: GraphPreprocessor = defaultGraphPreprocessor,
phaseReducer: PhaseReducer = defaultPhaseReducer,
normReducer: NormReducer = defaultNormReducer,
goalReducer: GoalReducer = defaultGoalReducer
goalReducer: GoalReducer = defaultGoalReducer,
triggerReducer: TriggerReducer = defaultTriggerReducer,
) : BehaviorProgram {
const nodes: AppNode[] = useFlowStore.getState().nodes;
const edges: Edge[] = useFlowStore.getState().edges;
@@ -47,7 +50,8 @@ export default function graphReducer(
phaseReducer(
preparedPhase,
normReducer,
goalReducer
goalReducer,
triggerReducer,
));
};
@@ -58,12 +62,14 @@ export default function graphReducer(
* @param {PreparedPhase} phase
* @param {NormReducer} normReducer
* @param {GoalReducer} goalReducer
* @param {TriggerReducer} triggerReducer
* @returns {Phase}
*/
export function defaultPhaseReducer(
phase: PreparedPhase,
normReducer: NormReducer = defaultNormReducer,
goalReducer: GoalReducer = defaultGoalReducer
goalReducer: GoalReducer = defaultGoalReducer,
triggerReducer: TriggerReducer = defaultTriggerReducer,
) : Phase {
return {
id: phase.phaseNode.id,
@@ -71,7 +77,8 @@ export function defaultPhaseReducer(
nextPhaseId: phase.nextPhaseId,
phaseData: {
norms: phase.connectedNorms.map(normReducer),
goals: phase.connectedGoals.map(goalReducer)
goals: phase.connectedGoals.map(goalReducer),
triggers: phase.connectedTriggers.map(triggerReducer),
}
}
}
@@ -82,11 +89,12 @@ export function defaultPhaseReducer(
* @param {GoalNode} node
* @returns {GoalData}
*/
function defaultGoalReducer(node: GoalNode) : GoalData {
function defaultGoalReducer(node: GoalNode) : Reduced<GoalData> {
return {
id: node.id,
name: node.data.label,
value: node.data.value
description: node.data.description,
achieved: node.data.achieved,
}
}
@@ -96,7 +104,7 @@ function defaultGoalReducer(node: GoalNode) : GoalData {
* @param {NormNode} node
* @returns {NormData}
*/
function defaultNormReducer(node: NormNode) :NormData {
function defaultNormReducer(node: NormNode) :Reduced<NormData> {
return {
id: node.id,
name: node.data.label,
@@ -104,6 +112,13 @@ function defaultNormReducer(node: NormNode) :NormData {
}
}
function defaultTriggerReducer(node: TriggerNode): Reduced<TriggerNodeProps> {
return {
id: node.id,
...node.data,
}
}
// Graph preprocessing functions:
/**
@@ -117,6 +132,7 @@ function defaultNormReducer(node: NormNode) :NormData {
export function defaultGraphPreprocessor(nodes: AppNode[], edges: Edge[]) : PreparedGraph {
const norms : NormNode[] = nodes.filter((node) => node.type === 'norm') as NormNode[];
const goals : GoalNode[] = nodes.filter((node) => node.type === 'goal') as GoalNode[];
const triggers : TriggerNode[] = nodes.filter((node) => node.type === 'trigger') as TriggerNode[];
const orderedPhases : OrderedPhases = orderPhases(nodes, edges);
return orderedPhases.phaseNodes.map((phase: PhaseNode) : PreparedPhase => {
@@ -125,7 +141,8 @@ export function defaultGraphPreprocessor(nodes: AppNode[], edges: Edge[]) : Prep
phaseNode: phase,
nextPhaseId: nextPhase as string,
connectedNorms: getIncomers({id: phase.id}, norms,edges),
connectedGoals: getIncomers({id: phase.id}, goals,edges)
connectedGoals: getIncomers({id: phase.id}, goals,edges),
connectedTriggers: getIncomers({id: phase.id}, triggers, edges),
};
});
}

20
src/pages/VisProgPage/visualProgrammingUI/GraphReducerTypes.ts
View File

@@ -1,12 +1,14 @@
import type {Edge} from "@xyflow/react";
import type {AppNode, GoalNode, NormNode, PhaseNode} from "./VisProgTypes.tsx";
import type {AppNode, GoalNode, NormNode, PhaseNode, TriggerNode} from "./VisProgTypes.tsx";
import type {TriggerNodeProps} from "./components/TriggerNodeComponent.tsx";
export type Reduced<T> = { id: string } & T;
/**
* defines how a norm is represented in the simplified behavior program
*/
export type NormData = {
id: string;
name: string;
value: string;
};
@@ -15,9 +17,9 @@ export type NormData = {
* defines how a goal is represented in the simplified behavior program
*/
export type GoalData = {
id: string;
name: string;
value: string;
description: string;
achieved: boolean;
};
/**
@@ -27,6 +29,7 @@ export type GoalData = {
export type PhaseData = {
norms: NormData[];
goals: GoalData[];
triggers: TriggerNodeProps[];
};
/**
@@ -55,12 +58,14 @@ export type BehaviorProgram = Phase[];
export type NormReducer = (node: NormNode) => NormData;
export type GoalReducer = (node: GoalNode) => GoalData;
export type NormReducer = (node: NormNode) => Reduced<NormData>;
export type GoalReducer = (node: GoalNode) => Reduced<GoalData>;
export type TriggerReducer = (node: TriggerNode) => Reduced<TriggerNodeProps>;
export type PhaseReducer = (
preparedPhase: PreparedPhase,
normReducer: NormReducer,
goalReducer: GoalReducer
goalReducer: GoalReducer,
triggerReducer: TriggerReducer,
) => Phase;
/**
@@ -90,6 +95,7 @@ export type PreparedPhase = {
nextPhaseId: string;
connectedNorms: NormNode[];
connectedGoals: GoalNode[];
connectedTriggers: TriggerNode[];
};
/**

7
src/pages/VisProgPage/visualProgrammingUI/VisProgTypes.tsx
View File

@@ -6,18 +6,21 @@ import {
type OnConnect,
type OnReconnect,
} from '@xyflow/react';
import type {TriggerNodeProps} from "./components/TriggerNodeComponent.tsx";
type defaultNodeData = {
label: string;
};
type OurNode<T> = Node<T & defaultNodeData>;
export type StartNode = Node<defaultNodeData, 'start'>;
export type EndNode = Node<defaultNodeData, 'end'>;
export type GoalNode = Node<defaultNodeData & { value: string; }, 'goal'>;
export type GoalNode = Node<defaultNodeData & { description: string; achieved: boolean; }, 'goal'>;
export type NormNode = Node<defaultNodeData & { value: string; }, 'norm'>;
export type PhaseNode = Node<defaultNodeData & { number: number; }, 'phase'>;
export type TriggerNode = OurNode<TriggerNodeProps>;
/**
* a type meant to house different node types, currently not used

48
src/pages/VisProgPage/visualProgrammingUI/components/DragDropSidebar.tsx
View File

@@ -11,7 +11,7 @@ import {
} from 'react';
import useFlowStore from "../VisProgStores.tsx";
import styles from "../../VisProg.module.css"
import type {AppNode, PhaseNode, NormNode} from "../VisProgTypes.tsx";
import type {AppNode, PhaseNode, NormNode, GoalNode, TriggerNode} from "../VisProgTypes.tsx";
@@ -106,10 +106,48 @@ export function addNode(nodeType: string, position: XYPosition) {
id: `norm-${normNumber}`,
type: nodeType,
position,
data: {label: `new norm node`, value: "Pepper should be formal"},
data: {label: `new norm node`, value: ""},
}
return normNode;
}
case "goal":
{
const goalNodes= nds.filter((node) => node.type === 'goal');
let goalNumber
if (goalNodes.length > 0) {
const finalGoalId : number = +(goalNodes[goalNodes.length - 1].id.split('-')[1]);
goalNumber = finalGoalId + 1;
} else {
goalNumber = 1;
}
const goalNode : GoalNode = {
id: `goal-${goalNumber}`,
type: nodeType,
position,
data: {label: `new goal node`, description: "", achieved: false},
}
return goalNode;
}
case "trigger":
{
const triggerNodes= nds.filter((node) => node.type === 'trigger');
let triggerNumber
if (triggerNodes.length > 0) {
const finalGoalId : number = +(triggerNodes[triggerNodes.length - 1].id.split('-')[1]);
triggerNumber = finalGoalId + 1;
} else {
triggerNumber = 1;
}
const triggerNode : TriggerNode = {
id: `trigger-${triggerNumber}`,
type: nodeType,
position,
data: {label: `new trigger node`, type: "keywords", value: []},
}
return triggerNode;
}
default: {
throw new Error(`Node ${nodeType} not found`);
}
@@ -161,6 +199,12 @@ export function DndToolbar() {
<DraggableNode className={styles.draggableNodeNorm} nodeType="norm" onDrop={handleNodeDrop}>
norm Node
</DraggableNode>
<DraggableNode className={styles.draggableNodeGoal} nodeType="goal" onDrop={handleNodeDrop}>
goal Node
</DraggableNode>
<DraggableNode className={styles.draggableNodeTrigger} nodeType="trigger" onDrop={handleNodeDrop}>
trigger Node
</DraggableNode>
</div>
</div>
);

141
src/pages/VisProgPage/visualProgrammingUI/components/NodeDefinitions.tsx
View File

@@ -11,8 +11,9 @@ import type {
StartNode,
EndNode,
PhaseNode,
NormNode
NormNode, GoalNode
} from "../VisProgTypes.tsx";
import {TextField} from "../../../../components/TextField.tsx";
//Toolbar definitions
@@ -44,56 +45,6 @@ export function Toolbar({nodeId, allowDelete}: ToolbarProps) {
</NodeToolbar>);
}
// Renaming component
/**
* Adds a component that can be used to edit a node's label entry inside its Data
* can be added to any custom node that has a label inside its Data
*
* @param {string} nodeLabel
* @param {string} nodeId
* @returns {React.JSX.Element}
* @constructor
*/
export function EditableName({nodeLabel = "new node", nodeId} : { nodeLabel : string, nodeId: string}) {
const {updateNodeData} = useFlowStore();
const updateData = (event: React.FocusEvent<HTMLInputElement>) => {
const input = event.target.value;
updateNodeData(nodeId, {label: input});
event.currentTarget.setAttribute("readOnly", "true");
window.getSelection()?.empty();
event.currentTarget.classList.replace("nodrag", "drag"); // enable dragging of the node with cursor on the input box
};
const updateOnEnter = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === "Enter") (event.target as HTMLInputElement).blur(); };
const enableEditing = (event: React.MouseEvent<HTMLInputElement>) => {
if(event.currentTarget.hasAttribute("readOnly")) {
event.currentTarget.removeAttribute("readOnly"); // enable editing
event.currentTarget.select(); // select the text input
window.getSelection()?.collapseToEnd(); // move the caret to the end of the current value
event.currentTarget.classList.replace("drag", "nodrag"); // disable dragging using input box
}
}
return (
<div className={styles.NodeTextBar }>
<label>name: </label>
<input
className={`drag ${styles.nodeTextInput}`} // prevents dragging the component when user has focused the text input
type={"text"}
defaultValue={nodeLabel}
onKeyDown={updateOnEnter}
onBlur={updateData}
onClick={enableEditing}
maxLength={25}
readOnly
/>
</div>
)
}
// Definitions of Nodes
@@ -148,11 +99,25 @@ export const EndNodeComponent = ({id, data}: NodeProps<EndNode>) => {
* @constructor
*/
export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
const {updateNodeData} = useFlowStore();
const updateLabel = (value: string) => updateNodeData(id, {...data, label: value});
const label_input_id = `phase_${id}_label_input`;
return (
<>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodePhase}`}>
<EditableName nodeLabel={data.label} nodeId={id}/>
<div className={"flex-row gap-sm"}>
<label htmlFor={label_input_id}>Name:</label>
<TextField
id={label_input_id}
value={data.label}
setValue={updateLabel}
placeholder={"Phase ..."}
/>
</div>
<Handle type="target" position={Position.Left} id="target"/>
<Handle type="target" position={Position.Bottom} id="norms"/>
<Handle type="source" position={Position.Right} id="source"/>
@@ -167,17 +132,69 @@ export const PhaseNodeComponent = ({id, data}: NodeProps<PhaseNode>) => {
*
* @param {string} id
* @param {defaultNodeData & {value: string}} data
* @returns {React.JSX.Element}
* @constructor
*/
export const NormNodeComponent = ({id, data}: NodeProps<NormNode>) => {
return (
<>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
<EditableName nodeLabel={data.label} nodeId={id}/>
<Handle type="source" position={Position.Right} id="NormSource"/>
const {updateNodeData} = useFlowStore();
const text_input_id = `norm_${id}_text_input`;
const setValue = (value: string) => {
updateNodeData(id, {value: value});
}
return <>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeNorm}`}>
<div className={"flex-row gap-sm"}>
<label htmlFor={text_input_id}>Norm:</label>
<TextField
id={text_input_id}
value={data.value}
setValue={(val) => setValue(val)}
placeholder={"Pepper should ..."}
/>
</div>
</>
);
<Handle type="source" position={Position.Right} id="NormSource"/>
</div>
</>;
};
export const GoalNodeComponent = ({id, data}: NodeProps<GoalNode>) => {
const {updateNodeData} = useFlowStore();
const text_input_id = `goal_${id}_text_input`;
const checkbox_id = `goal_${id}_checkbox`;
const setDescription = (value: string) => {
updateNodeData(id, {...data, description: value});
}
const setAchieved = (value: boolean) => {
updateNodeData(id, {...data, achieved: value});
}
return <>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeGoal} flex-col gap-sm`}>
<div className={"flex-row gap-md"}>
<label htmlFor={text_input_id}>Goal:</label>
<TextField
id={text_input_id}
value={data.description}
setValue={(val) => setDescription(val)}
placeholder={"To ..."}
/>
</div>
<div className={"flex-row gap-md align-center"}>
<label htmlFor={checkbox_id}>Achieved:</label>
<input
id={checkbox_id}
type={"checkbox"}
value={data.achieved ? "checked" : ""}
onChange={(e) => setAchieved(e.target.checked)}
/>
</div>
<Handle type="source" position={Position.Right} id="GoalSource"/>
</div>
</>;
}

121
src/pages/VisProgPage/visualProgrammingUI/components/TriggerNodeComponent.tsx Normal file
View File

@@ -0,0 +1,121 @@
import {Handle, type NodeProps, Position} from "@xyflow/react";
import type {TriggerNode} from "../VisProgTypes.tsx";
import useFlowStore from "../VisProgStores.tsx";
import styles from "../../VisProg.module.css";
import {RealtimeTextField, TextField} from "../../../../components/TextField.tsx";
import {Toolbar} from "./NodeDefinitions.tsx";
import {useState} from "react";
import duplicateIndices from "../../../../utils/duplicateIndices.ts";
export type EmotionTriggerNodeProps = {
type: "emotion";
value: string;
}
type Keyword = { id: string, keyword: string };
export type KeywordTriggerNodeProps = {
type: "keywords";
value: Keyword[];
}
export type TriggerNodeProps = EmotionTriggerNodeProps | KeywordTriggerNodeProps;
function KeywordAdder({ addKeyword }: { addKeyword: (keyword: string) => void }) {
const [input, setInput] = useState("");
const text_input_id = "keyword_adder_input";
return <div className={"flex-row gap-md"}>
<label htmlFor={text_input_id}>New Keyword:</label>
<RealtimeTextField
id={text_input_id}
value={input}
setValue={setInput}
onCommit={() => {
if (!input) return;
addKeyword(input);
setInput("");
}}
placeholder={"..."}
className={"flex-1"}
/>
</div>;
}
function Keywords({
keywords,
setKeywords,
}: {
keywords: Keyword[];
setKeywords: (keywords: Keyword[]) => void;
}) {
type Interpolatable = string | number | boolean | bigint | null | undefined;
const inputElementId = (id: Interpolatable) => `keyword_${id}_input`;
/** Indices of duplicates in the keyword array. */
const [duplicates, setDuplicates] = useState<number[]>([]);
function replace(id: string, value: string) {
value = value.trim();
const newKeywords = value === ""
? keywords.filter((kw) => kw.id != id)
: keywords.map((kw) => kw.id === id ? {...kw, keyword: value} : kw);
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
function add(value: string) {
value = value.trim();
if (value === "") return;
const newKeywords = [...keywords, {id: crypto.randomUUID(), keyword: value}];
setKeywords(newKeywords);
setDuplicates(duplicateIndices(newKeywords.map((kw) => kw.keyword)));
}
return <>
<span>Triggers when {keywords.length <= 1 ? "the keyword is" : "all keywords are"} spoken.</span>
{[...keywords].map(({id, keyword}, index) => {
return <div key={id} className={"flex-row gap-md"}>
<label htmlFor={inputElementId(id)}>Keyword:</label>
<TextField
id={inputElementId(id)}
value={keyword}
setValue={(val) => replace(id, val)}
placeholder={"..."}
className={"flex-1"}
invalid={duplicates.includes(index)}
/>
</div>;
})}
<KeywordAdder addKeyword={add} />
</>;
}
export default function TriggerNodeComponent({
id,
data,
}: NodeProps<TriggerNode>) {
const {updateNodeData} = useFlowStore();
const setKeywords = (keywords: Keyword[]) => {
updateNodeData(id, {...data, value: keywords});
}
return <>
<Toolbar nodeId={id} allowDelete={true}/>
<div className={`${styles.defaultNode} ${styles.nodeTrigger} flex-col gap-sm`}>
{data.type === "emotion" && (
<div className={"flex-row gap-md"}>Emotion?</div>
)}
{data.type === "keywords" && (
<Keywords
keywords={data.value}
setKeywords={setKeywords}
/>
)}
<Handle type="source" position={Position.Right} id="TriggerSource"/>
</div>
</>;
}

19
src/utils/duplicateIndices.ts Normal file
View File

@@ -0,0 +1,19 @@
/**
* Find the indices of all elements that occur more than once.
*
* @param array The array to search for duplicates.
* @returns An array of indices where an element occurs more than once, in no particular order.
*/
export default function duplicateIndices<T>(array: T[]): number[] {
const positions = new Map<T, number[]>();
array.forEach((value, i) => {
if (!positions.has(value)) positions.set(value, []);
positions.get(value)!.push(i);
});
// flatten all index lists with more than one element
return Array.from(positions.values())
.filter(idxs => idxs.length > 1)
.flat();
}

96
test/pages/visProgPage/visualProgrammingUI/GraphReducer.test.ts
View File

@@ -457,6 +457,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
}]
},
{
@@ -472,6 +473,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-2',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -483,6 +485,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-3',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -494,6 +497,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
}]
},
{
@@ -509,6 +513,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-2',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -525,6 +530,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -541,6 +547,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
}]
},
{
@@ -561,6 +568,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -583,6 +591,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
},
{
phaseNode: {
@@ -605,6 +614,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
}]
},
{
@@ -732,6 +742,7 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
@@ -740,7 +751,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
});
});
@@ -760,6 +772,7 @@ describe('Graph Reducer Tests', () => {
data: {label: 'Generic Norm', value: "generic"},
}],
connectedGoals: [],
connectedTriggers: [],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
@@ -772,7 +785,8 @@ describe('Graph Reducer Tests', () => {
name: 'Generic Norm',
value: "generic"
}],
goals: []
goals: [],
triggers: [],
}
});
});
@@ -790,8 +804,9 @@ describe('Graph Reducer Tests', () => {
id: 'goal-1',
type: 'goal',
position: {x: 0, y: 150},
data: {label: 'Generic Goal', value: "generic"},
data: {label: 'Generic Goal', description: "generic", achieved: false},
}],
connectedTriggers: [],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
@@ -803,7 +818,50 @@ describe('Graph Reducer Tests', () => {
goals: [{
id: 'goal-1',
name: 'Generic Goal',
value: "generic"
description: "generic",
achieved: false,
}],
triggers: [],
}
});
});
test("defaultTriggerReducer reduces triggers correctly", () => {
const input : PreparedPhase = {
phaseNode: {
id: 'phase-1',
type: 'phase',
position: {x: 0, y: 150},
data: {label: 'Generic Phase', number: 1},
},
nextPhaseId: 'end',
connectedNorms: [],
connectedGoals: [],
connectedTriggers: [{
id: 'trigger-1',
type: 'trigger',
position: {x: 0, y: 150},
data: {label: 'Keyword Trigger', type: "keywords", value: [
{id: "some_id", keyword: "generic"},
{id: "another_id", keyword: "another"},
]},
}],
}
const output = defaultPhaseReducer(input);
expect(output).toEqual({
id: 'phase-1',
name: 'Generic Phase',
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: [],
triggers: [{
id: 'trigger-1',
label: 'Keyword Trigger',
type: "keywords",
value: [
{id: "some_id", keyword: "generic"},
{id: "another_id", keyword: "another"},
]
}]
}
});
@@ -820,7 +878,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
}]
},
@@ -833,7 +892,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-2',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -842,7 +902,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-3',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -851,7 +912,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'end',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
}]
},
@@ -864,7 +926,8 @@ describe('Graph Reducer Tests', () => {
nextPhaseId: 'phase-2',
phaseData: {
norms: [],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -879,7 +942,8 @@ describe('Graph Reducer Tests', () => {
value: "generic"
}
],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -892,7 +956,8 @@ describe('Graph Reducer Tests', () => {
name: 'Generic Norm',
value: "generic"
}],
goals: []
goals: [],
triggers: [],
}
}]
},
@@ -909,7 +974,8 @@ describe('Graph Reducer Tests', () => {
name: 'Generic Norm',
value: "generic"
}],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -929,7 +995,8 @@ describe('Graph Reducer Tests', () => {
value: "generic"
}
],
goals: []
goals: [],
triggers: [],
}
},
{
@@ -947,7 +1014,8 @@ describe('Graph Reducer Tests', () => {
name: 'Generic Norm',
value: "generic"
}],
goals: []
goals: [],
triggers: [],
}
}]
},

22
test/utils/duplicateIndices.test.ts Normal file
View File

@@ -0,0 +1,22 @@
import duplicateIndices from "../../src/utils/duplicateIndices.ts";
describe("duplicateIndices (unit)", () => {
it("returns an empty array for empty input", () => {
expect(duplicateIndices<number>([])).toEqual([]);
});
it("returns an empty array when no duplicates exist", () => {
expect(duplicateIndices([1, 2, 3, 4])).toEqual([]);
});
it("returns all positions for every duplicated value", () => {
const result = duplicateIndices(["a", "b", "a", "c", "b", "b"]);
expect(result.sort()).toEqual([0, 1, 2, 4, 5]);
});
it("only treats identical references as duplicate objects", () => {
const shared = { v: 1 };
const result = duplicateIndices([shared, { v: 1 }, shared, shared]);
expect(result.sort()).toEqual([0, 2, 3]);
});
});