I’ve experimented some hard time this week to conciliate both the end of my courses (exams and school work) and GSoC. A week without coding, just looking for some tools to inspire myself and chose what tool to integrate for the next functionnality: a new hexdump. So, I’ve decided to write a small article to speak about the implementation of the DataTable plugin and the fixes I’ve made on the same period.

How to sort a table?

First of all, why the DataTable plugin? I was looking for a way to sort columns easily, I saw several options, but this one was promising. Only one dependency: jQuery, and an integration with the UI framework material design lite. So, I’ve made some tests out of nothing like this one. Seems great and easy to implement. But, we are in the beautiful world of sandboxed experimentations. I’ve experienced some troubles when I first integrated it directly and then through bower.

Currently, the rendering is not extraordinary and I expect to find why I can’t have a full integration with the current design like the CodePen example. The principle of the DataTable is currently working inside one table, we can filter the content, navigate through pages (better than scroll), configure how many item we want to see on each page and, the most awaited, the capacity to sort columns.

I want to solve this problem before propagate this behavior on all existing table on this UI.

Refactoring the way tables are built

As I started to implement the tables, I saw that tables were handled by a couple of functions that wouldn’t be compatible with the DataTable plugin approach. So, I’ve decided to refactor this part with a dedicated class that would be able to wrap the building, based on DOM manipulation rather than the innerHTML way and to make possible the wiring with the DataTable plugin.

So now, instead of:

var body = uiTableBegin(['+Flags', 'Flagspace']);

// for (...)
    body += uiTableRow([...]);

body += uiTableEnd();
document.getElementById('container').innerHTML += body;

We do:

var table = new Table(
    ['+Flags', 'Flagspace'], // Headers
    [false, true], // Field is literal
    'flagTable'); // Id name, undefined will disable the DataTable plugin

// for (...)
    table.addRow([...]);

table.insertInto(document.getElementById('container'));

The logic is the same, I’ll think to improve the initialization to make it more accessible and remove the starting + imported from the previous way.

I think this way is more maintainable since it adds more modularity. I think I will slowly rewrite, part by part as a background task, the code base which is related to the Material UI. Maybe with ECMA6/TypeScript and WebPack could be interesting, but one step at a time…

Small fixes

I’ll just pass through the fixes I’ve made about the left drawer, the font, the network error handling and the integration of the statusbar.

So, I’ve made a fix about the left-drawer and it’s behavior in small screens. As expected, this drawer is popped when asked but, when a click was made on one of the item of the menu, the action is triggered but the drawer is still open. Not so interesting, I’ve corrected this behavior easily:

document.querySelector('.mdl-layout__drawer').addEventListener('click', function () {
    document.querySelector('.mdl-layout__obfuscator').classList.remove('is-visible');
    this.classList.remove('is-visible');
}, false);

This event on the drawer is just hiding both obfuscation and drawer when clicked.

The next issue was related about the monospaced font, the current one was not so easy to read. I’ve replaced it to one more regular. This led me to think to the configurability of the UI and the way we handle the CSS. Maybe we should include a preprocessor like SASS. About the configurability, the user configuration panel will be available soon.

After this font issue, I’ve worked on the behavior when the connection is interrupted between the UI and the r2 process. The logic was to add a callback when an error happen. After some struggle with the difference of the connection status between Chrome and Firefox who was failing in two different way, I’ve finally came with the same UI behavior.

I was interested to use the dialog component to show the error, but the integration is currently very partial. I’ve decided to use the dialog-polyfill to ensure the implementation whatever browser is used. Currently, if the connection is interrupted, you will have a dialog to inform you about the current state and it’ll let you try to recover from this error or to continue.

Then, I’ve solved an issue with the statusbar to make it compatible with the Material UI and define a proper behavior: open it up when clicked and let only one line visible in other cases.

I will restart progressively, last big work to be done for tuesday and then: full time! I enjoy a lot this GSoC, I’m starting to see better where I’m going with this UI and there is a lot of challenging things to discover!