Skip to content

Commit

Permalink
feat: update plugin and update theme
Browse files Browse the repository at this point in the history
  • Loading branch information
pomelo-nwu committed Dec 16, 2024
1 parent 840c632 commit 0b122fa
Show file tree
Hide file tree
Showing 16 changed files with 165 additions and 75 deletions.
8 changes: 5 additions & 3 deletions packages/studio-components/src/EmptyCanvas/image.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React from 'react';
import { theme } from 'antd';

export default ({ isDark }: { isDark: boolean }) => {
const stroke = isDark ? '#272727' : '#E6E9EE';
export default () => {
const { token } = theme.useToken();
const stroke = token.colorBgBase;
return (
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 915 866" fill="none">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M552.085 623.067C491.189 655.842 482.589 745.72 418.484 770.756C352.941 796.353 259.359 798.915 226.164 750.352C189.108 696.141 291.287 607.551 265.559 547.035C237.793 481.726 101.961 496.952 88.3682 426.238C76.2288 363.085 150.831 297.41 208.118 248.21C263.376 200.753 332.496 162.372 402.856 156.147C468.399 150.348 511.091 201.87 571.612 216.049C633.101 230.454 738.7 185.557 759.412 239.679C782.973 301.247 654.143 363.856 654.328 432.195C654.506 498.496 794.484 523.038 760.348 586.766C727.485 648.115 617.062 588.097 552.085 623.067Z"
fill={isDark ? '#272727' : '#EEF1F6'}
fill={token.colorText}
/>
<circle cx="595.876" cy="255.218" r="12.5406" transform="rotate(30 595.876 255.218)" fill={stroke} />
<circle cx="724.312" cy="289.146" r="12.5406" transform="rotate(30 724.312 289.146)" fill={stroke} />
Expand Down
17 changes: 9 additions & 8 deletions packages/studio-components/src/EmptyCanvas/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import * as React from 'react';
import { Typography } from 'antd';
import { Typography, theme, Flex } from 'antd';
import Image from './image';
import { isDarkTheme } from '../Utils';

interface IEmptyProps {
description?: string | React.ReactNode;
isLight?: boolean;
}

const Empty: React.FunctionComponent<IEmptyProps> = props => {
const { description, isLight } = props;
const isDark = isLight || isDarkTheme();
const { description } = props;

return (
<div
<Flex
vertical
align="center"
justify="center"
style={{
fontSize: '14px',
height: '100%',
Expand All @@ -22,7 +23,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
alignItems: 'center',
}}
>
<Image isDark={isDark} />
<Image />
<Typography.Text
type="secondary"
style={{
Expand All @@ -31,7 +32,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
>
{description}
</Typography.Text>
</div>
</Flex>
);
};

Expand Down
4 changes: 3 additions & 1 deletion packages/studio-components/src/Icons/FileYaml.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from 'react';
import { theme } from 'antd';
const FileYaml = ({ style = {} }: { style?: React.CSSProperties }) => {
const { fontSize = '16px', color = '#000' } = style as { fontSize: string; color: string };
const { token } = theme.useToken();
const { fontSize = 16, color = token.colorText } = style;
return (
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width={fontSize} height={fontSize}>
<path
Expand Down
10 changes: 7 additions & 3 deletions packages/studio-components/src/layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom';
import Section from '../Section';
import Header from './header';
import Sidebar from './sidebar';
import { Button, Space } from 'antd';
import { Button, Space, theme } from 'antd';
import { ReadOutlined, GithubOutlined } from '@ant-design/icons';
import { getCurrentNav } from '../Utils';

Expand All @@ -24,18 +24,22 @@ const Layout: React.FunctionComponent<ILayoutProps> = props => {
sideStyle = {},
github = 'https://github.com/GraphScope/portal',
sideMenu,
style,
style = {},
collapsedConfig = {},
onMenuClick,
} = props;
const { width = 220, collapsedWidth = 56 } = sideStyle;
const activeKey = getCurrentNav();
const { token } = theme.useToken();

const leftSideCollapsed = collapsedConfig[activeKey] || false;

return (
<Section
style={style}
style={{
background: token.colorBgContainer,
...style,
}}
leftSide={
<>
<Sidebar sideStyle={{ width, collapsedWidth }} sideMenu={sideMenu} onMenuClick={onMenuClick} />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';

import { theme } from 'antd';
const { useToken } = theme;

interface IArrowMarkerProps {
selectedColor?: string;
color?: string;
}

const ArrowMarker: React.FunctionComponent<IArrowMarkerProps> = props => {
const { selectedColor = 'red', color = '#000' } = props;
const { token } = theme.useToken();
const { selectedColor = token.colorPrimary, color = token.colorText } = props;

return (
<svg
Expand Down
26 changes: 10 additions & 16 deletions packages/studio-importor/src/app/graph-canvas/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { edgeTypes } from '../elements/edge-types';
import ConnectionLine from '../elements/connection-line';
import ArrowMarker from '../elements/arrow-marker';
import { PlayCircleOutlined } from '@ant-design/icons';
import { theme } from 'antd';

import useInteractive from './useInteractive';
import { FormattedMessage } from 'react-intl';
Expand All @@ -20,15 +21,16 @@ const fakeSnapshot = obj => {
const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
const { store, onDoubleClick, onEdgesChange, onNodesChange, onConnectStart, onConnectEnd, onReactFlowInit } =
useInteractive();
const { nodes, edges, theme, collapsed, appMode, nodePositionChange } = store;
const { nodes, edges, collapsed, appMode, nodePositionChange } = store;

const [state, updateState] = useState({
isLocked: false,
});

const { isLight } = useStudioProvier();
const { token } = theme.useToken();

const isEmpty = nodes.length === 0;
const rfBG = !isLight ? '#161616' : collapsed.left && collapsed.right ? '#fff' : '#f4f5f5';

const description = (
<FormattedMessage
id="Start sketching a model, a vertex label is a named grouping or categorization of nodes within the graph dataset"
Expand All @@ -42,7 +44,7 @@ const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {

return (
<div style={{ height: '100%', width: '100%' }}>
<div style={{ height: '100%', width: '100%', position: 'absolute' }}>
<div style={{ height: '100%', width: '100%', position: 'absolute', background: token.colorBgContainer }}>
<ReactFlow
nodes={_nodes}
edges={edges}
Expand All @@ -60,18 +62,10 @@ const GraphEditor: React.FunctionComponent<IGraphEditorProps> = props => {
minZoom={0.01}
onInit={onReactFlowInit}
>
<ArrowMarker selectedColor={theme.primaryColor} color={!isLight ? '#d7d7d7' : '#000'} />

{!IS_PURE && (
<Background
style={{
// background: '#f4f5f5',
background: rfBG,
}}
/>
)}
{isEmpty && <EmptyCanvas description={description} isLight={!isLight} />}
{!IS_PURE && <MiniMap style={{ backgroundColor: !isLight ? '#161616' : '' }} />}
<ArrowMarker />
{!IS_PURE && <Background style={{ background: token.colorBgBase }} />}
{isEmpty && <EmptyCanvas description={description} />}
{!IS_PURE && <MiniMap style={{ backgroundColor: token.colorBgBase }} />}
</ReactFlow>
</div>
</div>
Expand Down
17 changes: 2 additions & 15 deletions packages/studio-website/src/app.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import Pages from './pages';
import { installSlot, unInstallSlot } from './slots';

import { Utils } from '@graphscope/studio-components';

import { ROUTES, SIDE_MENU } from '@graphscope/graphy-website';

if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
installSlot('SIDE_MEU', 'graphy', SIDE_MENU);
installSlot('ROUTES', 'graphy', ROUTES);
} else {
unInstallSlot('SIDE_MEU', 'graphy');
unInstallSlot('ROUTES', 'graphy');
}
import PortalSite from './index';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(<Pages />);
root.render(<PortalSite />);
25 changes: 25 additions & 0 deletions packages/studio-website/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,29 @@
import GraphScopePortal from './pages';
export { installSlot, unInstallSlot, getSlots } from './slots';

import { installSlot, unInstallSlot } from './slots';

import { Utils } from '@graphscope/studio-components';

import { ROUTES as GRAPHY_ROUTES, SIDE_MENU as GRAPGY_SIDE_MENU } from '@graphscope/graphy-website';
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);

/** Explore 模块 */
togglePlugin();

/** 实验性质的模块:Graphy */
if (Utils.storage.get('PORTAL_PLUGIN_GRAPHY')) {
installSlot('SIDE_MEU', 'graphy', GRAPGY_SIDE_MENU);
installSlot('ROUTES', 'graphy', GRAPHY_ROUTES);
} else {
unInstallSlot('SIDE_MEU', 'graphy');
unInstallSlot('ROUTES', 'graphy');
}

export default GraphScopePortal;
8 changes: 0 additions & 8 deletions packages/studio-website/src/layouts/const.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import {
faDiagramProject,
faListCheck,
faPuzzlePiece,
faBell,
faCoins,
faMagnifyingGlassChart,
} from '@fortawesome/free-solid-svg-icons';

import { MenuProps } from 'antd';
Expand Down Expand Up @@ -41,12 +39,6 @@ export const TOOLS_MENU = [
value: '/querying',
icon: <FontAwesomeIcon icon={faMagnifyingGlass} />,
},
{
label: <FormattedMessage id="Explore" />,
key: '/explore',
value: '/explore',
icon: <FontAwesomeIcon icon={faMagnifyingGlassChart} />,
},
];

export const SYSTEM_MENU = [
Expand Down
2 changes: 0 additions & 2 deletions packages/studio-website/src/layouts/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,6 @@ export default function StudioLayout() {

const _SIDE = getSlots('SIDE_MEU');

const { layoutBackground } = useCustomToken();
const handleMenuClick = key => {
if (key === '/querying' || key === '/importing' || key === '/modeling') {
updateStore(draft => {
Expand All @@ -121,7 +120,6 @@ export default function StudioLayout() {
<Layout
onMenuClick={handleMenuClick}
sideMenu={[_SIDE, SETTING_MENU]}
style={{ background: layoutBackground }}
collapsedConfig={{
'/querying': true,
'/explore': true,
Expand Down
2 changes: 0 additions & 2 deletions packages/studio-website/src/pages/explore/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ export interface IExplorePageState {
isReady: boolean;
}
const ExplorePage = () => {
const { store, id } = useContext();
const { token } = theme.useToken();
return (
<Section
breadcrumb={[
Expand Down
55 changes: 55 additions & 0 deletions packages/studio-website/src/pages/explore/slot.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React, { Suspense } from 'react';
import { FormattedMessage } from 'react-intl';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMagnifyingGlassChart } from '@fortawesome/free-solid-svg-icons';
import { installSlot, unInstallSlot } from '../../slots';
import { Utils } from '@graphscope/studio-components';
import { Route } from 'react-router-dom';

/** 实验性质的模块 */
export const SIDE_MENU = [
{
label: <FormattedMessage id="Explore" />,
key: '/explore',
value: '/explore',
icon: <FontAwesomeIcon icon={faMagnifyingGlassChart} />,
},
];

export const ROUTES = [{ path: '/explore', component: React.lazy(() => import('./index')) }].map((item, index) => {
const { path, component: Component } = item;
return (
<Route
key={index}
path={path}
element={
<Suspense fallback={<></>}>
{/** @ts-ignore */}
<Component />
</Suspense>
}
/>
);
});

export const PLUGIN_ID = 'EXPLORE';
export const PLUGIN_LOCAL_STORAGE_KEY = `PORTAL_PLUGIN_${PLUGIN_ID}`;

/** 实验性质的模块:Explore */

export function togglePlugin(enable?: boolean) {
let _enable = enable;
if (enable === undefined) {
_enable = Utils.storage.get(PLUGIN_LOCAL_STORAGE_KEY) || false;
}

if (_enable) {
installSlot('SIDE_MEU', PLUGIN_ID, SIDE_MENU);
installSlot('ROUTES', PLUGIN_ID, ROUTES);
} else {
unInstallSlot('SIDE_MEU', PLUGIN_ID);
unInstallSlot('ROUTES', PLUGIN_ID);
}
Utils.storage.set(PLUGIN_LOCAL_STORAGE_KEY, _enable);
return _enable;
}
8 changes: 2 additions & 6 deletions packages/studio-website/src/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import { StudioProvier, GlobalSpin } from '@graphscope/studio-components';
import Layout from '../layouts';
import StoreProvider from '@graphscope/use-zustand';
import { initialStore } from '../layouts/useContext';
import { getSlots, installSlot } from '../slots';
import { SIDE_MENU } from '../layouts/const';
import { getSlots } from '../slots';

import locales from '../locales';

interface IPagesProps {
Expand All @@ -20,7 +20,6 @@ const routes = [
{ path: '/modeling', component: React.lazy(() => import('./modeling')) },
{ path: '/importing', component: React.lazy(() => import('./importing')) },
{ path: '/querying', component: React.lazy(() => import('./query')) },
{ path: '/explore', component: React.lazy(() => import('./explore')) },

{ path: '/setting', component: React.lazy(() => import('./setting')) },
{ path: '/job', component: React.lazy(() => import('./job')) },
Expand All @@ -46,9 +45,6 @@ export const ROUTES = routes.map(({ path, redirect, component: Component }, inde
/>
);
});
/** 注册默认的 */
installSlot('SIDE_MEU', 'studio', SIDE_MENU);
installSlot('ROUTES', 'studio', ROUTES);

const Pages: React.FunctionComponent<IPagesProps> = props => {
const { children } = props;
Expand Down
7 changes: 6 additions & 1 deletion packages/studio-website/src/pages/setting/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ 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 Setting: React.FunctionComponent = () => {
return (
Expand Down Expand Up @@ -69,7 +70,11 @@ const Setting: React.FunctionComponent = () => {
</Typography.Title>
}
>
<GraphyPlugin />
<Flex vertical gap={24}>
<ExplorePlugin />
<Divider />
<GraphyPlugin />
</Flex>
</Card>
</Flex>
</Col>
Expand Down
Loading

0 comments on commit 0b122fa

Please sign in to comment.