ATLAS-2594: UI, Tag propagation : Add dialog box for blocked Propagated classifications list on UI

dashboardv2/public/css/scss/override.scss

@@ -430,3 +430,6 @@ div.columnmanager-dropdown-container {
 .fa-color {
     color: $color_keppel_approx
 }
+.w30{
+    width: 30% !important;
+}
\ No newline at end of file

dashboardv2/public/css/scss/theme.scss

@@ -137,14 +137,17 @@ header {
 
 a {
     color: $color_jungle_green_approx;
+    cursor: pointer;
     &:focus {
         color: $color_puerto_rico_approx;
         text-decoration: none;
         outline: none;
+        cursor: pointer;
     }
     &:hover {
         color: $color_puerto_rico_approx;
         text-decoration: none;
+        cursor: pointer;
     }
 }
 

dashboardv2/public/js/templates/graph/PropagationPropertyModalView_tmpl.html

@@ -15,6 +15,20 @@
  * limitations under the License.
 -->
 <div class="lineage-edge-details" data-id="PropagationToolTip">
+    <div class="col-sm-12">
+        <div class="row">
+            <div class="col-sm-9" style="margin-top: 5px;">
+                <span class="pull-left">Propagation flow</span>
+                <label class="switch pull-left">
+                    <input type="checkbox" class="switch-input" name="editPropagationType" value="text">
+                    <span class="switch-slider"></span>
+                </label>
+                <span class="pull-left">Block propagation</span>
+            </div>
+        </div>
+        <hr style="margin-top: 0px;">
+    </div>
+    <div class="editPropagation col-sm-12">
         <h4 class="title"><span data-id="edgeDetailName"></span></h4>
         <div class="overlay show">
             <div class="fontLoader show">
@@ -49,4 +63,6 @@
                 </li>
             </ul>
         </div>
+    </div>
+    <div data-id="PropagatedClassificationTable" class="propagatedClassificationTable col-sm-12" style="display: none"></div>
 </div>
\ No newline at end of file

dashboardv2/public/js/views/detail_page/DetailPageLayoutView.js

@@ -242,6 +242,7 @@ define(['require',
                         this.renderLineageLayoutView({
                             guid: this.id,
                             entityDefCollection: this.entityDefCollection,
+                            fetchCollection: this.fetchCollection.bind(this),
                             actionCallBack: function() {
                                 that.$('#expand_collapse_panel').click();
                             }

dashboardv2/public/js/views/graph/LineageLayoutView.js

@@ -56,7 +56,7 @@ define(['require',
              * @constructs
              */
             initialize: function(options) {
-                _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack'));
+                _.extend(this, _.pick(options, 'guid', 'entityDefCollection', 'actionCallBack', 'fetchCollection'));
                 this.collection = new VLineageList();
                 this.lineageData = null;
                 this.typeMap = {};
@@ -68,6 +68,9 @@ define(['require',
                 var that = this;
                 this.$('.fontLoader').show();
                 this.fetchGraphData();
+                if (platform.name === "IE") {
+                    this.$('svg').css('opacity', '0');
+                }
                 if (this.layoutRendered) {
                     this.layoutRendered();
                 }
@@ -180,6 +183,14 @@ define(['require',
                     });
                 }
             },
+            toggleInformationSlider: function(options) {
+                if (options.open && !this.$('.lineage-edge-details').hasClass("open")) {
+                    this.$('.lineage-edge-details').addClass('open');
+                } else if (options.close && this.$('.lineage-edge-details').hasClass("open")) {
+                    d3.selectAll('circle').attr("stroke", "none");
+                    this.$('.lineage-edge-details').removeClass('open');
+                }
+            },
             setGraphZoomPositionCal: function(argument) {
                 var initialScale = 1.2,
                     svgEl = this.$('svg'),
@@ -371,6 +382,9 @@ define(['require',
 
                 svg.call(zoom)
                     .call(tooltip);
+                if (platform.name !== "IE") {
+                    this.$('.fontLoader').hide();
+                }
                 render(svgGroup, this.g);
                 svg.on("dblclick.zoom", null)
                     .on("wheel.zoom", null);
@@ -429,7 +443,8 @@ define(['require',
                             edgeInfo: data,
                             relationshipId: relationshipId,
                             lineageData: that.lineageData,
-                            apiGuid: that.apiGuid
+                            apiGuid: that.apiGuid,
+                            detailPageFetchCollection: that.fetchCollection
                         });
                     });
                 })
@@ -446,6 +461,23 @@ define(['require',
                 this.setGraphZoomPositionCal();
                 zoom.event(svg);
                 //svg.attr('height', this.g.graph().height * initialScale + 40);
+                if (platform.name === "IE") {
+                    this.IEGraphRenderDone = 0;
+                    this.$('svg .edgePath').each(function(argument) {
+                        var childNode = $(this).find('marker');
+                        $(this).find('marker').remove();
+                        var eleRef = this;
+                        ++that.IEGraphRenderDone;
+                        setTimeout(function(argument) {
+                            $(eleRef).find('defs').append(childNode);
+                            --that.IEGraphRenderDone;
+                            if (that.IEGraphRenderDone === 0) {
+                                this.$('.fontLoader').hide();
+                                this.$('svg').fadeTo(1000, 1)
+                            }
+                        }, 1000);
+                    });
+                }
             }
         });
     return LineageLayoutView;