Context

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

My role

I was the lead front-end engineer for this project and the application. On my team were several designers and the lead back-end engineer to help implement the editor.

Process

I started with working alongside the designers to envision the query builder's behavior and design system. In this phase, I extensively prototyped various ideas and interactions to validate the designs and gather user feedback.

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 using Antlr4, design the query string tokenization process, and build the suggestions engine.

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 based on sales numbers and user feedback. There is now a dedicated IBM Security team to transform the editor into a reusable React component with support for multiple querying languages.