brat-frontend-editor
Advanced tools
https://github.com/nlplab/brat http://brat.nlplab.org/
This version is full frontend working version of brat editing tools
####Prerequisites :
cd <targetted_app>
npm install
npm start #Then open browser on localhost:3000
npm run prepublish
npm install brat-frontend-editor --save
| Options | Values | Default |
|---|---|---|
| activateEdition | true of false | true |
| ajax | 'local', 'external' or 'normal' | local |
| assetsPath | path to public asset folder | static/ |
| maxFragmentLength | 0=no_max 1+=max characters by fragment (applied on Entity type only for now) | 30 |
| overWriteModals | true or false | false |
| showTooltip | true or false | false |
| webFontURLs | array of 3 paths | ['fonts/Astloch-Bold.ttf','fonts/PT_Sans-Caption-Web-Regular.ttf','fonts/Liberation_Sans-Regular.ttf'] |
<link rel="stylesheet" type="text/css" href="node_modules/brat-frontend-editor/dist/brat-frontend-editor.min.css"/>
<script type="text/javascript" src="node_modules/brat-frontend-editor/dist/brat-frontend-editor.js"></script>
<body onLoad="window_onload()">
<div id="test"></div>
</body>
function window_onload() {
//Making sure DOM is ready
var elem = document.getElementById("test");
var collData = { /*...*/ };
var docData = { /*...*/ };
var yolo = new BratFrontendEditor(elem, collData, docData);
}
var BratFrontendEditor: any; //TypeScript compiler
require('brat-frontend-editor');
@Component({
// ...
template: '<div id="test"></div>':
})
export class ComponentX {
private brat: any;
constructor() {
}let
ngOnInit() {
let elem = document.getElementById("test");
let collData = { /* ... */ };
let docData = { /* ... */ };
let options = {
'ajax': 'external', //local(default), normal, external(Handle all 'ajax' actions by yourself)
};
this.brat = new BratFrontendEditor(elem, collData, docData, options);
this.brat.dispatcher.on('ajax', (data, callback, merge) => this.onExternalAjaxActions(data, callback, merge));
this.brat.dispatcher.on('local-ajax-begin', this.onBeforeLocalAjaxActions);
this.brat.dispatcher.on('local-ajax-done', this.onAfterLocalAjaxActions);
}
private onExternalAjaxActions(data, callback, merge) {
// You could manage all data transformations externally (from Ng2 App)
// Set option.ajax: 'external' first
// Following will "work"(no span will actually be created) for createSpan action
// All actions must be implemented externally if option.ajax=external
this.brat.dispatcher.post('spin');
let response = {};
switch(data.action){
case "createSpan":
response = {
action: data.action,
annotations: {
"source_files": data.document.source_files,
"modifications": data.document.modifications,
"normalizations": data.document.normalizations,
"text": data.document.text,
"entities" : data.document.entities,
"attributes": data.document.attributes,
"relations": data.document.relations,
"triggers": data.document.triggers,
"events": data.document.events
},
edited: [[data.origin], [data.target]],
messages: [],
protocol: 1
};
break;
case "getDocument":
case "loadConf":
case "getCollectionInformation":
case "createArc":
case "deleteArc":
case "reverseArc":
case "deleteSpan":
case "deleteFragmentxyz?":
case "splitSpan":
case "tag":
case "login":
case "logout":
case "whoami":
case "normGetName":
case "normSearch":
case "suggestSpanTypes":
case "importDocument":
case "deleteDocument":
case "deleteCollection":
case "undo":
case "normData":
case "InDocument":
case "InCollection":
case "storeSVG":
case "getDocumentTimestamp":
case "saveConf":
default:
console.log("Not yet supported externally");
break;
}
this.brat.dispatcher.post(0, callback, [response]);
this.brat.dispatcher.post('unspin');
}
onBeforeLocalAjaxActions(data, callback, merge){
// Right before any local_ajax.js actions
}
onAfterLocalAjaxActions(response, callback, merge){
// Right after any local_ajax.js actions
}
}
require('brat-frontend-editor/dist/brat-frontend-editor');
class ComponentX extends React.Component {
constructor(props) {
super(props);
}
componentDidMount(){
var elem = document.getElementById("test");
var collData = { /* ... */ };
var docData = { /* ... */ };
var brat = new BratFrontendEditor(elem, collData, docData);
}
render () {
return(
<div id="test" />
);
}
}
FAQs
"BRAT Editor standalone frontend library"
The npm package brat-frontend-editor receives a total of 8 weekly downloads. As such, brat-frontend-editor popularity was classified as not popular.
We found that brat-frontend-editor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.
Security News
Opengrep continues building momentum with the alpha release of its Playground tool, demonstrating the project's rapid evolution just two months after its initial launch.