Merge pull request #640 from GraphScope/chore-1216

Chore: update basic interation and adjust styling
GraphScope · Dec 16, 2024 · 7318284 · 7318284
2 parents f6b529d + 0b122fa
commit 7318284
Show file tree

Hide file tree

Showing 57 changed files with 704 additions and 399 deletions.
diff --git a/examples/graphy/src/pages/dataset/cluster/graph.tsx b/examples/graphy/src/pages/dataset/cluster/graph.tsx
@@ -11,7 +11,7 @@ import {
   Canvas,
   StyleSetting,
   ZoomFit,
-  ClearStatatus,
+  ClearStatus,
   Loading,
   BasicInteraction,
   GraphProvider,
@@ -109,7 +109,7 @@ const ClusterGraph: React.FunctionComponent<QueryGraphProps> = props => {
             }}
           >
             <Canvas />
-            <ClearStatatus />
+            <ClearStatus />
 
             <BasicInteraction />
             <Loading />

diff --git a/examples/graphy/src/pages/explore/paper-reading/index.tsx b/examples/graphy/src/pages/explore/paper-reading/index.tsx
@@ -8,7 +8,7 @@ import {
   SwitchEngine,
   Canvas,
   ZoomFit,
-  ClearStatatus,
+  ClearStatus,
   RunCluster,
   BasicInteraction,
   ContextMenu,
@@ -114,7 +114,7 @@ const PaperReading: React.FunctionComponent<QueryGraphProps> = props => {
             <BasicInteraction />
             <FetchGraph />
 
-            <ClearStatatus />
+            <ClearStatus />
             <Loading />
             <ContextMenu>
               <NeighborQuery />

diff --git a/packages/studio-components/src/EmptyCanvas/image.tsx b/packages/studio-components/src/EmptyCanvas/image.tsx
@@ -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} />

diff --git a/packages/studio-components/src/EmptyCanvas/index.tsx b/packages/studio-components/src/EmptyCanvas/index.tsx
@@ -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%',
@@ -22,7 +23,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
         alignItems: 'center',
       }}
     >
-      <Image isDark={isDark} />
+      <Image />
       <Typography.Text
         type="secondary"
         style={{
@@ -31,7 +32,7 @@ const Empty: React.FunctionComponent<IEmptyProps> = props => {
       >
         {description}
       </Typography.Text>
-    </div>
+    </Flex>
   );
 };
 

diff --git a/packages/studio-components/src/Icons/FileYaml.tsx b/packages/studio-components/src/Icons/FileYaml.tsx
@@ -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

diff --git a/packages/studio-components/src/Icons/Sidebar.tsx b/packages/studio-components/src/Icons/Sidebar.tsx
@@ -1,8 +1,10 @@
 import React from 'react';
+import { theme } from 'antd';
 export default ({ style, revert }: { style?: React.CSSProperties; revert?: boolean }) => {
+  const { token } = theme.useToken();
   // 根据revert属性判断是否需要镜像
   const transformStyle = revert ? { ...style, transform: 'scaleX(-1)' } : style;
-  const { color, fontSize = '14px' } = style || { color: '#000' };
+  const { color = token.colorText, fontSize = '14px' } = style || {};
   return (
     <svg
       viewBox="0 0 1024 1024"

diff --git a/packages/studio-components/src/Provider/getThemeConfig.tsx b/packages/studio-components/src/Provider/getThemeConfig.tsx
@@ -38,7 +38,7 @@ export const getThemeConfig = (algorithm: ThemeProviderType['algorithm']) => {
     Result: {
       iconFontSize: 62,
       titleFontSize: 20,
-      colorError: '#00000073',
+      colorError: isLight ? '#00000073' : '#ddd',
     },
   };
   /** token 基础配置 */

diff --git a/packages/studio-components/src/Section/index.tsx b/packages/studio-components/src/Section/index.tsx
@@ -104,7 +104,10 @@ const Section = forwardRef((props: ISectionProps, ref: LegacyRef<HTMLDivElement>
 
   return (
     <SectionProvider value={{ collapsed, toggleRightSide, toggleLeftSide }}>
-      <div style={{ width: '100%', height: '100%', display: 'flex', ...style }} ref={ref}>
+      <div
+        style={{ width: '100%', height: '100%', display: 'flex', background: token.colorBgBase, ...style }}
+        ref={ref}
+      >
         <div style={{ height: '100%', display: 'flex', width: '100%', overflow: 'hidden' }}>
           {leftSide && <div style={leftSideStyle}>{_leftSide}</div>}
           {children && <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>{children}</div>}

diff --git a/packages/studio-components/src/SegmentedTabs/index.tsx b/packages/studio-components/src/SegmentedTabs/index.tsx
@@ -87,7 +87,7 @@ const SegmentedTabs: React.FunctionComponent<SegmentedTabsProps> = props => {
   return (
     <div
       style={{
-        background: token.colorBgContainer,
+        background: token.colorBgBase,
         ...styles.tabs,
         ...rootStyle,
       }}

diff --git a/packages/studio-components/src/layout/index.tsx b/packages/studio-components/src/layout/index.tsx
@@ -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';
 
@@ -16,27 +16,33 @@ interface ILayoutProps {
   sideMenu: any[];
   style?: React.CSSProperties;
   collapsedConfig?: Record<string, boolean>;
+  onMenuClick?: (currentNav: string) => void;
 }
 
 const Layout: React.FunctionComponent<ILayoutProps> = props => {
   const {
     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} />
+          <Sidebar sideStyle={{ width, collapsedWidth }} sideMenu={sideMenu} onMenuClick={onMenuClick} />
         </>
       }
       splitBorder

diff --git a/packages/studio-components/src/layout/sidebar.tsx b/packages/studio-components/src/layout/sidebar.tsx
@@ -16,24 +16,27 @@ interface ISidebar {
     collapsedWidth: number;
   };
   sideMenu: any[];
+  onMenuClick?: (currentNav: string) => void;
 }
 
 const Sidebar: React.FunctionComponent<ISidebar> = props => {
-  const { sideStyle, sideMenu } = props;
+  const { sideStyle, sideMenu, onMenuClick } = props;
   const { width, collapsedWidth } = sideStyle;
   const navigate = useNavigate();
   const { collapsed } = useSection();
   const [hovering, setHovering] = useState(false);
   const [SIDE_MENU, SETTING_MENU] = sideMenu;
-  const { isLight } = useStudioProvier();
 
   const activeKey = getCurrentNav();
 
   const onClick: MenuProps['onClick'] = e => {
-    const params = getAllSearchParams();
     navigate(e.key);
-    if (params && typeof params === 'object') {
-      setSearchParams(params);
+    // const params = getAllSearchParams();
+    // if (params && typeof params === 'object') {
+    //   setSearchParams(params);
+    // }
+    if (onMenuClick) {
+      onMenuClick(e.key);
     }
   };
 

diff --git a/packages/studio-explore/src/app.tsx b/packages/studio-explore/src/app.tsx
@@ -1,12 +1,5 @@
 import React, { useRef, useState } from 'react';
-import {
-  Section,
-  FullScreen,
-  useCustomToken,
-  StudioProvier,
-  SegmentedTabs,
-  Icons,
-} from '@graphscope/studio-components';
+import { Section, FullScreen, StudioProvier, SegmentedTabs, Icons } from '@graphscope/studio-components';
 import {
   Toolbar,
   SwitchEngine,
@@ -15,7 +8,7 @@ import {
   StyleSetting,
   //   Prepare,
   ZoomFit,
-  ClearStatatus,
+  ClearStatus,
   RunCluster,
   ContextMenu,
   NeighborQuery,
@@ -36,6 +29,7 @@ import {
   LayoutSwitch,
   ZoomStatus,
   registerIcons,
+  HoverMenu,
 } from '@graphscope/studio-graph';
 
 import { ToogleLeftButton, ToogleRightButton } from './components/ToggleButton';
@@ -56,10 +50,7 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
 
   const onQuery = async () => {};
 
-  const { buttonBackground } = useCustomToken();
-
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const { token } = theme.useToken();
 
   return (
     <div ref={containerRef} style={{ position: 'absolute', top: '0px', left: '0px', bottom: '0px', right: '0px' }}>
@@ -108,10 +99,9 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
             autoResize={false}
             leftSideStyle={{
               width: '380px',
-              padding: '0px 12px',
+              // padding: '0px 12px',
               boxShadow: 'rgba(0, 0, 0, 0.19) 0px 4px 12px',
               overflow: 'scroll',
-              background: token.colorBgContainer,
             }}
             // rightSideStyle={{
             //   width: '360px',
@@ -127,14 +117,20 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
             {/* <Prepare data={data} schema={schema} graphId={graphId} /> */}
             <Canvas />
             <BasicInteraction />
-            <ClearStatatus />
+            <ClearStatus />
             <FetchGraph />
             <Placeholder />
             <Loading />
             {/* <Next /> */}
             <PropertiesPanel />
 
             <ZoomStatus />
+            {/* <HoverMenu>
+              <NeighborQuery />
+              <CommonNeighbor onQuery={onQuery} />
+              <DeleteLeafNodes />
+              <DeleteNode />
+            </HoverMenu> */}
 
             <ContextMenu>
               <NeighborQuery />
@@ -149,9 +145,7 @@ const Explore: React.FunctionComponent<ExploreProps> = props => {
             >
               <Searchbar />
             </Toolbar>
-            <Toolbar
-              style={{ position: 'absolute', top: '20px', left: '20px', right: 'unset', background: buttonBackground }}
-            >
+            <Toolbar style={{ position: 'absolute', top: '20px', left: '20px', right: 'unset' }}>
               <Connection />
               <Divider style={{ margin: '0px' }} />
               <ToogleLeftButton />

diff --git a/packages/studio-explore/src/components/Searchbar/index.tsx b/packages/studio-explore/src/components/Searchbar/index.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from 'react';
 
-import { Flex, Input, List, Divider, Spin, Space, Tag, Button } from 'antd';
+import { Flex, Input, List, Divider, Spin, Space, Tag, Button, theme } from 'antd';
 import { SearchOutlined, PlayCircleOutlined } from '@ant-design/icons';
 import { Utils, useDynamicStyle } from '@graphscope/studio-components';
 import Highlighter from 'react-highlight-words';
 import { useContext } from '@graphscope/studio-graph';
 import CascaderSearch from './CascaderSearch';
 import cssStyle from './css';
-import { getIconByType } from './utils';
 
 const { debounce } = Utils;
 interface ISearchbarProps {}
@@ -38,8 +37,20 @@ export interface ISearchbarState {
 const Searchbar: React.FunctionComponent<ISearchbarProps> = props => {
   const { store, updateStore } = useContext();
   const { emitter, getService } = store;
+  const { token } = theme.useToken();
 
-  useDynamicStyle(cssStyle, 'explore-search-bar');
+  useDynamicStyle(
+    `
+    .search-list-item {
+        cursor:pointer;
+    }
+    .search-list-item:hover {
+        background-color: ${token.colorBgTextHover};
+        cursor: pointer;
+    }
+    `,
+    'explore-search-bar',
+  );
   const [state, setState] = useState<ISearchbarState>({
     isLoading: false,
     words: '',
@@ -87,7 +98,7 @@ const Searchbar: React.FunctionComponent<ISearchbarProps> = props => {
       value,
     });
     const { value: property } = breadcrumb.find(item => item.type === 'property') || { value: '' };
-    console.log('property', breadcrumb, property);
+
     setState(preState => {
       return {
         ...preState,

diff --git a/packages/studio-graph/docs/online.zh-CN.md b/packages/studio-graph/docs/online.zh-CN.md
@@ -19,7 +19,7 @@ import {
   StyleSetting,
   Prepare,
   ZoomFit,
-  ClearStatatus,
+  ClearStatus,
   RunCluster,
   ContextMenu,
   NeighborQuery,
@@ -76,7 +76,7 @@ const QueryGraph = props => {
         <Prepare data={data} schema={schema} graphId={graphId} />
         <Canvas />
         <BasicInteraction />
-        <ClearStatatus />
+        <ClearStatus />
         <PropertiesPanel />
         <Loading />
         <ContextMenu>