feat: support adjust property

packages/studio-explore/src/components/Report/AdjustSchema.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { Flex, Typography, Select } from 'antd';
+import { useContext, GraphSchema } from '@graphscope/studio-graph';
+import type { ItentionType } from './index';
+import AddNodes from './AddNodes';
+import { Utils } from '@graphscope/studio-components';
+interface IAdjustSchemaProps {
+  value: GraphSchema;
+  onChange: (value: GraphSchema) => void;
+}
+
+const AdjustSchema: React.FunctionComponent<IAdjustSchemaProps> = props => {
+  const { value, onChange } = props;
+  const { store } = useContext();
+  const { schema } = store;
+  const { nodes } = value;
+  const ndeoSchemaMap = React.useMemo(() => {
+    return schema.nodes.reduce((acc, cur) => {
+      acc[cur.label] = cur;
+      return acc;
+    }, {});
+  }, [schema]);
+
+  return (
+    <div>
+      {nodes.map(item => {
+        const { label, properties = [] } = item;
+        const options = ndeoSchemaMap[label].properties.map(p => {
+          return {
+            label: p.name,
+            value: p.name,
+          };
+        });
+        const value = properties.map(p => {
+          return p.name;
+        });
+        return (
+          <Flex vertical gap={12} key={item.id}>
+            <Flex justify="space-between" align="center">
+              <Typography.Text italic type="secondary">
+                {label}
+              </Typography.Text>
+              <AddNodes label={label} />
+            </Flex>
+            <Select
+              options={options}
+              mode="multiple"
+              value={value}
+              onChange={propertyKeys => {
+                const sourceSchema = Utils.fakeSnapshot(props.value);
+                sourceSchema.nodes.forEach(node => {
+                  if (node.label === label) {
+                    node.properties = propertyKeys.map(p => {
+                      return { name: p };
+                    });
+                  }
+                });
+                onChange(sourceSchema);
+              }}
+            ></Select>
+          </Flex>
+        );
+      })}
+    </div>
+  );
+};
+
+export default AdjustSchema;

packages/studio-explore/src/components/Report/Intention.tsx

@@ -1,25 +1,21 @@
-import { Flex, Typography, Button, Divider, Select, Timeline,notification } from 'antd';
-import React, { useState } from 'react';
+import { Flex, Typography, Button, Divider, Select, Timeline, notification } from 'antd';
+import React, { useEffect, useState } from 'react';
 import { OpenAIOutlined } from '@ant-design/icons';
 import { query } from '../Copilot/query';
 import { Message } from '../Copilot/utils/message';
-import { useContext } from '@graphscope/studio-graph';
+import { GraphSchema, useContext } from '@graphscope/studio-graph';
 import Summary from './Summary';
-import {
-  filterDataByParticalSchema,
-  getAllAttributesByName,
-  getStrSizeInKB,
-  sampleHalf,
-  getCategories,
-  getInducedSubgraph,
-} from './utils';
+
+import { filterDataByParticalSchema, getStrSizeInKB, sampleHalf, getCategories, getInducedSubgraph } from './utils';
 import type { ItentionType } from './index';
 import AddNodes from './AddNodes';
 import { getPrompt } from './utils';
-import { debug } from 'console';
+import AdjustSchema from './AdjustSchema';
 interface IReportProps {
   task: string;
   intention: ItentionType;
+  intentionSchema: GraphSchema;
+  updateIntentionSchema: (value: GraphSchema) => void;
 }
 export interface SummaryType {
   categories: {
@@ -259,9 +255,9 @@ export const TEMPLATE_MIND_MAP_GENERATOR = (graph_data, user_query) => `
   `;
 
 const Intention: React.FunctionComponent<IReportProps> = props => {
-  const { intention, task } = props;
+  const { intention, task, intentionSchema, updateIntentionSchema } = props;
   const { store } = useContext();
-  const { schema, data } = store;
+  const { data } = store;
 
   const [state, setState] = useState<{
     summary: SummaryType | null;
@@ -277,10 +273,10 @@ const Intention: React.FunctionComponent<IReportProps> = props => {
       return {
         ...preState,
         loading: true,
+        summary: null,
       };
     });
-
-    const { nodes, edges } = filterDataByParticalSchema(intention.schema, data);
+    const { nodes, edges } = filterDataByParticalSchema(intentionSchema, data);
 
     // const { flatten_keys, flatten_values } = flattenListofDict(nodes)
 
@@ -351,22 +347,21 @@ const Intention: React.FunctionComponent<IReportProps> = props => {
           }),
         ]);
 
-        if(_res.message.content){
+        if (_res.message.content) {
           res = JSON.parse(_res.message.content);
-        }else{
+        } else {
           notification.error({
-            message:"network error"
-          })
+            message: 'network error',
+          });
           setState(preState => {
             return {
               ...preState,
               loading: false,
               summary: null,
             };
           });
-          return ;
+          return;
         }
-
       }
 
       const data_ids = res.data.map(item => item.data_id.toString());
@@ -386,7 +381,7 @@ const Intention: React.FunctionComponent<IReportProps> = props => {
       element.children = nodes.filter(n => (element.children || []).includes(n.id));
     });
     res.categories = _categories;
-    debugger;
+
     //@ts-ignore
     setState(preState => {
       return {
@@ -430,38 +425,18 @@ const Intention: React.FunctionComponent<IReportProps> = props => {
                   Please first ensure that the current canvas contains these types of nodes and edges. You can manually
                   adjust the set of node properties passed to the LLM.
                 </Typography.Text>
-
-                {intention.schema.nodes.map(item => {
-                  const { id, label, properties = [] } = item;
-                  const match = schema.nodes.find(node => node.label === label);
-                  const options = match?.properties.map(p => {
-                    return {
-                      label: p.name,
-                      value: p.name,
-                    };
-                  });
-                  const defaultValue = properties.map(p => {
-                    return p.name;
-                  });
-                  return (
-                    <Flex vertical gap={12} key={item.id}>
-                      <Flex justify="space-between" align="center">
-                        <Typography.Text italic type="secondary">
-                          {label}
-                        </Typography.Text>
-                        <AddNodes label={label} />
-                      </Flex>
-
-                      <Select options={options} mode="multiple" defaultValue={defaultValue}></Select>
-                    </Flex>
-                  );
-                })}
+                <AdjustSchema value={intentionSchema} onChange={updateIntentionSchema} />
               </Flex>
             ),
           },
         ]}
       />
-      <Button block icon={<OpenAIOutlined />} onClick={handleConfirm} loading={loading}>
+      <Button
+        block
+        icon={<OpenAIOutlined />}
+        onClick={handleConfirm}
+        // loading={loading}
+      >
         Generate Mindmap
       </Button>
       {summary && <Summary {...summary} task={task} />}

packages/studio-explore/src/components/Report/index.tsx

@@ -7,8 +7,7 @@ import { GraphSchema, useContext } from '@graphscope/studio-graph';
 import Intention from './Intention';
 import Setting from '../Copilot/setting';
 import { getPrompt } from './utils';
-import ReportText from  './Text'
-import {test_report} from './const'
+
 interface IReportProps {}
 
 const GET_DATA_FILTER_RULES_EN = (user_query: string, schema: any) => {
@@ -60,6 +59,7 @@ const Report: React.FunctionComponent<IReportProps> = props => {
     loading: boolean;
     task: string;
     intention: ItentionType | null;
+    intentionSchema: GraphSchema;
   }>({
     loading: false,
     task:
@@ -68,15 +68,25 @@ const Report: React.FunctionComponent<IReportProps> = props => {
       // '请根据我选中的 papers ，以及 paper 关联的 challenge，写一个 related work section。要求 papers 按照 challenge 进行整理',
       '帮我把这些 Papers 整理写成一个 related work 的 section，关注点在 challenge 上',
     intention: null,
+    intentionSchema: { nodes: [], edges: [] },
   });
 
-  const { intention, task } = state;
+  const { intention, task, intentionSchema } = state;
 
   const handleClick = async () => {
     const { value } = InputRef.current.resizableTextArea.textArea;
 
     try {
-      setState({ ...state, task: value, loading: true });
+      setState({
+        ...state,
+        task: value,
+        intention: null,
+        intentionSchema: {
+          nodes: [],
+          edges: [],
+        },
+        loading: true,
+      });
 
       const _res = await query([
         new Message({
@@ -95,11 +105,20 @@ const Report: React.FunctionComponent<IReportProps> = props => {
           ...preState,
           loading: false,
           intention: res,
+          intentionSchema: res.schema,
         };
       });
       console.log('res', res);
     } catch (error) {}
   };
+  const updateIntentionSchema = (schema: GraphSchema) => {
+    setState(preState => {
+      return {
+        ...preState,
+        intentionSchema: schema,
+      };
+    });
+  };
 
   console.log(schema);
   return (
@@ -118,9 +137,14 @@ const Report: React.FunctionComponent<IReportProps> = props => {
       <Button icon={<OpenAIOutlined />} onClick={handleClick} loading={state.loading}>
         Infer Intention
       </Button>
-      {intention && <Intention task={task} intention={intention} />}
-
-
+      {intention && (
+        <Intention
+          task={task}
+          intention={intention}
+          intentionSchema={intentionSchema}
+          updateIntentionSchema={updateIntentionSchema}
+        />
+      )}
     </Flex>
   );
 };

packages/studio-explore/src/components/Report/utils.tsx

@@ -8,7 +8,7 @@ export const filterDataByParticalSchema = (schema, data) => {
     return item.label;
   });
   console.log('node_labels', node_labels);
-  const edge_labels = schema.edges.map(item => {
+  const edge_labels = (schema.edges || []).map(item => {
     return item.label;
   });
   console.log('edge_labels', edge_labels);
@@ -39,12 +39,12 @@ export const filterDataByParticalSchema = (schema, data) => {
     })
     .map(item => {
       const { id, label, properties = {}, source, target } = item;
-      const match = schema.edges.find(c => c.label === label) || { properties: [] };
+      const match = (schema.edges || []).find(c => c.label === label) || { properties: [] };
       return {
         id,
         label,
-        source:typeof source ==='object' ? source.id:source,
-        target:typeof target ==='object' ? target.id:target,
+        source: typeof source === 'object' ? source.id : source,
+        target: typeof target === 'object' ? target.id : target,
         properties: (match.properties || []).reduce((acc, curr) => {
           return {
             ...acc,
@@ -123,7 +123,7 @@ export const getInducedSubgraph = (nodes, edges, target_ids) => {
   });
 
   const target_nodes = nodes.filter(node => target_ids.includes(node.id));
-  
+
   const connectedNodeIds = new Set();
   filtered_edges.forEach(edge => {
     connectedNodeIds.add(edge.source);
@@ -134,7 +134,7 @@ export const getInducedSubgraph = (nodes, edges, target_ids) => {
   const filtered_nodes = neighbor_nodes.concat(target_nodes);
 
   return { filtered_nodes, filtered_edges };
-}
+};
 
 import { Utils } from '@graphscope/studio-components';
 export const getPrompt = obj => {