Visual tweaking of TI swatches, legend refactoring (#11550)

Co-authored-by: James Timmins <james@astronomer.io>

airflow/www/static/css/main.css

@@ -255,31 +255,49 @@ body div.panel {
   filter: url(#blur-effect-1);
 }
 
-div.legend_item {
-  border-radius: 5px;
-  float: right;
-  margin: 0 3px 0 0;
+.legend-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.legend-item {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 4px;
+  border-radius: 4px;
+  border: solid 2px #cbcbcb;
   padding: 0 3px;
-  border: solid 2px grey;
   font-size: 11px;
 }
 
-div.legend_circle {
-  border-radius: 10px;
-  width: 15px;
-  height: 15px;
-  border: 1px solid grey;
-  float: left;
-  margin-top: 2px;
+.legend-item--no-border {
+  border-color: transparent;
+  padding: 0;
+}
+
+.legend-item:last-child {
   margin-right: 0;
 }
 
-div.square {
+.legend-item__swatch {
+  display: inline-block;
+  margin-right: 3px;
   width: 12px;
   height: 12px;
-  float: right;
-  margin-top: 2px;
-  border: 1px solid #000;
+  border-radius: 2px;
+  border: solid 1px #8e8e8d;
+  background: #fff;
+}
+
+.legend-item__swatch--circle {
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+}
+
+.legend-item__swatch--no-border {
+  border-color: transparent;
 }
 
 label[for="timezone-other"],

airflow/www/templates/airflow/graph.html

@@ -80,20 +80,16 @@
       <input type="search" class="form-control" id="searchbox" placeholder="Find Task…">
     </div>
   </div>
-  <div>
-    {% for op in operators %}
-      <div class="legend_item" style="border-width:1px;float:left;background:{{ op.ui_color }};color:{{ op.ui_fgcolor }};">
-        {{ op.task_type }}
-      </div>
-    {% endfor %}
 
+  <div class="legend-row">
     <div>
-      <div class="legend_item state" style="border-color:white;">no_status</div>
-      {% for state, state_color in state_color_mapping.items() %}
-        <div class="legend_item state" style="border-color:{{state_color}};">{{state}}</div>
-      {% endfor %}
+      {% for op in operators %}<span class="legend-item" style="color: {{ op.ui_fgcolor }};background: {{ op.ui_color }};">
+        {{ op.task_type }}</span>{% endfor %}
+    </div>
+    <div>
+      {% for state, state_color in state_color_mapping.items() %}<span class="legend-item js-state-legend-item" data-state="{{state}}" style="border-color: {{state_color}};">
+        {{state}}</span>{% endfor %}<span class="legend-item legend-item--no-border js-state-legend-item" data-state="no_status" style="border-color:white;">no_status</span>
     </div>
-    <div style="clear:both;"></div>
   </div>
   <div id="error" style="display: none; margin-top: 10px;" class="alert alert-danger" role="alert">
     <span class="material-icons" aria-hidden="true">error</span>
@@ -306,11 +302,11 @@
       d3.selectAll("text").attr("class", "blur");
       {% endif %}
 
-      d3.selectAll("div.legend_item.state")
+      d3.selectAll('.js-state-legend-item')
           .style("cursor", "pointer")
           .on("mouseover", function(){
               if(!stateIsSet()){
-                  state = d3.select(this).text();
+                  state = $(this).data('state');
                   focusState(state);
               }
           })
@@ -320,16 +316,15 @@
               }
           });
 
-      d3.selectAll("div.legend_item.state")
+      d3.selectAll('.js-state-legend-item')
           .on("click", function(){
-              state = d3.select(this).text();
+              state = $(this).data('state');
               color = d3.select(this).style("border-color");
 
               if (!stateFocusMap[state]){
                   clearFocus();
                   focusState(state, this, color);
                   setFocusMap(state);
-
               } else {
                   clearFocus();
                   setFocusMap();
@@ -427,7 +422,7 @@
           d3.select("g.edgePaths")
               .transition().duration(duration)
               .style("opacity", 1);
-          d3.selectAll("div.legend_item.state")
+          d3.selectAll('.js-state-legend-item')
               .style("background-color", null);
       }
 

airflow/www/templates/airflow/tree.html

@@ -60,19 +60,19 @@
       </form>
     </div>
   </div>
-  <div>
-    <div class="legend_item" style="border: 0;">no_status</div>
-    <div class="square" style="background: #fff;"></div>
-    {% for state, state_color in state_color_mapping.items() %}
-      <div class="legend_item" style="border: 0;">{{state}}</div>
-      <div class="square" style="background: {{state_color}};"></div>
-    {% endfor %}
-
-    {% for op in operators %}
-      <div class="legend_circle" style="background:{{ op.ui_color }};"></div>
-      <div class="legend_item" style="float:left;border-color:#fff;">{{ op.task_type }}</div>
-    {% endfor %}
-    <div style="clear:both;"></div>
+  <div class="legend-row">
+    <div>
+      {% for op in operators %}<span class="legend-item legend-item--no-border">
+        <span class="legend-item__swatch legend-item__swatch--circle" style="background: {{ op.ui_color }};"></span>
+        {{ op.task_type }}
+      </span>{% endfor %}
+    </div>
+    <div>
+      {% for state, state_color in state_color_mapping.items() %}<span class="legend-item legend-item--no-border">
+        <span class="legend-item__swatch legend-item__swatch--no-border" style="background: {{ state_color }};"></span>
+        {{state}}</span>{% endfor %}<span class="legend-item legend-item--no-border">
+        <span class="legend-item__swatch"></span>no_status</span>
+    </div>
   </div>
   <hr>
   <div id="svg_container">
@@ -341,8 +341,8 @@
           })
           .attr("class", function(d) {return "state " + d.state})
           .attr("data-toggle", "tooltip")
-          .attr("rx", function(d) {return is_dag_run(d)? "5": "0"})
-          .attr("ry", function(d) {return is_dag_run(d)? "5": "0"})
+          .attr("rx", function(d) {return is_dag_run(d)? "5": "1"})
+          .attr("ry", function(d) {return is_dag_run(d)? "5": "1"})
           .style("shape-rendering", function(d) {return is_dag_run(d)? "auto": "crispEdges"})
           .style("stroke-width", function(d) {return is_dag_run(d)? "2": "1"})
           .style("stroke-opacity", function(d) {return d.external_trigger ? "0": "1"})