fix: graphScope add detail panel

antvis · Feb 3, 2021 · 7725c16 · 7725c16
1 parent 77060d0
commit 7725c16
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 77 deletions.
diff --git a/packages/graphin-graphscope/docs/demo/index.tsx b/packages/graphin-graphscope/docs/demo/index.tsx
@@ -39,7 +39,6 @@ export default () => {
       <GraphScopeComponent
         graphDOM={domRef.current}
         data={data}
-        width={1000}
         height={400}
         neighbors={queryNeighbors}
         hasContextMenu={true}

diff --git a/packages/graphin-graphscope/package.json b/packages/graphin-graphscope/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-graphscope",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "An Example for GraphScope",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/graphin-graphscope/src/detail.less b/packages/graphin-graphscope/src/detail.less
@@ -1,5 +1,4 @@
 .draggablePanel {
-  position: absolute !important;
   z-index: 3;
   width: 331px;
   padding: 16px 24px;

diff --git a/packages/graphin-graphscope/src/detail.tsx b/packages/graphin-graphscope/src/detail.tsx
@@ -58,10 +58,10 @@ const ElementDetailPanel: React.FC<DetailProps> = ({ close, type, itemId, data =
       <Resizable
         defaultSize={{
           width: 331,
-          height: 'auto',
+          height: 350,
         }}
         className={styles.draggablePanel}
-        style={{ top: 40, right: 0 }}
+        style={{ overflow: 'auto' }}
       >
         <div style={{ height: '100%' }}>
           <Row className={classNames(styles.header, 'handle')}>

diff --git a/packages/graphin-graphscope/src/events/click.tsx b/packages/graphin-graphscope/src/events/click.tsx
@@ -10,6 +10,7 @@ const ClickElement: React.FC<ClickElementProps> = ({ nodeClick }) => {
   useEffect(() => {
     graph.on('node:click', evt => {
       const { item } = evt;
+      console.log('click node', item);
       const model = item.getModel() as Graphin.NodeConfig;
 
       if (nodeClick) {

diff --git a/packages/graphin-graphscope/src/graph.tsx b/packages/graphin-graphscope/src/graph.tsx
@@ -56,7 +56,7 @@ export interface GraphData {
 interface GraphProps {
   graphDOM: HTMLDivElement;
   data: GraphData;
-  width: number;
+  width?: number;
   height: number;
   neighbors?: (nodeId: string, degree: number) => void;
   hasMinimap?: boolean;
@@ -379,13 +379,13 @@ const GraphScope: React.FC<GraphProps> = ({
     type: null,
   });
   const handleClickElement = (model: NodeConfig, type: string) => {
+    setDetailInfo({
+      visible: true,
+      data: model,
+      type,
+    });
     if (nodeClick) {
       nodeClick(model as NodeData, type);
-      setDetailInfo({
-        visible: true,
-        data: model,
-        type,
-      });
     }
   };
 
@@ -414,12 +414,14 @@ const GraphScope: React.FC<GraphProps> = ({
         )}
         {hasFishEye && <FishEye options={{ showLabel: false }} visible={visible} handleEscListener={handleClose} />}
         {detailInfo.visible && (
-          <ElementDetailPanel
-            type={detailInfo.type}
-            data={detailInfo.data}
-            close={() => setDetailInfo({ visible: false, data: null, type: '' })}
-            itemId={detailInfo.data.id}
-          />
+          <div style={{ position: 'absolute', top: 40, right: 0 }}>
+            <ElementDetailPanel
+              type={detailInfo.type}
+              data={detailInfo.data}
+              close={() => setDetailInfo({ visible: false, data: null, type: '' })}
+              itemId={detailInfo.data.id}
+            />
+          </div>
         )}
       </Graphin>
     </div>