You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airflow.apache.org by GitBox <gi...@apache.org> on 2020/01/22 00:59:13 UTC

[GitHub] [airflow] houqp opened a new pull request #7238: [AIRFLOW-6613] center dag on graph view load

houqp opened a new pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238
 
 
   Set up DAG with the right zoom level and center it on graph view page load to help navigate large DAGs.
   
   ---
   Issue link: WILL BE INSERTED BY [boring-cyborg](https://github.com/kaxil/boring-cyborg)
   
   Make sure to mark the boxes below before creating PR: [x]
   
   - [x] Description above provides context of the change
   - [x] Commit message/PR title starts with `[AIRFLOW-NNNN]`. AIRFLOW-NNNN = JIRA ID<sup>*</sup>
   - [x] Unit tests coverage for changes (not needed for documentation changes)
   - [x] Commits follow "[How to write a good git commit message](http://chris.beams.io/posts/git-commit/)"
   - [x] Relevant documentation is updated including usage instructions.
   - [x] I will engage committers as explained in [Contribution Workflow Example](https://github.com/apache/airflow/blob/master/CONTRIBUTING.rst#contribution-workflow-example).
   
   <sup>*</sup> For document-only changes commit message can start with `[AIRFLOW-XXXX]`.
   
   ---
   In case of fundamental code change, Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvements+Proposals)) is needed.
   In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x).
   In case of backwards incompatible changes please leave a note in [UPDATING.md](https://github.com/apache/airflow/blob/master/UPDATING.md).
   Read the [Pull Request Guidelines](https://github.com/apache/airflow/blob/master/CONTRIBUTING.rst#pull-request-guidelines) for more information.
   

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-580902356
 
 
   @ashb rebased on latest master, let me know what else i can help to get this merged into master.

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] codecov-io edited a comment on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
codecov-io edited a comment on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-576970059
 
 
   # [Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=h1) Report
   > Merging [#7238](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=desc) into [master](https://codecov.io/gh/apache/airflow/commit/5ba3fd6fc60724c7e60021756c6832f303aa49a1?src=pr&el=desc) will **not change** coverage.
   > The diff coverage is `n/a`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/airflow/pull/7238/graphs/tree.svg?width=650&token=WdLKlKHOAU&height=150&src=pr)](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=tree)
   
   ```diff
   @@           Coverage Diff           @@
   ##           master    #7238   +/-   ##
   =======================================
     Coverage   85.34%   85.34%           
   =======================================
     Files         791      791           
     Lines       40124    40124           
   =======================================
     Hits        34243    34243           
     Misses       5881     5881
   ```
   
   
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=continue).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=footer). Last update [5ba3fd6...53e067b](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).
   

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] potiuk commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
potiuk commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-581136151
 
 
   Please rebase to latest master @houqp again. Sorry for that - but we had a failing master drama and there is much higher chance the build will succeed. We have still some intermittent errors, but there should be less often.

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#discussion_r372961024
 
 

 ##########
 File path: airflow/www/templates/airflow/graph.html
 ##########
 @@ -169,10 +169,27 @@
                                         "scale(" + d3.event.scale + ")");
           });
       svg.call(zoom);
-    }
 
-    // Centering the DAG on load (Not implemented yet)
-    // https://github.com/dagrejs/dagre-d3/issues/245
+      // Centering the DAG on load
+      // Get Dagre Graph dimensions
+      var graphWidth = g.graph().width;
+      var graphHeight = g.graph().height;
+      // Get SVG dimensions
+      var padding = 20;
+      var svgBb = svg.node().getBoundingClientRect();
+      var width = svgBb.width - padding*2;
+      var height = svgBb.height - padding;  // we are not centering the dag vertically
 
 Review comment:
   Oh it will fit the dag in vertically, just not centre it vertically. Gotcha.

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] potiuk merged pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
potiuk merged pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238
 
 
   

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-580123345
 
 
   @ashb pushed a new change, ready for review

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] houqp commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
houqp commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#discussion_r372828677
 
 

 ##########
 File path: airflow/www/templates/airflow/graph.html
 ##########
 @@ -169,10 +169,27 @@
                                         "scale(" + d3.event.scale + ")");
           });
       svg.call(zoom);
-    }
 
-    // Centering the DAG on load (Not implemented yet)
-    // https://github.com/dagrejs/dagre-d3/issues/245
+      // Centering the DAG on load
+      // Get Dagre Graph dimensions
+      var graphWidth = g.graph().width;
+      var graphHeight = g.graph().height;
+      // Get SVG dimensions
+      var padding = 20;
+      var svgBb = svg.node().getBoundingClientRect();
+      var width = svgBb.width - padding*2;
+      var height = svgBb.height - padding;  // we are not centering the dag vertically
 
 Review comment:
   this calculation is orientation agnostics, it will setup the zoom level so all the dag nodes can fit into the current canvas regardless of the orientation.

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#discussion_r372231747
 
 

 ##########
 File path: airflow/www/templates/airflow/graph.html
 ##########
 @@ -169,10 +169,26 @@
                                         "scale(" + d3.event.scale + ")");
           });
       svg.call(zoom);
-    }
 
-    // Centering the DAG on load (Not implemented yet)
-    // https://github.com/dagrejs/dagre-d3/issues/245
+      // Centering the DAG on load
+      // Get Dagre Graph dimensions
+      var graphWidth = g.graph().width;
+      var graphHeight = g.graph().height;
+      // Get SVG dimensions
+      var padding = 20;
+      var width = parseInt(svg.style("width").replace(/px/, "")) - padding*2;
 
 Review comment:
   Does this work if the width is defined in units other than px in the css?

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] codecov-io commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
codecov-io commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-576970059
 
 
   # [Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=h1) Report
   > Merging [#7238](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=desc) into [master](https://codecov.io/gh/apache/airflow/commit/5ba3fd6fc60724c7e60021756c6832f303aa49a1?src=pr&el=desc) will **not change** coverage.
   > The diff coverage is `n/a`.
   
   [![Impacted file tree graph](https://codecov.io/gh/apache/airflow/pull/7238/graphs/tree.svg?width=650&token=WdLKlKHOAU&height=150&src=pr)](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=tree)
   
   ```diff
   @@           Coverage Diff           @@
   ##           master    #7238   +/-   ##
   =======================================
     Coverage   85.34%   85.34%           
   =======================================
     Files         791      791           
     Lines       40124    40124           
   =======================================
     Hits        34243    34243           
     Misses       5881     5881
   ```
   
   
   
   ------
   
   [Continue to review full report at Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=continue).
   > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
   > `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
   > Powered by [Codecov](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=footer). Last update [5ba3fd6...2206acb](https://codecov.io/gh/apache/airflow/pull/7238?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).
   

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] potiuk commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
potiuk commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-581177540
 
 
   Thanks @houqp ! Nice change!

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
houqp commented on issue #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#issuecomment-581173547
 
 
   thanks @potiuk for fixing the master! I have rebased and builds are passing now

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] houqp commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
houqp commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#discussion_r372795902
 
 

 ##########
 File path: airflow/www/templates/airflow/graph.html
 ##########
 @@ -169,10 +169,26 @@
                                         "scale(" + d3.event.scale + ")");
           });
       svg.call(zoom);
-    }
 
-    // Centering the DAG on load (Not implemented yet)
-    // https://github.com/dagrejs/dagre-d3/issues/245
+      // Centering the DAG on load
+      // Get Dagre Graph dimensions
+      var graphWidth = g.graph().width;
+      var graphHeight = g.graph().height;
+      // Get SVG dimensions
+      var padding = 20;
+      var width = parseInt(svg.style("width").replace(/px/, "")) - padding*2;
 
 Review comment:
   i believe s3 always sets the style in px. but i found a better method to get the real dimension of the svg element, so i have switched to that, which returns  px as integer.

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

[GitHub] [airflow] ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load

Posted by GitBox <gi...@apache.org>.
ashb commented on a change in pull request #7238: [AIRFLOW-6613] center dag on graph view load
URL: https://github.com/apache/airflow/pull/7238#discussion_r372800513
 
 

 ##########
 File path: airflow/www/templates/airflow/graph.html
 ##########
 @@ -169,10 +169,27 @@
                                         "scale(" + d3.event.scale + ")");
           });
       svg.call(zoom);
-    }
 
-    // Centering the DAG on load (Not implemented yet)
-    // https://github.com/dagrejs/dagre-d3/issues/245
+      // Centering the DAG on load
+      // Get Dagre Graph dimensions
+      var graphWidth = g.graph().width;
+      var graphHeight = g.graph().height;
+      // Get SVG dimensions
+      var padding = 20;
+      var svgBb = svg.node().getBoundingClientRect();
+      var width = svgBb.width - padding*2;
+      var height = svgBb.height - padding;  // we are not centering the dag vertically
 
 Review comment:
   What if some has set the orientation (default, or via drop down) to top->bottom? :)

----------------------------------------------------------------
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.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services