添加分析标注

package.json

@@ -7,6 +7,7 @@
     "bluebird": "^3.5.5",
     "es3ify-loader": "^0.2.0",
     "jquery": "^1.12.4",
+    "poplar-annotation": "^2.0.3",
     "webpack-cli": "^3.3.1"
   },
   "devDependencies": {

src/css/participle.less

@@ -293,4 +293,49 @@
     width: 14px;
     top: 20px;
     right: 15px;
+}
+
+
+#svg > svg {
+    width: 100%;
+}
+
+#svg .poplar-annotation-content {
+    // font-family: "PingFang SC", serif;
+    font-size: 16px;
+}
+/* Label */
+#svg .poplar-annotation-label {
+    // font-family: "PingFang SC", serif;
+    font-size: 12px;
+}
+#svg .poplar-annotation-label rect{
+    rx: 4px;
+    fill: #d8e5ff;
+    color: #cbddff;
+}
+#svg .poplar-annotation-label g rect{
+    rx: 4px;
+    fill: #d8e5ff;
+    stroke: #fff;
+}
+#svg .poplar-annotation-label.hover {
+    
+}
+#svg .poplar-annotation-label.hover rect{
+    fill: #93b6f9;
+}
+/* Connection */
+#svg .poplar-annotation-connection {
+    // font-family: "PingFang SC", serif;
+    font-size: 11px;
+}
+/* 例如根元素的id是example时，需要 */
+/* 单独的.poplar-annotation-connection-line不会生效 */
+#svg .poplar-annotation-connection-line {
+    stroke: #FEAC41;
+}
+
+#svg .poplar-annotation-connection-line.hover {
+    stroke: #5A8EEE;
 }

src/html/participle.html

@@ -46,7 +46,7 @@
 						<img class="emptyImg" src="./images/empty2.png" alt="您提交的信息暂未收录">
 						<p class="emptyTxt">暂无实体抽取数据～</p>
 					</div>
-					<div class="resultBoxInfo"></div>
+					<div class="resultBoxInfo" id="svg"></div>
 				</div>
 			</div>
 			<div class="contentInfoBox">

src/js/participle.js

@@ -92,12 +92,73 @@ function getEntityPredict(){
             const entryList  = result&&result.outputs&&result.outputs.annotation['T']
             const relationList = result&&result.outputs&&result.outputs.annotation['R']
             let content = result.content
-            getSchema(content,entryList)
-            getRelationList(relationList,entryList)
+            // getSchema(content,entryList)
+            if((JSON.stringify(entryList)!='[""]')&&(JSON.stringify(relationList)!='[""]')){
+                getRelationList(relationList,entryList)
+                let enter = chageEnter(entryList)
+                let rela = chageRelation(relationList)
+                let svgData = Object.assign(enter,rela,{"content":content})
+                showSvg(svgData)
+                $('#analy').removeClass('disabled')
+            }else{
+                $('#analy').addClass('disabled')
+                $('.resultBoxInfo').html('')
+                $('.empty').css("display","block");
+                $('.analying').css("display","none")
+                $('table').css("display","none")
+            }
         }
     })
 }
-
+function chageEnter(data){
+    var keyMap = {
+        "name" : "text",
+        "start" : "startIndex",
+        "end" : "endIndex",
+        "id" : "categoryId",
+    };
+    for(let i = 0;i < data.length;i++){
+        let obj = data[i];
+        for(let key in obj){
+            let newKey = keyMap[key];
+            if(newKey){
+                obj[newKey] = obj[key];
+                // delete obj[key];
+            }
+            obj.color = "red"
+            obj.borderColor = "#5A8EEE"
+        }
+    }
+    data.splice(0,1)
+    return {
+        "labelCategories":data,
+        "labels":data
+    }
+}
+function chageRelation(data){
+    var keyMap = {
+        "name" : "text",
+        "from" : "fromId",
+        "to" : "toId",
+        "id" : "categoryId",
+    };
+    for(let i = 0;i < data.length;i++){
+        let obj = data[i];
+        for(let key in obj){
+            let newKey = keyMap[key];
+            if(newKey){
+                obj[newKey] = obj[key];
+            }
+            obj.id = i
+            obj.categoryId = i
+        }
+    }
+    data.splice(0,1)
+    return {
+        "connectionCategories":data,
+        "connections":data,
+    }
+}
 function getSchema(content, entryList){
     let addNum = 0
     for(let i = 1; i < entryList.length; i++){
@@ -110,7 +171,6 @@ function getSchema(content, entryList){
             content = insertStr(content, entryList[i].end+addNum, '</span><span class="star">*</span>')
             addNum += 34
         }
-        
     }
     $('.resultBoxInfo').html(content)
 }
@@ -171,3 +231,17 @@ $("#infoTxt").bind("input propertychange",function(event){
     }
 });
 
+function showSvg(data){
+    $("#svg").html("")//防止页面不渲染
+    const poplar = require('poplar-annotation');
+    const {Annotator} = poplar;
+    const elm = document.getElementById("svg");
+    new Annotator(data,elm,{
+        contentEditable:false,
+        unconnectedLineStyle:"none",
+        labelPadding:3,
+        topContextMargin:-4,
+        bracketWidth:5,
+        labelWidthCalcMethod:'label'
+    });
+}