tirkarthi commented on PR #38434:
URL: https://github.com/apache/airflow/pull/38434#issuecomment-2016721461
Using `chartInstance.clear()` causes the chart to be redrawn as noted in the
issue losing the animations on existing chart. Fresh redraws affect UX. I also
tried below patch to show the markline only when show landing pages is false
but on toggling the show landing page to true the run duration markline from
previous graph still gets calculated on the new graph. I tried upgrading
echarts to latest version but that doesn't solve the issue.
At this point I am open to reverting the markline changes in runduration
page and keep it only in task duration page to revisit this issue later to not
affect the 2.9.0 release after beta since runduration is broken in the main
branch too. Thoughts?
```diff
diff --git a/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
b/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
index 5365c0c3df..ed2950c3c8 100644
--- a/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
+++ b/airflow/www/static/js/dag/details/dag/RunDurationChart.tsx
@@ -170,22 +170,18 @@ const RunDurationChart = ({ showLandingTimes }: Props)
=> {
icon: "circle",
formatter: formatMarkLineLegendName,
data: [
- ...(showLandingTimes
+ ...(!showLandingTimes
? [
{
- name: "landingDurationUnit",
- itemStyle: { color: stateColors.scheduled },
+ name: "runDurationUnit",
+ itemStyle: { color: "blue" },
+ },
+ {
+ name: "queuedDurationUnit",
+ itemStyle: { color: stateColors.queued },
},
]
: []),
- {
- name: "runDurationUnit",
- itemStyle: { color: "blue" },
- },
- {
- name: "queuedDurationUnit",
- itemStyle: { color: stateColors.queued },
- },
],
},
series: [
@@ -199,15 +195,6 @@ const RunDurationChart = ({ showLandingTimes }: Props)
=> {
opacity: 0.6,
},
stack: "x",
- markLine: {
- silent: true,
- data: [
- {
- type: "median",
- lineStyle: { color: stateColors.scheduled },
- },
- ],
- },
} as SeriesOption,
]
: []),
@@ -219,10 +206,19 @@ const RunDurationChart = ({ showLandingTimes }: Props)
=> {
opacity: 0.6,
},
stack: "x",
- markLine: {
- silent: true,
- data: [{ type: "median", lineStyle: { color: stateColors.queued }
}],
- },
+ ...(!showLandingTimes
+ ? {
+ markLine: {
+ silent: true,
+ data: [
+ {
+ type: "median",
+ lineStyle: { color: stateColors.queued },
+ },
+ ],
+ },
+ }
+ : {}),
},
{
type: "bar",
@@ -233,10 +229,14 @@ const RunDurationChart = ({ showLandingTimes }: Props)
=> {
color: (params) => stateColors[params.data.state],
},
stack: "x",
- markLine: {
- silent: true,
- data: [{ type: "median", lineStyle: { color: "blue" } }],
- },
+ ...(!showLandingTimes
+ ? {
+ markLine: {
+ silent: true,
+ data: [{ type: "median", lineStyle: { color: "red" } }],
+ },
+ }
+ : {}),
},
],
```
--
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: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
