feat(plugins): Implement OperationManager

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "14.60.10",
+  "version": "14.60.11",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "14.60.10",
+  "version": "14.60.11",
   "license": "Apache-2.0",
   "repository": {
     "url": "https://github.com/merico-ai/table"

dashboard/src/components/panel/panel-render/viz/viz.tsx

@@ -10,16 +10,17 @@ import {
   ServiceLocatorProvider,
   useServiceLocator,
 } from '~/components/plugins/service/service-locator/use-service-locator';
-import { WidthAndHeight } from '~/components/plugins/viz-manager/components';
+import { IViewPanelInfo, WidthAndHeight } from '~/components/plugins/viz-manager/components';
 import { ErrorBoundary } from '~/utils';
 import { usePanelAddonSlot } from '~/components/plugins/panel-addon';
 import { LayoutStateContext, useRenderPanelContext } from '../../../../contexts';
-import { IViewPanelInfo, PluginContext, tokens } from '../../../plugins';
+import { tokens } from '../../../plugins/tokens';
 import { usePanelVizFeatures } from '../panel-viz-features';
 import { PluginVizViewComponent } from '../../plugin-adaptor';
 import './viz.css';
 import { VizInstance } from '~/types/plugin';
 import { EChartsOption } from 'echarts';
+import { PluginContext } from '~/components/plugins/plugin-context';
 
 function usePluginViz(data: TPanelData, measure: WidthAndHeight): ReactNode | null {
   const { vizManager } = useContext(PluginContext);

dashboard/src/components/panel/plugin-adaptor.tsx

@@ -5,15 +5,16 @@ import { isEqual } from 'lodash';
 import React, { useContext, useEffect, useState } from 'react';
 import { MigrationResultType, MigrationStatus } from '~/components/plugins/instance-migrator';
 import { useServiceLocator } from '~/components/plugins/service/service-locator/use-service-locator';
-import { LayoutStateContext } from '../..';
+import { LayoutStateContext } from '../../contexts';
 import { AnyObject, IVizConfig } from '../../types';
-import { IPanelInfo, tokens } from '../plugins';
+import { tokens } from '../plugins/tokens';
 import {
   IConfigComponentProps,
   IViewComponentProps,
   VizConfigComponent,
   VizViewComponent,
 } from '../plugins/viz-manager/components';
+import { IPanelInfo } from '../plugins/viz-manager/types';
 
 function usePluginMigration(onMigrate?: () => void) {
   const [migrated, setMigrated] = useState(false);

dashboard/src/components/panel/use-config-viz-instance-service.ts

@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
-import { IPanelInfo, tokens } from '~/components/plugins';
+import { IPanelInfo } from '~/components/plugins/viz-manager';
+import { tokens } from '~/components/plugins/tokens';
 import { InstanceMigrator } from '~/components/plugins/instance-migrator';
 import { IServiceLocator } from '~/components/plugins/service/service-locator';
 import { useRenderPanelContext } from '~/contexts';
-import { InteractionManager, OPERATIONS } from '~/interactions';
+import { InteractionManager } from '~/interactions';
 import { NullInteractionManager } from '~/interactions/null-interaction-manager';
 
 export function useConfigVizInstanceService(panel: IPanelInfo, withInteraction = true) {
@@ -19,7 +20,9 @@ export function useConfigVizInstanceService(panel: IPanelInfo, withInteraction =
         .provideFactory(tokens.instanceScope.interactionManager, (services) => {
           const instance = services.getRequired(tokens.instanceScope.vizInstance);
           if (withInteraction) {
-            return new InteractionManager(instance, component, OPERATIONS);
+            const operationManager = services.getRequired(tokens.operationManager);
+            const operations = operationManager.getAllOperations();
+            return new InteractionManager(instance, component, operations);
           } else {
             return new NullInteractionManager();
           }

dashboard/src/components/plugins/built-in-plugin.tsx

@@ -0,0 +1,82 @@
+import * as PACKAGE from '../../../package.json';
+import { OPERATIONS } from '../../interactions';
+import { IDashboardPlugin, ISingleColor } from '../../types/plugin';
+
+import { Blue, Green, Orange, Red, RedGreen, YellowBlue } from './colors';
+import { vizList } from './viz-list';
+
+const basicColors = [
+  {
+    value: '#25262B',
+    name: 'Dark',
+  },
+  {
+    value: '#868E96',
+    name: 'Gray',
+  },
+  {
+    value: '#FA5252',
+    name: 'Red',
+  },
+  {
+    value: '#E64980',
+    name: 'Pink',
+  },
+  {
+    value: '#BE4BDB',
+    name: 'Grape',
+  },
+  {
+    value: '#7950F2',
+    name: 'Violet',
+  },
+  {
+    value: '#4C6EF5',
+    name: 'Indigo',
+  },
+  {
+    value: '#228BE6',
+    name: 'Blue',
+  },
+  {
+    value: '#15AABF',
+    name: 'Cyan',
+  },
+  {
+    value: '#12B886',
+    name: 'Teal',
+  },
+  {
+    value: '#40C057',
+    name: 'Green',
+  },
+  {
+    value: '#82C91E',
+    name: 'Lime',
+  },
+  {
+    value: '#FAB005',
+    name: 'Yellow',
+  },
+  {
+    value: '#FD7E14',
+    name: 'Orange',
+  },
+].map(
+  (it): ISingleColor => ({
+    name: it.name,
+    value: it.value,
+    type: 'single',
+    category: 'basic',
+  }),
+);
+const colorInterpolations = [RedGreen, YellowBlue, Blue, Green, Red, Orange];
+export const BuiltInPlugin: () => IDashboardPlugin = () => ({
+  id: 'dashboard',
+  version: PACKAGE.version,
+  manifest: {
+    viz: vizList,
+    color: [...basicColors, ...colorInterpolations],
+    operations: OPERATIONS,
+  },
+});

dashboard/src/components/plugins/editor-components/color-interpolation-select/index.tsx

@@ -4,7 +4,7 @@ import { useBoolean } from 'ahooks';
 import { toJS } from 'mobx';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { IColorManager } from '~/components/plugins';
+import { IColorManager } from '~/components/plugins/color-manager';
 
 import { IColorInterpolationConfig, IValueStep } from '~/types/plugin';
 import { ColorMappingEditor } from '../color-mapping-editor';

dashboard/src/components/plugins/hooks/use-current-viz-instance.ts

@@ -1,6 +1,7 @@
 import { useCreation } from 'ahooks';
 import { useContext } from 'react';
-import { IPanelInfo, PluginContext } from '~/components/plugins';
+import { IPanelInfo } from '~/components/plugins/viz-manager';
+import { PluginContext } from '~/components/plugins/plugin-context';
 import { useRenderPanelContext } from '~/contexts';
 
 export const useCurrentVizInstance = () => {

dashboard/src/components/plugins/instance-migrator/index.ts

@@ -1,7 +1,7 @@
 import { IServiceLocator } from '~/components/plugins/service/service-locator';
 import { IVizOperationManager, IVizTriggerManager, VizInstance } from '~/types/plugin';
 
-import { tokens } from '../plugin-context';
+import { tokens } from '../tokens';
 import { IVizManager } from '../viz-manager';
 import { PanelModelInstance } from '~/dashboard-editor/model/panels';
 

dashboard/src/components/plugins/operation-manager/index.ts

@@ -0,0 +1 @@
+export * from './operation-manager';

dashboard/src/components/plugins/operation-manager/operation-manager.ts

@@ -0,0 +1,19 @@
+import { IDashboardOperationSchema, IPluginManager } from '~/types/plugin';
+
+export interface IOperationManager {
+  getAllOperations(): IDashboardOperationSchema[];
+}
+
+export class OperationManager implements IOperationManager {
+  constructor(private pluginManager: IPluginManager) {}
+
+  getAllOperations(): IDashboardOperationSchema[] {
+    const operations: IDashboardOperationSchema[] = [];
+    for (const plugin of this.pluginManager.installedPlugins) {
+      if (plugin.manifest.operations) {
+        operations.push(...plugin.manifest.operations);
+      }
+    }
+    return operations;
+  }
+}