Merge pull request #516 from antvis/refactor/node-selection

refactor: node selection support config label formatter; style adjust
antvis · Sep 6, 2023 · 1b1831a · 1b1831a
2 parents 6cf73bf + ab699a3
commit 1b1831a
Show file tree

Hide file tree

Showing 8 changed files with 201 additions and 74 deletions.
diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx b/packages/gi-assets-algorithm/src/NodesSimilarity/Component.tsx
@@ -1,6 +1,7 @@
 import { ReloadOutlined } from '@ant-design/icons';
 import { nodesCosineSimilarity } from '@antv/algorithm';
 import { NodeSelectionWrap } from '@antv/gi-common-components';
+import type { NodeFormatProps } from '@antv/gi-common-components';
 import { useContext } from '@antv/gi-sdk';
 import type { GraphinData } from '@antv/graphin';
 import { Button, Empty, Form, message } from 'antd';
@@ -9,7 +10,7 @@ import React, { memo, useEffect, useState } from 'react';
 import $i18n from '../i18n';
 import './index.less';
 import SimilarityResultTable from './resultTable';
-export interface CommunityDiscoveryProps {
+export interface CommunityDiscoveryProps extends NodeFormatProps {
   style?: React.CSSProperties;
   controlledValues?: {
     algorithm: string;
@@ -29,7 +30,7 @@ interface ResData {
   similarNodes: any[] | undefined;
 }
 const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
-  const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel } = props;
+  const { controlledValues, style = {}, onOpen, nodeSelectionMode, nodeLabel, labelFormat } = props;
   const { data, graph, updateHistory } = useContext();
   const [communityAlgo, setCommunityAlgo] = useState(NodesSimilarityAlgorithm.nodesConsineSimilarity);
   const [initData, setInitData] = useState<GraphinData>({ nodes: [], edges: [] });
@@ -286,6 +287,7 @@ const CommunityDiscovery: React.FC<CommunityDiscoveryProps> = props => {
                 },
               ]}
               data={data.nodes}
+              labelFormat={labelFormat}
               nodeLabel={nodeLabel}
               nodeSelectionMode={nodeSelectionMode}
             />

diff --git a/packages/gi-assets-algorithm/src/NodesSimilarity/registerMeta.ts b/packages/gi-assets-algorithm/src/NodesSimilarity/registerMeta.ts
@@ -1,6 +1,6 @@
 import { extra } from '@antv/gi-sdk';
 import info from './info';
-import { NodeSelectionMode } from '@antv/gi-common-components/lib/NodeSelectionWrap';
+import { NodeSelectionMode, getNodeFormatOption } from '@antv/gi-common-components';
 import $i18n from '../i18n';
 const { deepClone, GIAC_CONTENT_METAS } = extra;
 const metas = deepClone(GIAC_CONTENT_METAS);
@@ -29,7 +29,8 @@ const registerMeta = ({ schemaData }) => {
   }, {});
   const options = Object.keys(nodeProperties)
     .filter(key => nodeProperties[key] === 'string')
-    .map(e => ({ value: e, label: e }));
+    .map(e => ({ value: e, label: e }))
+    .sort((a, b) => a.value.localeCompare(b.value));
 
   return {
     nodeSelectionMode: {
@@ -53,7 +54,11 @@ const registerMeta = ({ schemaData }) => {
       'x-component': 'Select',
       enum: options,
       default: 'id',
+      'x-component-props': {
+        showSearch: true,
+      },
     },
+    ...getNodeFormatOption(options),
     ...metas,
   };
 };

diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx b/packages/gi-assets-basic/src/components/PathAnalysis/Component.tsx
@@ -1,6 +1,7 @@
 import { CaretRightOutlined } from '@ant-design/icons';
 import { findShortestPath } from '@antv/algorithm';
 import { NodeSelectionWrap } from '@antv/gi-common-components';
+import type { NodeFormatProps } from '@antv/gi-common-components';
 import { useContext } from '@antv/gi-sdk';
 import { Button, Col, Collapse, Empty, Form, InputNumber, Row, Space, Switch, Timeline, message } from 'antd';
 import { enableMapSet } from 'immer';
@@ -15,7 +16,7 @@ import { getPathByWeight } from './utils';
 
 const { Panel } = Collapse;
 
-export interface IPathAnalysisProps {
+export interface IPathAnalysisProps extends NodeFormatProps {
   hasDirection: boolean;
   hasMaxDeep: boolean;
   nodeSelectionMode: string[];
@@ -31,7 +32,15 @@ export interface IPathAnalysisProps {
 enableMapSet();
 
 const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
-  const { nodeSelectionMode, pathNodeLabel, controlledValues, onOpen = () => {}, hasMaxDeep, hasDirection } = props;
+  const {
+    nodeSelectionMode,
+    pathNodeLabel,
+    controlledValues,
+    onOpen = () => {},
+    hasMaxDeep,
+    hasDirection,
+    labelFormat,
+  } = props;
   const { data: graphData, graph, sourceDataMap, updateHistory } = useContext();
 
   const [state, updateState] = useImmer<IState>({
@@ -336,6 +345,7 @@ const PathAnalysis: React.FC<IPathAnalysisProps> = props => {
             form={form}
             items={items}
             data={graphData.nodes}
+            labelFormat={labelFormat}
             nodeLabel={pathNodeLabel}
             nodeSelectionMode={nodeSelectionMode}
           />

diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/index.less b/packages/gi-assets-basic/src/components/PathAnalysis/index.less
@@ -3,7 +3,6 @@
   .gi-path-analysis-container {
     padding: 12px 12px 8px 12px;
     border-radius: 4px;
-    background: #fff;
     margin: 8px 0px;
     position: relative;
   }
@@ -29,8 +28,12 @@
 .gi-collapse-container {
   margin: 1px !important;
   padding: 4px 4px !important;
-  background: var(--background-color);
+  background: var(--background-color, #fff);
   border-radius: 4px !important;
-  box-shadow: -1px -1px 4px 0 hsla(0, 0%, 87.5%, 0.5), -2px 2px 4px 0 hsla(0, 0%, 95.7%, 0.5),
-    2px 3px 8px 2px hsla(0, 0%, 59.2%, 0.05);
+  box-shadow: var(
+    --box-shadow-base,
+    0 3px 6px -4px rgba(0, 0, 0, 0.48),
+    0 6px 16px 0 rgba(0, 0, 0, 0.32),
+    0 9px 28px 8px rgba(0, 0, 0, 0.2)
+  ) !important;
 }
diff --git a/packages/gi-assets-basic/src/components/PathAnalysis/registerMeta.ts b/packages/gi-assets-basic/src/components/PathAnalysis/registerMeta.ts
@@ -1,4 +1,4 @@
-import { NodeSelectionMode } from '@antv/gi-common-components/lib/NodeSelectionWrap';
+import { NodeSelectionMode, getNodeFormatOption } from '@antv/gi-common-components';
 import { extra } from '@antv/gi-sdk';
 import $i18n from '../../i18n';
 import info from './info';
@@ -30,7 +30,8 @@ const registerMeta = ({ schemaData }) => {
   }, {});
   const options = Object.keys(nodeProperties)
     .filter(key => nodeProperties[key] === 'string')
-    .map(e => ({ value: e, label: e }));
+    .map(e => ({ value: e, label: e }))
+    .sort((a, b) => a.value.localeCompare(b.value));
 
   return {
     nodeSelectionMode: {
@@ -51,7 +52,11 @@ const registerMeta = ({ schemaData }) => {
       'x-component': 'Select',
       enum: options,
       default: 'id',
+      'x-component-props': {
+        showSearch: true,
+      },
     },
+    ...getNodeFormatOption(options),
     hasDirection: {
       title: $i18n.get({ id: 'basic.components.PathAnalysis.registerMeta.IsThereAnyDirection', dm: '是否有向' }),
       type: 'boolean',

diff --git a/packages/gi-common-components/src/NodeSelectionWrap/index.less b/packages/gi-common-components/src/NodeSelectionWrap/index.less
@@ -1,15 +1,20 @@
-.nodeSelectionFromItem {
+.nodeSelectionForm {
+  position: relative;
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 10px;
+  flex-direction: column;
+  gap: 24px;
+  margin-bottom: 24px;
 
-  .main {
-    flex: 1;
-  }
-  .operation {
-    width: 20px;
+  .nodeSelectionFormItem {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 10px;
+
+    .main {
+      width: calc(100% - 25px);
+    }
   }
 }