31:Tb69,annotation_div = { const div = d3.create("div"); const form_div = div.append("div"); const num_selected = form_div.append("input").attr("name", "num-selected"); const selected_tokens = form_div.append("input").attr("name", "tokens-selected"); const join_button = form_div.append("button").attr("type", "button").text("Join Span"); const joined_tokens = div.append("textarea").attr("name", "joined-tokens") .attr("rows", 10) .attr("cols", 50); const annotation_div = div.append("div").classed("annotation", true); const selectedClass = "selected"; let selected_data = []; let selected_indexes = new Set(); let all_joined = [] function joinSpan(event, d){ const selected_spans = div.selectAll("span[data-token-type=word].selected") .classed("selected", false) .classed("joined", true); let joined_span = [] selected_spans.each(d => { joined_span.push(d); }); if(joined_span.length == 0) return; all_joined.push(joined_span); joined_tokens.text( all_joined.map((js, i) => `${js.map(x => x[0]).join(" ")}: ${i}` ).join("\n") ); selected_data = []; selected_indexes = new Set(); num_selected.attr("value", ""); //selected_spans.size(); selected_tokens.attr("value", ""); } join_button.on("click", joinSpan); function processSelection(elem, d){ elem.classed(selectedClass, !elem.classed(selectedClass)); const selected_spans = div.selectAll("span[data-token-type=word].selected"); selected_data = []; selected_indexes = new Set(); selected_spans.each((x,i) => { selected_data.push(x); selected_indexes.add(x.word_index); }); //console.log(selected_indexes); num_selected.attr("value", Array.from(selected_indexes)); //selected_spans.size(); selected_tokens.attr("value", selected_data.map(x => x[0]).join(" ")); } function selectSpan(event, d) { const elem = d3.select(this); const idx = d.word_index; if(elem.classed("joined")) return; if(selected_indexes.size == 0 || selected_indexes.has(idx)){ processSelection(elem, d); } else if (selected_indexes.size > 0 && (selected_indexes.has(idx-1) || selected_indexes.has(idx+1))) { processSelection(elem, d); } else { return //processSelection(elem, d); } } const new_tokens = tokens.map((d, i) => { return d.groups.word ? {...d, token_index: i} : {...d}; }); let num_words = -1; new_tokens.forEach(d => { if(!d.groups.space){ num_words += 1; d.word_index = num_words; } }); annotation_div.selectAll("span") .data(new_tokens) .enter().append("span") .attr("data-token-type", d => d.groups.word ? "word" : "noword") .text(d => d[0]) .on("click", selectSpan); return div; //return html`${div.node()}

Num selected: ${div.selectAll("span.selected").size()}

`; }32:[] 2f:{"title":"Text Annotation Interface","cells":[{"id":0,"value":"md`# Text Annotation Interface\n\n\nCyan colored tokens are the tokens which are eligible for annotation.\nClick on a set of contigous tokens and then click on join span to join them as one phrase. \n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"annotation_div.node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"viewof form_input = form(html`\n \n \n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"form_input.text.split(/[\\s\\n]+/)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"form_input.text.split(/[\\W]+/)","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"tokens = [...form_input.text.matchAll(/(?[\\w]+:\\/\\/[\\S]+)|(?@\\w+)|(?[\\w]+)|(?[\\s\\n]+)|(?((?!\\s)[\\W])+)/g)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"// num_selected = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"// selected_tokens = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}