Implementation Focus: Pattern Insight

By YUI TeamDecember 4, 2009

Erik Hinterbichler of Pattern Insight.Erik Hinterbichler (@ehinter)is the lead user interface designer/engineer for Pattern Insight, a technology startup based in Mountain View, CA. Erik is responsible for the UI and the usability of Pattern Insight's products. He creates UI mockups and helps develop the web frontend for Pattern Insight's flagship products, Code Insight and Log Insight. Erik has a graduate degree in HCI from the University of Illinois at Urbana-Champaign, the university from which Pattern Insight was originally founded. He also holds a B.A. in Computer Science and Math from Dartmouth College.

About Pattern Insight

Pattern Insight provides powerful solutions to index, search, and analyze semi-structured data. By "semi-structured" we mean any type of system data — code, logs, scripts, and more.

Currently we have two major software suites: "Code Insight" and "Log Insight."

Code Insight provides several unique capabilities for analyzing source code. At its core is a lightning-fast fuzzy snippet search which scales to billions of lines of code. With snippet search, you can paste in a snippet of code and find all similar snippets across your entire code base, even tolerating variable name changes or line insertions/deletions. Built on top of this fuzzy search capability is Patch Miner, an application for locating buggy code that needs to be fixed. You can input a bug fix and Patch Miner will find all other locations where that bug fix should be applied. Finally, we have Pattern Miner, a copy-paste and duplication detector. Pattern Miner can help you refactor your code base by automatically finding duplicated code, even when variable names have changed. It can also detect IP leaks across different codebases; e.g., if you use both open source and proprietary code and want to prevent code from flowing between them.

Log Insight is our next-generation log search and analysis product. Log Insight can index TBs of system data and provide sub-second performance for complicated search queries. Furthermore, it enables the creation of persistent signatures that can be used to scan new or archived data for instant matches. Log Insight can also automatically extract common patterns (e.g. for failures) that can then be codified as signatures back to the Pattern Insight engine.

The Importance of UI

We recognize that possessing great underlying technology is not enough to create a successful product. A good UI is absolutely essential if we want users to be able to see the value of our technology and take full advantage of it. Thus the requirements for our user interfaces drive much of the development of our backend technology.

As one example, a product like Patch Miner is heavily dependent on the UI to shape it. At its highest level, Patch Miner is a fairly abstract concept: "find all the places where a bug fix needs to be applied in my code base." Turning this into a concrete UI provides quite a few unique design challenges. For instance, what exactly is a "bug fix" and what is the best way for a user to input it? And once Patch Miner has found a bug somewhere else, what's the best way to present the result to the user? Solving these user experience problems has provided the road map for the development of the core Patch Miner application.

Using YUI at Pattern Insight

The UIs for Code Insight and Log Insight are fully web-based, and we are using YUI heavily to improve user experience. When we were initially trying to decide which JS framework to use, there were two things that sold us on YUI: the extensive documentation and the wide variety of ready-made components and widgets. We ended up making use of almost all of them: animation, autocomplete, button, calendar, connection manager, container, cookie, datasource, history, JSON, slider, tabview, treeview, loader, logger, test, and CSS base/reset/fonts/grids.

Maintaining High Performance in a Rich Application

Our main strategy in keeping our rich applications performant has been to develop our own web services API which we use to load data on-demand as much as possible. The built-in support for on-demand loading in YUI widgets like treeview has made this much easier for us. We also made the decision to stop supporting IE 6. This has enabled us to use much more sophisticated Javascript that modern browsers can handle but IE 6 can't.

Most Interesting YUI Implementation Features

We've developed quite a few of our own custom widgets, including a multi-select list with filtering capability and an auto-resizing textbox that grows and shrinks based on user input. Things like auto-resizing might seem minor, but I think most users would agree that small things like this are often the difference between pain and joy when using an interface.

Additionally, purely from a development perspective, our use of the YUI loader makes it very easy to quickly write new pages. We can effortlessly drop in anything we want on a given page, either standard YUI widgets or our own. Essentially, at the top of each page we just need to call our own "loadModules" function and give it the list of components we want to use, plus a callback function:

YAHOO.PI.loadModules(['treeview', 'PI.SelectableList'], function() { …

We are still using YUI 2, but this works similarly to the new YUI().use function in YUI 3.

What's Next?

We are currently hard at work on Code Insight 1.6, our next major release, which will come with some impressive improvements to Patch Miner. We are also actively developing the next version of Log Insight, which will include a brand new, highly sophisticated UI. Among the new features are a web-based signature editor with live syntax highlighting, autocompletion, and error checking.

If you're interested in learning more about us, you can read about our products and check out some videos at our website: Also, feel free to email us at