fix(plugin-chart-echarts): fix GraphViz crash with DnD control (#991)

apache · Nov 26, 2021 · 3fd7593 · 3fd7593
1 parent 2ebd31b
commit 3fd7593
Showing 1 changed file with 23 additions and 33 deletions.
diff --git a/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx b/...temporary_superset_ui/superset-ui/plugins/plugin-chart-echarts/src/Graph/controlPanel.tsx
@@ -18,8 +18,8 @@
  */
 import React from 'react';
 import { t } from '@superset-ui/core';
-import { sections, sharedControls, ColumnOption, ColumnMeta } from '@superset-ui/chart-controls';
-import { DEFAULT_FORM_DATA, EchartsGraphFormData } from './types';
+import { ControlPanelConfig, sections, sharedControls } from '@superset-ui/chart-controls';
+import { DEFAULT_FORM_DATA } from './types';
 import {
   legendMarginControl,
   legendOrientationControl,
@@ -28,25 +28,19 @@ import {
 } from '../controls';
 
 const noopControl = { name: 'noop', config: { type: '', renderTrigger: true } };
-const columnSelectControl = {
+
+const requiredEntity = {
   ...sharedControls.entity,
-  type: 'SelectControl',
-  multi: false,
-  freeForm: true,
-  default: null,
-  includeTime: false,
-  optionRenderer: (c: ColumnMeta) => <ColumnOption column={c} showType />,
-  valueRenderer: (c: ColumnMeta) => <ColumnOption column={c} />,
-  valueKey: 'column_name',
-  allowAll: true,
-  filterOption: ({ data: opt }: { data: ColumnMeta }, text = '') =>
-    opt.column_name?.toLowerCase().includes(text.toLowerCase()) ||
-    opt.verbose_name?.toLowerCase().includes(text.toLowerCase()),
-  promptTextCreator: (label: string) => label,
-  commaChoosesOption: false,
+  clearable: false,
 };
 
-export default {
+const optionalEntity = {
+  ...sharedControls.entity,
+  clearable: true,
+  validators: [],
+};
+
+const controlPanel: ControlPanelConfig = {
   controlPanelSections: [
     sections.legacyRegularTime,
     {
@@ -57,8 +51,7 @@ export default {
           {
             name: 'source',
             config: {
-              ...columnSelectControl,
-              clearable: false,
+              ...requiredEntity,
               label: t('Source'),
               description: t('Name of the source nodes'),
             },
@@ -68,8 +61,7 @@ export default {
           {
             name: 'target',
             config: {
-              ...columnSelectControl,
-              clearable: false,
+              ...requiredEntity,
               label: t('Target'),
               description: t('Name of the target nodes'),
             },
@@ -80,26 +72,22 @@ export default {
           {
             name: 'source_category',
             config: {
-              ...columnSelectControl,
+              ...optionalEntity,
               label: t('Source category'),
               description: t(
                 'The category of source nodes used to assign colors. ' +
                   'If a node is associated with more than one category, only the first will be used.',
               ),
-              clearable: true,
-              validators: [],
             },
           },
         ],
         [
           {
             name: 'target_category',
             config: {
-              ...columnSelectControl,
+              ...optionalEntity,
               label: t('Target category'),
               description: t('Category of target nodes'),
-              clearable: true,
-              validators: [],
             },
           },
         ],
@@ -148,7 +136,7 @@ export default {
               renderTrigger: true,
               default: DEFAULT_FORM_DATA.draggable,
               description: t('Whether to enable node dragging in force layout mode.'),
-              visibility({ form_data: { layout } }: { form_data: EchartsGraphFormData }) {
+              visibility({ form_data: { layout } }) {
                 return layout === 'force' || (!layout && DEFAULT_FORM_DATA.layout === 'force');
               },
             },
@@ -214,7 +202,7 @@ export default {
               step: 50,
               default: DEFAULT_FORM_DATA.edgeLength,
               description: t('Edge length between nodes'),
-              visibility({ form_data: { layout } }: { form_data: EchartsGraphFormData }) {
+              visibility({ form_data: { layout } }) {
                 return layout === 'force' || (!layout && DEFAULT_FORM_DATA.layout === 'force');
               },
             },
@@ -232,7 +220,7 @@ export default {
               step: 0.1,
               default: DEFAULT_FORM_DATA.gravity,
               description: t('Strength to pull the graph toward center'),
-              visibility({ form_data: { layout } }: { form_data: EchartsGraphFormData }) {
+              visibility({ form_data: { layout } }) {
                 return layout === 'force' || (!layout && DEFAULT_FORM_DATA.layout === 'force');
               },
             },
@@ -250,7 +238,7 @@ export default {
               step: 50,
               default: DEFAULT_FORM_DATA.repulsion,
               description: t('Repulsion strength between nodes'),
-              visibility({ form_data: { layout } }: { form_data: EchartsGraphFormData }) {
+              visibility({ form_data: { layout } }) {
                 return layout === 'force' || (!layout && DEFAULT_FORM_DATA.layout === 'force');
               },
             },
@@ -268,7 +256,7 @@ export default {
               step: 0.1,
               default: DEFAULT_FORM_DATA.friction,
               description: t('Friction between nodes'),
-              visibility({ form_data: { layout } }: { form_data: EchartsGraphFormData }) {
+              visibility({ form_data: { layout } }) {
                 return layout === 'force' || (!layout && DEFAULT_FORM_DATA.layout === 'force');
               },
             },
@@ -278,3 +266,5 @@ export default {
     },
   ],
 };
+
+export default controlPanel;