You are viewing a plain text version of this content. The canonical link for it is here.

Posted to notifications@superset.apache.org by GitBox <gi...@apache.org> on 2021/12/31 03:35:10 UTC

[GitHub] [superset] jdbranham opened a new pull request #17903: Jb/feat plugin handlebars

jdbranham opened a new pull request #17903:
URL: https://github.com/apache/superset/pull/17903


   Adds a new plugin, that renders the data payload
   by applying a customizable handlebars template  
   
   Reopening PR from old repo -  
   https://github.com/apache-superset/superset-ui/pull/1390 
   
   💔 Breaking Changes - None
   
   🏆 Enhancements - New Handlebars plugin
   
   📜 Documentation - slim 😅
   
   Markup -  
   ![markup](https://user-images.githubusercontent.com/2660839/136515106-e7f3a363-d0e8-41b3-b403-936614d1d8e5.png)
   
   Markdown -  
   ![markdown](https://user-images.githubusercontent.com/2660839/136516805-b2bef68e-91c5-4c1b-ac8b-c30d4b6e5e8c.png)  
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] villebro commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

villebro commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r784660180



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
##########
@@ -0,0 +1,33 @@
+import { SafeMarkdown } from '@superset-ui/core';
+import Handlebars from 'handlebars';
+import moment from 'moment';
+import React, { useMemo, useState } from 'react';
+
+export interface HandlebarsViewerProps {
+  templateSource: string;
+  data: any;
+}
+
+export const HandlebarsViewer = ({
+  templateSource,
+  data,
+}: HandlebarsViewerProps) => {
+  const [renderedTemplate, setRenderedTemplate] = useState('');
+
+  useMemo(() => {
+    const template = Handlebars.compile(templateSource);
+    const result = template(data);
+    setRenderedTemplate(result);
+  }, [templateSource, data]);

Review comment:
       I would add a try-catch block here to catch compilation errors. Something like
   ```typescript
   const [error, setError] = useState('');
   
     useMemo(() => {
       try {
         const template = Handlebars.compile(templateSource);
         const result = template(data);
         setRenderedTemplate(result);
         setError('');
       } catch (error) {
         setRenderedTemplate('');
         setError(error.message);
       }
     }, [templateSource, data]);
   ```
   
   You could then add an Error component that displays the error, like
   
   ```typescript
   const Error = styled.pre`
     white-space: pre-wrap;
   `;
   
     if (error) {
       return <Error>{error}</Error>;
     }
   ```
   
   This would produce something like this when the template has a syntax error (we could probably change the background colors etc):
   
   ![image](https://user-images.githubusercontent.com/33317356/149485648-7a5fc324-90c2-407d-9e61-519fe858dc84.png)
   




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] jdbranham commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

jdbranham commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r785351352



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
##########
@@ -0,0 +1,33 @@
+import { SafeMarkdown } from '@superset-ui/core';
+import Handlebars from 'handlebars';
+import moment from 'moment';
+import React, { useMemo, useState } from 'react';
+
+export interface HandlebarsViewerProps {
+  templateSource: string;
+  data: any;
+}
+
+export const HandlebarsViewer = ({
+  templateSource,
+  data,
+}: HandlebarsViewerProps) => {
+  const [renderedTemplate, setRenderedTemplate] = useState('');
+
+  useMemo(() => {
+    const template = Handlebars.compile(templateSource);
+    const result = template(data);
+    setRenderedTemplate(result);
+  }, [templateSource, data]);

Review comment:
       Excellent suggestion!




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] raags commented on pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

raags commented on pull request #17903:
URL: https://github.com/apache/superset/pull/17903#issuecomment-1055441633


   @jdbranham would love to try this plugin - could you fix the conflicts?


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] mayurnewase commented on pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

mayurnewase commented on pull request #17903:
URL: https://github.com/apache/superset/pull/17903#issuecomment-1003275511


   This is so cool..
   Approved workflows.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] codecov[bot] commented on pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

codecov[bot] commented on pull request #17903:
URL: https://github.com/apache/superset/pull/17903#issuecomment-1004517211


   # [Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#17903](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (5977ede) into [master](https://codecov.io/gh/apache/superset/commit/8ebec6016ecd0b729ff149bf1bb051da808f3f95?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (8ebec60) will **decrease** coverage by `0.07%`.
   > The diff coverage is `32.83%`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/superset/pull/17903/graphs/tree.svg?width=650&height=150&src=pr&token=KsB0fHcx6l&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master   #17903      +/-   ##
   ==========================================
   - Coverage   67.10%   67.03%   -0.08%     
   ==========================================
     Files        1609     1630      +21     
     Lines       64897    65031     +134     
     Branches     6866     6898      +32     
   ==========================================
   + Hits        43547    43591      +44     
   - Misses      19484    19570      +86     
   - Partials     1866     1870       +4     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | javascript | `53.69% <32.83%> (-0.08%)` | :arrow_down: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [...plugins/plugin-chart-handlebars/src/Handlebars.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvSGFuZGxlYmFycy50c3g=) | `0.00% <0.00%> (ø)` | |
   | [...ars/src/components/Handlebars/HandlebarsViewer.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvY29tcG9uZW50cy9IYW5kbGViYXJzL0hhbmRsZWJhcnNWaWV3ZXIudHN4) | `0.00% <0.00%> (ø)` | |
   | [...-frontend/src/visualizations/presets/MainPreset.js](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3Zpc3VhbGl6YXRpb25zL3ByZXNldHMvTWFpblByZXNldC5qcw==) | `100.00% <ø> (ø)` | |
   | [...andlebars/src/components/CodeEditor/CodeEditor.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvY29tcG9uZW50cy9Db2RlRWRpdG9yL0NvZGVFZGl0b3IudHN4) | `14.28% <14.28%> (ø)` | |
   | [...n-chart-handlebars/src/plugin/controls/columns.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2NvbHVtbnMudHN4) | `16.66% <16.66%> (ø)` | |
   | [...n-chart-handlebars/src/plugin/controls/groupBy.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2dyb3VwQnkudHN4) | `16.66% <16.66%> (ø)` | |
   | [...ndlebars/src/plugin/controls/handlebarTemplate.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2hhbmRsZWJhclRlbXBsYXRlLnRzeA==) | `30.00% <30.00%> (ø)` | |
   | [...gin-chart-handlebars/src/plugin/controls/style.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3N0eWxlLnRzeA==) | `30.00% <30.00%> (ø)` | |
   | [...gin-chart-handlebars/src/plugin/controls/shared.ts](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3NoYXJlZC50cw==) | `30.76% <30.76%> (ø)` | |
   | [...hart-handlebars/src/plugin/controls/pagination.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3BhZ2luYXRpb24udHN4) | `33.33% <33.33%> (ø)` | |
   | ... and [12 more](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [8ebec60...5977ede](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] villebro commented on pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

villebro commented on pull request #17903:
URL: https://github.com/apache/superset/pull/17903#issuecomment-1003701433


   Thanks @jdbranham so much for bringing in this PR from `superset-ui` to the main repo! Tagging myself for a review + will be reviewing+testing this in the coming days.


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] villebro commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

villebro commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r785415772



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const HandlebarsTemplateControlSetItem: ControlSetItem = {

Review comment:
       Yes; since they instantiate the `ControlSetItem` type, I consider naming them like regular JS variables (camelCase) more appropriate than `PascalCase`. So I would recommend changing the case on all of these, as it's the common convention throughout the other control definitions.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] villebro commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

villebro commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r807787198



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/metrics.tsx
##########
@@ -0,0 +1,85 @@
+import {
+  ControlPanelState,
+  ControlSetItem,
+  ControlState,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
+import { getQueryMode, isAggMode, validateAggControlValues } from './shared';
+
+const percent_metrics: typeof sharedControls.metrics = {
+  type: 'MetricsControl',
+  label: t('Percentage metrics'),
+  description: t(
+    'Metrics for which percentage of total are to be displayed. Calculated from only data within the row limit.',
+  ),
+  multi: true,
+  visibility: isAggMode,
+  mapStateToProps: ({ datasource, controls }, controlState) => ({
+    columns: datasource?.columns || [],
+    savedMetrics: datasource?.metrics || [],
+    datasource,
+    datasourceType: datasource?.type,
+    queryMode: getQueryMode(controls),
+    externalValidationErrors: validateAggControlValues(controls, [
+      controls.groupby?.value,
+      controls.metrics?.value,
+      controlState.value,
+    ]),
+  }),
+  rerender: ['groupby', 'metrics'],
+  default: [],
+  validators: [],
+};
+
+const dnd_percent_metrics = {
+  ...percent_metrics,
+  type: 'DndMetricSelect',
+};
+
+export const PercentMetricsControlSetItem: ControlSetItem = {

Review comment:
       The convention has been to make all these camelCase, as they've really just variables (making them PascalCase makes it appear as if they're types/interfaces/classes/React components)

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const HandlebarsTemplateControlSetItem: ControlSetItem = {

Review comment:
       @jdbranham here is an example of instances of `ControlSetItem` in another plugin which are camelCase: https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-echarts/src/controls.tsx




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] codecov[bot] edited a comment on pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

codecov[bot] edited a comment on pull request #17903:
URL: https://github.com/apache/superset/pull/17903#issuecomment-1004517211


   # [Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) Report
   > Merging [#17903](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (5977ede) into [master](https://codecov.io/gh/apache/superset/commit/8ebec6016ecd0b729ff149bf1bb051da808f3f95?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) (8ebec60) will **decrease** coverage by `0.07%`.
   > The diff coverage is `32.83%`.
   
   > :exclamation: Current head 5977ede differs from pull request most recent head 6fc45cb. Consider uploading reports for the commit 6fc45cb to get more accurate results
   [![Impacted file tree graph](https://codecov.io/gh/apache/superset/pull/17903/graphs/tree.svg?width=650&height=150&src=pr&token=KsB0fHcx6l&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   
   ```diff
   @@            Coverage Diff             @@
   ##           master   #17903      +/-   ##
   ==========================================
   - Coverage   67.10%   67.03%   -0.08%     
   ==========================================
     Files        1609     1630      +21     
     Lines       64897    65031     +134     
     Branches     6866     6898      +32     
   ==========================================
   + Hits        43547    43591      +44     
   - Misses      19484    19570      +86     
   - Partials     1866     1870       +4     
   ```
   
   | Flag | Coverage Δ | |
   |---|---|---|
   | javascript | `53.69% <32.83%> (-0.08%)` | :arrow_down: |
   
   Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#carryforward-flags-in-the-pull-request-comment) to find out more.
   
   | [Impacted Files](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | Coverage Δ | |
   |---|---|---|
   | [...plugins/plugin-chart-handlebars/src/Handlebars.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvSGFuZGxlYmFycy50c3g=) | `0.00% <0.00%> (ø)` | |
   | [...ars/src/components/Handlebars/HandlebarsViewer.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvY29tcG9uZW50cy9IYW5kbGViYXJzL0hhbmRsZWJhcnNWaWV3ZXIudHN4) | `0.00% <0.00%> (ø)` | |
   | [...-frontend/src/visualizations/presets/MainPreset.js](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvc3JjL3Zpc3VhbGl6YXRpb25zL3ByZXNldHMvTWFpblByZXNldC5qcw==) | `100.00% <ø> (ø)` | |
   | [...andlebars/src/components/CodeEditor/CodeEditor.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvY29tcG9uZW50cy9Db2RlRWRpdG9yL0NvZGVFZGl0b3IudHN4) | `14.28% <14.28%> (ø)` | |
   | [...n-chart-handlebars/src/plugin/controls/columns.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2NvbHVtbnMudHN4) | `16.66% <16.66%> (ø)` | |
   | [...n-chart-handlebars/src/plugin/controls/groupBy.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2dyb3VwQnkudHN4) | `16.66% <16.66%> (ø)` | |
   | [...ndlebars/src/plugin/controls/handlebarTemplate.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL2hhbmRsZWJhclRlbXBsYXRlLnRzeA==) | `30.00% <30.00%> (ø)` | |
   | [...gin-chart-handlebars/src/plugin/controls/style.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3N0eWxlLnRzeA==) | `30.00% <30.00%> (ø)` | |
   | [...gin-chart-handlebars/src/plugin/controls/shared.ts](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3NoYXJlZC50cw==) | `30.76% <30.76%> (ø)` | |
   | [...hart-handlebars/src/plugin/controls/pagination.tsx](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation#diff-c3VwZXJzZXQtZnJvbnRlbmQvcGx1Z2lucy9wbHVnaW4tY2hhcnQtaGFuZGxlYmFycy9zcmMvcGx1Z2luL2NvbnRyb2xzL3BhZ2luYXRpb24udHN4) | `33.33% <33.33%> (ø)` | |
   | ... and [12 more](https://codecov.io/gh/apache/superset/pull/17903/diff?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation) | |
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Last update [8ebec60...6fc45cb](https://codecov.io/gh/apache/superset/pull/17903?src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=The+Apache+Software+Foundation).
   


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] jdbranham commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

jdbranham commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r785361465



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const HandlebarsTemplateControlSetItem: ControlSetItem = {

Review comment:
       If we make it camelCase, it would be different then the other ControlSetItems 🤔 
   
   https://github.com/apache/superset/pull/17903/files#diff-c424dd95a62b793c9f111b432e365b8cb478f2320675a7d76c05afc917c109dfR133-R153




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org

[GitHub] [superset] villebro commented on a change in pull request #17903: Feature: Adds plugin-chart-handlebars

Posted by GitBox <gi...@apache.org>.

villebro commented on a change in pull request #17903:
URL: https://github.com/apache/superset/pull/17903#discussion_r784660180



##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
##########
@@ -0,0 +1,33 @@
+import { SafeMarkdown } from '@superset-ui/core';
+import Handlebars from 'handlebars';
+import moment from 'moment';
+import React, { useMemo, useState } from 'react';
+
+export interface HandlebarsViewerProps {
+  templateSource: string;
+  data: any;
+}
+
+export const HandlebarsViewer = ({
+  templateSource,
+  data,
+}: HandlebarsViewerProps) => {
+  const [renderedTemplate, setRenderedTemplate] = useState('');
+
+  useMemo(() => {
+    const template = Handlebars.compile(templateSource);
+    const result = template(data);
+    setRenderedTemplate(result);
+  }, [templateSource, data]);

Review comment:
       I would add a try-catch block here to catch compilation errors. Something like
   ```typescript
   const [error, setError] = useState('');
   
     useMemo(() => {
       try {
         const template = Handlebars.compile(templateSource);
         const result = template(data);
         setRenderedTemplate(result);
         setError('');
       } catch (error) {
         setRenderedTemplate('');
         setError(error.message);
       }
     }, [templateSource, data]);
   ```
   
   You could then add an Error component that displays the error, like
   
   ```typescript
   const Error = styled.pre`
     white-space: pre-wrap;
   `;
   
     if (error) {
       return <Error>{error}</Error>;
     }
   ```
   
   This would produce something like this when the template has a syntax error:
   
   ![image](https://user-images.githubusercontent.com/33317356/149485648-7a5fc324-90c2-407d-9e61-519fe858dc84.png)
   

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/components/Handlebars/HandlebarsViewer.tsx
##########
@@ -0,0 +1,33 @@
+import { SafeMarkdown } from '@superset-ui/core';
+import Handlebars from 'handlebars';
+import moment from 'moment';

Review comment:
       nit: it appears `moment` isn't listed as a dependency. Since `moment` is a dependency in the monorepo, we can probably add it as a peer dependency in `package.json`

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const HandlebarsTemplateControlSetItem: ControlSetItem = {
+  name: 'handlebarsTemplate',
+  config: handlebarsTemplateControlConfig,

Review comment:
       nit: maybe we could just inline the `handlebarsTemplateControlConfig ` config from above here?

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx
##########
@@ -0,0 +1,55 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface StyleCustomControlProps {
+  value: string;
+}
+
+const StyleControl = (props: CustomControlConfig<StyleCustomControlProps>) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        mode="css"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const styleControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: StyleControl,
+  label: t('CSS Styles'),
+  description: t('CSS applied to the chart'),
+  default: '',
+  isInt: false,
+
+  validators: [],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const StyleControlSetItem: ControlSetItem = {
+  name: 'styleTemplate',
+  config: styleControlConfig,

Review comment:
       nit: also inline config here

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,
+  }),
+};
+
+export const HandlebarsTemplateControlSetItem: ControlSetItem = {

Review comment:
       nit, I would probably make this camelCase instead of PascalCase: 
   ```suggestion
   export const handlebarsTemplateControlSetItem: ControlSetItem = {
   ```

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/handlebarTemplate.tsx
##########
@@ -0,0 +1,60 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t, validateNonEmpty } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface HandlebarsCustomControlProps {
+  value: string;
+}
+
+const HandlebarsTemplateControl = (
+  props: CustomControlConfig<HandlebarsCustomControlProps>,
+) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const handlebarsTemplateControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: HandlebarsTemplateControl,
+  label: t('Handlebars Template'),
+  description: t('A handlebars template that is applied to the data'),
+  default: `<ul class="data_list">
+    {{#each data}}
+      <li>{{this}}</li>
+    {{/each}}
+  </ul>`,
+  isInt: false,
+
+  validators: [validateNonEmpty],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,

Review comment:
       let's add
   ```typescript
   {
     ...,
     renderTrigger: true,
   }
   ```
   here to avoid having to retrigger the data request every time the template is updated (this make the chart update in real time when updating the template 🎉 )

##########
File path: superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx
##########
@@ -0,0 +1,55 @@
+import {
+  ControlConfig,
+  ControlSetItem,
+  CustomControlConfig,
+  sharedControls,
+} from '@superset-ui/chart-controls';
+import { t } from '@superset-ui/core';
+import React from 'react';
+import { CodeEditor } from '../../components/CodeEditor/CodeEditor';
+import { ControlHeader } from '../../components/ControlHeader/controlHeader';
+
+interface StyleCustomControlProps {
+  value: string;
+}
+
+const StyleControl = (props: CustomControlConfig<StyleCustomControlProps>) => {
+  const val = String(
+    props?.value ? props?.value : props?.default ? props?.default : '',
+  );
+
+  const updateConfig = (source: string) => {
+    props.onChange(source);
+  };
+  return (
+    <div>
+      <ControlHeader>{props.label}</ControlHeader>
+      <CodeEditor
+        theme="dark"
+        mode="css"
+        value={val}
+        onChange={source => {
+          updateConfig(source || '');
+        }}
+      />
+    </div>
+  );
+};
+const styleControlConfig: ControlConfig<any> = {
+  ...sharedControls.entity,
+  type: StyleControl,
+  label: t('CSS Styles'),
+  description: t('CSS applied to the chart'),
+  default: '',
+  isInt: false,
+
+  validators: [],
+  mapStateToProps: ({ controls }) => ({
+    value: controls?.handlebars_template?.value,

Review comment:
       also add `renderTrigger: true` here




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org