feat: update

package.json

@@ -5,7 +5,6 @@
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "postinstall": "npm run build:all:es",
     "build:all:es": "turbo run build:es",
     "build:all:umd": "turbo run build:umd --no-cache",
     "start": "cd packages/gi-site && npm run start",
@@ -73,6 +72,7 @@
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "turbo": "^1.8.3",
+    "typescript": "^5.1.6",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.0.0"
   }

packages/gi-assets-advance/src/components/AddSheetbar/Component.tsx

@@ -10,8 +10,10 @@ export interface AddSheetbarProps {
 }
 
 const AddSheetbar: React.FunctionComponent<AddSheetbarProps> = props => {
-  const { handleAddSheetbar, graph } = useContext();
-
+  const { context, graph } = useContext<{
+    handleAddSheetbar: (options: any) => void;
+  }>();
+  const { handleAddSheetbar } = context;
   const { GIAC, isRelayout } = props;
   const handleClick = React.useCallback(() => {
     const nodes = graph.findAllByState('node', 'selected').map(c => {

packages/gi-assets-advance/src/components/AjustLayout/Component.tsx

@@ -153,7 +153,8 @@ const AjustLayout: React.FC<IGremlinQueryProps> = ({ visible, onClose, serviceId
   });
 
   // const { services, dispatch, GiState, setGiState } = GraphinContext as any;
-  const { graph, services, data, updateContext } = useContext();
+  const { graph, services, updateContext, context } = useContext();
+  const { data } = context;
 
   React.useEffect(() => {
     const onNodeSelectChange = e => {

packages/gi-assets-advance/src/components/AnalysisHistory/Component.tsx

@@ -21,7 +21,8 @@ export interface AnalysisHistoryProps {
 }
 
 const AnalysisHistory: React.FC<AnalysisHistoryProps> = props => {
-  const { GISDK_ID, history, graph, services } = useContext();
+  const { GISDK_ID, context, graph, services } = useContext<{ history: any }>();
+  const { history } = context;
   const {
     height,
     placement,

packages/gi-assets-advance/src/components/AnalysisHistory/TemplateDrawer.tsx

@@ -1,16 +1,16 @@
+import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons';
 import { useContext } from '@antv/gi-sdk';
+import { useMemoizedFn } from 'ahooks';
+import { Button, Drawer, Form, Select, Tooltip } from 'antd';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
-import { CaretRightOutlined, PauseOutlined, RedoOutlined } from '@ant-design/icons';
-import { Button, Drawer, Form, Select, Tooltip } from 'antd';
-import FlowGraph from './FlowGraph';
 import ConfigurePanel from './ConfigurePanel';
+import FlowGraph from './FlowGraph';
 import { TemplateData, TemplateNode } from './type';
-import { useMemoizedFn } from 'ahooks';
 
+import $i18n from '../../i18n';
 import './index.less';
 import { updateObjWithPaths } from './util';
-import $i18n from '../../i18n';
 
 let stepTimer: any = 0;
 
@@ -32,7 +32,8 @@ type RunningStatus = 'none' | 'running' | 'success' | 'failed' | 'finish' | unde
  */
 const TemplateDrawer: React.FC<TemplateDrawerProps> = props => {
   const { open, templates, urlMap, handleClose, handleUpdateConfigure } = props;
-  const { updateContext, history } = useContext();
+  const { updateContext, context } = useContext<{ history: any }>();
+  const { history } = context;
 
   const [state, updateState] = useImmer({
     activeTemplateId: undefined as string | undefined,
@@ -217,7 +218,7 @@ const TemplateDrawer: React.FC<TemplateDrawerProps> = props => {
     });
     let foundComponent = false;
     updateContext(draft => {
-      draft.config.components.forEach(item => {
+      draft.components.forEach(item => {
         if (lastComponentId && item.id === lastComponentId) {
           item.props.controlledValues = undefined;
         }

packages/gi-assets-advance/src/components/AnalysisHistory/TemplateModal.tsx

@@ -1,16 +1,16 @@
+import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons';
 import { useContext } from '@antv/gi-sdk';
 import { createUuid } from '@antv/gi-sdk/lib/process/common';
+import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd';
+import { original } from 'immer';
 import * as React from 'react';
 import { useImmer } from 'use-immer';
-import { CheckCircleFilled, PictureOutlined } from '@ant-design/icons';
-import { Button, Empty, Form, Input, Modal, Popover, Timeline, Tooltip } from 'antd';
-import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util';
+import $i18n from '../../i18n';
 import FlowGraph from './FlowGraph';
 import ParamterizePanel from './ParamterizePanel';
-import { original } from 'immer';
-import { TemplateData, TemplateNode } from './type';
 import './index.less';
-import $i18n from '../../i18n';
+import { TemplateData, TemplateNode } from './type';
+import { ColorMap, LabelMap, circleNodeStyle, getHistoryNode } from './util';
 
 export interface TemplateModalProps {
   // 沉淀历史弹窗是否打开
@@ -32,7 +32,8 @@ export interface TemplateModalProps {
  */
 const TemplateModal: React.FC<TemplateModalProps> = props => {
   const [form] = Form.useForm();
-  const { history } = useContext();
+  const { context } = useContext<{ history: any }>();
+  const { history } = context;
   const { open, urlMap, handleSave, handleClose } = props;
 
   const [state, updateState] = useImmer({

packages/gi-assets-advance/src/components/AnalysisHistory/util.tsx

@@ -473,7 +473,7 @@ export const createFlowGraph = (container, tooltip, isConfigure) => {
     container,
     width,
     height,
-    animate: true,
+    animated: true,
     plugins: [tooltip],
     modes: {
       default: [

packages/gi-assets-advance/src/components/Assistant/Component.tsx

@@ -45,7 +45,12 @@ const Assistant: React.FC<AssistantProps> = ({
   size,
   welcome,
 }) => {
-  const { services, schemaData, transform, updateContext, largeGraphLimit } = useContext();
+  const { services, context, transform, updateContext } = useContext<{
+    largeGraphLimit: number;
+    largeGraphMode: boolean;
+    largeGraphData: any;
+  }>();
+  const { schemaData, largeGraphLimit } = context;
   const service = utils.getService(services, serviceId);
   const controller = useController();
   const assistantRef = useRef<HTMLDivElement>(null);
@@ -187,6 +192,7 @@ const Assistant: React.FC<AssistantProps> = ({
 
   useEffect(() => {
     if (schemaData) {
+      //@ts-ignore
       setMessages(prev => [...prev.splice(2, prev.length), ...getWelcomeMessage(welcome, prompt, schemaData)]);
     }
   }, [schemaData, welcome, prompt]);

packages/gi-assets-advance/src/components/CypherQuery/Component.tsx

@@ -27,7 +27,8 @@ const CypherEditorPanel: React.FC<CyperQueryProps> = ({
   controlledValues,
   onOpen,
 }) => {
-  const { updateContext, updateHistory, transform, services, largeGraphLimit } = useContext();
+  const { updateContext, updateHistory, transform, services, context } = useContext();
+  const { largeGraphLimit } = context;
   const service = utils.getService(services, serviceId);
 
   const [state, setState] = useImmer({

packages/gi-assets-advance/src/components/JSONMode/Component.tsx

@@ -10,7 +10,8 @@ export interface IProps {
 
 const JSONMode: React.FC<IProps> = props => {
   const { style = {}, theme = 'rjv-default' } = props;
-  const { data: graphData } = useContext();
+  const { context } = useContext();
+  const { data: graphData } = context;
 
   const json = useMemo(() => {
     const { nodes = [], edges = [], combos = [], ...others } = graphData;

packages/gi-assets-advance/src/components/Sheetbar/Component.tsx

@@ -12,7 +12,16 @@ export interface SheetbarProps {
 }
 const Sheetbar: React.FunctionComponent<SheetbarProps> = props => {
   const { height, placement, position = [0, 0] } = props;
-  const { GISDK_ID, config, data, source, transform, services, updateContext, graph, assets } = useContext();
+  const { GISDK_ID, transform, services, updateContext, graph, assets, context } = useContext();
+  const { nodes, edges, layout, components, pageLayout, data, source } = context;
+
+  const config = {
+    nodes,
+    edges,
+    layout,
+    components,
+    pageLayout,
+  };
   const vars = React.useRef({
     tagContext: false,
   });

packages/gi-assets-advance/src/components/SnapshotGallery/Component.tsx

@@ -27,7 +27,8 @@ const SnapshotGallery: React.FC<IProps> = props => {
 
   const positionStyles = getPositionStyles(placement, offset);
   const flexDirection = direction === 'horizontal' ? 'row' : 'column';
-  const { graph, data, GISDK_ID } = useContext();
+  const { graph, context, GISDK_ID } = useContext();
+  const { data } = context;
   const [state, updateState] = useImmer<IState>({
     history: new Map<string, IHistoryObj>(),
   });

packages/gi-assets-advance/src/components/StructAnalysis/Component.tsx

@@ -1,17 +1,18 @@
-import { useContext, utils } from '@antv/gi-sdk';
+import { useContext, useSourceDataMap, utils } from '@antv/gi-sdk';
 import Graphin, { GraphinData } from '@antv/graphin';
 import React, { memo, useEffect, useRef } from 'react';
 import { useImmer } from 'use-immer';
 import $i18n from '../../i18n';
 
 const StructAnalysis = () => {
-  const { data, sourceDataMap, config, schemaData } = useContext();
+  const { context } = useContext();
+  const { data, source, edges: edgesConfig, nodes: nodesConfig } = context;
+  const sourceDataMap = useSourceDataMap(source);
 
   const { nodesConfigMap, edgesConfigMap } = React.useMemo(() => {
     const nodesConfigMap = new Map();
     const edgesConfigMap = new Map();
 
-    const { nodes: nodesConfig, edges: edgesConfig } = config;
     nodesConfig!.forEach(c => {
       const key = JSON.stringify(c.expressions);
       nodesConfigMap.set(key, c);
@@ -25,7 +26,7 @@ const StructAnalysis = () => {
       nodesConfigMap,
       edgesConfigMap,
     };
-  }, [config]);
+  }, [edgesConfig, nodesConfig]);
 
   const [state, updateState] = useImmer<{
     graphStruct: GraphinData;

packages/gi-assets-advance/src/components/StyleSetting/StyleSettingPanel.tsx

@@ -19,17 +19,21 @@ const StyleSettingPanel: React.FunctionComponent<StyleSettingProps> = ({
   controlledValues,
   onOpen,
 }) => {
+  const { updateContext, updateHistory, context, assets } = useContext();
   const {
-    updateContext,
-    updateHistory,
     data,
-    config,
-    assets,
+    nodes,
+    edges,
     schemaData = {
       nodes: [],
       edges: [],
     },
-  } = useContext();
+  } = context;
+
+  const config = {
+    nodes,
+    edges,
+  };
 
   const elements = React.useMemo(() => {
     return utils.getElementsByAssets(assets.elements, data, schemaData);
@@ -51,8 +55,7 @@ const StyleSettingPanel: React.FunctionComponent<StyleSettingProps> = ({
     const clonedConfig = JSON.parse(JSON.stringify(elementConfig));
 
     updateContext(draft => {
-      draft.config[elementType] = clonedConfig;
-      draft.layoutCache = true;
+      draft[elementType] = clonedConfig;
     });
 
     updateHistory({

packages/gi-assets-advance/src/components/SubGraphLayout/Component.tsx

@@ -28,7 +28,8 @@ export interface ISubGraphLayoutProps {
 }
 
 const SubGraphLayout: React.FC<ISubGraphLayoutProps> = props => {
-  const { graph, data } = useContext();
+  const { graph, context } = useContext();
+  const { data } = context;
   const { isDefaultSubGraph, sortKey, gap, direction } = props;
 
   const [state, updateState] = useImmer<IState>({

packages/gi-assets-advance/src/components/TableMode/Component.tsx

@@ -39,7 +39,8 @@ const INTIAL_NUMBER = 9527;
 
 const TableMode: React.FC<IProps> = props => {
   const { isSelectedActive, enableCopy, exportable, enableTabSplitScreen, targetWindowPath, style = {} } = props;
-  const { graph, schemaData, largeGraphData, data: graphData } = useContext();
+  const { graph, context } = useContext();
+  const { schemaData, largeGraphData, data: graphData } = context;
   const isFullScreen = useFullScreen();
   const targetWindowRef = useRef<null | Window>(null);
   const modalCallbackRef = useRef(e => {});
@@ -135,12 +136,14 @@ const TableMode: React.FC<IProps> = props => {
 
   const NODES_FIELDS_COLUMNS_CONFIG = React.useMemo(() => {
     return {
+      //@ts-ignore
       columns: getColumns(schemaData, 'nodes'),
     };
   }, [schemaData]);
 
   const EDGES_FIELDS_COLUMNS_CONFIG = React.useMemo(() => {
     return {
+      //@ts-ignore
       columns: getColumns(schemaData, 'edges'),
     };
   }, [schemaData]);

packages/gi-assets-advance/src/components/TableMode/hooks/useCellSelect.ts

@@ -9,8 +9,8 @@ const useCellSelect = (
   s2Instance: { nodeTable: SpreadSheet | null; edgeTable: SpreadSheet | null },
   isFullScreen: boolean,
 ) => {
-  const context = useContext();
-  const { data: graphData, graph, largeGraphData, updateContext } = context;
+  const { context, graph, updateContext } = useContext();
+  const { data: graphData, largeGraphData } = context;
   const { nodeTable, edgeTable } = s2Instance;
   React.useEffect(() => {
     if (nodeTable) {

packages/gi-assets-advance/src/components/TableMode/hooks/useEdgeDataCfg.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 
 // 生成边表的数据
 const useEdgeDataCfg = (): S2DataConfig => {
-  const { schemaData, source: graphData, largeGraphData } = useContext();
+  const { context } = useContext();
+  const { schemaData, source: graphData, largeGraphData } = context;
   const edgeDataCfg: S2DataConfig = React.useMemo(() => {
     const edgeProperties = schemaData.edges.reduce((acc, cur) => {
       return {

packages/gi-assets-advance/src/components/TableMode/hooks/useListenEdgeSelect.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 type IEdge = any;
 type INode = any;
 const useListenEdgeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => {
-  const { data: graphData, graph, largeGraphData, updateContext } = useContext();
+  const { graph, updateContext, context } = useContext();
+  const { data: graphData, largeGraphData } = context;
   React.useEffect(() => {
     s2Instance?.on(S2Event.GLOBAL_SELECTED, () => {
       // isSelectedActiv 为 false 或全屏时，不高亮选中元素

packages/gi-assets-advance/src/components/TableMode/hooks/useListenNodeSelect.tsx

@@ -6,7 +6,8 @@ type INode = any;
 import { useContext } from '@antv/gi-sdk';
 
 const useListenNodeSelect = (isSelectedActive: boolean, s2Instance: SpreadSheet | null, isFullScreen: boolean) => {
-  const { data: graphData, graph, largeGraphData, updateContext } = useContext();
+  const { graph, updateContext, context } = useContext();
+  const { data: graphData, largeGraphData } = context;
   React.useEffect(() => {
     s2Instance?.on(S2Event.GLOBAL_SELECTED, () => {
       // isSelectedActiv 为 false 或全屏时，不高亮选中元素

packages/gi-assets-advance/src/components/TableMode/hooks/useNodeDataCfg.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 
 // 生成点表的数据
 const useNodeDataCfg = (): S2DataConfig => {
-  const { schemaData, source: graphData, largeGraphData } = useContext();
+  const { context } = useContext();
+  const { schemaData, source: graphData, largeGraphData } = context;
 
   const nodeDataCfg: S2DataConfig = React.useMemo(() => {
     const nodeProperties = schemaData.nodes.reduce((acc, cur) => {

packages/gi-assets-advance/src/components/ThemeSetting/AddOrUpdateTheme.tsx

@@ -5,9 +5,9 @@ import { Alert, Button, Form, Input, List, message } from 'antd';
 import { nanoid } from 'nanoid';
 import React from 'react';
 import { Updater } from 'use-immer';
+import $i18n from '../../i18n';
 import mockServices from './mockServices';
 import { ICanvasConfig, ITheme, IThemeSettingState } from './typing';
-import $i18n from '../../i18n';
 
 const addMsg = $i18n.get({
   id: 'advance.components.ThemeSetting.AddOrUpdateTheme.ConfigureTheCanvasBackgroundStyle',
@@ -28,7 +28,15 @@ interface Props {
 
 const AddTheme: React.FC<Props> = props => {
   const { updateState, status, currentTheme } = props;
-  const { graph, config, GISDK_ID, services } = useContext();
+  const { graph, context, GISDK_ID, services } = useContext();
+  const { nodes, edges, components, pageLayout, layout } = context;
+  const config = {
+    nodes,
+    edges,
+    components,
+    pageLayout,
+    layout,
+  };
   const imgURL = graph.toDataURL('image/jpeg', '#fff');
   const [form] = Form.useForm();