# DocExEx

This is a user guide and overview of the DocEx annotation extension. This annotation serves the purpose of annotating html documents, and is specific for document extraction now, but can be extended to other tasks like list or table extraction.

## Installation

If you have this documentation, you should also have a compressed directory containing the extension. To install the extension you will need to decompress the directory and load an unpacked extension within the chrome tools. A video with installation and setup instructions is included as well.

To highlight the steps, they are enumerated below:
1. Make sure you have the directory with the extension available.
2. Inside of chrome, go to `chrome://extensions`
3. Select `Developer Mode` in the top right corner of the webpage.
4. Select `Load Unpacked` in the top left of the webpage. If this is not an option, reload the page and it should become available.
5. A modal with a file browser will pop up and select the directory containing the extension.
6. Click on the details of the DocExEx extension, and scroll to the extension options to save the two values provided to you:
a. Selector Server - This will be behind a VPN so make sure you are also connected to the VPN we provided you.
b. Selector Server Port - This will be something like `5001`.
7. Save the changes and open up an article, in the video we show CNN.
8. Click on the DocExEx menu button and you will see three options. Test that the extension is installed by selecting the `Toggle Menu`. Test that you are able to connect to the existing annotation model, by clicking on the `Tag with HTML` button. This should populate annotations as seen in the video.

## Usage

There are two main modes when using the Extension. A browse mode and an annotation mode.

### Browse Mode

By default the extension is in the Browse mode. This means that the webpage operates as expected with no other behavior. If there are already annotations, they will remain visible; if the annotation menu is present it is usable. In browse mode no annotations can change and all links operate.

In summary:

1. Webpage operates as expected.
2. No annotation changes.
3. View existing annotations.
4. Menu still usable and annotation mode can be switched on.

### Annotation Mode

The annotation mode modifies the webpage and allows you to hover over elements in the HTML page. To turn on annotation mode you can toggle the menu and select the annotate option at the top. You can pre-annotate using our existing model by clicking on the `Tag with HTML` button in the menu bar.

Inside of the menu, there are options for the label type and colors associated with the label. When you hover over an element that needs to be labeled you can click and it will highlight the html element in the selected color, and change the text that was selected to the color white. If you want to unselect a label, you can click on it and it will be removed. When you are in annotation mode, links are disabled so you will not be able to use links.

When you have completed the annotation, and have scrolled to the bottom of the page you will be able to create a file in the annotation menu. This will present a link, which downloads a file that has been annotated.

In summary:

1. On hover, elements change to a pink background.
2. To annotate select the label type in menu, and click on the element.
3. To undo annotation, with the same label type selected in the meny, click on the element. It will return to the unannotated form.
4. To save annotations, make sure you scroll to the bottom; The create file button will become active. Clicking create file will add a download link, and you can click on that to save the file.

## How to Annotate

When you are annotating a document, it is important to select the node that encompasses the text of interest but not more. Selecting too much will annotate at the wrong level, selecting too little will not annotate the whole text of interest.

Another video shows how to do this properly.