@ia2coop/ia2-annotation-tool NPM

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": "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`