-
Notifications
You must be signed in to change notification settings - Fork 4
/
honegumi.html.jinja
186 lines (171 loc) · 7.54 KB
/
honegumi.html.jinja
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html>
<head>
<title>Interactive Grid Example</title>
</style>
<link rel="stylesheet" href="_static/prism/prism.css">
<link rel="stylesheet" href="_static/honegumi_style.css">
</head>
<body onload="updateText()">
<script>
var optionRows = {{ jinja_option_rows|tojson }};
// E.g.,
// var optionRows = [
// { "name": "row1", "options": ["A", "B"] },
// { "name": "row2", "options": ["C", "D", "E"] },
// { "name": "row3", "options": ["F", "G"] }
// ];
var scriptLookup = {{ script_lookup|tojson }};
// E.g.,
// var lookup = {
// "A,C,F": "ACF",
// "A,C,G": "INVALID",
// "A,D,F": "ADF",
// "A,D,G": "ADG",
// "A,E,F": "AEF",
// "A,E,G": "AEG",
// "B,C,F": "BCF",
// "B,C,G": "BCG",
// "B,D,F": "INVALID",
// "B,D,G": "BDG",
// "B,E,F": "INVALID",
// "B,E,G": "BEG"
// };
var preambleLookup = {{ preamble_lookup|tojson }};
var invalidConfigs = {{ invalid_configs|tojson }};
// E.g.,
// var invalidConfigs = [
// ["B", "D", "F"],
// ["B", "E", "F"],
// ["A", "C", "G"]
// ];
</script>
<form onsubmit="return false;">
<div class="title-block">
<div class="row align-items-center">
<img src="_static/logo.png" alt="Logo" style="height: 2em; margin-right: 1em; vertical-align: middle;">
<h2 style="margin-bottom: 0;">Honegumi</h2>
</div>
</div>
{% for row in jinja_option_rows %}
<div class="row">
<label class="row-label">{{row.name}}:</label>
{% for option in row.options %}
<input type="radio" id="{{ row.name }}-{{ option }}" name="{{ row.name }}" value="{{ option }}"{% if
option==row.options[0] %} checked{% endif %} onclick="updateText()">
<label class="row-option" for="{{ row.name }}-{{ option }}">{{ option }}</label>
{% endfor %}
<div class="tooltip-icon">ⓘ
<span class="tooltip-text arrow">{{row.tooltip}}</span>
</div>
</div>
{% endfor %}
<div class="row align-items-end">
<p id="preamble"></p>
</div>
<div class="row">
<div class="highlight highlight-python notranslate">
<pre class="language-python" style="width: 102ch; overflow: auto; font-size: 12px;">
<code id="text" style="border: none;"></code>
</pre>
</div>
</div>
</form>
<script>
function updateText() {
var rows = document.querySelectorAll('input[type="radio"]:checked');
// Remove strikethrough formatting from all labels except for the selected radio button's label
// While not strictly necessary, it prevents a possible "disappear/appear" effect
var labels = document.querySelectorAll('label');
labels.forEach(function (label) {
if (label.htmlFor !== rows.id) {
label.innerHTML = label.textContent;
}
});
var key = Array.from(rows, function (row) { return row.value; }).join(',');
var rendered = scriptLookup[key];
var preamble = preambleLookup[key];
// Update the GitHub link
document.getElementById("preamble").innerHTML = preamble
document.getElementById("text").innerHTML = "\n" + rendered;
var currentConfig = Array.from(rows, function (row) { return row.value; });
// Generate all possible configurations that deviate exactly by one option from the current configuration
var possibleDeviatingConfigs = [];
for (var i = 0; i < optionRows.length; i++) {
var options = optionRows[i]['options'];
for (var j = 0; j < options.length; j++) {
var option = options[j];
var deviation = currentConfig.slice();
deviation[i] = option;
// Skip the configuration if it's the same as the current configuration
if (JSON.stringify(deviation) !== JSON.stringify(currentConfig)) {
possibleDeviatingConfigs.push(deviation);
}
}
}
// Remove duplicates
possibleDeviatingConfigs = possibleDeviatingConfigs.filter(function (config, index) {
return possibleDeviatingConfigs.indexOf(config) === index;
});
// Find the invalid configurations that match the deviating configurations
var deviatingConfigs = [];
for (var i = 0; i < invalidConfigs.length; i++) {
var config = invalidConfigs[i];
if (possibleDeviatingConfigs.some(function (deviation) {
return deviation.every(function (value, index) {
return value === config[index];
});
})) {
deviatingConfigs.push(config);
}
}
// Track the one option that was the deviation for each deviating config
var deviatingOptions = deviatingConfigs.map(function (config) {
var deviatingIndex = config.findIndex(function (value, index) {
return value !== currentConfig[index];
});
return optionRows[deviatingIndex]['name'] + '-' + config[deviatingIndex];
});
// Check if the current configuration is invalid
var isInvalid = invalidConfigs.some(function (config) {
return config.every(function (value, index) {
return value === currentConfig[index];
});
});
// If the current configuration is invalid, add all selected options to the list of deviatingOptions
if (isInvalid) {
var currentConfigWithName = currentConfig.map(function (value, index) {
return optionRows[index]['name'] + '-' + value;
});
deviatingOptions = deviatingOptions.concat(currentConfigWithName);
}
// Logging (OK to comment out)
console.group('Current Config');
console.table(currentConfig);
console.group('Deviations');
console.group('Possible Deviating Configs');
console.table(possibleDeviatingConfigs);
console.groupEnd();
console.group('Deviating Configs');
console.table(deviatingConfigs);
console.groupEnd();
console.group('Deviating Options');
console.table(deviatingOptions);
console.groupEnd();
console.groupEnd();
// Add strikethrough for each deviating option
deviatingOptions.forEach(function (option) {
var label = document.querySelector('label[for="' + option + '"]');
if (label) {
label.innerHTML = '<s>' + label.innerHTML + '</s>';
}
});
Prism.highlightAll();
}
</script>
<script src="_static/prism/prism.js"></script>
</body>
</html>
<!-- // Generate all possible configurations that deviate by zero or one option from the current configuration
// start with current config
var possibleDeviatingConfigs = [currentConfig.slice()]; -->