We are working on an MVP prototype app for our startup. We need a jQuery/AJAX rockstar to quickly build one of the app's views, which will allow the user to display, filter, and edit "annotations" on a document.
See below for details. It should take about 2 weeks to build for an experienced full-time developer. We are less concerned with CSS than with getting the jQuery code so that we can later customize the view ourselves.
The view consists of 3 components: the document, filters, and the annotations editor.
A document is represented as XML and has a number of "annotations" on it in the form of tags. Each annotation has at least 2 pieces of metadata: the name of the annotation type (i.e., the tag name), and the name of the annotation category (a string). There may be other pieces of metadata on it as well (dates, numbers, strings). Also, each document has special annotations for text tokens and whitespace tokens, for formatting the doc.
Besides the document, the other part of this view is a series of collapsible filters. A filter is basically just one or more input elements which, when activated, will highlight annotations that match the filter. The input elements allow the user to specify conditions that annotations must match in order to be highlighted. For example, the simplest input element for a filter would be a checkbox. The checkbox, when selected, would cause all annotations of a certain category or type, and optionally with some combination of metadata values, to be highlighted in the doc. In the case of a checkbox, the user can only turn the filter on or off - the match condition is specified completely programmatically. A more user-configurable example of a filter would be a radio button, a date picker or a date or number range specifier that allowed the user to configure the match condition on the metadata.
More than building the filters themselves, we need you to build a flexible, easy-to-use API for these filters. What we mean by that is, the filter’s match condition must be programmatically configurable, either (ideally) through function args or alternatively a function to which an annotation, its metadata, and any data the user supplies through the input elements, can be passed, returning true if the filter fires. We need you to build the API for these filters and provide a few example uses to that we can create new filters of our own.
The conditions we imagine needing to use for these filters are:
Tag is a certain value (i.e. annotation type)
Some piece of metadata (“Category” or something else) is:
a certain value (could be numbers, dates, strings)
in some discrete set of values (could be numbers, dates, strings)
in some range of values (dates or numbers)
A boolean combination of the above conditions
This view can also go into edit mode and allow the user to edit annotations. In edit mode, the user can click on an annotation and delete it, change its borders, or edit its metadata. The user can also create a new annotation by clicking and dragging to highlight a region of text, which brings up a popup that allows them to choose the new annotation’s type and set any required metadata. We need an API for the popup that comes up in “new annotation” and “edit annotation” modes as well, similar to the filters API, which will allow us to programmatically specify which how the input elements determine metadata values on the new or edited annotations. (See the mocks for more details.)