From 6c6afec46e5d93d022d09d0a3aa9e48b59980bd1 Mon Sep 17 00:00:00 2001 From: pomelo-nwu Date: Wed, 22 Jan 2025 18:19:46 +0800 Subject: [PATCH] feat: support adjust property --- .../src/components/Report/AdjustSchema.tsx | 68 +++++++++++++++++ .../src/components/Report/Intention.tsx | 75 +++++++------------ .../src/components/Report/index.tsx | 38 ++++++++-- .../src/components/Report/utils.tsx | 12 +-- 4 files changed, 130 insertions(+), 63 deletions(-) create mode 100644 packages/studio-explore/src/components/Report/AdjustSchema.tsx diff --git a/packages/studio-explore/src/components/Report/AdjustSchema.tsx b/packages/studio-explore/src/components/Report/AdjustSchema.tsx new file mode 100644 index 00000000..702801e1 --- /dev/null +++ b/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 = 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 ( +
+ {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 ( + + + + {label} + + + + + + ); + })} +
+ ); +}; + +export default AdjustSchema; diff --git a/packages/studio-explore/src/components/Report/Intention.tsx b/packages/studio-explore/src/components/Report/Intention.tsx index 7d134e65..acfcd55a 100644 --- a/packages/studio-explore/src/components/Report/Intention.tsx +++ b/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 = 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 = 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,12 +347,12 @@ const Intention: React.FunctionComponent = 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, @@ -364,9 +360,8 @@ const Intention: React.FunctionComponent = props => { summary: null, }; }); - return ; + return; } - } const data_ids = res.data.map(item => item.data_id.toString()); @@ -386,7 +381,7 @@ const Intention: React.FunctionComponent = 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 = 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. - - {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 ( - - - - {label} - - - - - - - ); - })} + ), }, ]} /> - {summary && } diff --git a/packages/studio-explore/src/components/Report/index.tsx b/packages/studio-explore/src/components/Report/index.tsx index cca82559..cb92552b 100644 --- a/packages/studio-explore/src/components/Report/index.tsx +++ b/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 = props => { loading: boolean; task: string; intention: ItentionType | null; + intentionSchema: GraphSchema; }>({ loading: false, task: @@ -68,15 +68,25 @@ const Report: React.FunctionComponent = 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 = 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 = props => { - {intention && } - - + {intention && ( + + )} ); }; diff --git a/packages/studio-explore/src/components/Report/utils.tsx b/packages/studio-explore/src/components/Report/utils.tsx index 78baaf72..5f8781ab 100644 --- a/packages/studio-explore/src/components/Report/utils.tsx +++ b/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 => {