Merge pull request #578 from GraphScope/fix-graphy

support extract from
GraphScope · Nov 14, 2024 · aa70768 · aa70768
2 parents 5774161 + ebe74df
commit aa70768
Show file tree

Hide file tree

Showing 11 changed files with 159 additions and 111 deletions.
diff --git a/examples/graphy/src/pages/components/GraphList/index.tsx b/examples/graphy/src/pages/components/GraphList/index.tsx
@@ -83,14 +83,14 @@ const List: React.FunctionComponent<IListProps> = props => {
     //     return <div>2</div>;
     //   },
     // },
-    {
-      title: 'Clustered',
-      key: 'summarized',
-      render: (record: IEntity) => {
-        const { summarized } = record;
-        return <Switch checked={summarized} size="small" disabled />;
-      },
-    },
+    // {
+    //   title: 'Clustered',
+    //   key: 'summarized',
+    //   render: (record: IEntity) => {
+    //     const { summarized } = record;
+    //     return <Switch checked={summarized} size="small" disabled />;
+    //   },
+    // },
     {
       title: 'Operator',
       render: (record: IEntity) => {
@@ -103,7 +103,7 @@ const List: React.FunctionComponent<IListProps> = props => {
               handleCluster(record);
             }}
           >
-            cluster
+            view
           </Typography.Link>
         );
       },

diff --git a/examples/graphy/src/pages/dataset/embed/graph.tsx b/examples/graphy/src/pages/dataset/embed/graph.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import ImportorApp from '@graphscope/studio-importor';
 import { Button } from 'antd';
-import { Toolbar, Utils, MultipleInstance } from '@graphscope/studio-components';
+import { Toolbar, Utils } from '@graphscope/studio-components';
 import RightSide from './right-side';
 import ImportSchema from './import-schema';
 
@@ -12,34 +12,32 @@ interface IModelingProps {}
 
 const EmbedSchema: React.FunctionComponent<IModelingProps> = props => {
   return (
-    <MultipleInstance>
-      <ImportorApp
-        style={{
-          height: 'calc(100vh - 100px)',
-        }}
-        appMode="DATA_MODELING"
-        defaultCollapsed={{
-          leftSide: true,
-          rightSide: true,
-        }}
-        rightSide={<RightSide />}
-        rightSideStyle={{
-          width: '350px',
-          padding: '0px 12px',
-        }}
-        // queryGraphSchema={queryGraphSchema}
-        queryPrimitiveTypes={() => {
-          return ['DT_DOUBLE', 'DT_STRING', 'DT_SIGNED_INT32', 'DT_SIGNED_INT64'].map(item => {
-            return { label: item, value: item };
-          });
-        }}
-      >
-        <Toolbar style={{ top: '12px', right: '124px', left: 'unset' }} direction="horizontal">
-          <SaveButton />
-          <ImportSchema />
-        </Toolbar>
-      </ImportorApp>
-    </MultipleInstance>
+    <ImportorApp
+      style={{
+        height: 'calc(100vh - 100px)',
+      }}
+      appMode="DATA_MODELING"
+      defaultCollapsed={{
+        leftSide: true,
+        rightSide: true,
+      }}
+      rightSide={<RightSide />}
+      rightSideStyle={{
+        width: '350px',
+        padding: '0px 12px',
+      }}
+      // queryGraphSchema={queryGraphSchema}
+      queryPrimitiveTypes={() => {
+        return ['DT_DOUBLE', 'DT_STRING', 'DT_SIGNED_INT32', 'DT_SIGNED_INT64'].map(item => {
+          return { label: item, value: item };
+        });
+      }}
+    >
+      <Toolbar style={{ top: '12px', right: '124px', left: 'unset' }} direction="horizontal">
+        <SaveButton />
+        <ImportSchema />
+      </Toolbar>
+    </ImportorApp>
   );
 };
 

diff --git a/examples/graphy/src/pages/dataset/embed/right-side.tsx b/examples/graphy/src/pages/dataset/embed/right-side.tsx
@@ -34,8 +34,10 @@ const Content = props => {
     name: defaultName,
     query: defaultQuery,
     output_schema: defaultOutputSchema,
+    extract_from_indexs: data.extract_from.exact || '',
+    extract_from_words: data.extract_from.match || '',
   });
-  const { name, query, output_schema } = state;
+  const { name, query, output_schema, extract_from_indexs, extract_from_words } = state;
   useEffect(() => {
     setState({
       ...state,
@@ -55,6 +57,14 @@ const Content = props => {
     const { value } = e.target;
     onChange && onChange(id, 'output_schema', value);
   };
+  const handleExtractIndexs = e => {
+    const { value } = e.target;
+    onChange && onChange(id, 'extract_from_indexs', value);
+  };
+  const handleExtractWords = e => {
+    const { value } = e.target;
+    onChange && onChange(id, 'extract_from_words', value);
+  };
   return (
     <Flex vertical gap={12}>
       <Typography.Text>Entity Name</Typography.Text>
@@ -80,6 +90,37 @@ const Content = props => {
         }}
         onBlur={handlePrompt}
       ></Input.TextArea>
+      <Typography.Text>Extract</Typography.Text>
+      <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
+        Extract from page indexs
+      </Typography.Text>
+      <Input.TextArea
+        placeholder="such as 1,2,3"
+        rows={1}
+        value={extract_from_indexs}
+        onChange={e => {
+          setState({
+            ...state,
+            extract_from_indexs: e.target.value,
+          });
+        }}
+        onBlur={handleExtractIndexs}
+      ></Input.TextArea>
+      <Typography.Text type="secondary" style={{ fontSize: '12px' }}>
+        Extract from match wordings
+      </Typography.Text>
+      <Input.TextArea
+        placeholder="such as background,keyword"
+        rows={1}
+        value={extract_from_words}
+        onChange={e => {
+          setState({
+            ...state,
+            extract_from_words: e.target.value,
+          });
+        }}
+        onBlur={handleExtractWords}
+      ></Input.TextArea>
       <Typography.Text>Output</Typography.Text>
       <Input.TextArea
         rows={8}
@@ -100,7 +141,7 @@ const RightSide: React.FunctionComponent<IRightSideProps> = props => {
   const { nodes, edges, currentId } = store;
 
   const onChange = (id, key, value) => {
-    console.log(id, value);
+    console.log(id, key, value);
     updateStore(draft => {
       draft.nodes = draft.nodes.map(node => {
         if (node.id === id) {
@@ -110,6 +151,7 @@ const RightSide: React.FunctionComponent<IRightSideProps> = props => {
       });
     });
   };
+  console.log(nodes);
   const items: CollapseProps['items'] = nodes.map(item => {
     return {
       key: item.id,

diff --git a/examples/graphy/src/pages/dataset/list/action.tsx b/examples/graphy/src/pages/dataset/list/action.tsx
@@ -39,7 +39,9 @@ const Action: React.FunctionComponent<IDataset> = props => {
           onClick={() => {
             downloadDataset(id);
           }}
-        ></Button>
+        >
+          Download
+        </Button>
       </Tooltip>
       <Tooltip title="Delete dataset">
         <Button onClick={handleDelete} icon={<DeleteOutlined />}></Button>

diff --git a/examples/graphy/src/pages/dataset/service.ts b/examples/graphy/src/pages/dataset/service.ts
@@ -176,13 +176,16 @@ export const updateEmbedSchema = async (id, params) => {
   const workflow_json = {
     nodes: nodes.map(item => {
       const { id, data } = item;
-      const { label, query = '', output_schema = '' } = data;
+      const { label, query = '', output_schema = '', extract_from_indexs = '', extract_from_words = '' } = data;
       return {
         id,
         name: label,
         query,
         output_schema: output_schema,
-        extract_from: [],
+        extract_from: {
+          exact: extract_from_indexs.split(','),
+          match: extract_from_words.split(','),
+        },
       };
     }),
 

diff --git a/examples/graphy/src/pages/explore/services/kuzu.tsx b/examples/graphy/src/pages/explore/services/kuzu.tsx
@@ -29,7 +29,6 @@ export const queryStatistics = async () => {
 };
 export const reload = async () => {
   const graph_id = (Utils.getSearchParams('graph_id') || '0') as string;
-  debugger;
   const driver = await getDriver();
   await driver.switchDataset(graph_id);
   window.KUZU_DRIVER = driver;

diff --git a/examples/graphy/vite.config.ts b/examples/graphy/vite.config.ts
@@ -39,9 +39,9 @@ export default defineConfig({
   plugins: [react(), wasm(), topLevelAwait()],
   resolve: {
     alias: {
-      react: path.resolve(__dirname, 'node_modules/react'),
-      'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
-      '@graphscope/studio-components': path.resolve(__dirname, 'node_modules/@graphscope/studio-components'),
+      // react: path.resolve(__dirname, 'node_modules/react'),
+      // 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'),
+      // '@graphscope/studio-components': path.resolve(__dirname, 'node_modules/@graphscope/studio-components'),
     },
   },
 });
diff --git a/packages/studio-importor/src/app/button-controller/index.tsx b/packages/studio-importor/src/app/button-controller/index.tsx
@@ -15,14 +15,11 @@ interface IButtonControllerProps {}
 const ButtonController: React.FunctionComponent<IButtonControllerProps> = props => {
   const { store } = useContext();
   const { appMode } = store;
-  const { buttonBackground } = useCustomToken();
+
   if (appMode === 'DATA_MODELING') {
     return (
       <>
-        <Toolbar
-          style={{ top: '12px', right: '24px', left: 'unset', background: buttonBackground }}
-          direction="vertical"
-        >
+        <Toolbar style={{ top: '12px', right: '24px', left: 'unset' }} direction="vertical">
           <RightButton />
           <Divider style={{ margin: '0px' }} />
           <ParseCSV />
@@ -39,10 +36,7 @@ const ButtonController: React.FunctionComponent<IButtonControllerProps> = props
   if (appMode === 'DATA_IMPORTING') {
     return (
       <>
-        <Toolbar
-          style={{ top: '12px', right: '24px', left: 'unset', background: buttonBackground }}
-          direction="vertical"
-        >
+        <Toolbar style={{ top: '12px', right: '24px', left: 'unset' }} direction="vertical">
           <RightButton />
           <Divider style={{ margin: '0px' }} />
           <ImportAndExportConfig />

diff --git a/packages/studio-importor/src/app/button-controller/right-button.tsx b/packages/studio-importor/src/app/button-controller/right-button.tsx
@@ -1,23 +1,20 @@
 import { Button } from 'antd';
 import * as React from 'react';
-import { Icons, useSection, useStudioProvier } from '@graphscope/studio-components';
-interface ILeftButtonProps {}
+import { Icons, useSection } from '@graphscope/studio-components';
+interface IRightButtonProps {}
 
-const LeftButton: React.FunctionComponent<ILeftButtonProps> = props => {
+const RightButton: React.FunctionComponent<IRightButtonProps> = props => {
   const { toggleRightSide } = useSection();
-  const { isLight } = useStudioProvier();
-  /** 夜间与白天模式 */
-  const color = !isLight ? '#fff' : '#000';
 
   return (
     <Button
       type="text"
-      icon={<Icons.Sidebar revert style={{ color }} />}
+      icon={<Icons.Sidebar revert />}
       onClick={() => {
         toggleRightSide();
       }}
     />
   );
 };
 
-export default LeftButton;
+export default RightButton;
diff --git a/packages/studio-importor/src/app/index.tsx b/packages/studio-importor/src/app/index.tsx
@@ -1,10 +1,8 @@
 import React, { useEffect, useMemo } from 'react';
 import GraphCanvas from './graph-canvas';
 import PropertiesEditor from './properties-editor';
-import { Spin } from 'antd';
 import { ReactFlowProvider } from 'reactflow';
 import { Section, StudioProvier, GlobalSpin, useDynamicStyle } from '@graphscope/studio-components';
-// import 'reactflow/dist/style.css';
 import cssStyles from './style';
 import { transformGraphNodes, transformEdges } from './elements/index';
 
@@ -112,7 +110,6 @@ const ImportApp: React.FunctionComponent<ImportorProps> = props => {
         {isReady ? (
           <ReactFlowProvider>
             {!IS_PURE && <ButtonController />}
-
             <GraphCanvas />
             {children}
           </ReactFlowProvider>