@tmagic/editor 1.5.7 → 1.5.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.7",
+  "version": "1.5.8",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^6.0.0",
     "sortablejs": "^1.15.2",
-    "@tmagic/design": "1.5.7",
-    "@tmagic/form": "1.5.7",
-    "@tmagic/stage": "1.5.7",
-    "@tmagic/utils": "1.5.7",
-    "@tmagic/table": "1.5.7"
+    "@tmagic/design": "1.5.8",
+    "@tmagic/form": "1.5.8",
+    "@tmagic/table": "1.5.8",
+    "@tmagic/utils": "1.5.8",
+    "@tmagic/stage": "1.5.8"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -76,7 +76,7 @@
     "monaco-editor": "^0.48.0",
     "typescript": "*",
     "vue": ">=3.5.0",
-    "@tmagic/core": "1.5.7"
+    "@tmagic/core": "1.5.8"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CodeBlockEditor.vue

@@ -74,9 +74,9 @@ import {
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import { useServices } from '@editor/hooks/use-services';
 import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 
 defineOptions({
@@ -97,7 +97,7 @@ const emit = defineEmits<{
   submit: [values: CodeBlockContent, eventData: ContainerChangeEventData];
 }>();
 
-const services = inject<Services>('services');
+const { codeBlockService, uiService } = useServices();
 
 const { height: codeBlockEditorHeight } = useEditorContentHeight();
 
@@ -192,7 +192,7 @@ const functionConfig = computed<FormConfig>(() => [
         label: '描述',
         name: 'extra',
       },
-      services?.codeBlockService.getParamsColConfig() || defaultParamColConfig,
+      codeBlockService.getParamsColConfig() || defaultParamColConfig,
     ],
   },
   {
@@ -259,7 +259,7 @@ const closedHandler = () => {
 };
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
 defineExpose({
   async show() {

package/src/components/FloatingBox.vue

@@ -17,14 +17,14 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, provide, ref, useTemplateRef, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useZIndex } from '@tmagic/design';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 interface Position {
   left: number;
@@ -66,8 +66,8 @@ const bodyHeight = computed(() => {
   return 'auto';
 });
 
-const services = inject<Services>('services');
-const frameworkWidth = computed(() => services?.uiService.get('frameworkRect').width || 0);
+const { uiService } = useServices();
+const frameworkWidth = computed(() => uiService.get('frameworkRect').width || 0);
 const style = computed(() => {
   let { left } = props.position;
   if (width.value) {

package/src/components/ToolButton.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 import { ArrowDown } from '@element-plus/icons-vue';
 
 import {
@@ -62,8 +62,10 @@ import {
   TMagicTooltip,
 } from '@tmagic/design';
 
+import { useServices } from '@editor/hooks/use-services';
+
 import MIcon from '../components/Icon.vue';
-import type { MenuButton, MenuComponent, Services } from '../type';
+import type { MenuButton, MenuComponent } from '../type';
 
 defineOptions({
   name: 'MEditorToolButton',
@@ -82,7 +84,7 @@ const props = withDefaults(
     eventType: 'click',
   },
 );
-const services = inject<Services>('services');
+const services = useServices();
 
 const disabled = computed(() => {
   if (typeof props.data === 'string') return false;
@@ -104,7 +106,7 @@ const display = computed(() => {
 
 const buttonHandler = (item: MenuButton | MenuComponent, event: MouseEvent) => {
   if (disabled.value) return;
-  if (typeof (item as MenuButton).handler === 'function' && services) {
+  if (typeof (item as MenuButton).handler === 'function') {
     (item as MenuButton).handler?.(services, event);
   }
 };

package/src/components/TreeNode.vue

@@ -15,7 +15,7 @@
       class="tree-node"
       :class="{ selected, expanded }"
       :style="`padding-left: ${indent}px`"
-      @contextmenu="nodeContentmenuHandler"
+      @contextmenu="nodeContextmenuHandler"
       @mouseenter="mouseenterHandler"
     >
       <MIcon
@@ -139,7 +139,7 @@ const handleDragEnd = (event: DragEvent) => {
   treeEmit?.('node-dragend', event, props.data);
 };
 
-const nodeContentmenuHandler = (event: MouseEvent) => {
+const nodeContextmenuHandler = (event: MouseEvent) => {
   treeEmit?.('node-contextmenu', event, props.data);
 };
 

package/src/fields/CodeSelect.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { HookCodeType, HookType } from '@tmagic/core';
@@ -24,7 +24,7 @@ import { TMagicCard } from '@tmagic/design';
 import type { ContainerChangeEventData, FieldProps, FormItem, GroupListConfig } from '@tmagic/form';
 import { MContainer } from '@tmagic/form';
 
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 defineOptions({
   name: 'MFieldsCodeSelect',
@@ -34,7 +34,7 @@ const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
 }>();
 
-const services = inject<Services>('services');
+const { dataSourceService, codeBlockService } = useServices();
 
 const props = withDefaults(
   defineProps<
@@ -59,7 +59,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           return index;
         }
 
-        const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+        const ds = dataSourceService.getDataSourceById(model.codeId[0]);
         return `${ds?.title} / ${model.codeId[1]}`;
       }
 
@@ -98,7 +98,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           span: 18,
           labelWidth: 0,
           display: (mForm, { model }) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !services?.codeBlockService.getEditStatus(),
+          notEditable: () => !codeBlockService.getEditStatus(),
         },
         {
           type: 'data-source-method-select',
@@ -106,7 +106,7 @@ const codeConfig = computed<GroupListConfig>(() => ({
           span: 18,
           labelWidth: 0,
           display: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
-          notEditable: () => !services?.dataSourceService.get('editable'),
+          notEditable: () => !dataSourceService.get('editable'),
         },
       ],
     },

package/src/fields/CodeSelectCol.vue

@@ -52,7 +52,8 @@ import {
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, CodeSelectColConfig, EventBus, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CodeParamStatement, CodeSelectColConfig, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
@@ -60,7 +61,7 @@ defineOptions({
 });
 
 const mForm = inject<FormState | undefined>('mForm');
-const services = inject<Services>('services');
+const { codeBlockService, uiService } = useServices();
 const eventBus = inject<EventBus>('eventBus');
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
@@ -73,7 +74,7 @@ const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
 const hasCodeBlockSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
+  (uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
 );
 
 /**
@@ -94,7 +95,7 @@ const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
   }));
 };
 
-const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+const codeDsl = computed(() => codeBlockService.getCodeDsl());
 const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
 
 watch(

package/src/fields/CondOpSelect.vue

@@ -27,12 +27,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed } from 'vue';
 
 import { getDesignConfig, TMagicSelect } from '@tmagic/design';
 import type { FieldProps } from '@tmagic/form';
 
-import type { CondOpSelectConfig, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CondOpSelectConfig } from '@editor/type';
 import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
 
 defineOptions({
@@ -43,7 +44,7 @@ const emit = defineEmits<{
   change: [value: string];
 }>();
 
-const { dataSourceService } = inject<Services>('services') || {};
+const { dataSourceService } = useServices();
 
 const props = defineProps<FieldProps<CondOpSelectConfig>>();
 
@@ -52,7 +53,7 @@ const optionComponent = getDesignConfig('components')?.option;
 const options = computed(() => {
   const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
 
-  const ds = dataSourceService?.getDataSourceById(id);
+  const ds = dataSourceService.getDataSourceById(id);
 
   let fields = ds?.fields || [];
   let type = '';

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -69,13 +69,14 @@
 import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 
-import { DataSourceFieldType } from '@tmagic/core';
+import type { DataSourceFieldType } from '@tmagic/core';
 import { getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect, TMagicTooltip } from '@tmagic/design';
 import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import { type EventBus, type Services, SideItemKey } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import { type EventBus, SideItemKey } from '@editor/type';
 import { getCascaderOptionsFromFields, removeDataSourceFieldPrefix } from '@editor/utils';
 
 const props = defineProps<{
@@ -101,11 +102,11 @@ const modelValue = defineModel<string[] | any>('modelValue', { default: [] });
 
 const optionComponent = getDesignConfig('components')?.option;
 
-const services = inject<Services>('services');
+const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 const eventBus = inject<EventBus>('eventBus');
 
-const dataSources = computed(() => services?.dataSourceService.get('dataSources') || []);
+const dataSources = computed(() => dataSourceService.get('dataSources') || []);
 
 const valueIsKey = computed(() => props.value === 'key');
 const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
@@ -172,7 +173,7 @@ const onChangeHandler = (v: string[] = []) => {
 };
 
 const hasDataSourceSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+  uiService.get('sideBarItems').find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );
 
 const editHandler = (id: string) => {

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -48,7 +48,8 @@ import type { ContainerChangeEventData, FieldProps, FormState } from '@tmagic/fo
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { DataSourceFieldSelectConfig } from '@editor/type';
 import { removeDataSourceFieldPrefix } from '@editor/utils';
 
 import FieldSelect from './FieldSelect.vue';
@@ -83,10 +84,10 @@ watch(
   },
 );
 
-const services = inject<Services>('services');
+const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
-const dataSources = computed(() => services?.dataSourceService.get('dataSources') || []);
+const dataSources = computed(() => dataSourceService.get('dataSources') || []);
 
 const type = computed((): string => {
   let type = props.config.fieldConfig?.type;

package/src/fields/DataSourceFields.vue

@@ -64,7 +64,7 @@ import { getDefaultValueFromFields } from '@tmagic/utils';
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 
 defineOptions({
   name: 'MFieldsDataSourceFields',
@@ -85,7 +85,7 @@ const emit = defineEmits<{
   change: [v: any, eventData?: ContainerChangeEventData];
 }>();
 
-const services = inject<Services>('services');
+const { uiService } = useServices();
 
 const fieldValues = ref<Record<string, any>>({});
 const fieldTitle = ref('');
@@ -344,5 +344,5 @@ const addFromJsonDialogVisible = defineModel<boolean>('visible1', { default: fal
 const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 </script>

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, nextTick, ref, useTemplateRef, watch } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 import { Coin } from '@element-plus/icons-vue';
 
 import type { DataSchema, DataSourceSchema } from '@tmagic/core';
@@ -57,7 +57,7 @@ import type { FieldProps, FormItem } from '@tmagic/form';
 import { getKeysArray, isNumber } from '@tmagic/utils';
 
 import Icon from '@editor/components/Icon.vue';
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
@@ -81,7 +81,7 @@ const emit = defineEmits<{
   change: [value: string];
 }>();
 
-const { dataSourceService } = inject<Services>('services') || {};
+const { dataSourceService } = useServices();
 
 const autocompleteRef = useTemplateRef<InstanceType<typeof TMagicAutocomplete>>('autocomplete');
 const isFocused = ref(false);
@@ -89,7 +89,7 @@ const state = ref('');
 const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
 
 const input = computed<HTMLInputElement>(() => autocompleteRef.value?.inputRef?.input);
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+const dataSources = computed(() => dataSourceService.get('dataSources'));
 
 const setDisplayState = () => {
   displayState.value = getDisplayField(dataSources.value, state.value);

package/src/fields/DataSourceMethodSelect.vue

@@ -41,37 +41,36 @@ import { createValues, type FieldProps, filterFunction, type FormState, MContain
 
 import CodeParams from '@editor/components/CodeParams.vue';
 import MIcon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
   name: 'MFieldsDataSourceMethodSelect',
 });
 
+const { dataSourceService, uiService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
-const services = inject<Services>('services');
 const eventBus = inject<EventBus>('eventBus');
 
 const emit = defineEmits(['change']);
 
-const dataSourceService = services?.dataSourceService;
-
 const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
   disabled: false,
 });
 
 const hasDataSourceSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+  (uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
-const dataSources = computed(() => dataSourceService?.get('dataSources'));
+const dataSources = computed(() => dataSourceService.get('dataSources'));
 
 const isCustomMethod = computed(() => {
   const [id, name] = props.model[props.name];
 
-  const dataSource = dataSourceService?.getDataSourceById(id);
+  const dataSource = dataSourceService.getDataSourceById(id);
 
   return Boolean(dataSource?.methods.find((method) => method.name === name));
 });
@@ -107,7 +106,7 @@ const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) =>
 const methodsOptions = computed(
   () =>
     dataSources.value
-      ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)
+      ?.filter((ds) => ds.methods?.length || dataSourceService.getFormMethod(ds.type).length)
       ?.map((ds) => ({
         label: ds.title || ds.id,
         value: ds.id,
@@ -144,7 +143,7 @@ const onChangeHandler = (value: any) => {
 const editCodeHandler = () => {
   const [id] = props.model[props.name];
 
-  const dataSource = dataSourceService?.getDataSourceById(id);
+  const dataSource = dataSourceService.getDataSourceById(id);
 
   if (!dataSource) return;
 

package/src/fields/DataSourceMocks.vue

@@ -38,8 +38,8 @@ import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
+import { useServices } from '@editor/hooks/use-services';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import { Services } from '@editor/type';
 
 import { useEditorContentHeight } from '..';
 
@@ -60,7 +60,7 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const services = inject<Services>('services');
+const { uiService } = useServices();
 const width = defineModel<number>('width', { default: 670 });
 
 const drawerTitle = ref('');
@@ -250,5 +250,5 @@ const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: bool
 const addDialogVisible = defineModel<boolean>('visible', { default: false });
 const { height: editorHeight } = useEditorContentHeight();
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 </script>

package/src/fields/DataSourceSelect.vue

@@ -27,7 +27,8 @@ import { TMagicButton, TMagicTooltip } from '@tmagic/design';
 import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
-import type { DataSourceSelect, EventBus, Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
+import type { DataSourceSelect, EventBus } from '@editor/type';
 import { SideItemKey } from '@editor/type';
 
 defineOptions({
@@ -41,15 +42,15 @@ const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
 });
 
 const mForm = inject<FormState | undefined>('mForm');
-const { dataSourceService, uiService } = inject<Services>('services') || {};
+const { dataSourceService, uiService } = useServices();
 const eventBus = inject<EventBus>('eventBus');
 
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
+const dataSources = computed(() => dataSourceService.get('dataSources'));
 
 const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
 
 const hasDataSourceSidePanel = computed(() =>
-  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+  uiService.get('sideBarItems').find((item) => item.$key === SideItemKey.DATA_SOURCE),
 );
 
 const selectConfig = computed<SelectConfig>(() => {
@@ -87,7 +88,7 @@ const editHandler = () => {
 
   const id = typeof value === 'string' ? value : value.dataSourceId;
 
-  const dataSource = dataSourceService?.getDataSourceById(id);
+  const dataSource = dataSourceService.getDataSourceById(id);
 
   if (!dataSource) return;
 

package/src/fields/DisplayConds.vue

@@ -26,7 +26,7 @@ import {
   MGroupList,
 } from '@tmagic/form';
 
-import type { Services } from '@editor/type';
+import { useServices } from '@editor/hooks/use-services';
 import { getCascaderOptionsFromFields } from '@editor/utils';
 
 defineOptions({
@@ -49,7 +49,7 @@ const props = withDefaults(
   },
 );
 
-const { dataSourceService } = inject<Services>('services') || {};
+const { dataSourceService } = useServices();
 const mForm = inject<FormState | undefined>('mForm');
 
 const parentFields = computed(() => filterFunction<string[]>(mForm, props.config.parentFields, props) || []);
@@ -71,7 +71,7 @@ const config = computed<GroupListConfig>(() => ({
               type: 'cascader',
               options: () => {
                 const [dsId, ...keys] = parentFields.value;
-                const ds = dataSourceService?.getDataSourceById(dsId);
+                const ds = dataSourceService.getDataSourceById(dsId);
                 if (!ds) {
                   return [];
                 }
@@ -113,7 +113,7 @@ const config = computed<GroupListConfig>(() => ({
               type: (mForm, { model }) => {
                 const [id, ...fieldNames] = [...parentFields.value, ...model.field];
 
-                const ds = dataSourceService?.getDataSourceById(id);
+                const ds = dataSourceService.getDataSourceById(id);
 
                 let fields = ds?.fields || [];
                 let type = '';