@@ -224,49 +224,58 @@ <h1 class="text-xl font-bold mt-4 font-mono">
224224 </ p >
225225 </ div >
226226
227- < table class ="text-sm border-collapse border border-slate-700 " x-show ="currentFrameData ">
228- < thead >
229- < tr >
230- < th > </ th >
231- < template x-for ="(_, colIndex) in Array.from({length: columns.length}, (_, index) => index) ">
232- < th class ="border border-slate-700 ">
233- < div class ="flex gap-x-2 justify-between px-2 ">
234- < input type ="checkbox " :checked ="isColumnChecked(colIndex) "
235- @change ="toggleColumn(colIndex) ">
236- < p x-text ="`${columns[colIndex].key}` "> </ p >
237- </ div >
238- </ th >
239- </ template >
240- </ tr >
241- </ thead >
242- < tbody >
243- < template x-for ="(row, rowIndex) in rows ">
244- < tr class ="odd:bg-gray-800 even:bg-gray-900 ">
245- < td class ="border border-slate-700 ">
246- < div class ="flex gap-x-2 max-w-64 font-semibold px-1 break-all ">
247- < input type ="checkbox " :checked ="isRowChecked(rowIndex) "
248- @change ="toggleRow(rowIndex) ">
249- </ div >
250- </ td >
251- < template x-for ="(cell, colIndex) in row ">
252- < td x-show ="cell " class ="border border-slate-700 ">
253- < div class ="flex gap-x-2 justify-between px-2 " :class ="{ 'hidden': cell.isNull } ">
254- < div class ="flex gap-x-2 ">
255- < input type ="checkbox " x-model ="cell.checked " @change ="updateTableValues() ">
256- < span x-text ="`${!cell.isNull ? cell.label : null}` "> </ span >
257- </ div >
258- < span class ="w-14 text-right " x-text ="`${!cell.isNull ? (typeof cell.value === 'number' ? cell.value.toFixed(2) : cell.value) : null}` "
259- :style ="`color: ${cell.color}` "> </ span >
227+ < div >
228+ < table class ="text-sm border-collapse border border-slate-700 " x-show ="currentFrameData ">
229+ < thead >
230+ < tr >
231+ < th > </ th >
232+ < template x-for ="(_, colIndex) in Array.from({length: columns.length}, (_, index) => index) ">
233+ < th class ="border border-slate-700 ">
234+ < div class ="flex gap-x-2 justify-between px-2 ">
235+ < input type ="checkbox " :checked ="isColumnChecked(colIndex) "
236+ @change ="toggleColumn(colIndex) ">
237+ < p x-text ="`${columns[colIndex].key}` "> </ p >
260238 </ div >
261- </ td >
239+ </ th >
262240 </ template >
263241 </ tr >
264- </ template >
265- </ tbody >
266- </ table >
242+ </ thead >
243+ < tbody >
244+ < template x-for ="(row, rowIndex) in rows ">
245+ < tr class ="odd:bg-gray-800 even:bg-gray-900 ">
246+ < td class ="border border-slate-700 ">
247+ < div class ="flex gap-x-2 max-w-64 font-semibold px-1 break-all ">
248+ < input type ="checkbox " :checked ="isRowChecked(rowIndex) "
249+ @change ="toggleRow(rowIndex) ">
250+ </ div >
251+ </ td >
252+ < template x-for ="(cell, colIndex) in row ">
253+ < td x-show ="cell " class ="border border-slate-700 ">
254+ < div class ="flex gap-x-2 justify-between px-2 " :class ="{ 'hidden': cell.isNull } ">
255+ < div class ="flex gap-x-2 ">
256+ < input type ="checkbox " x-model ="cell.checked " @change ="updateTableValues() ">
257+ < span x-text ="`${!cell.isNull ? cell.label : null}` "> </ span >
258+ </ div >
259+ < span class ="w-14 text-right " x-text ="`${!cell.isNull ? (typeof cell.value === 'number' ? cell.value.toFixed(2) : cell.value) : null}` "
260+ :style ="`color: ${cell.color}` "> </ span >
261+ </ div >
262+ </ td >
263+ </ template >
264+ </ tr >
265+ </ template >
266+ </ tbody >
267+ </ table >
268+
269+ < div id ="labels " class ="hidden ">
270+ </ div >
267271
268- < div id ="labels " class ="hidden ">
272+ {% if ignored_columns|length > 0 %}
273+ < div class ="m-2 text-orange-700 max-w-96 ">
274+ Columns {{ ignored_columns }} are NOT shown since the visualizer currently does not support 2D or 3D data.
275+ </ div >
276+ {% endif %}
269277 </ div >
278+
270279 </ div >
271280 </ div >
272281
0 commit comments