tirkarthi commented on PR #35863: URL: https://github.com/apache/airflow/pull/35863#issuecomment-1894967665
Thanks @bbovenzi . This looks great. As a tip echarts also provides dataZoom through which large graphs can be drilled down to plot values between two intervals. https://echarts.apache.org/examples/en/editor.html?c=bar-large While testing I am also seeing below error when num_runs count is greater than dag runs along with a new task added to the dag after few dag runs are created. ``` Initializing bitwardenContentMessageHandler bootstrap-content-message-handler.js:229:13 Attaching message event listener. bootstrap-content-message-handler.js:217:17 Uncaught TypeError: dataItem is null objectRows DataStore.js:1192 _initDataFromProvider DataStore.js:347 initData DataStore.js:164 _innerGetDataStore sourceManager.js:402 _innerGetDataStore sourceManager.js:398 getSharedDataStore sourceManager.js:379 createSeriesData createSeriesData.js:149 getInitialData BarSeries.js:62 init Series.js:100 visitComponent Global.js:381 each util.js:205 visitComponent Global.js:308 topologicalTravel component.js:122 _mergeOption Global.js:287 initBase Global.js:777 _resetOption Global.js:199 setOption Global.js:172 setOption echarts.js:418 ReactECharts ReactECharts.tsx:70 React 13 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533 EventHandlerNonNull* scheduler.development.js:571 <anonymous> scheduler.development.js:633 js grid.775ff095245d2eaa9cd5.js:10751 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.js:6 js grid.775ff095245d2eaa9cd5.js:10762 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 React 2 js grid.775ff095245d2eaa9cd5.js:9548 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9570 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9559 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.tsx:4 tsx grid.775ff095245d2eaa9cd5.js:3197 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> grid.775ff095245d2eaa9cd5.js:18365 <anonymous> grid.775ff095245d2eaa9cd5.js:18368 webpackUniversalModuleDefinition grid.775ff095245d2eaa9cd5.js:17 <anonymous> grid.775ff095245d2eaa9cd5.js:18 DataStore.js:1192 Uncaught TypeError: dataItem is null objectRows DataStore.js:1192 _initDataFromProvider DataStore.js:347 initData DataStore.js:164 _innerGetDataStore sourceManager.js:402 _innerGetDataStore sourceManager.js:398 getSharedDataStore sourceManager.js:379 createSeriesData createSeriesData.js:149 getInitialData BarSeries.js:62 init Series.js:100 visitComponent Global.js:381 each util.js:205 visitComponent Global.js:308 topologicalTravel component.js:122 _mergeOption Global.js:287 initBase Global.js:777 _resetOption Global.js:199 setOption Global.js:172 setOption echarts.js:418 ReactECharts ReactECharts.tsx:70 React 12 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533 EventHandlerNonNull* scheduler.development.js:571 <anonymous> scheduler.development.js:633 js grid.775ff095245d2eaa9cd5.js:10751 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.js:6 js grid.775ff095245d2eaa9cd5.js:10762 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 React 2 js grid.775ff095245d2eaa9cd5.js:9548 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9570 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9559 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.tsx:4 tsx grid.775ff095245d2eaa9cd5.js:3197 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> grid.775ff095245d2eaa9cd5.js:18365 <anonymous> grid.775ff095245d2eaa9cd5.js:18368 webpackUniversalModuleDefinition grid.775ff095245d2eaa9cd5.js:17 <anonymous> grid.775ff095245d2eaa9cd5.js:18 DataStore.js:1192 The above error occurred in the <ReactECharts> component: ReactECharts@webpack-internal:///./static/js/components/ReactECharts.tsx:37:7 TaskDuration@webpack-internal:///./static/js/dag/details/task/TaskDuration.tsx:48:71 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 TaskDetails@webpack-internal:///./static/js/dag/details/task/index.tsx:43:71 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 TabPanel2@webpack-internal:///./node_modules/@chakra-ui/tabs/dist/index.esm.js:364:33 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 TabPanels2@webpack-internal:///./node_modules/@chakra-ui/tabs/dist/index.esm.js:378:35 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 Tabs2@webpack-internal:///./node_modules/@chakra-ui/tabs/dist/index.esm.js:306:88 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 Flex2@webpack-internal:///./node_modules/@chakra-ui/layout/dist/index.esm.js:274:77 Details@webpack-internal:///./static/js/dag/details/index.tsx:139:7 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 Flex2@webpack-internal:///./node_modules/@chakra-ui/layout/dist/index.esm.js:274:77 div withEmotionCache/<@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:57:66 ChakraComponent@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:248:102 Main@webpack-internal:///./static/js/dag/Main.tsx:71:59 Router@webpack-internal:///./node_modules/react-router/index.js:860:7 BrowserRouter@webpack-internal:///./node_modules/react-router-dom/index.js:122:7 AutoRefreshProvider@webpack-internal:///./static/js/context/autorefresh.tsx:44:7 TimezoneProvider@webpack-internal:///./static/js/context/timezone.tsx:37:7 QueryClientProvider@webpack-internal:///./node_modules/react-query/es/react/QueryClientProvider.js:39:16 EnvironmentProvider@webpack-internal:///./node_modules/@chakra-ui/react-env/dist/index.esm.js:121:54 ColorModeProvider@webpack-internal:///./node_modules/@chakra-ui/color-mode/dist/index.esm.js:166:7 ThemeProvider@webpack-internal:///./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js:96:64 ThemeProvider@webpack-internal:///./node_modules/@chakra-ui/system/dist/index.esm.js:166:44 ChakraProvider@webpack-internal:///./node_modules/@chakra-ui/provider/dist/index.esm.js:29:7 ChakraProvider2@webpack-internal:///./node_modules/@chakra-ui/react/dist/index.esm.js:552:34 ChakraApp@webpack-internal:///./static/js/App.tsx:73:7 div ContainerRefProvider@webpack-internal:///./static/js/context/containerRef.tsx:34:7 App@webpack-internal:///./static/js/App.tsx:91:7 Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. 2 react-dom.development.js:18572 Uncaught TypeError: dataItem is null objectRows DataStore.js:1192 _initDataFromProvider DataStore.js:347 initData DataStore.js:164 _innerGetDataStore sourceManager.js:402 _innerGetDataStore sourceManager.js:398 getSharedDataStore sourceManager.js:379 createSeriesData createSeriesData.js:149 getInitialData BarSeries.js:62 init Series.js:100 visitComponent Global.js:381 each util.js:205 visitComponent Global.js:308 topologicalTravel component.js:122 _mergeOption Global.js:287 initBase Global.js:777 _resetOption Global.js:199 setOption Global.js:172 setOption echarts.js:418 ReactECharts ReactECharts.tsx:70 React 13 workLoop scheduler.development.js:266 flushWork scheduler.development.js:239 performWorkUntilDeadline scheduler.development.js:533 EventHandlerNonNull* scheduler.development.js:571 <anonymous> scheduler.development.js:633 js grid.775ff095245d2eaa9cd5.js:10751 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.js:6 js grid.775ff095245d2eaa9cd5.js:10762 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 React 2 js grid.775ff095245d2eaa9cd5.js:9548 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9570 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> React js grid.775ff095245d2eaa9cd5.js:9559 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> index.tsx:4 tsx grid.775ff095245d2eaa9cd5.js:3197 __webpack_require__ grid.775ff095245d2eaa9cd5.js:18284 <anonymous> grid.775ff095245d2eaa9cd5.js:18365 <anonymous> grid.775ff095245d2eaa9cd5.js:18368 webpackUniversalModuleDefinition grid.775ff095245d2eaa9cd5.js:17 <anonymous> grid.775ff095245d2eaa9cd5.js:18 DataStore.js:1192 ``` -- 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]
