IA² | Annotation tool

About

The ia2-annotation-tool is a react library that provides the a annotation feature for the IA² project. This library wraps up the API calls to the IA² server.

Pre-requisites

• Node 12.18.2

Install library in your application

npm install https://github.com/instituciones-abiertas/ia2-annotation-tool.git

Components

Editor

| Prop | Description | Type | Example | | ----------------------------- | -------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | style | Editor css styles | Object | { backgroundColor: 'var(--contrast-color)', lineHeight: 2, fontSize: 'large', padding: '3em' } | | annotations | Initial text annotations | Array | [{ id: 1, start: 18, end: 28, tag: 'PERSON', should_anonymized: true, human_marked_ocurrency: false }] | | tags | Annotation tags/entities | Array | [{ id: 1, name: 'PERSON', description: 'Una persona', should_anonimyzation: true, enable_multiple_selection: false }] | | text | Document Text | String | 'On Monday night, Mr. Fallon will have a co-host for the first time: The rapper Cardi B, who just released her first album, Invasion of Privacy' | | onAnnotationsChange | Function to acces the annotations state | Function | (deleteAnnotations, newAnnotations) => console.log(deleteAnnotations, newAnnotations) | | multipleSelectionEnable | Boolean that indicates if the MultipleEntitiesSelector component is enabled | Boolean | True | | onMultipleSelection | Function that make the integration with the API to execute getAllOcurrenciesOf action. | Function | Look an example into the description of the MultipleEntitiesSelector component. |

Instructions

Instructions is a visual component, similar to a header, that is placed above the text annotator.

| Prop | Description | Type | Example | | -------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- | | title | The instructions title | String | 'Select a label' | | subtitle | The isntructions subtitle | String | 'Then delete, add or change identified entities. | | legends | References to the coloured entities | Array | [{color: '#00D6A1', description: 'Anonymized' }, { color: '#ffca00', description: 'Not anonymized' }] | | children | Children nodes to be rendered | Array | <div><ul><li>I'm a child</li><li>I'm another child</li></ul></div> |

MultipleEntitiesSelector

MultipleEntitiesSelector ia a visual a component that is redered into the Instruction component and allows to find all the ocurrencies of the curren selected annotations. It works by integrated it with the API action getAllOcurrenciesOf.

| Prop | Description | Type | Example | | ------------------------- | -------------------------------------------------------------------------------------------- | ---------- | ------------------- | | onMultipleSelection | Function that make the integration with the API to execute getAllOcurrenciesOf action. | Function | See example below |

Example of function to pass as onMultipleSelection prop:

const onMultipleSelection = (
  newAnnotations,
  deleteAnnotations,
  tagList,
) => async => {
  try {
    const docId = state.id
    const response = await api.getAllOcurrenciesOf(
      newAnnotations,
      docId,
      deleteAnnotations,
      entityList
    );
    const mappedResponse = {
      ...response,
      ents: response.ents.map((ent) => {
        return {
          ...ent,
          class: ent.should_anonymized ? styles.anonymousmark : styles.mark,
        };
      }),
    };
    console.log(mappedResponse)
  } catch (err) {
     console.log(err)
  }
};

Api

Props

| Prop | Description | Type | Example | | ------------- | ---------------------------- | -------- | ------------------------- | | api_url | The url for the API services | String | 'http://localhost:8000' |

Access functions to the IA² API

| Function | Description | Params | Response | | ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | userLogin | Authenticates a user | {"email": "[email protected]", "password": "123456"} | {"refresh": "token", "access": "token"} | | userLogout | Terminates a user session | | | | refreshToken | Renews a user session | {"refresh": "token"} | {"access": "token"} | | getSubjects | Returns the available subjects | | [{"name_subject": "Penal", "last_update": "2020-10-06T11:45:03.328000-03:00"}] | | getEntities | Returns the available labeling entities | | [{"id": 29, "name": "PER", "description": "Una persona", "should_anonimyzation": false, "enable_multiple_selection": false}] | | getDocAnalysis | Uploads a file and returns a list of detected entities | { "file": <A valid file as a multipart request>} | {"text": "On Monday night, Mr. Fallon will have a co-host for the first time: The rapper Cardi B, who just released her first album, Invasion of Privacy", "ents": [{"id": 420, "start": 17, "end": 26, "tag": "PER", "should_anonymized": true, "human_marked_ocurrency": false}], "id": 1} | | getAnonymizedDoc | Takes added and deleted annotations and returns new entities | {"newOcurrencies": [{ "start": 27, "end": 33, "tag": "PER", "should_anonymized": true }], "deleteOcurrencies": [{ "start": 141, "end": 143, "tag": "MISC", "should_anonymized": true }]} | {"anonymous_text": "On Monday night, Mr. Fallon will have a co-host for the first time: The rapper Cardi B, who just released her first album, Invasion of Privacy", "data_visualization": {"entitiesResult": [{"id": 29, "name": "PER", "description": "Una persona", "should_anonimyzation": false, "enable_multiple_selection": false}], "total": {"model_total_ent": 63, "model_wrong_ent": 1, "human_total_ent": 2, "percent_total": 95.38}}} | | getDocToDownload | Downloads an anonymized document | | | getDocPublishedToDrive | Publishes an anonymized document to Google Drive | | | getDocPublished | Publishes an anonymized document to Dropbox | | | selectSubject | Tells the server what subject to use | | getAllOcurrenciesOf | Find all the ocurrencies of the current selected annotations | {"newOcurrencies":[{start: 22, end: 28, text: "Fallon", should_anonymized: true, human_marked_ocurrency: true, tag: "PER"}],"deleteOcurrencies":[], "entityList":[4]} | "text":"On Monday night, Mr. Fallon will have a co-host for the first time: The rapper Cardi B, who just released her first album, Invasion of Privacy. Fallon had got lot of audience that day.","ents":[{"id":10056,"start":22,"end":28,"tag":"PER","should_anonymized":true,"human_marked_ocurrency":true},{"id":10057,"start":145,"end":151,"tag":"PER","should_anonymized":true,"human_marked_ocurrency":true}],"id":390} | | getHechoStats | Return hecho stats | {"start": "2000-01-20", "end": "2001-01-20"} | {"otros": 2 , "total": 5 , "violencia": 3 , "violencia_genero": 3} | | getEdadStats | Return edad stats | {"start": "2000-01-20", "end": "2001-01-20"} | {"promedio_acusadx": 30 , "promedio_victima": 30} | | getLugarStats | Return lugar stats | {"start": "2000-01-20", "end": "2001-01-20"} | [{"nombre": "John Doe" , "cantidad": 30}, {"nombre": "Jane Doe", "cantidad": 30}] | | checkStatusDownloadDocument | Indicates if the document is available for download | | [{"status":False }] |

BarSeries

| Prop | Description | Type | Example | | ----------------- | ------------------- | ----------------------------------------------------- | ---------------------------------------------------------------- | | title | Graphic title | String | 'Promedio de Edades' | | series | Data Series to show | Array of Objects {name: "String", value: "Number"}) | [{name: "Acusadxs", value:20}, { name: "Victima", value: 20 }] | | orientation | Bars orientation | oneOf("v","f") | v = vertical, h: horizontal | | colors | Color Palette | Array | '["#FF0000", "#00FF00", "#0000FF"]' | | textStyle | Title text styles | Object | Echarts TextStyle |

PieSeries

| Prop | Description | Type | Example | | ------------ | ------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | | title | Graphic title | String | 'Cantidad de sentencias' | | series | Data Series to show | Array of Objects {name: "String", value: "Number"}) | [{name:"Violecia", value:10}, { name: "violencia genero", value: 20 }] | | colors | Color Palette | Array | '["#FF0000", "#00FF00", "#0000FF"]' | | textStyle | Title text styles | Object | Echarts TextStyle | | showLegend | Show Pie legend | Bool | true or false |

Development

Installl

npm install

Build as library

npm run build

Run example

npm start

Contributing

Please, make sure to read our contribution guidelines before opening a pull request.

License

GNU General Public License version 3