From 99fdb1cb9c4349306af966b1a054b8671587e6bd Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Mon, 12 May 2025 11:20:57 +0200
Subject: [PATCH 1/5] feat: new flow and abstractNode structure

---
 src/components/Modals/CreateAILPModal.tsx     |  6 ++++++
 src/data/exampleData.ts                       | 19 -------------------
 .../polyglotElements/flow/PolyglotFlow.ts     | 18 +++++++++++++-----
 .../polyglotElements/nodes/AbstractNode.ts    | 16 +++++++++++++---
 4 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index d2ca88da..c5fe829a 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -1012,6 +1012,12 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                   duration: analysedMaterial.estimated_duration.toString(),
                   topics: topics,
                   tags: tags,
+                  sourceMaterial: sourceMaterial,
+                  learning_outcome: learningOutcome,
+                  education_level: eduLevel,
+                  topicsAI: selectedTopic,
+                  language: analysedMaterial.language,
+                  macro_subject: analysedMaterial.macro_subject,
                   nodes: generatedNodes,
                   edges: generatedEdges,
                 };
diff --git a/src/data/exampleData.ts b/src/data/exampleData.ts
index 4e1eddc6..66527992 100644
--- a/src/data/exampleData.ts
+++ b/src/data/exampleData.ts
@@ -110,24 +110,6 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     },
   ];
 
-  const abstractNodes: AbstractNode[] = [
-    {
-      _id: UUIDv4(),
-      type: 'abstractNode',
-      platform: 'VSCode',
-      title: 'Abstract Node',
-      description: 'nice description',
-      difficulty: 1,
-      data: { target: 'Goal?' },
-      reactFlow: {
-        id: UUIDv4(),
-        type: 'abstractNode',
-        position: { x: 250, y: 300 },
-        data: { label: 'Abstract Node' },
-      },
-    },
-  ];
-
   const lessonNodes: LessonNode[] = [
     {
       _id: UUIDv4(),
@@ -151,7 +133,6 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     ...codingNodes,
     ...closeEndedQuestionNodes,
     ...lessonNodes,
-    ...abstractNodes,
   ];
 
   /*
diff --git a/src/types/polyglotElements/flow/PolyglotFlow.ts b/src/types/polyglotElements/flow/PolyglotFlow.ts
index dea184ef..e8c9efe0 100644
--- a/src/types/polyglotElements/flow/PolyglotFlow.ts
+++ b/src/types/polyglotElements/flow/PolyglotFlow.ts
@@ -1,4 +1,10 @@
-import { PolyglotEdge, PolyglotNode } from '..';
+import {
+  EducationLevel,
+  LearningOutcome,
+  PolyglotEdge,
+  PolyglotNode,
+  Topic,
+} from '..';
 
 export type PolyglotFlowInfo = {
   _id?: string;
@@ -13,11 +19,13 @@ export type PolyglotFlowInfo = {
   duration: string;
   topics: string[];
   publish: boolean;
-  /* to be discussed: do we want to save in the database the last summarized material of the professor? Or we give the tool to be live usage?
   sourceMaterial?: string;
-  levelMaterial?: string;
-  generatedMaterial?: string;
-  noW?: number;*/
+  learning_outcome?: LearningOutcome;
+  education_level?: EducationLevel;
+  topicsAI?: Topic[];
+  language?: string;
+  macro_subject?: string;
+  context?: string;
 };
 
 export type PolyglotFlow = PolyglotFlowInfo & {
diff --git a/src/types/polyglotElements/nodes/AbstractNode.ts b/src/types/polyglotElements/nodes/AbstractNode.ts
index 6c3ad652..e873cb20 100644
--- a/src/types/polyglotElements/nodes/AbstractNode.ts
+++ b/src/types/polyglotElements/nodes/AbstractNode.ts
@@ -1,12 +1,17 @@
 import AbstractNodeProperties from '../../../components/Properties/Nodes/AbstractNodeProperties';
 import { ReactFlowAbstractNode } from '../../../components/ReactFlowNode';
 import icon from '../../../public/abstract_icon.png';
+import { EducationLevel, LearningOutcome, Topic } from '../AIGenerativeTypes';
 import { polyglotNodeComponentMapping } from '../elementMapping';
 import { defaultPolyglotNodeData, NodeData, PolyglotNode } from './Node';
 
 export type AbstractNodeData = NodeData & {
-  target: string;
-  conceptmap?: object;
+  sourceMaterial: string;
+  learning_outcome: LearningOutcome;
+  education_level: EducationLevel;
+  topicsAI: Topic[];
+  language: string;
+  macro_subject: string;
 };
 
 export type AbstractNode = PolyglotNode & {
@@ -23,6 +28,11 @@ polyglotNodeComponentMapping.registerMapping<AbstractNode>({
   elementComponent: ReactFlowAbstractNode,
   defaultData: {
     ...defaultPolyglotNodeData,
-    target: '',
+    sourceMaterial: '',
+    learning_outcome: LearningOutcome.ApplyKnowledge,
+    education_level: EducationLevel.College,
+    topicsAI: [],
+    language: '',
+    macro_subject: '',
   },
 });

From 3c7b50cc490212513fc6321d2aafea5235af3d6f Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Tue, 13 May 2025 10:50:20 +0200
Subject: [PATCH 2/5] fix: new data for flow

---
 src/components/LateralMenu/LateralMenu.tsx | 1 +
 src/components/Modals/CreateFlowModal.tsx  | 1 +
 src/components/Modals/EditFlowModal.tsx    | 3 ++-
 src/data/abstractExample.ts                | 1 +
 src/data/exampleData.ts                    | 1 +
 src/utils/utils.ts                         | 1 +
 6 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/LateralMenu/LateralMenu.tsx b/src/components/LateralMenu/LateralMenu.tsx
index 3bd5120d..a6b78024 100644
--- a/src/components/LateralMenu/LateralMenu.tsx
+++ b/src/components/LateralMenu/LateralMenu.tsx
@@ -64,6 +64,7 @@ const configAssessment = [
 ];
 
 const listImplementedNodes = [
+  'abstractNode',
   'multipleChoiceQuestionNode',
   'closeEndedQuestionNode',
   'OpenQuestionNode',
diff --git a/src/components/Modals/CreateFlowModal.tsx b/src/components/Modals/CreateFlowModal.tsx
index bd3f5d29..689753fb 100644
--- a/src/components/Modals/CreateFlowModal.tsx
+++ b/src/components/Modals/CreateFlowModal.tsx
@@ -109,6 +109,7 @@ const CreateFlowModal = ({ isOpen, onClose, API }: CreateFlowModalProps) => {
             duration: duration,
             learningContext: learningContext,
             topics: topics,
+            topicsAI: [],
           };
           response = await API.createNewFlow(base_Flow);
           break;
diff --git a/src/components/Modals/EditFlowModal.tsx b/src/components/Modals/EditFlowModal.tsx
index 9eff14de..31b8faca 100644
--- a/src/components/Modals/EditFlowModal.tsx
+++ b/src/components/Modals/EditFlowModal.tsx
@@ -278,7 +278,7 @@ const EditFlowModal = ({
             colorScheme="blue"
             onClick={() => {
               if (!title || !description || !tags) return;
-              updateInfo({
+              updateInfo({  //aggiorna con material... ai data
                 title: title,
                 description: description,
                 tags: tags,
@@ -286,6 +286,7 @@ const EditFlowModal = ({
                 learningContext: learningContext,
                 duration: duration,
                 topics: topics,
+                topicsAI: []
               });
               onClose();
             }}
diff --git a/src/data/abstractExample.ts b/src/data/abstractExample.ts
index 5bdfe18f..bd0a979f 100644
--- a/src/data/abstractExample.ts
+++ b/src/data/abstractExample.ts
@@ -118,6 +118,7 @@ const subFlow = new Map<PlanningGoal, PolyglotFlow>();
       learningContext: '',
       duration: '0',
       topics: [],
+      topicsAI: [],
       publish: false,
       nodes: flowNodes,
       edges: flowEdges,
diff --git a/src/data/exampleData.ts b/src/data/exampleData.ts
index 66527992..5b10fecc 100644
--- a/src/data/exampleData.ts
+++ b/src/data/exampleData.ts
@@ -253,6 +253,7 @@ const exampleFlows = new Map<string, PolyglotFlow>();
     learningContext: '',
     duration: '0',
     topics: [],
+    topicsAI: [],
     nodes: flowNodes,
     edges: flowEdges,
   });
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index d5e133fb..30fb5c4f 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -60,6 +60,7 @@ export const createNewDefaultPolyglotFlow = (): PolyglotFlow => {
     publish: false,
     tags: [],
     topics: [],
+    topicsAI: [],
     learningContext: '',
     duration: '0',
     nodes: [],

From 3bb63ab6f895b53d7be624b5e0e3abd4d76b968f Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Tue, 13 May 2025 10:51:25 +0200
Subject: [PATCH 3/5] fix: new data for flow

---
 src/components/Editor/FlowEditor.tsx          | 35 +++++++++++++++++++
 src/components/Modals/EditFlowModal.tsx       |  5 +--
 .../Properties/Edges/EdgeProperties.tsx       |  2 +-
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor/FlowEditor.tsx b/src/components/Editor/FlowEditor.tsx
index eb5c4f45..d963565e 100644
--- a/src/components/Editor/FlowEditor.tsx
+++ b/src/components/Editor/FlowEditor.tsx
@@ -24,6 +24,7 @@ import ReactFlow, {
   useStoreApi,
 } from 'reactflow';
 import 'reactflow/dist/style.css';
+import { v4 as UUIDv4 } from 'uuid';
 import useStore from '../../store';
 import {
   polyglotEdgeComponentMapping,
@@ -34,6 +35,7 @@ import ContextMenu, {
   ContextMenuTypes,
 } from '../ContextMenu/ContextMenu';
 
+import { platform } from 'os';
 import { createNewDefaultPolyglotNode } from '../../utils/utils';
 import LateralMenu from '../LateralMenu/LateralMenu';
 import EditorNav from '../NavBars/EditorNav';
@@ -63,6 +65,7 @@ const FlowEditor = ({
     setSelectedElement,
     getSelectedElement,
     clearSelection,
+    flow,
   } = useStore((store) => ({
     getNodes: store.reactFlowNodes,
     getEdges: store.reactFlowEdges,
@@ -74,6 +77,7 @@ const FlowEditor = ({
     setSelectedElement: store.setSelectedElement,
     clearSelection: store.clearSelection,
     setLastSavedAction: store.setLastSavedAction,
+    flow: store.getFlow(),
   }));
   const { resetSelectedElements } = useStoreApi().getState();
   const { project } = useReactFlow();
@@ -133,6 +137,37 @@ const FlowEditor = ({
       x: event.clientX - rect.left,
       y: event.clientY - rect.top,
     });
+
+    if (type == 'abstractNode') {
+      console.log('abstractNode creation');
+
+      const id = UUIDv4();
+      const nodeToAdd = {
+        _id: id,
+        type: type,
+        title: 'New Node',
+        description: '',
+        difficulty: 1,
+        platform: 'Library',
+        data: {
+          useFlowData: true,
+          sourceMaterial: flow?.sourceMaterial,
+          learning_outcome: flow?.learning_outcome,
+          education_level: flow?.education_level,
+          topicsAI: flow?.topicsAI,
+          language: flow?.language,
+          macro_subject: flow?.macro_subject,
+        },
+        reactFlow: {
+          id: id,
+          type: type,
+          position: pos,
+          data: undefined,
+        },
+      };
+      useStore.getState().addNode(nodeToAdd);
+      return;
+    }
     console.log(pos);
     const nodeToAdd = createNewDefaultPolyglotNode(pos, type);
     console.log(nodeToAdd);
diff --git a/src/components/Modals/EditFlowModal.tsx b/src/components/Modals/EditFlowModal.tsx
index 31b8faca..48b2df90 100644
--- a/src/components/Modals/EditFlowModal.tsx
+++ b/src/components/Modals/EditFlowModal.tsx
@@ -278,7 +278,8 @@ const EditFlowModal = ({
             colorScheme="blue"
             onClick={() => {
               if (!title || !description || !tags) return;
-              updateInfo({  //aggiorna con material... ai data
+              updateInfo({
+                //aggiorna con material... ai data
                 title: title,
                 description: description,
                 tags: tags,
@@ -286,7 +287,7 @@ const EditFlowModal = ({
                 learningContext: learningContext,
                 duration: duration,
                 topics: topics,
-                topicsAI: []
+                topicsAI: [],
               });
               onClose();
             }}
diff --git a/src/components/Properties/Edges/EdgeProperties.tsx b/src/components/Properties/Edges/EdgeProperties.tsx
index 5b249e8b..6de5e16a 100644
--- a/src/components/Properties/Edges/EdgeProperties.tsx
+++ b/src/components/Properties/Edges/EdgeProperties.tsx
@@ -19,7 +19,7 @@ const config = [
       'CreateKeywordsListNode',
       'MemoriseKeywordsListNode',
       'PromptEngineeringNode',
-      'ProblemSolvingNode',      
+      'ProblemSolvingNode',
     ],
   },
   {

From 0d146c51090ed5dc30b0177d8350d6e9687224e1 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Tue, 13 May 2025 11:00:35 +0200
Subject: [PATCH 4/5] feat: abstract node refactory using flow setup data

---
 src/components/Forms/Fields/EnumField.tsx     |   8 +-
 .../Nodes/AbstractNodeProperties.tsx          | 189 ++++++++++++++++--
 .../polyglotElements/flow/PolyglotFlow.ts     |   2 +-
 .../polyglotElements/nodes/AbstractNode.ts    |   2 +
 4 files changed, 182 insertions(+), 19 deletions(-)

diff --git a/src/components/Forms/Fields/EnumField.tsx b/src/components/Forms/Fields/EnumField.tsx
index 4be42bb6..1121e50c 100644
--- a/src/components/Forms/Fields/EnumField.tsx
+++ b/src/components/Forms/Fields/EnumField.tsx
@@ -15,6 +15,7 @@ export type EnumFieldProps = {
   options: JSX.Element;
   constraints?: RegisterOptions;
   hidden?: boolean;
+  defaultValue?: any;
 };
 
 const EnumField = ({
@@ -24,6 +25,7 @@ const EnumField = ({
   options,
   constraints,
   width,
+  defaultValue,
 }: EnumFieldProps) => {
   const { register, getFieldState } = useFormContext();
   const { error } = getFieldState(name);
@@ -31,7 +33,11 @@ const EnumField = ({
   return (
     <Box p={2} width={width} hidden={hidden}>
       <FormControl isInvalid={error !== undefined}>
-        <Select {...register(name, constraints)} borderColor={'grey'}>
+        <Select
+          {...register(name, constraints)}
+          borderColor={'grey'}
+          defaultValue={defaultValue}
+        >
           {options}
         </Select>
         <FormLabel
diff --git a/src/components/Properties/Nodes/AbstractNodeProperties.tsx b/src/components/Properties/Nodes/AbstractNodeProperties.tsx
index e5f2973b..eb004e73 100644
--- a/src/components/Properties/Nodes/AbstractNodeProperties.tsx
+++ b/src/components/Properties/Nodes/AbstractNodeProperties.tsx
@@ -1,30 +1,185 @@
-import { Button, useDisclosure } from '@chakra-ui/react';
-import { useEffect } from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
+import {
+  Box,
+  Checkbox,
+  Collapse,
+  Flex,
+  IconButton,
+  SkeletonText,
+  Text,
+  Textarea,
+} from '@chakra-ui/react';
+import { Toggle } from '@fluentui/react';
+import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { MdBuild } from 'react-icons/md';
-import ConceptBuilderModal from '../../Modals/ConceptBuilder';
+import useStore from '../../../store';
+import { LearningOutcome, Topic } from '../../../types/polyglotElements';
+import EnumField from '../../Forms/Fields/EnumField';
 import NodeProperties from './NodeProperties';
 
 const AbstractNodeProperties = () => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { setValue, getValues } = useFormContext();
+  const [toggleFlowData, setToggleFlowData] = useState<boolean>(true);
 
-  const { register } = useFormContext();
+  const [generatingLoading, setGeneratingLoading] = useState(false);
+  const [learningOutcome, setLearningOutcome] = useState<LearningOutcome>(
+    getValues('data.learning_outcome') as LearningOutcome
+  );
+  const [sourceMaterial, setSourceMaterial] = useState(
+    getValues('data.sourceMaterial')
+  );
+  const [macroSubject, setMacroSubject] = useState(
+    getValues('data.macro_subject')
+  );
+  const [topicsAI, setTopicsAI] = useState<Topic[]>(getValues('data.topicsAI'));
+  const [expandedIndexes, setExpandedIndexes] = useState<number[]>([]);
+  const [flow] = useStore((state) => [state.getFlow()]);
+
+  useEffect(() => {
+    setToggleFlowData(getValues('data.useFlowData'));
+  }, []);
 
   useEffect(() => {
-    register('data.conceptmap');
-    register('data.execution.concepts');
-    register('data.execution.numOfRes');
-    register('data.execution.bloom_lv');
-    register('data.execution.resType');
-  }, [register]);
+    setValue('data.useFlowData', toggleFlowData);
+    if (toggleFlowData) {
+      console.log('reset to flowData');
+      if (!flow) return;
+      setValue('data.learning_outcome', flow?.learning_outcome);
+      setLearningOutcome(flow?.learning_outcome as LearningOutcome);
+      setValue('data.sourceMaterial', flow?.sourceMaterial);
+      setSourceMaterial(flow?.sourceMaterial);
+      setValue('data.macro_subject', flow?.macro_subject);
+      setMacroSubject(flow?.macro_subject);
+      setValue('data.topicsAI', flow?.topicsAI);
+      setTopicsAI(flow.topicsAI || []);
+    }
+  }, [toggleFlowData]);
+
+  const toggleTopic = (topic: Topic) => {
+    setTopicsAI((prev) => {
+      const exists = prev.some((t) => t.topic === topic.topic);
+      return exists
+        ? prev.filter((t) => t.topic !== topic.topic)
+        : [...prev, topic];
+    });
+  };
+  useEffect(() => {
+      setValue('data.topicsAI',topicsAI);
+  }, [topicsAI]);
+  const toggleExpand = (index: number) => {
+    setExpandedIndexes((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
 
   return (
     <>
-      <NodeProperties platform={['VSCode', 'WebApp']} />
-      <ConceptBuilderModal isOpen={isOpen} onClose={onClose} />
-      <Button mt={4} leftIcon={<MdBuild />} onClick={onOpen}>
-        Concept builder
-      </Button>
+      <NodeProperties platform={['Library', 'WebApp']} />
+      <Text fontWeight={'bold'} float={'left'} paddingRight={'10px'}>
+        Use learning path data
+      </Text>
+      <Toggle
+        checked={toggleFlowData || toggleFlowData == undefined}
+        onChange={() => setToggleFlowData(!toggleFlowData)}
+      />
+      <Box hidden={toggleFlowData}>
+        <SkeletonText
+          noOfLines={4}
+          spacing="4"
+          skeletonHeight="2"
+          isLoaded={!generatingLoading}
+        >
+          <Textarea
+            minHeight={'150px'}
+            maxHeight={'350px'}
+            placeholder="Insert your material here, you can put your plain text."
+            value={sourceMaterial}
+            overflowY={'auto'}
+            onChange={(e) => {
+              setSourceMaterial(e.currentTarget.value);
+            }}
+            onBlur={() => setValue('data.sourceMaterial', sourceMaterial)}
+          />
+          <Text>
+            <Flex fontWeight={'bold'}>Macro Subject: </Flex>
+            {macroSubject}
+          </Text>
+        </SkeletonText>
+        <SkeletonText
+          paddingTop={'5px'}
+          noOfLines={2}
+          spacing="8"
+          skeletonHeight="10"
+          isLoaded={!generatingLoading}
+        >
+          <Text fontWeight={'bold'}>List of Topics</Text>
+
+          {flow?.topicsAI &&
+            flow?.topicsAI.map((topicObj, index) => (
+              <Flex key={index} align="start" mb={3} direction="column">
+                <Flex align="center">
+                  <Checkbox
+                    isChecked={topicsAI?.includes(topicObj)}
+                    onChange={() => toggleTopic(topicObj)}
+                    size="lg"
+                    mr={2}
+                    colorScheme="green"
+                  />
+                  <Text>{topicObj.topic}</Text>
+                  <IconButton
+                    size="sm"
+                    ml={2}
+                    aria-label="Toggle explanation"
+                    icon={
+                      expandedIndexes.includes(index) ? (
+                        <ChevronUpIcon />
+                      ) : (
+                        <ChevronDownIcon />
+                      )
+                    }
+                    onClick={() => toggleExpand(index)}
+                    variant="ghost"
+                  />
+                </Flex>
+                <Collapse in={expandedIndexes.includes(index)} animateOpacity>
+                  <Box mt={2} ml={6}>
+                    <Text fontSize="sm" color="gray.600">
+                      {topicObj.explanation}
+                    </Text>
+                  </Box>
+                </Collapse>
+              </Flex>
+            ))}
+        </SkeletonText>
+        <SkeletonText
+          paddingTop={'5px'}
+          noOfLines={2}
+          spacing="8"
+          skeletonHeight="10"
+          isLoaded={!generatingLoading}
+        >
+          <Text fontWeight={'bold'}>List of Learning Outcomes</Text>
+
+          <EnumField
+            label="learning outcomes"
+            name="data.learning_outcome"
+            width="50%"
+            constraints={{ valueAsNumber: false }}
+            defaultValue={learningOutcome}
+            options={
+              <>
+                {Object.values(LearningOutcome).map((outcome) => (
+                  <option key={outcome} value={outcome}>
+                    {learningOutcome === outcome ? '*' : ''}
+                    {outcome}
+                    {learningOutcome === outcome ? '*' : ''}
+                  </option>
+                ))}
+              </>
+            }
+          />
+        </SkeletonText>
+      </Box>
     </>
   );
 };
diff --git a/src/types/polyglotElements/flow/PolyglotFlow.ts b/src/types/polyglotElements/flow/PolyglotFlow.ts
index e8c9efe0..d358ad5b 100644
--- a/src/types/polyglotElements/flow/PolyglotFlow.ts
+++ b/src/types/polyglotElements/flow/PolyglotFlow.ts
@@ -22,7 +22,7 @@ export type PolyglotFlowInfo = {
   sourceMaterial?: string;
   learning_outcome?: LearningOutcome;
   education_level?: EducationLevel;
-  topicsAI?: Topic[];
+  topicsAI: Topic[];
   language?: string;
   macro_subject?: string;
   context?: string;
diff --git a/src/types/polyglotElements/nodes/AbstractNode.ts b/src/types/polyglotElements/nodes/AbstractNode.ts
index e873cb20..7288cb25 100644
--- a/src/types/polyglotElements/nodes/AbstractNode.ts
+++ b/src/types/polyglotElements/nodes/AbstractNode.ts
@@ -6,6 +6,7 @@ import { polyglotNodeComponentMapping } from '../elementMapping';
 import { defaultPolyglotNodeData, NodeData, PolyglotNode } from './Node';
 
 export type AbstractNodeData = NodeData & {
+  useFlowData: boolean;
   sourceMaterial: string;
   learning_outcome: LearningOutcome;
   education_level: EducationLevel;
@@ -28,6 +29,7 @@ polyglotNodeComponentMapping.registerMapping<AbstractNode>({
   elementComponent: ReactFlowAbstractNode,
   defaultData: {
     ...defaultPolyglotNodeData,
+    useFlowData: true,
     sourceMaterial: '',
     learning_outcome: LearningOutcome.ApplyKnowledge,
     education_level: EducationLevel.College,

From fe54dbf49eccd87249327b35254ea36c915b1374 Mon Sep 17 00:00:00 2001
From: tmaog <tommasoguidolin01@gmail.com>
Date: Tue, 13 May 2025 12:22:03 +0200
Subject: [PATCH 5/5] feat: analyze specifics material implemented

---
 src/components/Modals/CreateAILPModal.tsx     |  14 +-
 .../Nodes/AbstractNodeProperties.tsx          | 203 +++++++++++++-----
 src/data/api.ts                               |   2 -
 3 files changed, 163 insertions(+), 56 deletions(-)

diff --git a/src/components/Modals/CreateAILPModal.tsx b/src/components/Modals/CreateAILPModal.tsx
index 6a1a8e70..55304d27 100644
--- a/src/components/Modals/CreateAILPModal.tsx
+++ b/src/components/Modals/CreateAILPModal.tsx
@@ -1037,16 +1037,18 @@ const CreateAILPModal = ({ isOpen, onClose, action }: ModaTemplateProps) => {
                     isClosable: true,
                   });
                 }
-                router.push('/flows/' + flowResponse.data.id);
-              } catch (error) {
                 toast({
-                  title: 'Generic Error',
-                  description: 'Try later: ' + (error as Error).message,
-                  status: 'error',
-                  duration: 5000,
+                  title: 'Flow created',
+                  description:
+                    'Flow created successfully, you will be redirected soon.',
+                  status: 'success',
+                  duration: 3000,
                   position: 'bottom-left',
                   isClosable: true,
                 });
+                router.push('/flows/' + flowResponse.data.id);
+              } catch (error) {
+                console.log((error as Error).message);
               } finally {
                 setGeneratingLoading(false);
               }
diff --git a/src/components/Properties/Nodes/AbstractNodeProperties.tsx b/src/components/Properties/Nodes/AbstractNodeProperties.tsx
index eb004e73..95ec3772 100644
--- a/src/components/Properties/Nodes/AbstractNodeProperties.tsx
+++ b/src/components/Properties/Nodes/AbstractNodeProperties.tsx
@@ -1,6 +1,7 @@
 import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
 import {
   Box,
+  Button,
   Checkbox,
   Collapse,
   Flex,
@@ -8,24 +9,31 @@ import {
   SkeletonText,
   Text,
   Textarea,
+  useToast,
 } from '@chakra-ui/react';
 import { Toggle } from '@fluentui/react';
-import { useEffect, useState } from 'react';
+import { AxiosResponse } from 'axios';
+import { useEffect, useMemo, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
+import { API } from '../../../data/api';
 import useStore from '../../../store';
-import { LearningOutcome, Topic } from '../../../types/polyglotElements';
+import {
+  EducationLevel,
+  LearningOutcome,
+  Topic,
+} from '../../../types/polyglotElements';
 import EnumField from '../../Forms/Fields/EnumField';
 import NodeProperties from './NodeProperties';
 
 const AbstractNodeProperties = () => {
   const { setValue, getValues } = useFormContext();
-  const [toggleFlowData, setToggleFlowData] = useState<boolean>(true);
+  const [toggleFlowData, setToggleFlowData] = useState<boolean>();
 
   const [generatingLoading, setGeneratingLoading] = useState(false);
   const [learningOutcome, setLearningOutcome] = useState<LearningOutcome>(
     getValues('data.learning_outcome') as LearningOutcome
   );
-  const [sourceMaterial, setSourceMaterial] = useState(
+  const [sourceMaterial, setSourceMaterial] = useState<string>(
     getValues('data.sourceMaterial')
   );
   const [macroSubject, setMacroSubject] = useState(
@@ -42,19 +50,32 @@ const AbstractNodeProperties = () => {
   useEffect(() => {
     setValue('data.useFlowData', toggleFlowData);
     if (toggleFlowData) {
-      console.log('reset to flowData');
       if (!flow) return;
       setValue('data.learning_outcome', flow?.learning_outcome);
       setLearningOutcome(flow?.learning_outcome as LearningOutcome);
       setValue('data.sourceMaterial', flow?.sourceMaterial);
-      setSourceMaterial(flow?.sourceMaterial);
+      setSourceMaterial(flow?.sourceMaterial || '');
       setValue('data.macro_subject', flow?.macro_subject);
       setMacroSubject(flow?.macro_subject);
       setValue('data.topicsAI', flow?.topicsAI);
+      console.log('testing topicsAI ');
       setTopicsAI(flow.topicsAI || []);
     }
   }, [toggleFlowData]);
+  const combinedTopics = useMemo(() => {
+    const allTopics = [...topicsAI, ...(flow?.topicsAI || [])];
+
+    // Rimuove duplicati basati su id
+    const uniqueTopicsMap = new Map();
+    allTopics.forEach((topic) => {
+      uniqueTopicsMap.set(topic.topic, topic);
+    });
+
+    return Array.from(uniqueTopicsMap.values());
+  }, [topicsAI, flow?.topicsAI]);
 
+  const [topicsSelectable, setTopicsSelectable] =
+    useState<Topic[]>(combinedTopics);
   const toggleTopic = (topic: Topic) => {
     setTopicsAI((prev) => {
       const exists = prev.some((t) => t.topic === topic.topic);
@@ -63,15 +84,18 @@ const AbstractNodeProperties = () => {
         : [...prev, topic];
     });
   };
+
   useEffect(() => {
-      setValue('data.topicsAI',topicsAI);
+    setValue('data.topicsAI', topicsAI);
   }, [topicsAI]);
+
   const toggleExpand = (index: number) => {
     setExpandedIndexes((prev) =>
       prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
     );
   };
 
+  const toast = useToast();
   return (
     <>
       <NodeProperties platform={['Library', 'WebApp']} />
@@ -89,6 +113,88 @@ const AbstractNodeProperties = () => {
           skeletonHeight="2"
           isLoaded={!generatingLoading}
         >
+          <Flex
+            justifyContent="space-between"
+            alignItems="center"
+            fontWeight="bold"
+            width="100%"
+            mb={2}
+          >
+            Material to use:{' '}
+            <Button
+              mb="2"
+              float={'right'}
+              title={
+                sourceMaterial === flow?.sourceMaterial
+                  ? 'Your material is the same of the learning path base material.'
+                  : 'Click to analyze the new material.'
+              }
+              isDisabled={sourceMaterial === flow?.sourceMaterial}
+              isLoading={generatingLoading}
+              onClick={async () => {
+                try {
+                  setGeneratingLoading(true);
+                  if (!sourceMaterial) {
+                    toast({
+                      title: 'Material missing',
+                      description:
+                        'Please, insert your material before pressing analye button.',
+                      status: 'error',
+                      duration: 3000,
+                      position: 'bottom-left',
+                      isClosable: true,
+                    });
+                    return;
+                  }
+                  if (sourceMaterial === flow?.sourceMaterial) {
+                    toast({
+                      title: 'Material duplicate',
+                      description:
+                        'You cannot analyze the same material of the Learning path. Please, modify your material, then try again.',
+                      status: 'error',
+                      duration: 3000,
+                      position: 'bottom-left',
+                      isClosable: true,
+                    });
+                    return;
+                  }
+                  const response: AxiosResponse = await API.analyseMaterial({
+                    text: sourceMaterial,
+                  });
+                  setLearningOutcome(
+                    response.data.learning_outcome as LearningOutcome
+                  );
+                  setTopicsSelectable(response.data.topics);
+                  setMacroSubject(response.data.macro_subject);
+                  setValue('data.macro_subject', response.data.macro_subject);
+                  setValue('data.language', response.data.language);
+                  setValue(
+                    'data.learning_outcome',
+                    response.data.learning_outcome as LearningOutcome
+                  );
+                  setValue(
+                    'data.education_level',
+                    response.data.education_level as EducationLevel
+                  );
+                } catch (error: any) {
+                  console.log(error);
+                  toast({
+                    title: 'Generic Error',
+                    description: 'Try later ' + (error as Error),
+                    status: 'error',
+                    duration: 5000,
+                    position: 'bottom-left',
+                    isClosable: true,
+                  });
+                } finally {
+                  setGeneratingLoading(false);
+                }
+              }}
+            >
+              Analyze material
+            </Button>
+          </Flex>
+
           <Textarea
             minHeight={'150px'}
             maxHeight={'350px'}
@@ -100,10 +206,12 @@ const AbstractNodeProperties = () => {
             }}
             onBlur={() => setValue('data.sourceMaterial', sourceMaterial)}
           />
-          <Text>
-            <Flex fontWeight={'bold'}>Macro Subject: </Flex>
-            {macroSubject}
-          </Text>
+          <Flex alignItems="center" mt={'2'}>
+            <Text fontWeight={'bold'} mr={2}>
+              Macro Subject:{' '}
+            </Text>
+            <Text fontWeight="normal">{macroSubject}</Text>
+          </Flex>
         </SkeletonText>
         <SkeletonText
           paddingTop={'5px'}
@@ -114,42 +222,41 @@ const AbstractNodeProperties = () => {
         >
           <Text fontWeight={'bold'}>List of Topics</Text>
 
-          {flow?.topicsAI &&
-            flow?.topicsAI.map((topicObj, index) => (
-              <Flex key={index} align="start" mb={3} direction="column">
-                <Flex align="center">
-                  <Checkbox
-                    isChecked={topicsAI?.includes(topicObj)}
-                    onChange={() => toggleTopic(topicObj)}
-                    size="lg"
-                    mr={2}
-                    colorScheme="green"
-                  />
-                  <Text>{topicObj.topic}</Text>
-                  <IconButton
-                    size="sm"
-                    ml={2}
-                    aria-label="Toggle explanation"
-                    icon={
-                      expandedIndexes.includes(index) ? (
-                        <ChevronUpIcon />
-                      ) : (
-                        <ChevronDownIcon />
-                      )
-                    }
-                    onClick={() => toggleExpand(index)}
-                    variant="ghost"
-                  />
-                </Flex>
-                <Collapse in={expandedIndexes.includes(index)} animateOpacity>
-                  <Box mt={2} ml={6}>
-                    <Text fontSize="sm" color="gray.600">
-                      {topicObj.explanation}
-                    </Text>
-                  </Box>
-                </Collapse>
+          {topicsSelectable.map((topicObj, index) => (
+            <Flex key={index} align="start" mb={3} direction="column">
+              <Flex align="center">
+                <Checkbox
+                  isChecked={topicsAI?.some((t) => t.topic === topicObj.topic)}
+                  onChange={() => toggleTopic(topicObj)}
+                  size="lg"
+                  mr={2}
+                  colorScheme="green"
+                />
+                <Text>{topicObj.topic}</Text>
+                <IconButton
+                  size="sm"
+                  ml={2}
+                  aria-label="Toggle explanation"
+                  icon={
+                    expandedIndexes.includes(index) ? (
+                      <ChevronUpIcon />
+                    ) : (
+                      <ChevronDownIcon />
+                    )
+                  }
+                  onClick={() => toggleExpand(index)}
+                  variant="ghost"
+                />
               </Flex>
-            ))}
+              <Collapse in={expandedIndexes.includes(index)} animateOpacity>
+                <Box mt={2} ml={6}>
+                  <Text fontSize="sm" color="gray.600">
+                    {topicObj.explanation}
+                  </Text>
+                </Box>
+              </Collapse>
+            </Flex>
+          ))}
         </SkeletonText>
         <SkeletonText
           paddingTop={'5px'}
@@ -170,9 +277,9 @@ const AbstractNodeProperties = () => {
               <>
                 {Object.values(LearningOutcome).map((outcome) => (
                   <option key={outcome} value={outcome}>
-                    {learningOutcome === outcome ? '*' : ''}
+                    {flow?.learning_outcome === outcome ? '*' : ''}
                     {outcome}
-                    {learningOutcome === outcome ? '*' : ''}
+                    {flow?.learning_outcome === outcome ? '*' : ''}
                   </option>
                 ))}
               </>
diff --git a/src/data/api.ts b/src/data/api.ts
index ac196abb..032112fc 100644
--- a/src/data/api.ts
+++ b/src/data/api.ts
@@ -160,7 +160,6 @@ export class APIV2 {
     flow.nodes = flow.nodes?.map((e) =>
       polyglotNodeComponentMapping.applyTransformFunction(e)
     );
-    console.log(flow.edges);
     flow.edges = flow.edges.filter((edge) => {
       const source = edge.reactFlow.source;
       const target = edge.reactFlow.target;
@@ -169,7 +168,6 @@ export class APIV2 {
           .length === 2
       );
     });
-    console.log(flow.edges);
     flow.edges = flow.edges?.map((e) =>
       polyglotEdgeComponentMapping.applyTransformFunction(e)
     );