Skip to content

instituciones-abiertas/ia2-annotation-tool

Repository files navigation

IA² | Annotation tool

IA²


Annotation tool for the IA² desktop app


License Contributor Covenant

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": "demo@mydomain.coop", "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

About

Annotation tool components library for IA² Project

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages