Re-org Nework to allow user-defined layout and network name: front-end

src/components/Parameter.jsx

@@ -16,10 +16,11 @@ import {
   Form,
 } from 'antd';
 import { checkExist } from 'utils/file';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 
 import { isElectron, openDialog } from 'utils/electron';
 import { SelectWithFileDialog } from 'features/scenario/components/CreateScenarioForms/FormInput';
+import { apiClient } from 'lib/api/axios';
 
 // Helper component to standardize Form.Item props
 export const FormField = ({ name, help, children, ...props }) => {
@@ -37,10 +38,54 @@ export const FormField = ({ name, help, children, ...props }) => {
   );
 };
 
-const Parameter = ({ parameter, form }) => {
-  const { name, type, value, choices, nullable, help } = parameter;
+const useParameterValidation = ({ needs_validation, toolName, name, form }) => {
+  // Create async validator for Ant Design Form.Item rules
+  const validator = useCallback(
+    async (_, fieldValue) => {
+      // Skip validation if not needed
+      if (!needs_validation || !toolName || !name) return Promise.resolve();
+
+      try {
+        const formValues = form.getFieldsValue();
+        const response = await apiClient.post(
+          `/api/tools/${toolName}/validate-field`,
+          {
+            parameter_name: name,
+            value: fieldValue,
+            form_values: formValues,
+          },
+        );
+
+        if (response.data.valid) {
+          return Promise.resolve();
+        } else {
+          return Promise.reject(new Error(response.data.error));
+        }
+      } catch (error) {
+        console.error('Validation error:', error);
+        const errorMessage =
+          error?.response?.data?.error || error?.message || 'Validation failed';
+        return Promise.reject(new Error(errorMessage));
+      }
+    },
+    [needs_validation, toolName, name, form],
+  );
+
+  return validator;
+};
+
+const Parameter = ({ parameter, form, toolName }) => {
+  const { name, type, value, choices, nullable, help, needs_validation } =
+    parameter;
   const { setFieldsValue } = form;
 
+  const validator = useParameterValidation({
+    needs_validation,
+    toolName,
+    name,
+    form,
+  });
+
   switch (type) {
     case 'IntegerParameter':
     case 'RealParameter': {
@@ -167,6 +212,7 @@ const Parameter = ({ parameter, form }) => {
         </FormField>
       );
     }
+    case 'NetworkLayoutChoiceParameter':
     case 'ChoiceParameter':
     case 'PlantNodeParameter':
     case 'ScenarioNameParameter':
@@ -179,35 +225,39 @@ const Parameter = ({ parameter, form }) => {
         value: choice,
       }));
 
+      const optionsValidator = (_, value) => {
+        if (choices.length < 1) {
+          if (type === 'GenerationParameter')
+            return Promise.reject(
+              'No generations found. Run optimization first.',
+            );
+          else
+            return Promise.reject('There are no valid choices for this input');
+        } else if (!nullable) {
+          if (!value) return Promise.reject('Select a choice');
+          if (!choices.includes(value))
+            return Promise.reject(`${value} is not a valid choice`);
+        }
+
+        return Promise.resolve();
+      };
+
       return (
         <FormField
           name={name}
           help={help}
           rules={[
             {
-              validator: (_, value) => {
-                if (choices.length < 1) {
-                  if (type === 'GenerationParameter')
-                    return Promise.reject(
-                      'No generations found. Run optimization first.',
-                    );
-                  else
-                    return Promise.reject(
-                      'There are no valid choices for this input',
-                    );
-                } else if (value == null) {
-                  return Promise.reject('Select a choice');
-                } else if (!choices.includes(value)) {
-                  return Promise.reject(`${value} is not a valid choice`);
-                } else {
-                  return Promise.resolve();
-                }
-              },
+              validator: optionsValidator,
             },
           ]}
           initialValue={value}
         >
-          <Select options={options} disabled={!choices.length} />
+          <Select
+            placeholder={nullable ? 'Nothing Selected' : 'Select a choice'}
+            options={options}
+            disabled={!choices.length}
+          />
         </FormField>
       );
     }
@@ -380,6 +430,22 @@ const Parameter = ({ parameter, form }) => {
       );
     }
 
+    case 'NetworkLayoutNameParameter': {
+      return (
+        <FormField
+          name={name}
+          help={help}
+          initialValue={value}
+          rules={[{ validator }]}
+          validateTrigger="onBlur"
+          dependencies={parameter.depends_on || []}
+          hasFeedback
+        >
+          <Input placeholder="Enter a name for the network" />
+        </FormField>
+      );
+    }
+
     default:
       return (
         <FormField name={name} help={help} initialValue={value}>

src/features/jobs/components/Jobs/JobInfoModal.jsx

@@ -92,7 +92,7 @@ const JobOutputModal = ({ job, visible, setVisible }) => {
       width={800}
       footer={false}
       onCancel={() => setVisible(false)}
-      destroyOnClose
+      destroyOnHidden
     >
       <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
         {job.state == 1 && <Alert message="Job running..." type="info" />}

src/features/map/components/Map/Layers/Selectors/Choice.jsx

@@ -69,7 +69,12 @@ const ChoiceSelector = ({
           scenarioName,
           mapLayerParameters ?? {},
         );
-        setChoices(data);
+        // Backend can return either array (legacy) or {choices: [...], default: "..."} (new)
+        if (Array.isArray(data)) {
+          setChoices({ choices: data, default: data[0] });
+        } else {
+          setChoices(data);
+        }
       } catch (error) {
         console.error(error.response?.data);
         setChoices(null);
@@ -79,21 +84,26 @@ const ChoiceSelector = ({
     fetchChoices();
   }, [dependsOnValues]);
 
-  // Set the first choice as the default value
+  // Set the default value from backend (or first choice as fallback)
   useEffect(() => {
     if (choices) {
-      handleChange(choices[0]);
+      const defaultValue = choices.default || choices.choices?.[0];
+      console.log(
+        `[Choice] ${parameterName}: Using default value:`,
+        defaultValue,
+      );
+      handleChange(defaultValue);
     } else {
       handleChange(null);
     }
   }, [choices]);
 
-  const options = choices?.map((choice) => ({
+  const options = choices?.choices?.map((choice) => ({
     value: choice,
     label: choice,
   }));
 
-  if (!choices) return null;
+  if (!choices || !choices.choices) return null;
 
   return (
     <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>

src/features/map/components/Map/Map.jsx

@@ -3,14 +3,17 @@ import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
 import { DeckGL } from '@deck.gl/react';
 import {
   GeoJsonLayer,
+  IconLayer,
   PointCloudLayer,
   PolygonLayer,
   TextLayer,
 } from '@deck.gl/layers';
-import { DataFilterExtension } from '@deck.gl/extensions';
+import { DataFilterExtension, PathStyleExtension } from '@deck.gl/extensions';
 
 import positron from 'constants/mapStyles/positron.json';
 import no_label from 'constants/mapStyles/positron_nolabel.json';
+// eslint-disable-next-line import/no-unresolved
+import triangleFillIcon from 'assets/icons/triangle-fill.svg?url';
 
 import * as turf from '@turf/turf';
 import './Map.css';
@@ -220,13 +223,18 @@ const useMapLayers = (onHover = () => {}) => {
             data: mapLayers[name]?.edges,
             getLineWidth: (f) =>
               normalizeLineWidth(
-                f.properties['peak_mass_flow'],
+                f.properties?.['peak_mass_flow'] ?? 0,
                 min,
                 max,
                 1,
                 7 * scale,
               ),
             getLineColor: edgeColour,
+            getDashArray: (f) =>
+              f.properties?.['peak_mass_flow'] != null ? [0, 0] : [8, 4],
+            dashJustified: true,
+            dashGapPickable: true,
+            extensions: [new PathStyleExtension({ dash: true })],
             updateTriggers: {
               getLineWidth: [scale, min, max],
             },
@@ -239,23 +247,114 @@ const useMapLayers = (onHover = () => {}) => {
           }),
         );
 
-        _layers.push(
-          new GeoJsonLayer({
-            id: `${name}-nodes`,
-            data: mapLayers[name]?.nodes,
-            getFillColor: (f) => nodeFillColor(f.properties['type']),
-            getPointRadius: (f) => nodeRadius(f.properties['type']),
-            getLineColor: (f) => nodeLineColor(f.properties['type']),
-            getLineWidth: 1,
-            updateTriggers: {
-              getPointRadius: [scale],
-            },
-            onHover: onHover,
-            pickable: true,
-
-            parameters: { depthTest: false },
-          }),
+        // Partition nodes by type
+        const nodesData = mapLayers[name]?.nodes;
+        const { plantNodes, consumerNodes, noneNodes } = (
+          nodesData?.features ?? []
+        ).reduce(
+          (acc, feature) => {
+            const type = feature.properties['type'];
+            if (type === 'PLANT') {
+              acc.plantNodes.push(feature);
+            } else if (type === 'CONSUMER') {
+              acc.consumerNodes.push(feature);
+            } else {
+              acc.noneNodes.push(feature);
+            }
+            return acc;
+          },
+          { plantNodes: [], consumerNodes: [], noneNodes: [] },
         );
+
+        // Add GeoJsonLayer for NONE nodes - rendered first (bottom layer)
+        if (noneNodes.length > 0) {
+          _layers.push(
+            new GeoJsonLayer({
+              id: `${name}-none-nodes`,
+              data: {
+                type: 'FeatureCollection',
+                features: noneNodes,
+              },
+              getFillColor: (f) => nodeFillColor(f.properties['type']),
+              getPointRadius: (f) => nodeRadius(f.properties['type']),
+              getLineColor: (f) => nodeLineColor(f.properties['type']),
+              getLineWidth: 1,
+              updateTriggers: {
+                getPointRadius: [scale],
+              },
+              onHover: onHover,
+              pickable: true,
+              parameters: { depthTest: false },
+            }),
+          );
+        }
+
+        // Add GeoJsonLayer for CONSUMER nodes - rendered second (above NONE nodes)
+        if (consumerNodes.length > 0) {
+          _layers.push(
+            new GeoJsonLayer({
+              id: `${name}-consumer-nodes`,
+              data: {
+                type: 'FeatureCollection',
+                features: consumerNodes,
+              },
+              getFillColor: (f) => nodeFillColor(f.properties['type']),
+              getPointRadius: (f) => nodeRadius(f.properties['type']),
+              getLineColor: (f) => nodeLineColor(f.properties['type']),
+              getLineWidth: 1,
+              updateTriggers: {
+                getPointRadius: [scale],
+              },
+              onHover: onHover,
+              pickable: true,
+              parameters: { depthTest: false },
+            }),
+          );
+        }
+
+        // Add IconLayer for plant nodes with triangle icon
+        // Rendered after other nodes to appear on top
+        if (plantNodes.length > 0) {
+          // Use bright yellow for high visibility and to complement blue/red edges
+          const plantColor = [255, 209, 29, 255]; // Bright yellow
+
+          _layers.push(
+            new IconLayer({
+              id: `${name}-plant-nodes`,
+              data: plantNodes,
+              getIcon: () => ({
+                url: triangleFillIcon,
+                width: 64,
+                height: 64,
+                anchorY: 32,
+                mask: true,
+              }),
+              getPosition: (f) => {
+                const coords = f.geometry.coordinates;
+                // Add z-elevation of 3 meters to lift icon above the map
+                return [coords[0], coords[1], 3];
+              },
+              getSize: 10 * scale,
+              getColor: plantColor,
+              sizeUnits: 'meters',
+              sizeMinPixels: 20,
+              billboard: true,
+              loadOptions: {
+                imagebitmap: {
+                  resizeWidth: 64,
+                  resizeHeight: 64,
+                  resizeQuality: 'high',
+                },
+              },
+              onHover: onHover,
+              pickable: true,
+              updateTriggers: {
+                getSize: [scale],
+              },
+              parameters: { depthTest: false },
+            }),
+          );
+        }
       }
 
       if (name == DEMAND && mapLayers?.[name]) {