Release 0.5 – Database as a service

Over the past few weeks, I learned a lot outside of my existing knowledge of relational databases like Oracle, MySql, PostgreSQL, etc. I decided to work on Open Source project Dejavu which is a Web UI for elasticsearch allowing users to get a visual representation of data as well as import data from JSON and CSV files into their databases or documents. The project is created by a company called Appbase.io which offers a NoSQL database as a service in the cloud. Dejavu is just one of many software applications offered when you sign up with Appbase.io. So far my experience with the developers has been great and I already successfully fixed two issues and had the pull requests merged.

The first issue was fairly interesting. Basically, when you are applying filters to data in dejavu the drop-down UI doesn’t go away after it has been applied. rr2Dejavu is written in ReactJs so I had to learn my way around and code read for an hour or so just to get the gist of the code structure and how it is applied in the browser. I found it really interesting how you can set object states in React and also creates tags that act as HTML components. For example, the dropdown is coded as it’s own tag which in itself is a composition of HTML/CSS to make that dropdown. This makes it convenient because you can simply write <dropdown> instead of all the HTML that makes up the dropdown for the project. To tackle this bug I initially started playing around with the state of the dropdown and creating my own custom state to check if the dropdown has been hidden or not. The main problem I was having with this is that all the dropdowns are rendered when the DOM is loaded so changing the state of dropdown to hidden or shown would make all of them hidden or shown which created a problem. Luckily within the time, I was fixing this bug a developer for dejavu replied to the issue saying that he too encountered a similar issue and that a simple fix was to simulate a click outside of the dropdown thus closing it.

rr1

As a result, I implemented divyanshu’s suggestion:

applyFilter = () => {
    if (this.state.filterField != null && this.state.filterValue != null && this.state.filterValue != '') {
        this.props.filterInfo.applyFilter(this.props.type, this.props.columnField, this.state.filterField, this.state.filterValue, this.props.analyzed);
        document.body.click();
    }
};

The code above shows the function “applyFilter” that is called when the user clicks apply on the dropdown by adding document.body.click(); at the end of this function, the dropdown is automatically closed without user interaction. After verifying and testing the solution I submitted a pull request which got merged faster than expected.

Since fixing this issue went so smoothly I decided to take up another for this release. The second issue was with the export UI modal being closed when clicking outside of the modal on the overlay. rr3.gif

I found this issue to be a just as interesting as the first for I have dealt with similar issues in my personal projects that use an overlay with a div. Now knowing how the project is structured I immediately found where the issue was occurring and started debugging. Dejavu’s project file has the best naming and structure that I’ve seen in an open source project and appropriately the code for handling exported JSON has contained in “ExportJson.js.” While debugging I found that the close function which closes the export modal was called in a very general way which essentially made it close the modal if anywhere in the div was clicked which unfortunately, in this case, means the overlay as well. To fix this I got to play with the one thing I wanted to in React which is state! I was so excited to apply a state fix to this issue and I did so by creating a boolean state called “exportClose.” I used jQueries click() function in conjunction with the state “exportClose” to only set it to true when the “x” button is pressed on the export modal (whose class is appropriately called “.close”). Then if the exportClose state is set to true we close the exportModal which changes another state called “showModal” to false.

close = () => {
    var thisRef = this;
    $(".close").click(function(e) {
        thisRef.state.exportClose = true;
    });

    if(this.state.exportClose) {
        this.setState({
            showModal: false
        });
    }
};

In contrast to the close function, the open() function has “exportClose” being set back to false when the export modal is reopened by the user. After some testing and fine tuning this ended up being the final solution for the issue and I submitted a pull request with my code. To my surprise yet again the pull request got merged within no time and I successfully had two bug fixes completed for a project I didn’t really think I could get any in initially. Overall I hope to continue working on dejavu as well as explore the other data based projects that Appbase.io offers. It has been a great time learning new approaches to data storage and querying as well as playing around with ReactJS!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s