29:null 2a:["$","title",null,{"children":"Text Annotation Interface | Shubhanshu Mishra | Observable"}] 2f: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()}

`; }30:[] 2d:{"id":"103b95e790499fd6","slug":"text-annotation-interface","title":"Text Annotation Interface","thumbnail":"30b73942b9fb745d1b95662e3520f068d66187878e448daccc585780d9da6e82","access_level":"public","create_time":"$D2020-12-02T03:18:43.138Z","update_time":"$D2020-12-02T21:53:21.494Z","view_time":null,"first_public_time":"$D2020-12-02T21:53:24.736Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"3df8ffe3d85471be","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":"starter_2024"},"version":249,"publish_version":249,"role":null,"authored":false,"authors":[{"type":"individual","id":"88a899f83ba8101d","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":null}],"members":[{"type":"individual","id":"88a899f83ba8101d","login":"napsternxg","name":"Shubhanshu Mishra","avatar_url":"https://avatars-next.observableusercontent.com/38949e46a60167fcf6722d089a015b3ab69512009eaa466fffcf77bc884707c4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"annotation_div.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"viewof form_input = form(html`\n \n \n`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"form_input.text.split(/[\\s\\n]+/)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"form_input.text.split(/[\\W]+/)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tokens = [...form_input.text.matchAll(/(?[\\w]+:\\/\\/[\\S]+)|(?@\\w+)|(?[\\w]+)|(?[\\s\\n]+)|(?((?!\\s)[\\W])+)/g)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"// num_selected = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"// selected_tokens = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"