Context

Security professionals often have to search through thousands, if not millions, of network event data to conduct their investigations. To help alleviate the burden of finding the most relevant information, we set out to build a query builder dedicated to this purpose.

My role

I was the lead front-end engineer for this project and the application. I worked closely with several designers and the lead back-end engineer to implement the editor.

Process

This project took several months to complete, starting with working alongside the designers to envision the query builder's interactions and design system. In this phase, I extensively prototyped various ideas and interactions on CodePen (example and example) to validate the designs.

Once we had a design direction, I switched into implementation mode by researching numerous architectures for this user interface and developing and testing all of the React components. In this phase, I worked closely with the lead back-end engineer to implement the query parser and design the communication protocols between the parser and the user interface.

Solution

I built a query builder editor that closely resembles your typical code editor with features like syntax highlighting and grammar checking. The editor also provides smart suggestions and a date-time selection helper to help new and experienced users formulate valid queries.

Outcome

The query builder editor is the most critical and successful feature in IBM Security Data Explorer. There is now a dedicated IBM Security team to transform the editor into a reusable React component with support for multiple querying languages.