Skip to content

Commit 4c926ca

Browse files
author
Jessica Shi
committed
add format names column
1 parent a4fac1d commit 4c926ca

File tree

3 files changed

+163
-67
lines changed

3 files changed

+163
-67
lines changed

‎codegen.html‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -79,42 +79,18 @@ <h6 style="margin-bottom: 0px; margin-top: 18px">Input a tensor algebra expressi
7979
<table class="mdl-data-table mdl-js-data-table" style="width: 100%; margin-bottom: 8px">
8080
<thead>
8181
<tr>
82-
<th class="mdl-data-table__cell--non-numeric" width="100"><div align="center" style="position:relative; top:-1px"><big>Tensor</big></div></th>
83-
<th class="mdl-data-table__cell--non-numeric" style="padding-left: 7px">
82+
<th class="mdl-data-table__cell--non-numeric" width="100"><div align="center" style="position:relative"><big>Tensor</big></div></th>
83+
<th class="mdl-data-table__cell--non-numeric" width="160px"
84+
style="padding-left: 0px">
8485
<div style="display:inline"><big>Format&nbsp;</big></div>
86+
</th>
87+
<th class="mdl-data-table__cell--non-numeric" style="padding-left: 7px">
88+
<div style="display:inline"><big>Level Formats&nbsp;</big></div>
8589
<div style="display:inline">(reorder dimensions by dragging the drop-down menus)</div>
8690
</th>
8791
</tr>
8892
</thead>
8993
<tbody id="listTensors">
90-
<!-- <tr>
91-
<td class="mdl-data-table__cell--non-numeric" width="100">
92-
<div align="center" style="font-size: 16px">y</div>
93-
</td>
94-
<td class="mdl-data-table__cell--non-numeric" style="padding: 0px">
95-
<ul id="dimsy" class="ui-state-default sortable">
96-
<li class="ui-state-default" style="width: 0px; padding: 0px"></li>
97-
<li id="dimy_0" class="ui-state-default">
98-
<div class="dropdown mdl-textfield mdl-js-textfield mdl-textfield--floating-label getmdl-select" style="cursor: move">
99-
<input class="mdl-textfield__input format-input" id="dimy_0_select" type="text" readonly value="Dense" data-val="d" data-toggle="dropdown"/>
100-
<label for="dimy_0_select"><i class="mdl-icon-toggle__label material-icons">keyboard_arrow_down</i></label>
101-
<label class="mdl-textfield__label" for="dimy_0_select">Dimension 1</label>
102-
<ul class="dropdown-menu">
103-
<li><a tabindex="-1" href="#">HTML</a></li>
104-
<li><a tabindex="-1" href="#">CSS</a></li>
105-
<li class="dropdown-submenu">
106-
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
107-
<ul class="dropdown-menu">
108-
<li><a href="#">3rd level dropdown</a></li>
109-
<li><a href="#">3rd level dropdown</a></li>
110-
</ul>
111-
</li>
112-
</ul>
113-
</div>
114-
</li>
115-
</ul>
116-
</td>
117-
</tr> -->
11894
</tbody>
11995
</table>
12096
</div>

‎javascripts/demo.js‎

Lines changed: 153 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -113,13 +113,17 @@ function demo() {
113113
};
114114

115115
var tblFormatsView = {
116-
cache: {},
116+
levelsCache: {},
117+
namesCache: {},
117118
timerEvent: null,
118119

119-
insertCacheEntry: function(tensor, format) {
120-
tblFormatsView.cache[tensor] = format;
120+
insertLevelsCacheEntry: function(tensor, level) {
121+
tblFormatsView.levelsCache[tensor] = level;
121122
},
122-
createCacheEntry: function(listId) {
123+
insertNamesCacheEntry: function(tensor, name) {
124+
tblFormatsView.namesCache[tensor] = name;
125+
},
126+
createEntryFromId: function(listId) {
123127
var dims = $("#" + listId).sortable("toArray");
124128
var formats = [];
125129
var ordering = [];
@@ -131,7 +135,60 @@ function demo() {
131135

132136
return { formats: formats, ordering: ordering };
133137
},
134-
getFormatString: function(desc) {
138+
createEntryFromName: function(name, order) {
139+
var rules = {
140+
"Dense": function(i) { return 'd'; },
141+
"Sparse": function(i) { return 's'; },
142+
"CSR": function(i) { return (i == 0) ? 'd' : 's'; },
143+
"COO": function(i) {
144+
if (i == 0) {
145+
return 'u';
146+
} else if (i < order - 1) {
147+
return 'c';
148+
} else {
149+
return 'q';
150+
}
151+
}
152+
};
153+
rules["DCSR"] = rules["CSF"] = rules["Sparse"];
154+
155+
var formats = [];
156+
var ordering = [];
157+
158+
var rule = rules[name];
159+
for (var i = 0; i < order; ++i) {
160+
formats.push(rule(i));
161+
ordering.push(i);
162+
}
163+
164+
return { formats: formats, ordering: ordering };
165+
},
166+
getFormatNamesList : function(order) {
167+
var names = ["Dense"];
168+
169+
if (order == 1) {
170+
names.push("Sparse");
171+
} else if (order == 2) {
172+
names.push("DCSR");
173+
names.push("CSR");
174+
names.push("COO");
175+
} else if (order >= 3) {
176+
names.push("CSF");
177+
names.push("COO");
178+
}
179+
return names;
180+
},
181+
getFormatName : function(currentEntry, order) {
182+
var names = tblFormatsView.getFormatNamesList(order);
183+
for (var name of names) {
184+
var entry = tblFormatsView.createEntryFromName(name, order);
185+
if (JSON.stringify(entry) == JSON.stringify(currentEntry)) {
186+
return name;
187+
}
188+
}
189+
return "Custom";
190+
},
191+
getLevelFormatString: function(desc) {
135192
switch (desc) {
136193
case 'd':
137194
return "Dense";
@@ -156,18 +213,49 @@ function demo() {
156213
var listTensorsBody = "";
157214
for (t in model.input.tensorOrders) {
158215
var order = model.input.tensorOrders[t];
159-
var cached = (tblFormatsView.cache.hasOwnProperty(t) &&
160-
tblFormatsView.cache[t].formats.length == order);
216+
var cached = (tblFormatsView.levelsCache.hasOwnProperty(t) &&
217+
tblFormatsView.levelsCache[t].formats.length == order);
161218

162219
if (order > 0) {
163220
var listId = "dims" + t;
221+
var formatNameId = "format" + t;
222+
var formatName = tblFormatsView.namesCache.hasOwnProperty(t) ?
223+
tblFormatsView.namesCache[t] : "Dense";
164224

165225
listTensorsBody += "<tr>";
166226
listTensorsBody += "<td class=\"mdl-data-table__cell--non-numeric\" ";
167227
listTensorsBody += "width=\"100\"><div align=\"center\" ";
168228
listTensorsBody += "style=\"font-size: 16px\">";
169229
listTensorsBody += t;
170230
listTensorsBody += "</div></td>";
231+
232+
listTensorsBody += "<td class=\"mdl-data-table__cell--non-numeric\" ";
233+
listTensorsBody += "style=\"padding: 0px\">";
234+
listTensorsBody += "<div class=\"dropdown mdl-textfield mdl-js-textfield ";
235+
listTensorsBody += "mdl-textfield--floating-label getmdl-select\" ";
236+
listTensorsBody += "style=\"width: 140px; cursor: move\">";
237+
listTensorsBody += "<input class=\"mdl-textfield__input ";
238+
listTensorsBody += "format-input\" data-toggle=\"dropdown\" id=\"";
239+
listTensorsBody += formatNameId;
240+
listTensorsBody += "\" type=\"text\" readonly ";
241+
listTensorsBody += "value=\"";
242+
listTensorsBody += formatName;
243+
listTensorsBody += "\"/>";
244+
listTensorsBody += "<label>";
245+
listTensorsBody += "<i class=\"mdl-icon-toggle__label ";
246+
listTensorsBody += "material-icons\">keyboard_arrow_down</i>";
247+
listTensorsBody += "</label>";
248+
listTensorsBody += "<ul class=\"formats dropdown-menu\" for=\"";
249+
listTensorsBody += formatNameId;
250+
listTensorsBody += "\">";
251+
252+
for (var name of tblFormatsView.getFormatNamesList(order)) {
253+
listTensorsBody += "<li><a id=\"";
254+
listTensorsBody += formatNameId + "_" + name + "\" >";
255+
listTensorsBody += name + "</a></li>";
256+
}
257+
listTensorsBody += "</div></td>";
258+
171259
listTensorsBody += "<td class=\"mdl-data-table__cell--non-numeric\" ";
172260
listTensorsBody += "style=\"padding: 0px\">";
173261
listTensorsBody += "<ul id=\"";
@@ -177,8 +265,8 @@ function demo() {
177265
listTensorsBody += "style=\"width: 0px; padding: 0px\"></li>";
178266

179267
for (var i = 0; i < order; ++i) {
180-
var dim = cached ? tblFormatsView.cache[t].ordering[i] : i;
181-
var format = cached ? tblFormatsView.cache[t].formats[i] : "d";
268+
var dim = cached ? tblFormatsView.levelsCache[t].ordering[i] : i;
269+
var level = cached ? tblFormatsView.levelsCache[t].formats[i] : "d";
182270
var id = "dim" + t + "_" + dim;
183271
var selectId = id + "_select";
184272

@@ -193,9 +281,9 @@ function demo() {
193281
listTensorsBody += selectId;
194282
listTensorsBody += "\" type=\"text\" readonly ";
195283
listTensorsBody += "value=\"";
196-
listTensorsBody += tblFormatsView.getFormatString(format);
284+
listTensorsBody += tblFormatsView.getLevelFormatString(level);
197285
listTensorsBody += "\" data-val=\"";
198-
listTensorsBody += format;
286+
listTensorsBody += level;
199287
listTensorsBody += "\"/>";
200288
listTensorsBody += "<label>";
201289
listTensorsBody += "<i class=\"mdl-icon-toggle__label ";
@@ -236,33 +324,45 @@ function demo() {
236324
getmdlSelect.init(".getmdl-select");
237325

238326
$(".sortable").sortable({
239-
update: function(ev, ui) {
240-
var listId = ui.item.parent().attr('id');
241-
}
327+
update: function(ev, ui) {
328+
var listId = ui.item.parent().attr('id');
329+
var id = ui.item.context.id;
330+
var tensor = id.substring(3, id.indexOf("_"));
331+
332+
var entry = tblFormatsView.createEntryFromId(listId);
333+
var name = tblFormatsView.getFormatName(entry, model.input.tensorOrders[tensor]);
334+
$("#format" + tensor).val(name);
335+
tblFormatsView.insertNamesCacheEntry(tensor, name);
336+
}
242337
});
243338

244339
function updateCache(selectParent, val) {
245340
var selectId = selectParent.attr('for');
246341
var listId = selectParent.parent().parent().parent().attr('id');
247342
var tensor = listId.replace("dims", "");
248343

249-
var format = tblFormatsView.getFormatString(val);
250-
format = format.replace("&not;", $("<div>").html("&not;").text());
344+
var level = tblFormatsView.getLevelFormatString(val);
345+
level = level.replace("&not;", $("<div>").html("&not;").text());
251346

252-
$("#" + selectId).val(format);
347+
$("#" + selectId).val(level);
253348
$("#" + selectId).attr('data-val', val);
254349

255-
tblFormatsView.insertCacheEntry(tensor,
256-
tblFormatsView.createCacheEntry(listId));
350+
var tensor = listId.substring(4);
351+
var entry = tblFormatsView.createEntryFromId(listId);
352+
var name = tblFormatsView.getFormatName(entry, model.input.tensorOrders[tensor]);
353+
354+
$("#format" + tensor).val(name);
355+
tblFormatsView.insertNamesCacheEntry(tensor, name);
356+
tblFormatsView.insertLevelsCacheEntry(tensor, entry);
257357

258358
model.cancelReq();
259359
model.setOutput("", "", "", "");
260360
}
261361

262362
for (t in model.input.tensorOrders) {
263363
if (model.input.tensorOrders[t] > 0) {
264-
tblFormatsView.insertCacheEntry(t,
265-
tblFormatsView.createCacheEntry("dims" + t));
364+
tblFormatsView.insertLevelsCacheEntry(t,
365+
tblFormatsView.createEntryFromId("dims" + t));
266366
}
267367
}
268368

@@ -290,6 +390,23 @@ function demo() {
290390
updateCache(selectParent, val);
291391
});
292392

393+
$(".formats a").each(function() {
394+
$(this).click(function() {
395+
var formatParent = $(this).parent().parent();
396+
var formatId = formatParent.attr('for');
397+
$("#" + formatId).val($(this).text());
398+
399+
var id = $(this).attr('id');
400+
var tensor = id.substring(6, id.indexOf("_"));
401+
var name = id.substring(id.indexOf("_") + 1);
402+
403+
tblFormatsView.insertLevelsCacheEntry(tensor,
404+
tblFormatsView.createEntryFromName(name, model.input.tensorOrders[tensor]));
405+
tblFormatsView.insertNamesCacheEntry(tensor, name);
406+
model.updateInputViews();
407+
});
408+
});
409+
293410
$("#tblFormats").show();
294411
} else {
295412
$("#tblFormats").hide();
@@ -410,34 +527,34 @@ function demo() {
410527
spmv: { name: "SpMV",
411528
code: "y(i) = A(i,j) * x(j)",
412529
formats: {
413-
y: { formats: ["d"], ordering: [0] },
414-
A: { formats: ["d", "s"], ordering: [0, 1] },
415-
x: { formats: ["d"], ordering: [0] }
530+
y: { name: "Dense", levels: { formats: ["d"], ordering: [0] } },
531+
A: { name: "CSR", levels: { formats: ["d", "s"], ordering: [0, 1] } },
532+
x: { name: "Dense", levels: { formats: ["d"], ordering: [0] } }
416533
}
417534
},
418535
add: { name: "Sparse matrix addition",
419536
code: "A(i,j) = B(i,j) + C(i,j)",
420537
formats: {
421-
A: { formats: ["d", "s"], ordering: [0, 1] },
422-
B: { formats: ["d", "s"], ordering: [0, 1] },
423-
C: { formats: ["d", "s"], ordering: [0, 1] },
538+
A: { name: "CSR", levels: { formats: ["d", "s"], ordering: [0, 1] } },
539+
B: { name: "CSR", levels: { formats: ["d", "s"], ordering: [0, 1] } },
540+
C: { name: "CSR", levels: { formats: ["d", "s"], ordering: [0, 1] } },
424541
}
425542
},
426543
ttv: { name: "Tensor-times-vector",
427544
code: "A(i,j) = B(i,j,k) * c(k)",
428545
formats: {
429-
A: { formats: ["s", "s"], ordering: [0, 1] },
430-
B: { formats: ["s", "s", "s"], ordering: [0, 1, 2] },
431-
c: { formats: ["d"], ordering: [0] },
546+
A: { name: "DCSR", levels: { formats: ["s", "s"], ordering: [0, 1] } },
547+
B: { name: "CSF", levels: { formats: ["s", "s", "s"], ordering: [0, 1, 2] } },
548+
c: { name: "Dense", levels: { formats: ["d"], ordering: [0] } },
432549
}
433550
},
434551
mttkrp: { name: "MTTKRP",
435552
code: "A(i,j) = B(i,k,l) * C(k,j) * D(l,j)",
436553
formats: {
437-
A: { formats: ["d", "d"], ordering: [0, 1] },
438-
B: { formats: ["s", "s", "s"], ordering: [0, 1, 2] },
439-
C: { formats: ["d", "d"], ordering: [0, 1] },
440-
D: { formats: ["d", "d"], ordering: [0, 1] },
554+
A: { name: "Dense", levels: { formats: ["d", "d"], ordering: [0, 1] } },
555+
B: { name: "CSF", levels: { formats: ["s", "s", "s"], ordering: [0, 1, 2] } },
556+
C: { name: "Dense", levels: { formats: ["d", "d"], ordering: [0, 1] } },
557+
D: { name: "Dense", levels: { formats: ["d", "d"], ordering: [0, 1] } },
441558
}
442559
}
443560
};
@@ -476,7 +593,8 @@ function demo() {
476593
var setExample = function() {
477594
$("#txtExpr").val(code);
478595
for (var tensor in formats) {
479-
tblFormatsView.insertCacheEntry(tensor, formats[tensor]);
596+
tblFormatsView.insertLevelsCacheEntry(tensor, formats[tensor].levels);
597+
tblFormatsView.insertNamesCacheEntry(tensor, formats[tensor].name);
480598
}
481599
model.setInput(code);
482600
};

‎stylesheets/dropdown.css‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@
66
padding-top: 0px;
77
}
88

9-
.sortable .dropdown li {
9+
.dropdown li {
10+
float: left;
11+
width: 140px;
1012
padding: 0;
1113
font-size: 16px;
1214
}
1315

14-
.sortable .dropdown li a {
16+
.dropdown li a {
1517
padding: 8px 16px;
1618
}
1719

0 commit comments

Comments
 (0)