Replace "Add new composite" row with icon

Author: jcha40

js/composite_table.js

@@ -3,27 +3,45 @@ const compositeTable = class {
         if (document.getElementById(elementID) === null) {
             throw "Element ID " + elementID + " not found"
         };
-        this.table = d3.select("#" + elementID).append("table").append("tbody");
-        this.rows = [];
-        this.nRows = 0;
         const self = this;
-        this.addRow_ = this.table.append("tr")
-            .attr("id", "add-row")
-            .append("td")
-                .attr("colspan", 11)
-                .append("div")
-                    .classed("add-row-text", true)
-                    .text("Add new composite")
-                    .on("click", function() {
-                        const compositeDataObj = dataObj.addCompositeData({idx: self.nRows});
-                        self.addRow(compositeDataObj)
-                    });
+
+        this.container = d3.select("#" + elementID)
+        this.addRowContainer = this.container.append("div")
+            .attr("id", "add-row");
+        this.addRowIcon = this.addRowContainer.append("svg")
+            .classed("add-row-icon", true)
+            .attr("title", "Add new composite")
+            .attr("xmlns", "http://www.w3.org/2000/svg")
+            .attr("viewbox", "0 0 185 30")
+            .attr("width", "185")
+            .attr("height", "30")
+            .on("click", function() {
+                const compositeDataObj = dataObj.addCompositeData({idx: self.nRows});
+                self.addRow(compositeDataObj)
+            });
+        this.addRowIcon.append("circle")
+            .attr("cx", 15)
+            .attr("cy", 15)
+            .attr("r", 15)
+            .attr("fill", "#468C00");
+        this.addRowIcon.append("path")
+            .attr("d", "m 15 5 l 0 20 M 5 15 l 20 0")
+            .attr("stroke", "#FFFFFF")
+            .attr("stroke-width", 4);
+        this.addRowIcon.append("text")
+            .attr("x", 40)
+            .attr("y", 21)
+            .attr("font-size", 16)
+            .text("Add new composite");
+        this.table = this.container.append("table").append("tbody");
+        this.rows = [];
+        this.nRows = 0
     }
 
     addRow(compositeDataObj) {
         // Add the row
         this.rows.push(new compositeRow(
-            this.table.insert("tr", "#add-row").classed("composite-row", true),
+            this.table.append("tr").classed("composite-row", true),
             this.nRows,
             compositeDataObj
         ));

style.css

@@ -187,15 +187,8 @@
 }
 
 #add-row {
-    cursor: pointer !important;
-}
-
-.add-row-text {
     padding-left: 10px;
-}
-
-#add-row div {
-    width: 100%;
+    padding-bottom: 5px;
 }
 
 .mouse-highlight {