src/pages/VisProgPage/visualProgrammingUI/nodes/NormNode.tsx

@@ -49,10 +49,28 @@ export default function NormNode(props: NodeProps<NormNode>) {
   const setValue = (value: string) => {
     updateNodeData(props.id, {norm: value});
   }
+  //this function is commented out, because of lack of backend implementation.
+  //If you wish to set critical norms, in the UI side, you can uncomment and use this function.
   
-  const setCritical = (value: boolean) => {
-    updateNodeData(props.id, {...data, critical: value});
+  // const setCritical = (value: boolean) => {
+  //   updateNodeData(props.id, {...data, critical: value});
+  // }
+  useEffect(() => {
+    const normText = data.norm || "";
+    
+    const startsWithNumberWarning: EditorWarning = {
+      scope: { id: props.id },
+      type: 'ELEMENT_STARTS_WITH_NUMBER',
+      severity: 'ERROR',
+      description: "Norms are not allowed to start with a number."
+    };
+
+    if (/^\d/.test(normText)) {
+      registerWarning(startsWithNumberWarning);
+    } else {
+      unregisterWarning(props.id, 'ELEMENT_STARTS_WITH_NUMBER');
     }
+  }, [data.norm, props.id, registerWarning, unregisterWarning]);
   useEffect(() => {
     const normText = data.norm || "";
     
@@ -82,7 +100,10 @@ export default function NormNode(props: NodeProps<NormNode>) {
           placeholder={"Pepper should ..."}
         />
       </div>
-      <div className={"flex-row gap-md align-center"}>
+      {/*There is no backend implementation yet of how critical norms would
+      be treated differently than normal norms. The commented code below shows
+      how you could add the UI side, if you wish to implement */}
+      {/* <div className={"flex-row gap-md align-center"}>
         <label htmlFor={checkbox_id}>Critical:</label>
         <input
           id={checkbox_id}
@@ -90,7 +111,7 @@ export default function NormNode(props: NodeProps<NormNode>) {
           checked={data.critical || false}
           onChange={(e) => setCritical(e.target.checked)}
         />
-      </div>
+      </div> */}
 
 
       {data.condition && (<div className={"flex-row gap-md align-center"} data-testid="norm-condition-information">

test/pages/visProgPage/visualProgrammingUI/nodes/NormNode.test.tsx

@@ -699,15 +699,12 @@ describe('NormNode', () => {
         />
       );
 
-      const checkbox = screen.getByLabelText('Critical:');
-      await user.click(checkbox);
-
       await waitFor(() => {
         const state = useFlowStore.getState();
         expect(state.nodes).toHaveLength(1);
         expect(state.nodes[0].id).toBe('norm-1');
         expect(state.nodes[0].data.norm).toBe('');
-        expect(state.nodes[0].data.critical).toBe(true);
+
       });
     });