diff --git a/packages/studio-components/src/Icons/Filter.tsx b/packages/studio-components/src/Icons/Filter.tsx new file mode 100644 index 000000000..a2c8995f8 --- /dev/null +++ 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 = ({ style = {} }) => { + const { color = '#212121', fontSize = '16px' } = style; + + return ( + + + + ); +}; + +export default Filter; diff --git a/packages/studio-components/src/Icons/index.tsx b/packages/studio-components/src/Icons/index.tsx index cb37bee9b..4f1c8f1c3 100644 --- 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 index c16c6a6d7..31c62f5e5 100644 --- a/packages/studio-query/src/statement/result/raw.tsx +++ b/packages/studio-query/src/statement/result/raw.tsx @@ -2,6 +2,7 @@ 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; @@ -9,17 +10,24 @@ interface IJSONViewProps { const RawView: React.FunctionComponent = props => { const { data, isFetching } = props; - + const { isLight } = useStudioProvier(); + const theme = isLight ? 'rjv-default' : 'grayscale'; if (isFetching) { return } status="error" title={'Running'}>; } if (data.mode === 'error') { return ; } - return ( -
- +
+ {/* 
{JSON.stringify(data.raw, null, 2)}
*/}
); diff --git a/packages/studio-website/src/components/table-parcel/index.tsx b/packages/studio-website/src/components/table-parcel/index.tsx new file mode 100644 index 000000000..797cfa4d0 --- /dev/null +++ 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 = ({ children }) => { + const { isLight } = useStudioProvier(); + return ( + +
+ {children} +
+ + ); +}; + +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 index cd4027716..a83e88ae6 100644 --- 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." > - - - + + - } - rightSide={} - /> -
- -
+ {/* */} + + + + + {/* + } + rightSide={} + /> */} + + + + + ); }; diff --git a/packages/studio-website/src/pages/extension/left-side.tsx b/packages/studio-website/src/pages/extension/left-side.tsx index 0c412fa2f..9a314506c 100644 --- 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 = props => { const { editCode, isEdit, onCodeMirrorChange, onChange } = props; const { codeMirrorBorder } = useCustomToken(); return ( - <> +
= props => { readOnly={isEdit} />
- +
); }; diff --git a/packages/studio-website/src/pages/extension/plugins.tsx b/packages/studio-website/src/pages/extension/plugins.tsx index ef5b5c4f2..10d1d7436 100644 --- 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 ( @@ -109,7 +119,7 @@ const Plugins: React.FC = () => { return ( <>