Configuration Viewer Tool: Progress Report 2

Configuration viewer development continues full steam, powered by my weekly caffeine hit.

Data Persistence

The config viewer now persists data through both refreshes and application shutdowns. This ended up being fairly easy to implement thanks to an electron specific library: electron-store.

After npm installing and requiring the library, it was as simple as setting key/values using set and retrieving them later on using get.

Currently the only thing persisted is the configuration file itself. I could persist whether certain parts of the view are shown or not, but for now I’m satisfied with not having to drag a file in each time I refresh the application to see development changes.

Field Info View

I’ve added a pop-out view for users to get some filtered information about the field they clicked on. For now, it has two very simple pieces of information about where a field is stored, as well as how it’s used when a client sends a request to create a new record.

To display the pop-out I’m directly manipulating the classes on particular elements in order to show or hide the info view.

To get the information itself I decided to use the event system to communicate between the main process and the renderer process for the currently displayed page. Basically when a user clicks a field the renderer process sends an event over to the main process requesting that it sends certain information about the fields. The main process then asynchronously replies with another event, which the renderer uses to trigger the information to be displayed.

user_click -> renderer -> main -> renderer -> DOM

Raw Field View

Displaying raw JSON ended up being a bigger time sink than I expected, as I forgot something vital: HTML doesn’t care about white space in a string.

Early on I figured out I could easily use JSON.stringify to pretty-print some JSON, but I was unable to get the JSON to display as anything but a single line of awful, unreadable information. All of my googling suggested that I was doing it correctly.

After realising my error, I started using more appropriate search terms

HTML pretty print JSON

which led me to the solution I implemented. It turns out if you have a code tag inside a pre tag, white space around pretty-printed JSON will be maintained when rendered.

Next Steps

The amount of DOM manipulation that I’m doing feels a little bit gross. I’m purposefully avoiding displaying too much information right now because of the tedium of creating new DOM elements in JavaScript and populating text within them.

// This is gross
p.appendChild(text);
newEle.appendChild(p);
newEle.setAttribute("data-field", fieldJSON.schema.id);
document.getElementById("field-view").appendChild(newEle);

So before I go any further I want to look into putting some kind of component/template library into place, to handle the display of various bits of the application’s markup.

This should result in some better separation of application logic and display markup.

I know you can put react into an electron app, but I’m not sure if I want to do that, so I’ll be looking into alternatives first.