refactor: Migration of Chart to TypeScript #28370

EnxDev · 2024-05-07T14:50:28Z

SUMMARY

Migrate Chart to TypeScript

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

N.A.

TESTING INSTRUCTIONS

All tests should pass

ADDITIONAL INFORMATION

Has associated issue:
Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

kgabryje · 2024-05-08T08:34:33Z

superset-frontend/src/components/Chart/Chart.tsx

-};
+export interface ChartProps {
+  annotationData?: object;
+  actions: any;


Can we use more specific types? In general we try to avoid using very generic types like any or object

For the annotation property, I believe the interface I created in this PR should be suitable.
For the actions property I created a type.

What do you think about that?

superset-frontend/src/components/Chart/Chart.tsx

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

kgabryje · 2024-05-08T08:47:27Z

superset-frontend/src/components/Chart/Chart.tsx

+class Chart extends React.PureComponent<ChartProps, {}> {
+  static defaultProps = defaultProps;
+
+  renderStartTime: any;


Where does renderStartTime come from? In the old version, we're only reading it, but we don't assign any value to it. In your changes you put renderStartTime in ChartProps, but also as class's field. I don't think it's actually passed as a prop anywhere, and as a class field it's also only read, not assigned.
So maybe we should just remove it?

I removed this from ChartProps.
You mean we should remove him from line 198 and 200 ( start_offset and duration keys)?

Yeah, unless I misunderstand something here, renderStartTime is always undefined because we don’t set its value anywhere, so maybe we could remove it from the code. @rusackas any objections?

Unless we want to actually fix it and assign a timestamp

Yes, I think we should understand why it was put there.
I remain waiting for instructions, thank you.

Well, if it's not wired up, that's an odd problem. It sure seems like it'd be useful for logging, which seems to be its intent. There's one in ChartRenderer.jsx that IS wired up, for reference. Maybe we don't need both though?

It WAS set in the original commit, actually. I haven't checked to see when its initialization was removed but clearly there wasn't much outcry.

I'd err on the side of more logging, not less. Maybe @eschutho would be interested in taking more advantage of this insight :)

No any please

superset-frontend/src/components/Chart/Chart.tsx

kgabryje

Thanks for the contribution! Added a few comments

kgabryje · 2024-05-08T10:21:54Z

superset-frontend/src/components/Chart/Chart.tsx

@@ -214,7 +209,7 @@ class Chart extends React.PureComponent<ChartProps, {}> {
    });
  }

-  renderErrorMessage(queryResponse: queryResponse) {
+  renderErrorMessage(QueryResponse: QueryResponse) {


The argument should be lowercase, only the type is PascalCase

Does not look like this was resolved

superset-frontend/src/components/Chart/ChartErrorMessage.tsx

Co-authored-by: JUST.in DO IT <justin.park@airbnb.com>

geido · 2024-05-16T12:35:23Z

superset-frontend/src/components/Chart/Chart.tsx

+  onQuery?: MouseEventHandler<HTMLSpanElement>;
+  onFilterMenuOpen?: Function;
+  onFilterMenuClose?: Function;
+  ownState?: any;


Can we add a better type for this?

geido · 2024-05-16T12:38:19Z

superset-frontend/src/components/Chart/Chart.tsx

@@ -214,7 +209,7 @@ class Chart extends React.PureComponent<ChartProps, {}> {
    });
  }

-  renderErrorMessage(queryResponse: queryResponse) {
+  renderErrorMessage(QueryResponse: QueryResponse) {


Does not look like this was resolved

geido · 2024-05-16T12:38:31Z

superset-frontend/src/components/Chart/Chart.tsx

@@ -201,7 +238,7 @@ class Chart extends React.PureComponent {
    });
  }

-  renderErrorMessage(queryResponse) {
+  renderErrorMessage(QueryResponse: QueryResponse) {


Suggested change

renderErrorMessage(QueryResponse: QueryResponse) {

renderErrorMessage(queryResponse: QueryResponse) {

geido · 2024-05-16T12:50:35Z

superset-frontend/src/components/Chart/Chart.tsx

+  emitCrossFilters?: boolean;
+}
+
+export type QueryResponse = {


This assumes that the response will always be an error. I think we already have a correct type for this. We either need to adjust that to account for the error or create one specifically for when get an error:

Instead of this QueryResponse see: superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts ChartDataResponse

For the error maybe superset-frontend/packages/superset-ui-core/src/query/getClientErrorObject.ts ClientErrorObject

geido · 2024-05-16T12:50:58Z

superset-frontend/src/components/Chart/Chart.tsx

+class Chart extends React.PureComponent<ChartProps, {}> {
+  static defaultProps = defaultProps;
+
+  renderStartTime: any;


No any please

geido · 2024-05-16T12:54:08Z

superset-frontend/src/components/Chart/ChartErrorMessage.tsx

+  subtitle: JSX.Element;
+  copyText: string;
+  link?: string;
+  source: ChartSource;
+  stackTrace?: string;


I believe this could be an extension of superset-frontend/packages/superset-ui-core/src/query/getClientErrorObject.ts ClientErrorObject

refactor: Migration of Chart.jsx to TypeScript

fcb4d64

pull-request-size bot added the size/L label May 7, 2024

john-bodley requested a review from justinpark May 7, 2024 17:36

rusackas requested a review from kgabryje May 7, 2024 22:10

kgabryje reviewed May 8, 2024

View reviewed changes

superset-frontend/src/components/Chart/Chart.tsx Outdated Show resolved Hide resolved

kgabryje reviewed May 8, 2024

View reviewed changes

superset-frontend/src/components/Chart/Chart.tsx Outdated Show resolved Hide resolved

kgabryje reviewed May 8, 2024

View reviewed changes

superset-frontend/src/components/Chart/Chart.tsx Outdated Show resolved Hide resolved

Update superset-frontend/src/components/Chart/Chart.tsx

21ea47a

Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>

kgabryje reviewed May 8, 2024

View reviewed changes

superset-frontend/src/components/Chart/Chart.tsx Outdated Show resolved Hide resolved

kgabryje requested changes May 8, 2024

View reviewed changes

adjustments

0c23f39

kgabryje reviewed May 8, 2024

View reviewed changes

justinpark reviewed May 8, 2024

View reviewed changes

superset-frontend/src/components/Chart/ChartErrorMessage.tsx Outdated Show resolved Hide resolved

EnxDev and others added 2 commits May 9, 2024 09:01

Update superset-frontend/src/components/Chart/ChartErrorMessage.tsx

fd8a8e1

Co-authored-by: JUST.in DO IT <justin.park@airbnb.com>

Adds Actions type

a6d96a6

geido reviewed May 16, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: Migration of Chart to TypeScript #28370

refactor: Migration of Chart to TypeScript #28370

EnxDev commented May 7, 2024

kgabryje May 8, 2024

EnxDev May 9, 2024 •

edited

kgabryje May 8, 2024

EnxDev May 8, 2024

kgabryje May 8, 2024

kgabryje May 8, 2024

EnxDev May 8, 2024

rusackas May 9, 2024

geido May 16, 2024 •

edited

kgabryje left a comment

kgabryje May 8, 2024

geido May 16, 2024

geido May 16, 2024

geido May 16, 2024

geido May 16, 2024

geido May 16, 2024

geido May 16, 2024 •

edited

geido May 16, 2024

	renderErrorMessage(QueryResponse: QueryResponse) {
	renderErrorMessage(queryResponse: QueryResponse) {

refactor: Migration of Chart to TypeScript #28370

Are you sure you want to change the base?

refactor: Migration of Chart to TypeScript #28370

Conversation

EnxDev commented May 7, 2024

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Choose a reason for hiding this comment

EnxDev May 9, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geido May 16, 2024 • edited

Choose a reason for hiding this comment

kgabryje left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

geido May 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EnxDev May 9, 2024 •

edited

geido May 16, 2024 •

edited

geido May 16, 2024 •

edited