chore: rename preset to presetLayout and changedata layout without pr…

…eset
antvis · Oct 30, 2023 · 13179ae · 13179ae
1 parent 1d3f547
commit 13179ae
Show file tree

Hide file tree

Showing 23 changed files with 1,099 additions and 2,601 deletions.
diff --git a/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx b/packages/gi-assets-basic/src/components/ForceSimulation/Component.tsx
@@ -17,7 +17,7 @@ const ForceSimulation: React.FunctionComponent<IProps> = props => {
   const GIAC = deepClone(props.GIAC);
   const { graph, layoutInstance, layout, restartForceSimulation, stopForceSimulation } = useContext();
 
-  const isForce = layout.type === 'graphin-force' || layout.type === 'force2';
+  const isForce = layout.type === 'graphin-force' || layout.type === 'force';
 
   const handleClick = () => {
     if (isForce) {

diff --git a/packages/gi-assets-basic/src/layouts/Force2/index.tsx b/packages/gi-assets-basic/src/layouts/Force2/index.tsx
@@ -5,17 +5,19 @@ import registerMeta from './registerMeta';
 const info = {
   id: 'Force2',
   options: {
-    type: 'force2',
+    type: 'force',
     animate: false,
-    preset: {
+    presetLayout: {
       type: 'concentric',
       width: 800,
       height: 800,
       minNodeSpacing: 10,
       nodeSize: 10,
     },
     clusterNodeStrength: 35,
-    minMovement: 10,
+    linkDistance: 100,
+    edgeStrength: 1000,
+    minMovement: 4,
     damping: 0.8,
     maxSpeed: 1000,
     distanceThresholdMode: 'max',

diff --git a/packages/gi-assets-basic/src/layouts/Force2/registerMeta.tsx b/packages/gi-assets-basic/src/layouts/Force2/registerMeta.tsx
@@ -96,7 +96,7 @@ const registerMeta = context => {
       'x-component': 'Switch',
       default: context.data?.nodes?.length > 800 ? false : true,
     },
-    preset: {
+    presetLayout: {
       type: 'object',
       properties: {
         type: {

diff --git a/packages/gi-assets-basic/src/layouts/FundForce/index.tsx b/packages/gi-assets-basic/src/layouts/FundForce/index.tsx
@@ -7,7 +7,7 @@ const info = {
   options: {
     type: 'graphin-force',
     animation: true,
-    preset: {
+    presetLayout: {
       type: 'concentric',
     },
   },

diff --git a/packages/gi-assets-galaxybase/src/pages/GI_EXPORT_FILES.ts b/packages/gi-assets-galaxybase/src/pages/GI_EXPORT_FILES.ts
@@ -51,7 +51,7 @@ export const GI_PROJECT_CONFIG = {
   layout: {
     id: 'Force2',
     props: {
-      type: 'force2',
+      type: 'force',
       animate: true,
       preset: {
         width: 800,

diff --git a/packages/gi-public-data/app/social.json b/packages/gi-public-data/app/social.json
@@ -1201,7 +1201,7 @@
       "layout": {
         "id": "Force2",
         "props": {
-          "type": "force2",
+          "type": "force",
           "animate": true,
           "preset": {
             "type": "concentric",
@@ -1215,7 +1215,7 @@
           "damping": 0.8,
           "maxSpeed": 1000,
           "distanceThresholdMode": "max",
-          "edgeStrength": 200,
+          "edgeStrength": 1000,
           "nodeStrength": 1000,
           "defSpringLenCfg": {
             "minLimitDegree": 5,

diff --git a/packages/gi-public-data/dataset/assets.json b/packages/gi-public-data/dataset/assets.json
@@ -586,7 +586,7 @@
   },
   "Force2": {
     "id": "Force2",
-    "name": "渐进力导(force2)",
+    "name": "渐进力导(force)",
     "type": "LAYOUT",
     "docs": "",
     "icon": "icon-layout-force",

diff --git a/packages/gi-sdk-app/GI_EXPORT_CONFIG.json b/packages/gi-sdk-app/GI_EXPORT_CONFIG.json
@@ -106,7 +106,7 @@
       "layout": {
         "id": "Force2",
         "props": {
-          "type": "force2",
+          "type": "force",
           "animate": true,
           "preset": {
             "type": "concentric",
@@ -120,7 +120,7 @@
           "damping": 0.8,
           "maxSpeed": 1000,
           "distanceThresholdMode": "max",
-          "edgeStrength": 200,
+          "edgeStrength": 1000,
           "nodeStrength": 1000,
           "defSpringLenCfg": {
             "minLimitDegree": 5,

diff --git a/packages/gi-sdk/src/components/EngineServer/LoadGraph.tsx b/packages/gi-sdk/src/components/EngineServer/LoadGraph.tsx
@@ -255,7 +255,7 @@ const SchemaGraph: React.FunctionComponent<SchemaGraphProps> = props => {
                 style={{ minHeight: '300px' }}
                 data={schemaGraph}
                 fitView
-                layout={{ type: 'force2', animation: false }}
+                layout={{ type: 'force', animation: false }}
               ></Graphin>
             )}
           </Col>

diff --git a/packages/gi-sdk/src/components/FitCenterAfterMount.tsx b/packages/gi-sdk/src/components/FitCenterAfterMount.tsx
@@ -5,7 +5,7 @@ const FitCenterAfterMount = () => {
   let timer;
   React.useEffect(() => {
     const { type } = layout;
-    if (type === 'graphin-force' || type === 'force2') {
+    if (type === 'graphin-force' || type === 'force') {
       return;
     }
     if (type === 'dagre') {

diff --git a/packages/gi-sdk/src/constants/template.ts b/packages/gi-sdk/src/constants/template.ts
@@ -35,8 +35,8 @@ export const edges: GIConfig['edges'] = [
 export const layout = {
   id: 'Force2',
   props: {
-    type: 'force2',
-    preset: {
+    type: 'force',
+    presetLayout: {
       type: 'concentric',
     },
   },

diff --git a/packages/gi-site/src/pages/Analysis/getAssets/getLayoutsByAssets.ts b/packages/gi-site/src/pages/Analysis/getAssets/getLayoutsByAssets.ts
@@ -35,9 +35,9 @@ const getLayoutsByAssets = (assets: GILayoutAssets, data: GraphinData, schemaDat
         props: {
           ...info.options,
           ...defaultProps,
-          preset: {
-            ...(info.options.preset || {}),
-            ...(defaultProps.preset || {}),
+          presetLayout: {
+            ...(info.options.presetLayout || {}),
+            ...(defaultProps.presetLayout || {}),
           },
         },
         meta: {

diff --git a/packages/gi-site/src/pages/Analysis/index.tsx b/packages/gi-site/src/pages/Analysis/index.tsx
@@ -194,9 +194,9 @@ const Analysis = props => {
               props: {
                 ...defaultLayout.props,
                 ...layoutProps,
-                preset: {
-                  ...(defaultLayout.props.preset || {}),
-                  ...(layoutProps.preset || {}),
+                presetLayout: {
+                  ...(defaultLayout.props.presetLayout || {}),
+                  ...(layoutProps.presetLayout || {}),
                 },
               },
             };

diff --git a/packages/gi-site/src/pages/Analysis/recommendTools/const.ts b/packages/gi-site/src/pages/Analysis/recommendTools/const.ts
@@ -27,4 +27,4 @@ export const DEGREE_FOR_SPARSE_GRAPH = 3;
 
 export const DEFAULT_NODE_TYPE = 'circle';
 
-export const DEFAULT_LAYOUT_TYPE = 'force2';
+export const DEFAULT_LAYOUT_TYPE = 'force';
diff --git a/packages/gi-site/src/pages/Analysis/recommendTools/rules/pred-layout-cfg.ts b/packages/gi-site/src/pages/Analysis/recommendTools/rules/pred-layout-cfg.ts
@@ -25,9 +25,9 @@ export const layoutConfigPredRule: RuleModule = {
         };
         break;
       }
-      case 'force2': {
+      case 'force': {
         options = {
-          preset: {
+          presetLayout: {
             width: 800,
             height: 800,
             minNodeSpacing: 10,
@@ -41,7 +41,7 @@ export const layoutConfigPredRule: RuleModule = {
         };
         break;
       }
-      case 'force': {
+      case 'd3force': {
         options = {
           linkDistance: 100, // [1, 500]
           nodeStrength: 100, // [-100, 500]

diff --git a/packages/gi-site/src/pages/Analysis/recommendTools/rules/pred-layout-type.ts b/packages/gi-site/src/pages/Analysis/recommendTools/rules/pred-layout-type.ts
@@ -182,7 +182,7 @@ export const layoutTypePredRule: RuleModule = {
       concentric: shouldUseConcentric,
       radial: shouldUseRadial,
       grid: shouldUseGrid,
-      force2: shouldUseForce, // TODO force似乎目前不可用，先使用 graphin-force
+      force: shouldUseForce, // TODO force似乎目前不可用，先使用 graphin-force
     };
     const candidates = [];
     for (let layoutType of ALL_LAYOUT_TYPES) {

diff --git a/packages/gi-site/src/pages/Analysis/recommendTools/types.ts b/packages/gi-site/src/pages/Analysis/recommendTools/types.ts
@@ -18,8 +18,8 @@ export interface IExtendFieldInfo extends FieldInfo {
 
 export type LayoutTypes =
   | 'graphin-force'
-  | 'force2'
   | 'force'
+  | 'd3force'
   | 'grid'
   | 'dagre'
   | 'circular'

diff --git a/packages/gi-site/src/pages/Workspace/utils.tsx b/packages/gi-site/src/pages/Workspace/utils.tsx
@@ -565,8 +565,8 @@ const baseComponentsConfig = [
 const baseLayoutConfig = {
   id: 'Force2',
   props: {
-    type: 'force2',
-    preset: {
+    type: 'force',
+    presetLayout: {
       type: 'concentric',
     },
   },

diff --git a/packages/gi-site/src/services/initial.data/default.template.ts b/packages/gi-site/src/services/initial.data/default.template.ts
@@ -33,8 +33,8 @@ export const baseEdgesConfig: GIConfig['edges'] = [
 export const baseLayoutConfig = {
   id: 'Force2',
   props: {
-    type: 'force2',
-    preset: {
+    type: 'force',
+    presetLayout: {
       type: 'concentric',
     },
   },

diff --git a/packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx b/packages/graphin/demo/layout/dynamic-layout/demos/graphin-force.tsx
@@ -43,7 +43,7 @@ const App = () => {
               data={data}
               layout={{
                 type: 'force',
-                preset: {
+                presetLayout: {
                   type: 'concentric',
                 },
                 animation: false,
@@ -82,7 +82,7 @@ const App = () => {
               data={data}
               layout={{
                 type: 'force',
-                preset: {
+                presetLayout: {
                   type: 'concentric',
                 },
                 animation: true,

diff --git a/packages/graphin/src/ExtendGraph.tsx b/packages/graphin/src/ExtendGraph.tsx
@@ -47,9 +47,9 @@ export default extend(G6Graph, {
     //@ts-ignore
     dagre: Extensions.DagreLayout,
     //@ts-ignore
-    force: Extensions.ForceLayout,
+    d3force: Extensions.D3ForceLayout,
     //@ts-ignore
-    force2: Extensions.ForceLayout,
+    force: Extensions.ForceLayout,
     //@ts-ignore
     radial: Extensions.RadialLayout,
   },

diff --git a/packages/graphin/src/Graphin.tsx b/packages/graphin/src/Graphin.tsx
@@ -20,6 +20,8 @@ interface GraphinProps extends Specification<{}, {}> {
   edge?: any;
 }
 
+const LOD_NODE_NUM_THRESHOLD = 300;
+
 const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) => {
   const {
     style,
@@ -53,14 +55,27 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
   if (dataRef.current !== data) {
     console.log('%c GRAPHIN DATA CHANGE....', 'color:yellow', data);
     console.time('GRAPHIN_CHANGE_DATA_COST');
+    if (dataRef.current.nodes !== data.nodes.length) {
+      graph.updatePlugin({
+        key: 'lod-controller',
+        type: 'lod-controller',
+        disableLod: data.nodes.length < LOD_NODE_NUM_THRESHOLD,
+      });
+    }
     //@ts-ignore
-    graph && graph.changeData(data, 'replace');
+    graph && graph.changeData(data, 'mergeReplace', false);
+    if (dataRef.current.nodes.length && graph) {
+      graph.layout({
+        ...layout,
+        presetLayout: {},
+      });
+    }
     //@ts-ignore
     dataRef.current = data;
     console.timeEnd('GRAPHIN_CHANGE_DATA_COST');
   }
   if (layoutRef.current !== layout) {
-    console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:yellow');
+    console.log('%c GRAPHIN LAYOUT CHANGE....', 'color:#f0f', layout);
 
     //@ts-ignore
     graph && graph.layout(layout);
@@ -109,6 +124,12 @@ const Graphin: React.FunctionComponent<GraphinProps> = forwardRef((props, ref) =
       node,
       edge,
       transforms: ['transform-graphin-data'],
+      plugins: [
+        {
+          type: 'lod-controller',
+          disableLod: data.nodes.length < LOD_NODE_NUM_THRESHOLD,
+        },
+      ],
     });
 
     /** @ts-ignore 做兼容性处理 */
Original file line number	Diff line number	Diff line change
Expand Up		@@ -27,4 +27,4 @@ export const DEGREE_FOR_SPARSE_GRAPH = 3;

		export const DEFAULT_NODE_TYPE = 'circle';

		export const DEFAULT_LAYOUT_TYPE = 'force2';
		export const DEFAULT_LAYOUT_TYPE = 'force';