Skip to content

Commit

Permalink
Merge branch 'paragraph-feedback'
Browse files Browse the repository at this point in the history 
* paragraph-feedback:
  Paragraph feedback
  Format code
  Export for feedback
  • Loading branch information
@davenquinn
davenquinn committed May 13, 2024
2 parents ae284bf + c912ae2 commit 09590e1
Show file tree
Hide file tree
Showing 8 changed files with 638 additions and 625 deletions.
344 changes: 187 additions & 157 deletions packages/feedback-components/src/FeedbackWrap.tsx
View file

Large diffs are not rendered by default.

32 changes: 14 additions & 18 deletions packages/feedback-components/src/Node.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
import { AiFillFolder, AiFillFile } from "react-icons/ai";
import { MdArrowRight, MdArrowDropDown, MdEdit } from "react-icons/md";
import { RxCross2 } from "react-icons/rx";
import { NodeApi, Tree, TreeApi } from "react-arborist";
import React from "react";
import {Entity, Child, Result, TreeData} from './types';

function isSelected(search_node : TreeData, tree_node: TreeData) {
if(search_node.id == tree_node.id) {
import { NodeApi, TreeApi } from "react-arborist";
import { TreeData } from "./types";

function isSelected(search_node: TreeData, tree_node: TreeData) {
if (search_node.id == tree_node.id) {
return true;
}

for(var child of tree_node.children) {
if(isSelected(search_node, child)) {
for (var child of tree_node.children) {
if (isSelected(search_node, child)) {
return true;
}
}

return false;
}

function isNodeSelected(node : NodeApi<TreeData>, tree: TreeApi<TreeData>) {
for(var selected_node of tree.selectedNodes) {
if(isSelected(node.data, selected_node.data)) {
function isNodeSelected(node: NodeApi<TreeData>, tree: TreeApi<TreeData>) {
for (var selected_node of tree.selectedNodes) {
if (isSelected(node.data, selected_node.data)) {
return true;
}
}
Expand All @@ -42,11 +38,11 @@ const COLORS: COLOR_TYPE = {
2: "#4b46cd",
};

const Node = ({ node, style, dragHandle, tree } : any) => {
let selected : boolean = isNodeSelected(node, tree);
let node_level : string = node.data.id.split("_")[0];
const Node = ({ node, style, dragHandle, tree }: any) => {
let selected: boolean = isNodeSelected(node, tree);
let node_level: string = node.data.id.split("_")[0];
let nameStyle = selected ? { backgroundColor: COLORS[node_level] } : {};

return (
<div style={{ ...style, ...nameStyle }} ref={dragHandle}>
{"🍁"}
Expand Down
143 changes: 77 additions & 66 deletions packages/feedback-components/src/TextVisualizer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React from "react";
import { TextAnnotateBlend, AnnotateBlendTag } from "react-text-annotate-blend";
import { TreeData, TextData } from "./types";
import { AnnotateBlendTag, TextAnnotateBlend } from "react-text-annotate-blend";
import { TextData, TreeData } from "./types";

/*
Stateful example with blended tags allowed
*/

type RANGE_TO_LEVEL = {
[range: string]: string;
}
};

type COLOR_TYPE = {
[key: string]: string;
Expand All @@ -21,54 +21,60 @@ const COLORS: COLOR_TYPE = {
strat_name: "rgb(179, 245, 66)",
lithology: "#42f5f5",
lith_att: "#4b46cd",
gray: "#D3D3D3"
gray: "#D3D3D3",
};

type NAME_TO_LEVEL_TYPE = {
[key: string] : number;
[key: string]: number;
strat_name: number;
lithology: number;
lith_att: number;
};

const NAME_TO_LEVEL : NAME_TO_LEVEL_TYPE = {
const NAME_TO_LEVEL: NAME_TO_LEVEL_TYPE = {
strat_name: 0,
lithology: 1,
lith_att: 2,
}
};

type LEVEL_TO_NAME_TYPE = {
[key : number] : string;
0 : string;
1 : string;
[key: number]: string;
0: string;
1: string;
2: string;
}
};

const LEVEL_TO_NAME : LEVEL_TO_NAME_TYPE = {
0 : "strat_name",
const LEVEL_TO_NAME: LEVEL_TO_NAME_TYPE = {
0: "strat_name",
1: "lithology",
2: "lith_att"
}
2: "lith_att",
};

export interface StatefulBlendProps {
formatted_text: TextData;
nodes_to_show : string[];
nodes_to_show: string[];
tree_data: TreeData[];
update_nodes: (nodes: string[]) => void;
};
}

function perform_dfs(current_node : TreeData, paragraph: string, all_tags : AnnotateBlendTag[], nodes_to_show : Set<string>, mapping : RANGE_TO_LEVEL) {
function perform_dfs(
current_node: TreeData,
paragraph: string,
all_tags: AnnotateBlendTag[],
nodes_to_show: Set<string>,
mapping: RANGE_TO_LEVEL
) {
// Extract the data
let parts = current_node.id.split("_");
let level = parseInt(parts[0]);
let start_idx = parseInt(parts[1]);
let end_idx = parseInt(parts[2]);
mapping[start_idx + "_" + end_idx] = "" + level;

// Determine if this node is selected or not
let tag: string = "";
let node_color : string = COLORS["gray"];
if(nodes_to_show.has(current_node.id)) {
let node_color: string = COLORS["gray"];
if (nodes_to_show.has(current_node.id)) {
// Record this node
tag = LEVEL_TO_NAME[level];
node_color = COLORS[tag];
Expand All @@ -79,41 +85,49 @@ function perform_dfs(current_node : TreeData, paragraph: string, all_tags : Anno
end: end_idx,
text: paragraph.substring(start_idx, end_idx),
tag: tag,
color: node_color
color: node_color,
});


// Record the children
if(current_node.children) {
for(var node of current_node.children) {
if (current_node.children) {
for (var node of current_node.children) {
perform_dfs(node, paragraph, all_tags, nodes_to_show, mapping);
}
}
}

export function StatefulBlend(props : StatefulBlendProps) {
export function StatefulBlend(props: StatefulBlendProps) {
// Convert input to tags
let nodes_set : Set<string> = new Set<string>(props.nodes_to_show);
let all_tags : AnnotateBlendTag[] = [];
let mapping : RANGE_TO_LEVEL = {};
for(var data of props.tree_data) {
perform_dfs(data, props.formatted_text.paragraph_text, all_tags, nodes_set, mapping);
let nodes_set: Set<string> = new Set<string>(props.nodes_to_show);
let all_tags: AnnotateBlendTag[] = [];
let mapping: RANGE_TO_LEVEL = {};
for (var data of props.tree_data) {
perform_dfs(
data,
props.formatted_text.paragraph_text,
all_tags,
nodes_set,
mapping
);
}

let [editMode, setEditMode] = React.useState(false);

const tag = "strat_name";
const handleChange = (tagged_words: AnnotateBlendTag[]) => {
if(!editMode) {
if (!editMode) {
return;
}

let nodes_to_keep : string[] = [];
for(var curr_word of tagged_words) {

console.log("Tagged words: ", tagged_words);

let nodes_to_keep: string[] = [];
for (var curr_word of tagged_words) {
// Get the word level
let word_level : string = "0";
let search_key : string = curr_word.start.toString() + "_" + curr_word.end.toString();
if(search_key in mapping) {
let word_level: string = "0";
let search_key: string =
curr_word.start.toString() + "_" + curr_word.end.toString();
if (search_key in mapping) {
word_level = mapping[search_key];
}

Expand All @@ -127,33 +141,30 @@ export function StatefulBlend(props : StatefulBlendProps) {

return (
<div style={{ padding: 20 }}>
<p>
Use the below button to enable/disable edit mode. In edit mode, you can either single or range
select words to create new entities and double click on existing entities to remove them from
the heirachy.
</p>

<button onClick={() => setEditMode(!editMode)}>
{editMode ? "Disable edit mode" : "Enable edit mode"}
</button>

<p>

</p>
<TextAnnotateBlend
style={{
fontSize: "1.2rem",
}}
content={props.formatted_text.paragraph_text}
onChange={handleChange}
value={all_tags}
getSpan={(span) => ({
...span,
tag: tag,
color: COLORS[tag],
})}
/>

<p>
Use the below button to enable/disable edit mode. In edit mode, you can
either single or range select words to create new entities and double
click on existing entities to remove them from the heirachy.
</p>

<button onClick={() => setEditMode(!editMode)}>
{editMode ? "Disable edit mode" : "Enable edit mode"}
</button>

<p></p>
<TextAnnotateBlend
style={{
fontSize: "1.2rem",
}}
content={props.formatted_text.paragraph_text}
onChange={handleChange}
value={all_tags}
getSpan={(span) => ({
...span,
tag: tag,
color: COLORS[tag],
})}
/>
</div>
);
}
}
Loading

0 comments on commit 09590e1

Please sign in to comment.