GraphScope · totoago · Nov 8, 2024 · Nov 11, 2024 · Nov 13, 2024
diff --git a/packages/studio-components/src/Icons/Filter.tsx b/packages/studio-components/src/Icons/Filter.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+interface IFilterProps {
+  style?: React.CSSProperties;
+}
+
+const Filter: React.FC<IFilterProps> = ({ style = {} }) => {
+  const { color = '#212121', fontSize = '16px' } = style;
+
+  return (
+    <svg width={fontSize} height={fontSize} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill={color}
+        d="M660.091128 232.200858l-151.412041 226.415613v356.676207l35.761162 15.97564V471.820401l161.140927-240.942948c5.213896-21.316208-6.789758-38.618796-26.615141-38.618796H220.259211c-19.702256 0-31.873329 17.302588-26.740927 38.618796l171.859266 240.942948V751.382145l35.804568 15.97564V457.829869L240.208609 232.200858h419.882519z m-44.000111 219.667488c0-10.884872 7.822616-19.784637 17.631225-19.948512h179.726173c9.849356 0 17.920886 8.939626 17.920886 19.948512 0 11.012429-8.028125 19.952055-17.920886 19.952055H633.722242c-9.808609-0.208166-17.631225-9.06364-17.631225-19.952055z m0 119.790284c0-10.888415 7.822616-19.787294 17.631225-19.95117h179.726173c9.849356 0 17.920886 8.940512 17.920886 19.95117 0 11.008886-8.028125 19.949398-17.920886 19.949398H633.722242c-9.808609-0.164761-17.631225-9.06364-17.631225-19.949398z m0 119.829259c0-10.884872 7.822616-19.784637 17.631225-19.951169h179.726173c9.849356 0 17.920886 8.940512 17.920886 19.951169 0 11.008886-8.028125 19.952055-17.920886 19.952056H633.722242c-9.808609-0.208166-17.631225-9.026436-17.631225-19.952056z m0 0"
+      />
+    </svg>
+  );
+};
+
+export default Filter;
diff --git a/packages/studio-components/src/Icons/index.tsx b/packages/studio-components/src/Icons/index.tsx
@@ -15,3 +15,4 @@ export { default as Lasso } from './Lasso';
 export { default as File } from './File';
 export { default as Arrow } from './Arrow';
 export { default as Punctuation } from './Punctuation';
+export { default as Filter } from './Filter';
diff --git a/packages/studio-query/src/statement/result/raw.tsx b/packages/studio-query/src/statement/result/raw.tsx
@@ -2,24 +2,32 @@ import React from 'react';
 import { Result } from 'antd';
 import { Loading3QuartersOutlined } from '@ant-design/icons';
 import ReactJson from 'react-json-view';
+import { useStudioProvier } from '@graphscope/studio-components';
 interface IJSONViewProps {
   data: any;
   isFetching: boolean;
 }
 
 const RawView: React.FunctionComponent<IJSONViewProps> = props => {
   const { data, isFetching } = props;
-
+  const { isLight } = useStudioProvier();
+  const theme = isLight ? 'rjv-default' : 'grayscale';
   if (isFetching) {
     return <Result icon={<Loading3QuartersOutlined spin />} status="error" title={'Running'}></Result>;
   }
   if (data.mode === 'error') {
     return <Result status="error" title={data.raw && data.raw.name} subTitle={data.raw && data.raw.message}></Result>;
   }
-
   return (
-    <div>
-      <ReactJson src={data.raw} />
+    <div
+      style={{
+        paddingLeft: '16px',
+        overflowWrap: 'break-word',
+        wordBreak: 'break-all',
+        whiteSpace: 'pre-wrap',
+      }}
+    >
+      <ReactJson src={data.raw} theme={theme} />
       {/* <pre style={{ textWrap: 'pretty' }}>{JSON.stringify(data.raw, null, 2)}</pre> */}
     </div>
   );

diff --git a/packages/studio-website/src/components/table-parcel/index.tsx b/packages/studio-website/src/components/table-parcel/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ConfigProvider } from 'antd';
+import { useStudioProvier } from '@graphscope/studio-components';
+type ITableParcelProps = {
+  children: React.ReactNode;
+};
+const TableParcel: React.FC<ITableParcelProps> = ({ children }) => {
+  const { isLight } = useStudioProvier();
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Table: {
+            headerBg: isLight ? '#fff' : '#242424',
+          },
+        },
+      }}
+    >
+      <div
+        style={{
+          backgroundColor: isLight ? '#fff' : '#242424',
+          border: `1px solid ${isLight ? '#f0f0f0' : '#313131'}`,
+          borderRadius: '6px',
+        }}
+      >
+        {children}
+      </div>
+    </ConfigProvider>
+  );
+};
+
+export default TableParcel;
diff --git a/packages/studio-website/src/pages/extension/create-plugins.tsx b/packages/studio-website/src/pages/extension/create-plugins.tsx
@@ -1,8 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { Form, Button, Divider } from 'antd';
-import { useNavigate } from 'react-router-dom';
+import { Form, Button, Flex, Divider } from 'antd';
 import { FormattedMessage } from 'react-intl';
-import { Utils, SplitSection } from '@graphscope/studio-components';
+import { Utils, SplitSection, useStudioProvier } from '@graphscope/studio-components';
 import Section from '../../components/section';
 import LeftSide from './left-side';
 import RightSide from './right-side';
@@ -12,7 +11,7 @@ import { createProcedure, updateProcedure, listGraphs, getProcedure } from './se
 import { useHistory } from '../../hooks/';
 const { getUrlParams } = Utils;
 const CreatePlugins: React.FC = () => {
-  console.log(getUrlParams());
+  const { isLight } = useStudioProvier();
   const { graph_id, procedure_id } = getUrlParams();
   const [form] = Form.useForm();
   const history = useHistory();
@@ -35,7 +34,7 @@ const CreatePlugins: React.FC = () => {
     const res = await getProcedure(graph_id, procedure_id);
     //@ts-ignore
     const { query } = res;
-    form.setFieldsValue(res);
+    form.setFieldsValue({ ...res, bound_graph: !!res['bound_graph'] ? res['bound_graph'] : graph_id });
     updateState(preset => {
       return { ...preset, editCode: query, isEdit: true };
     });
@@ -116,33 +115,55 @@ const CreatePlugins: React.FC = () => {
       ]}
       desc="Expand its functionality or offer solutions that are finely tuned to specific needs."
     >
-      <SelectCards
-        style={{ position: 'absolute', top: '3px', right: '3px', fontSize: '20px' }}
-        value={storeType}
-        //@ts-ignore
-        items={engines}
-        onChange={chooseStoreType}
-      />
-      <Divider />
-      <SplitSection
-        splitText=""
-        span={12}
-        splitSpan={1}
-        leftSide={
-          <LeftSide
-            editCode={editCode}
-            isEdit={isEdit}
-            onCodeMirrorChange={onCodeMirrorChange}
-            onChange={handleCodeMirror}
+      <Flex
+        style={{
+          backgroundColor: isLight ? '#fff' : '#242424',
+          // border: `1px solid ${isLight ? '#f0f0f0' : '#313131'}`,
+          borderRadius: '6px',
+          padding: '12px',
+        }}
+        vertical
+        gap={12}
+      >
+        <Flex vertical gap={12}>
+          <SelectCards
+            style={{ position: 'absolute', top: '3px', right: '3px', fontSize: '20px' }}
+            value={storeType}
+            //@ts-ignore
+            items={engines}
+            onChange={chooseStoreType}
           />
-        }
-        rightSide={<RightSide form={form} isEdit={isEdit} options={instanceOption} />}
-      />
-      <div style={{ display: 'flex', justifyContent: 'end' }}>
-        <Button type="primary" onClick={handleSubmit} loading={isLoading} style={{ width: '128px' }}>
-          {graph_id ? <FormattedMessage id="Edit Plugin" /> : <FormattedMessage id="Create Plugin" />}
-        </Button>
-      </div>
+          {/* <Divider style={{ margin: 0 }} /> */}
+          <Flex gap={12}>
+            <LeftSide
+              editCode={editCode}
+              isEdit={isEdit}
+              onCodeMirrorChange={onCodeMirrorChange}
+              onChange={handleCodeMirror}
+            />
+            <RightSide form={form} isEdit={isEdit} options={instanceOption} />
+          </Flex>
+          {/* <SplitSection
+            splitText=""
+            span={12}
+            splitSpan={1}
+            leftSide={
+              <LeftSide
+                editCode={editCode}
+                isEdit={isEdit}
+                onCodeMirrorChange={onCodeMirrorChange}
+                onChange={handleCodeMirror}
+              />
+            }
+            rightSide={<RightSide form={form} isEdit={isEdit} options={instanceOption} />}
+          /> */}
+        </Flex>
+        <Flex justify="end">
+          <Button type="primary" onClick={handleSubmit} loading={isLoading} style={{ width: '128px' }}>
+            {graph_id ? <FormattedMessage id="Edit Plugin" /> : <FormattedMessage id="Create Plugin" />}
+          </Button>
+        </Flex>
+      </Flex>
     </Section>
   );
 };

diff --git a/packages/studio-website/src/pages/extension/left-side.tsx b/packages/studio-website/src/pages/extension/left-side.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Card } from 'antd';
 import CodeMirror from '@uiw/react-codemirror';
 import { useCustomToken } from '@graphscope/studio-components';
 import { useEditorTheme } from '../../pages/utils';
@@ -14,7 +15,7 @@ const LeftSide: React.FC<ILeftSide> = props => {
   const { editCode, isEdit, onCodeMirrorChange, onChange } = props;
   const { codeMirrorBorder } = useCustomToken();
   return (
-    <>
+    <div style={{ width: '50%' }}>
       <UploadFiles disabled={isEdit} editCode={editCode} handleChange={onCodeMirrorChange} />
       <div
         style={{
@@ -31,7 +32,7 @@ const LeftSide: React.FC<ILeftSide> = props => {
           readOnly={isEdit}
         />
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/packages/studio-website/src/pages/extension/plugins.tsx b/packages/studio-website/src/pages/extension/plugins.tsx
@@ -1,14 +1,16 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Table, Button, Space, Skeleton, Popconfirm, message } from 'antd';
+import { Table, Button, Space, Skeleton, Popconfirm, message, ConfigProvider } from 'antd';
 import { FormattedMessage } from 'react-intl';
 
 import { listProcedures, deleteProcedure } from './service';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTrashCan, faPenToSquare } from '@fortawesome/free-regular-svg-icons';
+import TableParcel from '../../components/table-parcel';
 
 import { useHistory } from '../../hooks';
 export interface Item {
   key: string;
+  id: string;
   name: string;
   type: string;
   bound_graph: string;
@@ -22,20 +24,29 @@ const Plugins: React.FC = () => {
     /** 控制骨架屏 */
     isReady: boolean;
     open: boolean;
+    isLoading: boolean;
   }>({
     pluginList: [],
     isReady: true,
     open: false,
+    isLoading: false,
   });
-  const { isReady, pluginList } = state;
+  const { isReady, pluginList, isLoading } = state;
   /** 获取插件列表数据 */
   const getPlugins = useCallback(async () => {
+    updateState(preset => {
+      return {
+        ...preset,
+        isLoading: true,
+      };
+    });
     const res = await listProcedures();
     //@ts-ignore
     updateState(preset => {
       return {
         ...preset,
         pluginList: res || [],
+        isLoading: false,
       };
     });
   }, []);
@@ -73,7 +84,6 @@ const Plugins: React.FC = () => {
         key: 'actions',
         width: 60,
         render: (_: any, all: Item) => {
-          //@ts-ignore
           const { bound_graph, id } = all;
           return (
             <Space>
@@ -109,7 +119,7 @@ const Plugins: React.FC = () => {
   return (
     <>
       <Button
-        style={{ position: 'absolute', top: '-55px', right: '0px' }}
+        style={{ position: 'absolute', top: '36px', right: '24px' }}
         type="primary"
         onClick={() => {
           history.push('/extension/create');
@@ -120,12 +130,15 @@ const Plugins: React.FC = () => {
       {!isReady ? (
         <Skeleton />
       ) : (
-        <Table
-          dataSource={pluginList}
-          //@ts-ignores
-          columns={columns}
-          size="middle"
-        />
+        <TableParcel>
+          <Table
+            dataSource={pluginList}
+            //@ts-ignores
+            columns={columns}
+            size="middle"
+            loading={isLoading}
+          />
+        </TableParcel>
       )}
     </>
   );

diff --git a/packages/studio-website/src/pages/extension/right-side.tsx b/packages/studio-website/src/pages/extension/right-side.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Form, Input, Select, Typography, Divider } from 'antd';
+import { Form, Input, Select, Typography, Divider, Card } from 'antd';
 export type FieldType = {
   name: string;
   type: string;
@@ -22,7 +22,7 @@ const { Title } = Typography;
 const RightSide: React.FC<IRightSide> = props => {
   const { form, isEdit, options } = props;
   return (
-    <>
+    <Card style={{ width: '50%' }}>
       <Title level={3} style={{ margin: 0 }}>
         <FormattedMessage id="Plugin info" />
       </Title>
@@ -58,7 +58,7 @@ const RightSide: React.FC<IRightSide> = props => {
           <Input />
         </Form.Item>
       </Form>
-    </>
+    </Card>
   );
 };
 

diff --git a/packages/studio-website/src/pages/extension/service.tsx b/packages/studio-website/src/pages/extension/service.tsx
@@ -11,10 +11,17 @@ export const listProcedures = async () => {
       }
       return [];
     });
-  const info = message.reduce((pre, cur) => {
-    //@ts-ignore
-    return pre.concat(cur.stored_procedures);
-  }, []);
+  // const info = message.reduce((pre, cur) => {
+  //   //@ts-ignore
+  //   return pre.concat(cur.stored_procedures);
+  // }, []);
+  const info = message.flatMap(item =>
+    (item?.stored_procedures || []).map(V => ({
+      ...V,
+      bound_graph: !!V['bound_graph'] ? V['bound_graph'] : item.id,
+    })),
+  );
+
   return info;
 };
 /** 创建插件 */

diff --git a/packages/studio-website/src/pages/extension/upload-files.tsx b/packages/studio-website/src/pages/extension/upload-files.tsx
@@ -48,7 +48,13 @@ const UploadFiles: React.FC<IUploadFile> = ({ disabled, editCode, handleChange }
   };
   return (
     <div style={{ height: '150px', marginBottom: '12px' }}>
-      <Dragger disabled={disabled} showUploadList={false} multiple={true} onDrop={onDrop} customRequest={customRequest}>
+      <Dragger
+        disabled={disabled}
+        accept={'.yaml,.cypher'}
+        showUploadList={false}
+        onDrop={onDrop}
+        customRequest={customRequest}
+      >
         <p className="ant-upload-text">
           <FormattedMessage id="Click or drag file to this area to upload" />
         </p>