diff --git a/.gitignore b/.gitignore index 09bbcc91..26136b60 100644 --- a/.gitignore +++ b/.gitignore @@ -134,7 +134,6 @@ db.sqlite3 db.sqlite3-journal # Flask stuff: -instance/ .webassets-cache # Scrapy stuff: diff --git a/examples/graphy/src/pages/dataset/cluster/graph.tsx b/examples/graphy/src/pages/dataset/cluster/graph.tsx index b785c168..9e1f1268 100644 --- a/examples/graphy/src/pages/dataset/cluster/graph.tsx +++ b/examples/graphy/src/pages/dataset/cluster/graph.tsx @@ -3,7 +3,15 @@ import React, { useRef } from 'react'; import { Button } from 'antd'; import { FilterOutlined } from '@ant-design/icons'; -import { Section, useSection, Icons, FullScreen, SegmentedTabs, StudioProvier } from '@graphscope/studio-components'; +import { + Section, + useSection, + Icons, + FullScreen, + SegmentedTabs, + ThemeProvider, + LocaleProvider, +} from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, @@ -90,37 +98,39 @@ const ClusterGraph: React.FunctionComponent = props => { }} ref={containerRef} > - - -
} - autoResize={false} - rightSideStyle={{ - width: '350px', - }} - defaultCollapsed={{ - leftSide: true, - rightSide: false, - }} - > - - + + + +
} + autoResize={false} + rightSideStyle={{ + width: '350px', + }} + defaultCollapsed={{ + leftSide: true, + rightSide: false, + }} + > + + - - - - - - - - - {/* */} - - -
- - + + + + + + + + + {/* */} + + +
+ + + ); }; diff --git a/examples/graphy/src/pages/explore/paper-reading/index.tsx b/examples/graphy/src/pages/explore/paper-reading/index.tsx index f56f8736..39701526 100644 --- a/examples/graphy/src/pages/explore/paper-reading/index.tsx +++ b/examples/graphy/src/pages/explore/paper-reading/index.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react'; import { Button } from 'antd'; -import { Section, useSection, Icons, FullScreen, StudioProvier } from '@graphscope/studio-components'; +import { Section, useSection, Icons, FullScreen } from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, diff --git a/packages/studio-components/src/LocaleProvider/index.md b/packages/studio-components/src/LocaleProvider/index.md new file mode 100644 index 00000000..47427533 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/index.md @@ -0,0 +1,64 @@ +--- +title: LocaleProvider +--- + +```jsx +import React, { useState } from 'react'; +import { Button, Layout, Typography, Flex } from 'antd'; +import { FormattedMessage } from 'react-intl'; +import { useLocales, LocaleProvider, SvgEnToZh, SvgZhToEn } from '@graphscope/studio-components'; + +const { Content } = Layout; +const { Text } = Typography; + +const locales = { + 'en-US': { + 'navbar.jobs': 'Jobs', + 'navbar.extension': 'Extensions', + 'navbar.alert': 'Alerts', + 'navbar.setting': 'Settings', + 'navbar.deployment': 'Deployment', + }, + 'zh-CN': { + 'navbar.jobs': '作业管理', + 'navbar.extension': '扩展插件', + 'navbar.alert': '告警监控', + 'navbar.setting': '应用设置', + 'navbar.deployment': '部署状态', + } +} + +/** 修改主题色 */ +const ToogleButton = () => { + const { locale = 'en-US', handleLocales } = useLocales(); + return ( + + ); +}; + +export default () => { + return ( + + + + + + + + + + + + + + + ); +}; +``` diff --git a/packages/studio-components/src/LocaleProvider/index.tsx b/packages/studio-components/src/LocaleProvider/index.tsx new file mode 100644 index 00000000..7b4b02d9 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/index.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { IntlProvider } from 'react-intl'; +import { LocaleProvider } from './useLocaleProvider'; +import { storage } from '../Utils'; + +type localeType = 'zh-CN' | 'en-US'; + +type ILocaleProvider = { + locales: { + 'zh-CN': Record; + 'en-US': Record; + }; + children: React.ReactNode; + locale?: localeType; +}; + +const Provider: React.FC = props => { + const { children, locales } = props; + const [currentLocale, setCurrentLocale] = useState<'zh-CN' | 'en-US'>(() => { + let { locale } = props; + if (!locale) { + locale = storage.get('locale'); + if (!locale) { + locale = 'en-US'; + storage.set('locale', locale); + } + } + return locale; + }); + + const handleLocale = (localeConfig: localeType) => { + storage.set('locale', localeConfig); + setCurrentLocale(localeConfig); + }; + + const messages = locales[currentLocale || 'en-US']; + + return ( + + + {children} + + + ); +}; + +export default Provider; diff --git a/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts b/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts new file mode 100644 index 00000000..ec387d04 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/useLocaleProvider.ts @@ -0,0 +1,21 @@ +import { createContext, useContext } from 'react'; + +type localeType = 'zh-CN' | 'en-US'; +export interface IContainerContext { + handleLocale: (value: localeType) => void; + locale: localeType; +} +export const ContainerContext = createContext({ + handleLocale: ({}) => {}, + locale: 'en-US', +}); + +export const LocaleProvider = ContainerContext.Provider; + +export const useLocaleProvider = () => { + const context = useContext(ContainerContext); + if (context === undefined || Object.keys(context).length === 0) { + throw new Error(`useContext must be used within a LocaleProvider`); + } + return context; +}; diff --git a/packages/studio-components/src/LocaleProvider/useLocales.tsx b/packages/studio-components/src/LocaleProvider/useLocales.tsx new file mode 100644 index 00000000..2aef2097 --- /dev/null +++ b/packages/studio-components/src/LocaleProvider/useLocales.tsx @@ -0,0 +1,14 @@ +import { useLocaleProvider } from './useLocaleProvider'; + +export const useLocales = () => { + const { locale = 'en-US', handleLocale } = useLocaleProvider(); + const handleLocales = () => { + const updateTheValue = locale === 'en-US' ? 'zh-CN' : 'en-US'; + handleLocale(updateTheValue); + }; + return { + locale, + handleLocales, + }; +}; + diff --git a/packages/studio-components/src/Provider/index.md b/packages/studio-components/src/Provider/index.md deleted file mode 100644 index 965a6429..00000000 --- a/packages/studio-components/src/Provider/index.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: ThemeProvider ---- - -```jsx -import React, { useState } from 'react'; -import { Button, Space, Input } from 'antd'; -import ThemeProvider from './index.tsx'; -import { useStudioProvier } from './useThemeConfigProvider.tsx'; -import { components, token } from './const.ts'; -/** 修改主题色 */ -const ToogleButton = () => { - const { handleThemeOrLocale } = useStudioProvier(); - return ( - - ); -}; - -export default () => { - return ( - - - - - ); -}; -``` diff --git a/packages/studio-components/src/Provider/const.ts b/packages/studio-components/src/ThemeProvider/const.ts similarity index 100% rename from packages/studio-components/src/Provider/const.ts rename to packages/studio-components/src/ThemeProvider/const.ts diff --git a/packages/studio-components/src/Provider/getThemeConfig.tsx b/packages/studio-components/src/ThemeProvider/getThemeConfig.tsx similarity index 93% rename from packages/studio-components/src/Provider/getThemeConfig.tsx rename to packages/studio-components/src/ThemeProvider/getThemeConfig.tsx index f6825b71..8f1ac505 100644 --- a/packages/studio-components/src/Provider/getThemeConfig.tsx +++ b/packages/studio-components/src/ThemeProvider/getThemeConfig.tsx @@ -46,6 +46,7 @@ export const getThemeConfig = (algorithm: ThemeProviderType['algorithm']) => { colorBorder: isLight ? '#F0F0F0' : '#303030', colorBgBase: isLight ? '#fff' : '#1d1d1d', colorBgLayout: isLight ? '#f5f7f9' : 'rgba(43,43,43,1)', + fontFamily: "'Geist Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif", }; return { componentsConfig, tokenConfig }; }; diff --git a/packages/studio-components/src/ThemeProvider/index.md b/packages/studio-components/src/ThemeProvider/index.md new file mode 100644 index 00000000..421adf72 --- /dev/null +++ b/packages/studio-components/src/ThemeProvider/index.md @@ -0,0 +1,45 @@ +--- +title: ThemeProvider +--- + +```jsx +import React, { useState } from 'react'; +import { Button, Layout, Typography, Flex } from 'antd'; +import { SunOutlined, MoonOutlined } from '@ant-design/icons'; +import { useThemes, ThemeProvider } from '@graphscope/studio-components'; + +const { Content } = Layout; +const { Text } = Typography; + +/** 修改主题色 */ +const ToogleButton = () => { + const { algorithm, updateTheme, isDark } = useThemes(); + return ( + + ); +}; + +export default () => { + return ( + + + + + + + + + + ); +}; +``` diff --git a/packages/studio-components/src/Provider/index.tsx b/packages/studio-components/src/ThemeProvider/index.tsx similarity index 73% rename from packages/studio-components/src/Provider/index.tsx rename to packages/studio-components/src/ThemeProvider/index.tsx index 33ce939a..4107c36a 100644 --- a/packages/studio-components/src/Provider/index.tsx +++ b/packages/studio-components/src/ThemeProvider/index.tsx @@ -1,33 +1,20 @@ -import React, { useEffect, useState } from 'react'; +import React, { useState } from 'react'; import { ConfigProvider, theme } from 'antd'; -import { IntlProvider } from 'react-intl'; -import { ContainerProvider } from './useThemeConfigProvider'; +import { ThemeProvider } from './useThemeConfigProvider'; import type { ThemeProviderType } from './useThemeConfigProvider'; import { storage } from '../Utils'; import { getThemeConfig } from './getThemeConfig'; import { useCustomToken } from './useCustomToken'; type IThemeProvider = { - locales: { - 'zh-CN': Record; - 'en-US': Record; - }; children: React.ReactNode; - locale?: 'zh-CN' | 'en-US'; algorithm?: 'defaultAlgorithm' | 'darkAlgorithm'; }; const Provider: React.FC = props => { - const { children, locales } = props; + const { children } = props; const [state, setState] = useState(() => { - let { algorithm, locale } = props; - if (!locale) { - locale = storage.get('locale'); - if (!locale) { - locale = 'en-US'; - storage.set('locale', locale); - } - } + let { algorithm } = props; if (!algorithm) { algorithm = storage.get('algorithm'); if (!algorithm) { @@ -48,7 +35,7 @@ const Provider: React.FC = props => { const colorConfig = useCustomToken(); const isLight = algorithm === 'defaultAlgorithm'; - const handleThemeOrLocale = (themeConfig: Partial) => { + const handleTheme = (themeConfig: Partial) => { const { components, token } = themeConfig; Object.keys(themeConfig).forEach(key => { storage.set(key, themeConfig[key]); @@ -67,21 +54,18 @@ const Provider: React.FC = props => { }); }; - const messages = locales[locale || 'en-US']; return ( - - = props => { > {children} - - + ); }; diff --git a/packages/studio-components/src/Provider/useCustomToken.tsx b/packages/studio-components/src/ThemeProvider/useCustomToken.tsx similarity index 90% rename from packages/studio-components/src/Provider/useCustomToken.tsx rename to packages/studio-components/src/ThemeProvider/useCustomToken.tsx index fe3928d7..6f9524f1 100644 --- a/packages/studio-components/src/Provider/useCustomToken.tsx +++ b/packages/studio-components/src/ThemeProvider/useCustomToken.tsx @@ -1,4 +1,4 @@ -import { useStudioProvier } from './useThemeConfigProvider'; +import { useThemeProvider } from './useThemeConfigProvider'; export interface IColorStore { sectionBackground?: string; containerBackground?: string; @@ -12,7 +12,7 @@ export interface IColorStore { } export const useCustomToken = () => { - const { algorithm } = useStudioProvier(); + const { algorithm } = useThemeProvider(); const isLight = algorithm === 'defaultAlgorithm'; /** 特殊颜色配置 */ const colorConfig = { diff --git a/packages/studio-components/src/Provider/useThemeConfigProvider.tsx b/packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx similarity index 73% rename from packages/studio-components/src/Provider/useThemeConfigProvider.tsx rename to packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx index 73eb4edd..67d4c307 100644 --- a/packages/studio-components/src/Provider/useThemeConfigProvider.tsx +++ b/packages/studio-components/src/ThemeProvider/useThemeConfigProvider.tsx @@ -1,5 +1,6 @@ import { createContext, useContext } from 'react'; import type { IColorStore } from './getThemeConfig'; + export interface ThemeProviderType extends IColorStore { algorithm?: 'defaultAlgorithm' | 'darkAlgorithm'; components?: { [key: string]: { [key: string]: string | number } }; @@ -8,24 +9,24 @@ export interface ThemeProviderType extends IColorStore { isLight?: boolean; } export interface IContainerContext extends ThemeProviderType { - handleThemeOrLocale: (value: ThemeProviderType) => void; + handleTheme: (value: ThemeProviderType) => void; } export const ContainerContext = createContext({ components: {}, token: {}, - handleThemeOrLocale: ({}) => {}, + handleTheme: ({}) => {}, locale: 'en-US', algorithm: 'defaultAlgorithm', isLight: false, }); -export const ContainerProvider = ContainerContext.Provider; +export const ThemeProvider = ContainerContext.Provider; -export const useStudioProvier = () => { +export const useThemeProvider = () => { const context = useContext(ContainerContext); if (context === undefined || Object.keys(context).length === 0) { - throw new Error(`useContext must be used within a ContainerProvider`); + throw new Error(`useContext must be used within a ThemeProvider`); } return context; }; diff --git a/packages/studio-components/src/ThemeProvider/useThemes.tsx b/packages/studio-components/src/ThemeProvider/useThemes.tsx new file mode 100644 index 00000000..f85e196e --- /dev/null +++ b/packages/studio-components/src/ThemeProvider/useThemes.tsx @@ -0,0 +1,17 @@ +import { useThemeProvider } from './useThemeConfigProvider'; + +export const useThemes = () => { + const { algorithm = 'defaultAlgorithm', handleTheme } = useThemeProvider(); + const isDark = algorithm === 'darkAlgorithm'; + const updateTheme = () => { + const updateTheValue = isDark ? 'defaultAlgorithm' : 'darkAlgorithm'; + handleTheme({ + algorithm: updateTheValue, + }); + }; + return { + algorithm, + updateTheme, + isDark + }; +}; diff --git a/packages/studio-components/src/index.tsx b/packages/studio-components/src/index.tsx index 80d858ad..da80159c 100644 --- a/packages/studio-components/src/index.tsx +++ b/packages/studio-components/src/index.tsx @@ -12,7 +12,8 @@ export { default as Section } from './Section'; export { default as MultipleInstance } from './MultipleInstance'; export { default as SplitSection } from './SplitSection'; export { default as ResultConfig } from './ResultConfig'; -export { default as StudioProvier } from './Provider'; +export { default as ThemeProvider } from './ThemeProvider'; +export { default as LocaleProvider } from './LocaleProvider'; export { default as ImportFiles } from './ImportFiles'; export { default as SideTabs } from './SideTabs'; export { default as ResizablePanels } from './ResizablePanel'; @@ -22,6 +23,10 @@ export { default as TypingText } from './TypingText'; export { default as CreatePortal } from './CreatePortal'; export { default as Layout } from './layout'; export { default as GlobalSpin } from './GlobalSpin'; + +export { default as SvgEnToZh } from './layout/SvgEnToZh'; +export { default as SvgZhToEn } from './layout/SvgZhToEn'; + /** all */ export * as Utils from './Utils'; export * as Icons from './Icons'; @@ -29,8 +34,11 @@ export * as Icons from './Icons'; /** export hooks */ export { useSection } from './Section/useSection'; export { useMultipleInstance } from './MultipleInstance/useMultipleInstance'; -export { useStudioProvier } from './Provider/useThemeConfigProvider'; -export { useCustomToken } from './Provider/useCustomToken'; +export { useThemeProvider } from './ThemeProvider/useThemeConfigProvider'; +export { useCustomToken } from './ThemeProvider/useCustomToken'; +export { useThemes } from './ThemeProvider/useThemes'; +export { useLocaleProvider } from './LocaleProvider/useLocaleProvider'; +export { useLocales } from './LocaleProvider/useLocales'; /** export typing */ export type { SegmentedTabsProps } from './SegmentedTabs'; export type { Property } from './PropertiesList/typing'; diff --git a/packages/studio-components/src/layout/SvgEnToZh.tsx b/packages/studio-components/src/layout/SvgEnToZh.tsx new file mode 100644 index 00000000..94dd51cb --- /dev/null +++ b/packages/studio-components/src/layout/SvgEnToZh.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +const SvgIcon: React.FC> = (props) => ( + + + +); + +export default SvgIcon; diff --git a/packages/studio-components/src/layout/SvgZhToEn.tsx b/packages/studio-components/src/layout/SvgZhToEn.tsx new file mode 100644 index 00000000..da12547e --- /dev/null +++ b/packages/studio-components/src/layout/SvgZhToEn.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; + +const SvgIcon: React.FC> = (props) => ( + + + +); + +export default SvgIcon; diff --git a/packages/studio-components/src/layout/index.tsx b/packages/studio-components/src/layout/index.tsx index 9f913f74..7a24b335 100644 --- a/packages/studio-components/src/layout/index.tsx +++ b/packages/studio-components/src/layout/index.tsx @@ -3,9 +3,13 @@ import { Outlet } from 'react-router-dom'; import Section from '../Section'; import Header from './header'; import Sidebar from './sidebar'; -import { Button, Space, theme } from 'antd'; -import { ReadOutlined, GithubOutlined } from '@ant-design/icons'; +import { Button, Space, theme, Tooltip } from 'antd'; +import { ReadOutlined, GithubOutlined, SunOutlined, MoonOutlined } from '@ant-design/icons'; import { getCurrentNav } from '../Utils'; +import { useThemes } from '../ThemeProvider/useThemes'; +import { useLocales } from '../LocaleProvider/useLocales'; +import SvgEnToZh from './SvgEnToZh'; +import SvgZhToEn from './SvgZhToEn'; interface ILayoutProps { sideStyle?: { @@ -31,7 +35,8 @@ const Layout: React.FunctionComponent = props => { const { width = 220, collapsedWidth = 56 } = sideStyle; const activeKey = getCurrentNav(); const { token } = theme.useToken(); - + const { algorithm, updateTheme, isDark } = useThemes(); + const { locale = 'en-US', handleLocales } = useLocales(); const leftSideCollapsed = collapsedConfig[activeKey] || false; return ( @@ -61,20 +66,46 @@ const Layout: React.FunctionComponent = props => {
- - + + + + + + + + + + + + diff --git a/packages/studio-components/src/layout/sidebar.tsx b/packages/studio-components/src/layout/sidebar.tsx index 3b11c83b..28162d0a 100644 --- a/packages/studio-components/src/layout/sidebar.tsx +++ b/packages/studio-components/src/layout/sidebar.tsx @@ -4,11 +4,9 @@ import type { MenuProps } from 'antd'; import { Menu, Flex, theme } from 'antd'; import Logo from '../Logo'; import { useSection } from '../Section/useSection'; - import Header from './header'; import CollapsedButton from './collapsed'; -import { getAllSearchParams, setSearchParams, getCurrentNav } from '../Utils'; -import { useStudioProvier } from '../Provider/useThemeConfigProvider'; +import { getCurrentNav } from '../Utils'; interface ISidebar { sideStyle: { diff --git a/packages/studio-explore/src/app.tsx b/packages/studio-explore/src/app.tsx index b53eab9a..604ee78d 100644 --- a/packages/studio-explore/src/app.tsx +++ b/packages/studio-explore/src/app.tsx @@ -1,5 +1,12 @@ import React, { useRef, useState } from 'react'; -import { Section, FullScreen, StudioProvier, SegmentedTabs, Icons } from '@graphscope/studio-components'; +import { + Section, + FullScreen, + ThemeProvider, + LocaleProvider, + SegmentedTabs, + Icons, +} from '@graphscope/studio-components'; import { Toolbar, SwitchEngine, @@ -85,7 +92,7 @@ const Explore: React.FunctionComponent = props => { return (
- = props => { }, }} > -
- // - // Next Query - // - // ), - // children: , - // }, - // ]} - // > - // } - autoResize={false} - leftSideStyle={{ - width: '400px', - boxShadow: token.boxShadow, - marginRight: '0px', - // borderRadius: token.borderRadius, - overflow: 'scroll', - }} - rightSideStyle={{ - width: '360px', - boxShadow: 'rgba(0, 0, 0, 0.19) 0px 4px 12px', - overflowY: 'scroll', - }} - defaultCollapsed={{ - leftSide: true, - rightSide: true, - }} - > - - + +
+ // + // Next Query + // + // ), + // children: , + // }, + // ]} + // > + // } + autoResize={false} + leftSideStyle={{ + width: '400px', + boxShadow: token.boxShadow, + marginRight: '0px', + // borderRadius: token.borderRadius, + overflow: 'scroll', + }} + rightSideStyle={{ + width: '360px', + boxShadow: 'rgba(0, 0, 0, 0.19) 0px 4px 12px', + overflowY: 'scroll', + }} + defaultCollapsed={{ + leftSide: true, + rightSide: true, + }} + > + + - - - - - } - direction="vertical" - items={[ - { - label: Next Query, - icon: , - children: , - key: 'NextQuery', - }, - { - label: Statistics Analysis, - icon: , - children: ( - - - - - ), - key: 'Statistics', - }, - // { - // label: Table View, - // icon: , - // children: , - // key: 'TableView', - // }, - { - label: Cluster Analysis, - icon: , - children: , - key: 'ClusterAnalysis', - }, + + + + + } + direction="vertical" + items={[ + { + label: Next Query, + icon: , + children: , + key: 'NextQuery', + }, + { + label: Statistics Analysis, + icon: , + children: ( + + + + + ), + key: 'Statistics', + }, + // { + // label: Table View, + // icon: , + // children: , + // key: 'TableView', + // }, + { + label: Cluster Analysis, + icon: , + children: , + key: 'ClusterAnalysis', + }, - { - label: Cypher Query, - icon: , - children: , - key: 'CypherQuery', - }, - { - label: Report, - icon: , - children: , - key: 'Report', - }, + { + label: Cypher Query, + icon: , + children: , + key: 'CypherQuery', + }, + { + label: Report, + icon: , + children: , + key: 'Report', + }, - { - label: Style Setting, - icon: , - children: , - key: 'StyleSetting', - }, - { - label: Layout Setting, - icon: , - children: , - key: 'LayoutSetting', - }, - ]} - tools={ - <> - - {/* + { + label: Style Setting, + icon: , + children: , + key: 'StyleSetting', + }, + { + label: Layout Setting, + icon: , + children: , + key: 'LayoutSetting', + }, + ]} + tools={ + <> + + {/* */} - - - - - - } - > + + + + + + } + > - {/* + {/* */} - - - {/* */} - - - - - - + + + {/* */} + + + + + + - - {/* */} - {/* */} - - - - - - - - -
- + + {/* */} + {/* */} + + + + + + + + +
+ +
); diff --git a/packages/studio-graph-editor/src/canvas/index.tsx b/packages/studio-graph-editor/src/canvas/index.tsx index 0b8efa29..3e42c8ad 100644 --- a/packages/studio-graph-editor/src/canvas/index.tsx +++ b/packages/studio-graph-editor/src/canvas/index.tsx @@ -1,6 +1,6 @@ import React, { CSSProperties, useEffect } from 'react'; import { ReactFlow, Controls, Background, MiniMap } from 'reactflow'; -import { EmptyCanvas, useStudioProvier, Utils,useDynamicStyle } from '@graphscope/studio-components'; +import { EmptyCanvas, useThemeProvider, Utils,useDynamicStyle } from '@graphscope/studio-components'; import { nodeTypes } from '../elements/node-types'; import { edgeTypes } from '../elements/edge-types'; import ConnectionLine from '../elements/connection-line'; @@ -25,7 +25,7 @@ const SchemaGraph: React.FunctionComponent = props => { const { store, updateStore } = useContext(); const { onEdgesChange, onNodesChange, onConnectStart, onConnectEnd } = useInteractive(); const { nodes, edges, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const isEmpty = nodes.length === 0; // const rfBG = !isLight ? '#161616' : collapsed.left && collapsed.right ? '#fff' : '#f4f5f5'; const rfBG = '#fff'; diff --git a/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx b/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx index e768a5fd..ffd1ef0b 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx +++ b/packages/studio-graph-editor/src/elements/edge-types/graph-edge.tsx @@ -13,7 +13,7 @@ import { useContext } from '../../canvas/useContext'; import LoopEdge from './loop-edge'; import Label from './label'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import { useGraphContext } from '../..'; function GraphEdge(props: EdgeProps) { @@ -25,7 +25,7 @@ function GraphEdge(props: EdgeProps) { const { store } = useContext(); const { currentId, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { onEdgeClick } = useGraphContext(); if (!sourceNode || !targetNode) { return null; diff --git a/packages/studio-graph-editor/src/elements/edge-types/label.tsx b/packages/studio-graph-editor/src/elements/edge-types/label.tsx index bf8f83f4..aca560b4 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/label.tsx +++ b/packages/studio-graph-editor/src/elements/edge-types/label.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { EdgeLabelRenderer } from 'reactflow'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; import { useContext } from '../../canvas/useContext'; import { CheckOutlined } from '@ant-design/icons'; import { theme } from 'antd'; @@ -22,7 +22,7 @@ const Label: React.FunctionComponent = props => { const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { disabled: graphDisabled = false } = useGraphContext(); const onEdgeClick = () => { updateStore(draft => { diff --git a/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts b/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts index 06f39131..bacd2e8c 100644 --- a/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts +++ b/packages/studio-graph-editor/src/elements/edge-types/useStyle.ts @@ -1,10 +1,10 @@ import { useContext } from '../../canvas/useContext'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; export const usePathStyle = (id: string) => { const { store } = useContext(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const getStyle = () => { if (!isLight) { return isSelected ? theme.primaryColor : '#d7d7d7'; diff --git a/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx b/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx index 1c001c69..604253fb 100644 --- a/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx +++ b/packages/studio-graph-editor/src/elements/node-types/graph-node.tsx @@ -2,7 +2,7 @@ import React, { memo, useState } from 'react'; import { Handle, NodeProps, Position } from 'reactflow'; import { theme } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; const { useToken } = theme; import { useContext } from '../../canvas/useContext'; @@ -27,7 +27,7 @@ const GraphNode = (props: NodeProps) => { const { label, filelocation, disabled } = data; const { store, updateStore } = useContext(); const { currentId, theme, elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { toggleRightSide, toggleLeftSide } = useSection(); const { token } = useToken(); const isSelected = id === currentId; diff --git a/packages/studio-graph/src/components/SwitchEngine/index.tsx b/packages/studio-graph/src/components/SwitchEngine/index.tsx index 5b7ccf6e..bfa3932d 100644 --- a/packages/studio-graph/src/components/SwitchEngine/index.tsx +++ b/packages/studio-graph/src/components/SwitchEngine/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button, TooltipProps, Tooltip, theme } from 'antd'; import { FormattedMessage } from 'react-intl'; import { useContext } from '../../'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons } from '@graphscope/studio-components'; const { Graph3D, Graph2D } = Icons; export interface ISwitchEngineProps { title?: TooltipProps['title']; diff --git a/packages/studio-graph/src/components/ZoomFit/index.tsx b/packages/studio-graph/src/components/ZoomFit/index.tsx index e250e97c..aabe5ced 100644 --- a/packages/studio-graph/src/components/ZoomFit/index.tsx +++ b/packages/studio-graph/src/components/ZoomFit/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Button, TooltipProps, Tooltip } from 'antd'; import { FormattedMessage } from 'react-intl'; import { ForceGraphInstance, useContext } from '../../'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons } from '@graphscope/studio-components'; export interface IZoomFitProps { title?: TooltipProps['title']; diff --git a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx index 8c90fd8f..45badbf0 100644 --- a/packages/studio-importor/src/app/button-controller/clear-canvas.tsx +++ b/packages/studio-importor/src/app/button-controller/clear-canvas.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Button, Tooltip } from 'antd'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons, useThemeProvider } from '@graphscope/studio-components'; import { resetIndex } from '../utils'; import { FormattedMessage } from 'react-intl'; interface IAddNodeProps { @@ -12,7 +12,7 @@ const ClearCanvas: React.FunctionComponent = props => { const { style } = props; const { updateStore, store } = useContext(); const { elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); /** svg pathFill */ let pathFill = () => { if (!isLight) { diff --git a/packages/studio-importor/src/app/button-controller/parse-csv.tsx b/packages/studio-importor/src/app/button-controller/parse-csv.tsx index b100e491..4e0450f9 100644 --- a/packages/studio-importor/src/app/button-controller/parse-csv.tsx +++ b/packages/studio-importor/src/app/button-controller/parse-csv.tsx @@ -3,7 +3,7 @@ import { Button, Modal, Segmented, Space, Tooltip } from 'antd'; import { BulbOutlined } from '@ant-design/icons'; import ImportFromCSV from '../import-schema/import-from-csv'; -import { SegmentedTabs, Icons, useStudioProvier } from '@graphscope/studio-components'; +import { SegmentedTabs, Icons, useThemeProvider } from '@graphscope/studio-components'; import type { SegmentedTabsProps } from '@graphscope/studio-components'; import { FormattedMessage } from 'react-intl'; @@ -20,7 +20,7 @@ const ParseCSVButton: React.FunctionComponent = props => { const { visible } = state; const { store } = useContext(); const { elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); /** svg pathFill */ let pathFill = () => { diff --git a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx b/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx index 6d798567..7d7b4080 100644 --- a/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx +++ b/packages/studio-importor/src/app/elements/edge-types/graph-edge.tsx @@ -12,7 +12,7 @@ import { import { useContext } from '@graphscope/use-zustand'; import LoopEdge from './loop-edge'; import Label from './label'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; function GraphEdge(props: EdgeProps) { const { id, source, target, style, data } = props; @@ -22,7 +22,7 @@ function GraphEdge(props: EdgeProps) { const targetNode = useStore(useCallback(store => store.nodeInternals.get(target), [target])); const { store } = useContext(); const { currentId, theme } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); if (!sourceNode || !targetNode) { return null; } diff --git a/packages/studio-importor/src/app/elements/edge-types/label.tsx b/packages/studio-importor/src/app/elements/edge-types/label.tsx index 69b07943..4b03d4fd 100644 --- a/packages/studio-importor/src/app/elements/edge-types/label.tsx +++ b/packages/studio-importor/src/app/elements/edge-types/label.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { EdgeLabelRenderer } from 'reactflow'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; import { useContext } from '@graphscope/use-zustand'; import { CheckOutlined } from '@ant-design/icons'; import { theme } from 'antd'; @@ -20,7 +20,7 @@ const Label: React.FunctionComponent = props => { const { token } = useToken(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const onEdgeClick = () => { updateStore(draft => { draft.currentId = id; diff --git a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts b/packages/studio-importor/src/app/elements/edge-types/useStyle.ts index e6f9ffc2..1ea5c818 100644 --- a/packages/studio-importor/src/app/elements/edge-types/useStyle.ts +++ b/packages/studio-importor/src/app/elements/edge-types/useStyle.ts @@ -1,10 +1,10 @@ import { useContext } from '@graphscope/use-zustand'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; export const usePathStyle = (id: string) => { const { store } = useContext(); const { currentId, theme } = store; const isSelected = id === currentId; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const getStyle = () => { if (!isLight) { return isSelected ? theme.primaryColor : '#d7d7d7'; diff --git a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx b/packages/studio-importor/src/app/elements/node-types/graph-node.tsx index fcff6b57..94299dda 100644 --- a/packages/studio-importor/src/app/elements/node-types/graph-node.tsx +++ b/packages/studio-importor/src/app/elements/node-types/graph-node.tsx @@ -2,7 +2,7 @@ import React, { memo, useState } from 'react'; import { Handle, NodeProps, Position } from 'reactflow'; import { theme } from 'antd'; import { CheckOutlined } from '@ant-design/icons'; -import { EditableText, useStudioProvier, useSection } from '@graphscope/studio-components'; +import { EditableText, useThemeProvider, useSection } from '@graphscope/studio-components'; const { useToken } = theme; import { useContext } from '@graphscope/use-zustand'; @@ -27,7 +27,7 @@ const GraphNode = (props: NodeProps) => { const { label, filelocation, disabled } = data; const { store, updateStore } = useContext(); const { currentId, theme, elementOptions } = store; - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); const { toggleRightSide, toggleLeftSide } = useSection(); const { token } = useToken(); const isSelected = id === currentId; diff --git a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx index deab5580..ad412f84 100644 --- a/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx +++ b/packages/studio-importor/src/app/graph-canvas/CustomControls.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Flex, Divider } from 'antd'; import { PlusOutlined, MinusOutlined, ExpandOutlined } from '@ant-design/icons'; import { useReactFlow, Panel } from 'reactflow'; -import { Icons, useStudioProvier } from '@graphscope/studio-components'; +import { Icons, useThemeProvider } from '@graphscope/studio-components'; interface ICustomControlsProps { isLocked: boolean; @@ -11,7 +11,7 @@ interface ICustomControlsProps { const CustomControls: React.FunctionComponent = props => { const { isLocked, handleLocked } = props; const { zoomIn, zoomOut, fitView } = useReactFlow(); - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); // svg path fill const color = !isLight ? '#FFF' : '#000'; // lock or unlock diff --git a/packages/studio-importor/src/app/graph-canvas/index.tsx b/packages/studio-importor/src/app/graph-canvas/index.tsx index 4ae6ebe7..3da41ddc 100644 --- a/packages/studio-importor/src/app/graph-canvas/index.tsx +++ b/packages/studio-importor/src/app/graph-canvas/index.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { ReactFlow, Controls, Background, MiniMap, applyNodeChanges } from 'reactflow'; -import { EmptyCanvas, useStudioProvier } from '@graphscope/studio-components'; +import { EmptyCanvas, useThemeProvider } from '@graphscope/studio-components'; import { nodeTypes } from '../elements/node-types'; import { edgeTypes } from '../elements/edge-types'; import ConnectionLine from '../elements/connection-line'; diff --git a/packages/studio-importor/src/app/index.tsx b/packages/studio-importor/src/app/index.tsx index cf9d825b..0962393b 100644 --- a/packages/studio-importor/src/app/index.tsx +++ b/packages/studio-importor/src/app/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useMemo } from 'react'; import GraphCanvas from './graph-canvas'; import PropertiesEditor from './properties-editor'; import { ReactFlowProvider } from 'reactflow'; -import { Section, StudioProvier, GlobalSpin, useDynamicStyle } from '@graphscope/studio-components'; +import { Section, ThemeProvider, LocaleProvider, GlobalSpin, useDynamicStyle } from '@graphscope/studio-components'; import cssStyles from './style'; import { transformGraphNodes, transformEdges } from './elements/index'; @@ -89,38 +89,40 @@ const ImportApp: React.FunctionComponent = props => { const IS_PURE = appMode === 'PURE'; return ( - -
- ) - } - leftSideStyle={leftSideStyle} - rightSideStyle={rightSideStyle} - defaultCollapsed={defaultCollapsed} - style={{ height: 'calc(100vh - 50px)', ...style }} - splitBorder - > - {isReady ? ( - - {!IS_PURE && } - - {children} - - ) : ( - - )} -
- + + +
+ ) + } + leftSideStyle={leftSideStyle} + rightSideStyle={rightSideStyle} + defaultCollapsed={defaultCollapsed} + style={{ height: 'calc(100vh - 50px)', ...style }} + splitBorder + > + {isReady ? ( + + {!IS_PURE && } + + {children} + + ) : ( + + )} +
+ + ); }; diff --git a/packages/studio-query/src/app/content/empty.tsx b/packages/studio-query/src/app/content/empty.tsx index b91e2648..a68b54e4 100644 --- a/packages/studio-query/src/app/content/empty.tsx +++ b/packages/studio-query/src/app/content/empty.tsx @@ -3,12 +3,12 @@ import { Typography } from 'antd'; import { FormattedMessage } from 'react-intl'; import { PlayCircleOutlined } from '@ant-design/icons'; import Image from './image'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; interface IEmptyProps {} const Empty: React.FunctionComponent = props => { - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); return (
= props => { rightSide: , }; return ( - -
- -
- + + +
+ +
+ + ); } return null; diff --git a/packages/studio-query/src/components/cypher-editor/index.tsx b/packages/studio-query/src/components/cypher-editor/index.tsx index 8c05535e..9c4e4a6c 100644 --- a/packages/studio-query/src/components/cypher-editor/index.tsx +++ b/packages/studio-query/src/components/cypher-editor/index.tsx @@ -1,5 +1,5 @@ import React, { forwardRef, useEffect } from 'react'; -import { useStudioProvier, useDynamicStyle } from '@graphscope/studio-components'; +import { useThemeProvider, useDynamicStyle } from '@graphscope/studio-components'; import { editor, languages } from 'monaco-editor'; import 'monaco-editor/esm/vs/basic-languages/cypher/cypher.contribution'; import { registerGremlinLanguage } from '../basic-languages-gremlin/index'; @@ -80,7 +80,7 @@ const Editor = forwardRef((props: IEditor, editorRef: any) => { const { value, language = 'cypher', maxRows = 10, minRows = 1, onChangeContent, clear, onInit } = props; let codeEditor: editor.IStandaloneCodeEditor; const MAGIC_NUMBER = onChangeContent ? 0 : countLines(value); - const { isLight } = useStudioProvier(); + const { isLight } = useThemeProvider(); useEffect(() => { if (editorRef && editorRef.current) { if (countLines(value) <= maxRows) { diff --git a/packages/studio-query/src/sdk/query-statement/index.tsx b/packages/studio-query/src/sdk/query-statement/index.tsx index 6f17f02a..1fc5af10 100644 --- a/packages/studio-query/src/sdk/query-statement/index.tsx +++ b/packages/studio-query/src/sdk/query-statement/index.tsx @@ -4,7 +4,7 @@ import { Statement } from '../..'; import type { IStatement } from '../..'; import { CypherDriver, GremlinDriver } from '@graphscope/studio-driver'; import ConnectEndpoint, { IConnectEndpointProps } from '../../components/connect-endpoint'; -import { StudioProvier } from '@graphscope/studio-components'; +import { ThemeProvider, LocaleProvider } from '@graphscope/studio-components'; import locales from '../../locales'; @@ -79,28 +79,32 @@ const QueryStatement = (props: IQueryStatementProps) => { if (!onQuery && (!endpoint || !language)) { return ( - - - + + + + + ); } return ( - - - + + + + + ); }; diff --git a/packages/studio-website/src/components/section/index.tsx b/packages/studio-website/src/components/section/index.tsx index ccc42b0c..55b962bd 100644 --- a/packages/studio-website/src/components/section/index.tsx +++ b/packages/studio-website/src/components/section/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { Breadcrumb, theme, Flex } from 'antd'; import type { TabsProps } from 'antd'; -import { CreatePortal, SegmentedTabs, useStudioProvier } from '@graphscope/studio-components'; +import { CreatePortal } from '@graphscope/studio-components'; interface IFormattedMessage { id: string; values?: { [key: string]: string }; diff --git a/packages/studio-website/src/index.tsx b/packages/studio-website/src/index.tsx index feadc863..a3d9ab0b 100644 --- a/packages/studio-website/src/index.tsx +++ b/packages/studio-website/src/index.tsx @@ -10,6 +10,7 @@ import { ROUTES } from './pages/index'; import { SIDE_MENU } from './layouts/const'; import { togglePlugin } from './pages/explore/slot'; + /** Portal 内置模块 */ installSlot('SIDE_MEU', 'studio', SIDE_MENU); installSlot('ROUTES', 'studio', ROUTES); diff --git a/packages/studio-website/src/locales/en-US.ts b/packages/studio-website/src/locales/en-US.ts index 4774a8a0..04296c33 100644 --- a/packages/studio-website/src/locales/en-US.ts +++ b/packages/studio-website/src/locales/en-US.ts @@ -270,7 +270,25 @@ export default { 'Data Load Configuration': 'Data Load Configuration', 'Download Load Task Config': 'Download Load Task Config', "Click to load all label's data": "Click to load all label's data", - "Please click the button below to 「Create instances」": "Please click the button below to 「Create instances」", - "No available Coordinator service": "No available Coordinator service", - "Start the local service by following the steps below and then refresh this web page": "Start the local service by following the steps below and then refresh this web page", + 'Please click the button below to 「Create instances」': 'Please click the button below to 「Create instances」', + 'No available Coordinator service': 'No available Coordinator service', + 'Start the local service by following the steps below and then refresh this web page': + 'Start the local service by following the steps below and then refresh this web page', + 'Configure GraphScope engine address and set query page sidebar style': + 'Configure GraphScope engine address and set query page sidebar style', + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.': + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.', + 'Configure theme colors and rounded corners': 'Configure theme colors and rounded corners', + 'Experimental Tools': 'Experimental Tools', + 'Coordinator URL': 'Coordinator URL', + 'Explor is a tool that allows you to explore the graph data in a more visual way.': + 'Explor is a tool that allows you to explore the graph data in a more visual way.', + Enable: 'Enable', + "Graphy": "Graphy", + "Graphy'ourData": "Graphy'ourData", + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.': + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.', + 'An intuitive tool that transforms unstructured data into graph dataset.': + 'An intuitive tool that transforms unstructured data into graph dataset.', + 'Configure and enable experimental tools for advanced graph data exploration and analysis.':'Configure and enable experimental tools for advanced graph data exploration and analysis.' }; diff --git a/packages/studio-website/src/locales/zh-CN.ts b/packages/studio-website/src/locales/zh-CN.ts index de4fd273..0975f5e9 100644 --- a/packages/studio-website/src/locales/zh-CN.ts +++ b/packages/studio-website/src/locales/zh-CN.ts @@ -136,7 +136,7 @@ export default { 'Select or customize your UI theme': '选择或自定义 UI 主题', 'Rounded corners': '圆角', 'Corner radians': '圆角弧度', - 'Appearance Setting': '系统设置', + 'Appearance Setting': '主题设置', 'Change how Untitled UI looks and feels in your browser': '您可以在这里自定义系统语言，主题样式等', 'Select navigation style': '选择导航样式', 'Navigation Style': '导航风格', @@ -265,7 +265,26 @@ export default { 'Data Load Configuration': '数据载入配置', 'Download Load Task Config': '下载数据导入任务的配置文件', "Click to load all label's data": '点击载入所有 label 的数据', - "Please click the button below to 「Create instances」": "请单击下面的按钮『创建图实例』", - "No available Coordinator service": "没有可用的协调服务", - "Start the local service by following the steps below and then refresh this web page": "按照以下步骤启动本地服务，然后刷新此网页", + 'Please click the button below to 「Create instances」': '请单击下面的按钮『创建图实例』', + 'No available Coordinator service': '没有可用的协调服务', + 'Start the local service by following the steps below and then refresh this web page': + '按照以下步骤启动本地服务，然后刷新此网页', + 'Configure GraphScope engine address and set query page sidebar style': + '配置 GraphScope 引擎地址并且设置查询页面侧边栏样式', + 'refers to the address of the GraphScope engine. If you have also started the GraphScope engine locally using Docker.': + '指定GraphScope引擎的地址。如果您还使用Docker在本地启动了GraphScope引擎', + 'Configure theme colors and rounded corners': '配置主题颜色及圆角', + 'Experimental Tools': '实验工具设置', + 'Coordinator URL': '引擎地址', + 'Explor is a tool that allows you to explore the graph data in a more visual way.': + 'Explor是一个工具，它允许您以更直观的方式探索图形数据。', + Enable: 'Enable', + "Graphy'ourData": '图数据工具', + 'Graphy is an end-to-end platform designed for extracting, visualizing, and analyzing large volumes of unstructured data. Without structured organization, valuable insights in such data often remain hidden.Graphy empowers users to extract predefined structures from unstructured data, organizing it into a graph format for enhanced visualization, analysis, and exploration.': + 'Graphy 是一个端到端的平台，旨在从大量非结构化数据中提取、可视化和分析信息。如果没有结构化的组织，这些数据中的宝贵见解往往会被隐藏起来。Graphy 赋能用户从非结构化数据中提取预定义的结构，并将其组织成图格式，以增强数据的可视化、分析和探索能力。', + 'An intuitive tool that transforms unstructured data into graph dataset.': + '一个直观的工具，能够将非结构化数据转换为图数据集，便于进一步分析和可视化。', + 'Configure and enable experimental tools for advanced graph data exploration and analysis.': + '配置和启用用于高级图形数据探索和分析的实验工具。', + Graphy: 'Graphy', }; diff --git a/packages/studio-website/src/pages/extension/index.tsx b/packages/studio-website/src/pages/extension/index.tsx index 2f6cb0fb..c95006f2 100644 --- a/packages/studio-website/src/pages/extension/index.tsx +++ b/packages/studio-website/src/pages/extension/index.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import Section from '../../components/section'; import Plugins from './plugins'; import { FormattedMessage } from 'react-intl'; -import { Flex } from 'antd'; -import { CreatePortal, SegmentedTabs, useStudioProvier } from '@graphscope/studio-components'; +import { SegmentedTabs } from '@graphscope/studio-components'; const Extension: React.FunctionComponent = () => { const items = [ diff --git a/packages/studio-website/src/pages/index.tsx b/packages/studio-website/src/pages/index.tsx index 4fab69b4..dfe9c640 100644 --- a/packages/studio-website/src/pages/index.tsx +++ b/packages/studio-website/src/pages/index.tsx @@ -1,6 +1,6 @@ import React, { Suspense } from 'react'; import { Routes, Route, Navigate, HashRouter } from 'react-router-dom'; -import { StudioProvier, GlobalSpin } from '@graphscope/studio-components'; +import { ThemeProvider, GlobalSpin, LocaleProvider } from '@graphscope/studio-components'; import Layout from '../layouts'; import StoreProvider from '@graphscope/use-zustand'; import { initialStore } from '../layouts/useContext'; @@ -52,16 +52,18 @@ const Pages: React.FunctionComponent = props => { return ( - - - - }> - {routes} - {children} - - - - + + + + + }> + {routes} + {children} + + + + + ); }; diff --git a/packages/studio-website/src/pages/setting/International.tsx b/packages/studio-website/src/pages/setting/International.tsx index 136d0bf1..5806bb06 100644 --- a/packages/studio-website/src/pages/setting/International.tsx +++ b/packages/studio-website/src/pages/setting/International.tsx @@ -1,17 +1,17 @@ import React from 'react'; import { useContext } from '../../layouts/useContext'; import LocaleSwitch from '../../components/locale-switch'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useLocaleProvider } from '@graphscope/studio-components'; import type { ILocaleSwitchProps } from '../../components/locale-switch'; import SettingParcel from '../../components/setting-parcel'; const International: React.FunctionComponent = () => { const { store, updateStore } = useContext(); const { locale = 'en-US' } = store; - const { handleThemeOrLocale } = useStudioProvier(); + const { handleLocale } = useLocaleProvider(); const handleLocales = (value: ILocaleSwitchProps['value']) => { - handleThemeOrLocale({ locale: value }); + handleLocale({ locale: value }); updateStore(draft => { draft.locale = value; }); diff --git a/packages/studio-website/src/pages/setting/index.tsx b/packages/studio-website/src/pages/setting/index.tsx index f7d07fb3..ada0f137 100644 --- a/packages/studio-website/src/pages/setting/index.tsx +++ b/packages/studio-website/src/pages/setting/index.tsx @@ -1,17 +1,17 @@ import * as React from 'react'; import { Divider, Card, Row, Col, Typography, Flex } from 'antd'; import Section from '../../components/section'; -import InteractTheme from './interact-theme'; import PrimaryColor from './primary-color'; import RoundedCorner from './rounded-corner'; -import International from './International'; - +// import InteractTheme from './interact-theme'; +// import International from './International'; import QuerySetting from './query-setting'; import { FormattedMessage } from 'react-intl'; import Coordinator from './coordinator'; import GraphyPlugin from './plugins/graphy'; import ExplorePlugin from './plugins/explore'; +const { Meta } = Card; const Setting: React.FunctionComponent = () => { return (
{ ]} desc="Change how Untitled UI looks and feels in your browser" > - - - - + + + } - > - - - - - - - - + description={ + } - > - - - + style={{ paddingBottom: 24 }} + /> + + + + + {/* */} + - - - + + } - > - - - - - - - + } + style={{ paddingBottom: 24 }} + /> + {/* */} + + + + + + + + } - > - - - - - - - + description={ + + } + style={{ paddingBottom: 24 }} + /> + + + + + +
diff --git a/packages/studio-website/src/pages/setting/interact-theme.tsx b/packages/studio-website/src/pages/setting/interact-theme.tsx index 73a904c0..3b235ec8 100644 --- a/packages/studio-website/src/pages/setting/interact-theme.tsx +++ b/packages/studio-website/src/pages/setting/interact-theme.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import SelectCards from '../../components/select-cards'; import { FormattedMessage } from 'react-intl'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../components/setting-parcel'; const engines: any = [ @@ -21,9 +21,9 @@ const engines: any = [ }, ]; const InteractTheme: React.FunctionComponent = () => { - const { algorithm = 'defaultAlgorithm', handleThemeOrLocale } = useStudioProvier(); + const { algorithm = 'defaultAlgorithm', handleTheme } = useThemeProvider(); const changeEngineType = (item: { id: string }) => { - handleThemeOrLocale({ + handleTheme({ algorithm: item.id as 'defaultAlgorithm' | 'darkAlgorithm', }); }; diff --git a/packages/studio-website/src/pages/setting/plugins/explore.tsx b/packages/studio-website/src/pages/setting/plugins/explore.tsx index ed1ca4cd..01d10868 100644 --- a/packages/studio-website/src/pages/setting/plugins/explore.tsx +++ b/packages/studio-website/src/pages/setting/plugins/explore.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { Typography, Tooltip, Switch, Input, Flex, Space, Card } from 'antd'; import { QuestionCircleOutlined } from '@ant-design/icons'; +import { FormattedMessage } from 'react-intl'; import { togglePlugin } from '../../explore/slot'; export const PLUGIN_ID = 'EXPLORE'; export const PLUGIN_LOCAL_STORAGE_KEY = `PORTAL_PLUGIN_${PLUGIN_ID}`; @@ -16,17 +17,17 @@ const ExplorePlugin = () => { - Explore - + + }> - Explor is a tool that allows you to explore the graph data in a more visual way. + - Enable: + diff --git a/packages/studio-website/src/pages/setting/plugins/graphy.tsx b/packages/studio-website/src/pages/setting/plugins/graphy.tsx index e68dfbf4..7909e8e9 100644 --- a/packages/studio-website/src/pages/setting/plugins/graphy.tsx +++ b/packages/studio-website/src/pages/setting/plugins/graphy.tsx @@ -4,6 +4,7 @@ import { QuestionCircleOutlined } from '@ant-design/icons'; import { Utils, Illustration } from '@graphscope/studio-components'; import { ROUTES, SIDE_MENU } from '@graphscope/graphy-website'; import { installSlot, unInstallSlot } from '../../../slots'; +import { FormattedMessage } from 'react-intl'; interface IGraphyPluginProps {} @@ -29,19 +30,16 @@ const GraphyPlugin: React.FunctionComponent = props => { - Graphy'ourData + } > - An intuitive tool that transforms unstructured data into graph dataset. + Enable: @@ -49,7 +47,6 @@ const GraphyPlugin: React.FunctionComponent = props => { Endpoint: - diff --git a/packages/studio-website/src/pages/setting/primary-color/index.tsx b/packages/studio-website/src/pages/setting/primary-color/index.tsx index 0bc40cb6..c2c1a258 100644 --- a/packages/studio-website/src/pages/setting/primary-color/index.tsx +++ b/packages/studio-website/src/pages/setting/primary-color/index.tsx @@ -1,18 +1,18 @@ import React from 'react'; import { ColorPicker, Flex, Col, theme } from 'antd'; import SelectColor from './select-color'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../../components/setting-parcel'; const { useToken } = theme; const PrimaryColor: React.FunctionComponent = () => { - const { handleThemeOrLocale } = useStudioProvier(); + const { handleTheme } = useThemeProvider(); const { token } = useToken(); const { colorPrimary } = token; // Function to handle primary color change const handlePrimaryColor = (color: string) => { - handleThemeOrLocale({ token: { colorPrimary: color } }); + handleTheme({ token: { colorPrimary: color } }); }; return ( diff --git a/packages/studio-website/src/pages/setting/rounded-corner.tsx b/packages/studio-website/src/pages/setting/rounded-corner.tsx index ba972d7f..ddd19cd4 100644 --- a/packages/studio-website/src/pages/setting/rounded-corner.tsx +++ b/packages/studio-website/src/pages/setting/rounded-corner.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { InputNumber, Slider, theme } from 'antd'; -import { useStudioProvier } from '@graphscope/studio-components'; +import { useThemeProvider } from '@graphscope/studio-components'; import SettingParcel from '../../components/setting-parcel'; const { useToken } = theme; const RoundedCorner: React.FunctionComponent = () => { const { token } = useToken(); const { borderRadius } = token; - const { handleThemeOrLocale } = useStudioProvier(); + const { handleTheme } = useThemeProvider(); const handleBorderRadiusChange: (newBorderRadius: number | null) => void = newBorderRadius => { //@ts-ignore - handleThemeOrLocale({ token: { borderRadius: newBorderRadius } }); + handleTheme({ token: { borderRadius: newBorderRadius } }); }; return ( diff --git a/packages/studio-website/src/pages/utils.ts b/packages/studio-website/src/pages/utils.ts index a1272e00..e4b164cf 100644 --- a/packages/studio-website/src/pages/utils.ts +++ b/packages/studio-website/src/pages/utils.ts @@ -1,6 +1,6 @@ import { notification as notifications } from 'antd'; import { createTheme } from '@uiw/codemirror-themes'; -import { useStudioProvier, useCustomToken } from '@graphscope/studio-components'; +import { useThemeProvider, useCustomToken } from '@graphscope/studio-components'; export const getSearchParams = (location: Location) => { const { hash } = location; const [path, search] = hash.split('?'); @@ -34,7 +34,7 @@ export const notification = (type: string, data: any, defaultData?: string) => { //@ts-ignore export const useEditorTheme = (isEdit: boolean): any => { - const { algorithm } = useStudioProvier(); + const { algorithm } = useThemeProvider(); const { editorBackground, editorForeground } = useCustomToken(); const background = isEdit ? '#F5F5F5' : editorBackground; //@ts-ignore