feat: Add a drag and drop Ranker component and tag (#1207)

* added drag and drop board component and tag

* added multi and single column support, revamped styling, changed name to Ranker, and added Ranker example

* Update config.xml

* changed name to Ranker and added example to correct directory

* deleted old rankerboard component files

* added support for pre-annotated data

* fixed warnings from linter

* Fix Ranker result initialization

+ small linter fixes

* Remove old broken Ranker tag

* More tiny fixes for good merge

* Correct example pre-annotation

* Fix resultType and valueType for Ranker

Because Ranker is object and has to emulate these properties.

* Add sample classnames and example with styles

* Fix creating a fresh new annotation

There are no deserialization in this case, so let's check pk.

* Fix small linting issue

* comment and variable changes in response to pr feedback

* Remove RankerRegion; we need just classification

* Create result not on start, but before submit

Also rerender Ranker on every result change.

* Fix deleteAllRegions() when toggling draft

Remove all checks and extra work.

* Fix readonly recursion on Ranker level

* Add FF to wrap deleteAllRegion() method

fflag_feat_front_lsdv_4832_new_ranker_tag_120423_short

* Set Ranker FF to true by default

* Add Ranker tag description and attributes list

* Update yarn.lock

---------

Co-authored-by: hlomzik <[email protected]>

Author: baigel1

Diff for: examples/ranker/annotations/1.json

@@ -0,0 +1,19 @@
+{
+    "annotations": [
+        {
+            "id": "1001",
+            "result": [
+                {
+                    "from_name": "ranker",
+                    "id": "beFiQTT1cU",
+                    "source": "$items",
+                    "to_name": "ranker",
+                    "type": "ranker",
+                    "value": {
+                        "ranker": ["1234", "123", "12345", "123456", "1234567"]
+                    }
+                }
+            ]
+        }
+    ]
+}

Diff for: examples/ranker/config.xml

@@ -0,0 +1,7 @@
+<View>
+  <Style>
+    .htx-ranker-column { background: cornflowerblue; }
+    .htx-ranker-item { background: lightgoldenrodyellow; }
+  </Style>
+  <Ranker name="ranker" value="$items" mode="rank" title="Search Results"/>
+</View>

Diff for: examples/ranker/index.js

@@ -0,0 +1,5 @@
+import config from './config.xml';
+import tasks from './tasks.json';
+import annotation from './annotations/1.json';
+
+export const Ranker = { config, tasks, annotation };

Diff for: examples/ranker/tasks.json

@@ -0,0 +1,33 @@
+[
+    {
+        "data": {
+            "items":[
+            {
+                "title": "item 0 title",
+                "body": "'item 0 description'",
+                "id": "123"
+              },
+              {
+                "title": "'item 1 title'",
+                "body": "'item 1 description'",
+                "id": "1234"
+              },
+              {
+                "title": "'item 2 title'",
+                "body": "'item 2 description'",
+                "id": "12345"
+              },
+              {
+                "title": "'item 3 title'",
+                "body": "'item 3 description'",
+                "id": "123456"
+              },
+              {
+                "title": "'item 4 title'",
+                "body": "'item 4 description'",
+                "id": "1234567"
+              }
+        ]},
+        "predictions": []
+    }
+]

Diff for: examples/table/config.xml

@@ -7,4 +7,4 @@
     <Choice value="Chicken" />
     <Choice value="Spicy" />
   </Choices>
-</View>
+</View>

Diff for: images/screenshots/ranker.png

@@ -87,12 +87,14 @@
   "dependencies": {
     "@martel/audio-file-decoder": "2.3.15",
     "@thi.ng/rle-pack": "^2.1.6",
+    "@types/react-beautiful-dnd": "^13.1.3",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-preset-react-app": "^9.1.1",
     "d3": "^5.16.0",
     "magic-wand-js": "^1.0.0",
     "papaparse": "^5.3.1",
     "rc-tree": "^5.3.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-konva-utils": "^0.2.0",
     "react-virtualized-auto-sizer": "^1.0.6",
     "react-window": "^1.8.6"

Diff for: package.json

@@ -150,7 +150,9 @@
               store.setHistory(annotationHistory)
             }
           })
-
+          ls.on("updateAnnotation", (_, annotation) => {
+            console.log(annotation.serializeAnnotation());
+          })
           ls.on("regionFinishedDrawing", (region, list) => {
             console.log("finish drawing", {region, list})
           })

Diff for: public/index.html

@@ -0,0 +1,46 @@
+/**
+ * components
+ */
+import { StrictModeDroppable } from './StrictModeDroppable';
+import Item from './Item';
+import { ColumnData, InputItem } from './createData';
+
+/**
+ * styles
+ */
+import styles from './Ranker.module.scss';
+/**
+ * types
+ */
+interface ColumnProps {
+  column: ColumnData;
+  items: InputItem[];
+  title: string;
+}
+
+/*
+ * defines a column component used by the DragDropBoard component. Each column contains items
+ * that can be reordered by dragging.
+ */
+
+const Column = (props: ColumnProps) => {
+  const { column, items, title } = props;
+
+  return (
+    <div className={[styles.columnStyle, 'htx-ranker-column'].join(' ')}>
+      <h1>{title ? title : column.title}</h1>
+      <StrictModeDroppable droppableId={column.id}>
+        {provided => (
+          <div ref={provided.innerRef} {...provided.droppableProps} className={styles.dropAreaStyle}>
+            {items.map((item, index) => (
+              <Item key={item.id} item={item} index={index} />
+            ))}
+            {provided.placeholder}
+          </div>
+        )}
+      </StrictModeDroppable>
+    </div>
+  );
+};
+
+export default Column;

Diff for: src/components/Ranker/Column.tsx

@@ -0,0 +1,51 @@
+/**
+ * libraries
+ */
+import { Draggable } from 'react-beautiful-dnd';
+
+/**
+ * components
+ */
+import { InputItem } from './createData';
+
+/**
+ * styles
+ */
+import styles from './Ranker.module.scss';
+
+/**
+ * types
+ */
+interface ItemProps {
+  item: InputItem;
+  index: number;
+}
+
+/**
+ * Item component represents a draggable item within each column. Items can be dragged within a
+ * given column as well as between columns.
+ */
+const Item = (props: ItemProps) => {
+  const { item, index } = props;
+
+  return (
+    <Draggable draggableId={item.id} index={index}>
+      {provided => {
+        return (
+          <div
+            {...provided.draggableProps}
+            {...provided.dragHandleProps}
+            className={[styles.itemStyle, 'htx-ranker-item'].join(' ')}
+            ref={provided.innerRef}
+          >
+            <h3 className={styles.itemLineStyle}>{item.title}</h3>
+            <p className={styles.itemLineStyle}>{item.body}</p>
+            <p className={styles.itemLineStyle}>{item.id}</p>
+          </div>
+        );
+      }}
+    </Draggable>
+  );
+};
+
+export default Item;

Diff for: src/components/Ranker/Item.tsx

@@ -0,0 +1,89 @@
+.rankerBoard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: lightgray;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+}
+
+.buttonContainer {
+  display: flex;
+}
+
+.buttonStyle {
+  margin: 2px;
+  cursor: pointer;
+}
+
+#buttonStyle__removeButton {
+  background-color: white;
+  color: #e30615;
+}
+
+#buttonStyle__addButton {
+  background-color: #1a9bf1;
+  color: white;
+}
+
+.boardStyle {
+  display: flex;
+  width: 100%;
+  margin-top: 10px;
+  background-color: lightgray;
+}
+
+.columnsStyle {
+  display: flex;
+  justify-content: space-evenly;
+  width: 100%;
+}
+
+.columnStyle {
+  margin: 10px;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  background-color: white;
+  padding: 8px;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-y: scroll;
+  box-shadow: 2px 2px 8px #aaa;
+}
+
+.itemStyle {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid rgba(34, 36, 38, 0.15);
+  margin-top: 20px;
+  padding: 8px;
+  border-radius: 2px;
+  background-color: lightgray;
+  color: black;
+  width: 250px;
+  box-shadow: 2px 2px 8px #aaa;
+}
+
+.itemLineStyle {
+  margin: 0;
+}
+
+.dropAreaStyle {
+  min-height: 50%;
+  min-width: 80%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+@media screen and (max-width: 1520px) {
+  .itemStyle {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  .itemStyle {
+    width: 100px;
+  }
+}