From e480b5309bcf6ac67cb36d2033763c1723fca032 Mon Sep 17 00:00:00 2001
From: Peter Le <peter@peterkle.com>
Date: Thu, 28 Dec 2023 18:17:18 -0500
Subject: [PATCH] RDISCROWD-6793 - ANCO builder component

---
 .../builder/components/Anco/AncoForm.vue      | 177 ++++++++++++++++++
 .../builder/components/Anco/AncoTemplate.html |   8 +
 .../builder/components/PreviewCommons.vue     |   7 +-
 .../builder/components/Questions.vue          |  11 ++
 static/src/components/builder/router.js       |  50 +++--
 static/src/components/builder/store/index.js  |  20 +-
 .../components/builder/store/modules/anco.js  |  68 +++++++
 static/src/components/builder/store/types.js  |  10 +
 static/src/components/builder/utils.js        |  63 +++++--
 9 files changed, 373 insertions(+), 41 deletions(-)
 create mode 100644 static/src/components/builder/components/Anco/AncoForm.vue
 create mode 100644 static/src/components/builder/components/Anco/AncoTemplate.html
 create mode 100644 static/src/components/builder/store/modules/anco.js

diff --git a/static/src/components/builder/components/Anco/AncoForm.vue b/static/src/components/builder/components/Anco/AncoForm.vue
new file mode 100644
index 00000000..5366faea
--- /dev/null
+++ b/static/src/components/builder/components/Anco/AncoForm.vue
@@ -0,0 +1,177 @@
+<template>
+  <div class="row">
+    <h4>Anco Settings</h4>
+    <div class="form-group">
+      <label
+        class="col-labels"
+        for="pyb-answer"
+      >
+        Answer field name | <span class="label-tip">The field where the worker's answer is stored. Can be JSON path like a.b.c.</span>
+      </label>
+      <input
+        id="pyb-answer"
+        :value="pybAnswer"
+        class="form-control form-control-sm"
+        type="text"
+        @input="updatePybanswer($event.target.value)"
+      >
+    </div>
+    <div class="form-group">
+      <label
+        class="col-labels"
+        for="doc-url"
+      >
+        Document URL field name | <span class="label-tip">A JavaScript expression that returns the document URL, e.g.'task.info.document__upload_file'.</span>
+      </label>
+      <input
+        id="doc-url"
+        :value="docUrl"
+        class="form-control form-control-sm"
+        type="text"
+        @input="updateDocUrl($event.target.value)"
+      >
+    </div>
+    <div class="form-group">
+      <label
+        class="col-labels"
+        for="annotation-url"
+      >
+        Annotation URL field name | <span class="label-tip">A JavaScript expression that returns the annotation URL, e.g.'task.info.annotation'.</span>
+      </label>
+      <input
+        id="annotation-url"
+        :value="annotationUrl"
+        class="form-control form-control-sm"
+        type="text"
+        @input="updateAnnotationUrl($event.target.value)"
+      >
+    </div>
+    <hr>
+    <h4>
+      Categories
+    </h4>
+    <div class="scroll col-md-12">
+      <div class="row">
+        <div class="col-md-12">
+          <div
+            v-for="(category, index) in categoryList"
+            :key="index"
+            class="row"
+            name="columns"
+          >
+            <hr
+              v-if="index != 0"
+              size="100px"
+            >
+            <label>Category {{ index + 1 }}</label>
+            <button
+              v-if="index > 0"
+              class="btn btn-times-delete pull-right fa fa-times"
+              @click="deleteCategoryListItem(index)"
+            /><br>
+            <label
+              class="block-label"
+            >
+              Category Label | <span class="label-tip">Text to display for the category.</span>
+              <input
+                :value="category.name"
+                class="form-control form-control-sm"
+                type="text"
+                @input="updateCategoryItem(category, index, 'name', $event.target.value)"
+              >
+            </label>
+            <label
+              class="block-label"
+            >
+              Data Type | <span class="label-tip">Data type of the caputured data value.</span>
+              <select
+                :value="category.type"
+                class="form-control form-control-sm"
+                @change="updateCategoryItem(category, index, 'type', $event.target.value)"
+              >
+                <option selected />
+                <option
+                  v-for="categoryType in categoryTypes"
+                  :key="categoryType"
+                  :value="categoryType"
+                >
+                  {{ categoryType }}
+                </option>
+              </select>
+            </label>
+            <label
+              class="block-label"
+            >
+              CSS Style | <span class="label-tip">Inline CSS string, e.g. 'color: red;'.</span>
+              <input
+                id="value"
+                class="form-control form-control-sm"
+                type="text"
+                :value="category.style"
+                @input="updateCategoryItem(category, index, 'style', $event.target.value)"
+              >
+            </label>
+          </div>
+          <br>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-10 col-md-11" />
+    <button
+      id="add"
+      class="btn btn-default btn-sm col-sm-2 col-md-1"
+      @click="addCategoryListItem"
+    >
+      Add
+    </button>
+  </div>
+</template>
+
+<script>
+import { cloneDeep } from 'lodash';
+import { mapMutations, mapState } from 'vuex';
+import '../../../../../css/component_builder.css';
+import * as types from '../../store/types';
+
+export default {
+  name: 'AncoForm',
+  data () {
+    return {
+      categoryTypes: ['Date', 'Datetime', 'Integer', 'Number', 'Text']
+    };
+  },
+  computed: {
+    ...mapState({
+      pybAnswer: state => state.anco.pybAnswer,
+      categoryList: state => state.anco.categoryList,
+      docUrl: state => state.anco.docUrl,
+      annotationUrl: state => state.anco.annotationUrl
+    })
+  },
+  updated () {
+    this.scrollToEnd();
+  },
+  methods: {
+    ...mapMutations({
+      'updatePybanswer': types.MUTATE_ANCO_PYB_ANSWER,
+      'addCategoryListItem': types.MUTATE_ANCO_ADD_LIST_ITEM,
+      'deleteCategoryListItem': types.MUTATE_ANCO_DELETE_LIST_ITEM,
+      'updateDocUrl': types.MUTATE_ANCO_DOC_URL,
+      'updateAnnotationUrl': types.MUTATE_ANCO_ANNOTATION_URL
+    }),
+    updateCategoryItem (category, index, fieldName, value) {
+      const newCategory = cloneDeep(category);
+      newCategory[fieldName] = value;
+      this.$store.commit(types.MUTATE_ANCO_UPDATE_LIST_ITEM, { category: newCategory, index });
+      this.scrollToEnd();
+    },
+    scrollToEnd () {
+      const container = document.querySelector('.scroll');
+      if (container) {
+        const scrollHeight = container.scrollHeight;
+        container.scrollTop = scrollHeight;
+      }
+    }
+  }
+};
+</script>
diff --git a/static/src/components/builder/components/Anco/AncoTemplate.html b/static/src/components/builder/components/Anco/AncoTemplate.html
new file mode 100644
index 00000000..3a59a250
--- /dev/null
+++ b/static/src/components/builder/components/Anco/AncoTemplate.html
@@ -0,0 +1,8 @@
+<anco-loader
+  v-if={{docUrl}}'
+  pyb-answer='{{pybAnswer}}'
+  :doc-url='{{docUrl}}'
+  :annotation-url='{{annotationUrl}}'
+  annotation-type='{{annotationType}}'
+  categories='{{categories}}'
+></anco-loader>
diff --git a/static/src/components/builder/components/PreviewCommons.vue b/static/src/components/builder/components/PreviewCommons.vue
index 9440b153..1991cd24 100644
--- a/static/src/components/builder/components/PreviewCommons.vue
+++ b/static/src/components/builder/components/PreviewCommons.vue
@@ -53,13 +53,13 @@
 </style>
 
 <script>
+import components from '@dtwebservices/task-presenter-components';
 import 'prismjs';
 import 'prismjs/themes/prism.css';
 import Prism from 'vue-prism-component';
-import ComponentRender from './ComponentRender/ComponentRender';
-import components from '@dtwebservices/task-presenter-components';
 import * as types from '../store/types';
 import utils from '../utils';
+import ComponentRender from './ComponentRender/ComponentRender';
 
 export default {
   components: {
@@ -86,7 +86,8 @@ export default {
         MULTISELECT_INPUT: 'multi-select-input',
         CONDITIONAL_DISPLAY: 'conditionaldisplay-creator',
         FILE_UPLOAD: 'file-upload',
-        INPUT_TEXT_AREA: 'input-text-area'
+        INPUT_TEXT_AREA: 'input-text-area',
+        ANCO: 'anco'
       }
     };
   },
diff --git a/static/src/components/builder/components/Questions.vue b/static/src/components/builder/components/Questions.vue
index c2cb1797..db2f8b47 100644
--- a/static/src/components/builder/components/Questions.vue
+++ b/static/src/components/builder/components/Questions.vue
@@ -23,6 +23,10 @@
         :style="isPublic ? 'display:none' : ''"
       />
       <custom-router-link :component="inputTextArea" />
+      <custom-router-link
+        :component="anco"
+        :style="isPublic ? 'display:none' : ''"
+      />
     </div>
     <div class="col-md-8">
       <div class="row">
@@ -242,6 +246,13 @@ export default {
           componentName: 'INPUT_TEXT_AREA',
           header: 'Input Text Area'
         }
+      },
+      anco: {
+        name: 'ANCO_FORM',
+        params: {
+          componentName: 'ANCO',
+          header: 'Annotation Copilot'
+        }
       }
     };
   },
diff --git a/static/src/components/builder/router.js b/static/src/components/builder/router.js
index 79314af2..5f3b051d 100644
--- a/static/src/components/builder/router.js
+++ b/static/src/components/builder/router.js
@@ -1,20 +1,21 @@
-import Questions from './components/Questions.vue';
-import Header from './components/Header.vue';
-import Content from './components/Content.vue';
+import AncoForm from './components/Anco/AncoForm';
+import AssistantLLMForm from './components/AssistantLLM/AssistantLLMForm.vue';
 import CheckboxForm from './components/CheckboxInput/CheckboxInputForm.vue';
-import TextInputForm from './components/TextInput/TextInputForm.vue';
-import TableForm from './components/Table/TableForm.vue';
-import PreviewCommons from './components/PreviewCommons.vue';
-import RadioForm from './components/RadioInput/RadioInputForm.vue';
-import TextTaggingForm from './components/TextTagging/TextTaggingForm.vue';
-import DropdownForm from './components/DropdownInput/DropdownForm.vue';
-import MultiselectForm from './components/MultiselectInput/MultiselectForm.vue';
 import ConditionalDisplayForm from './components/ConditionalDisplay/ConditionalDisplayForm.vue';
+import Content from './components/Content.vue';
+import DropdownForm from './components/DropdownInput/DropdownForm.vue';
 import FileUploadForm from './components/FileUpload/FileUploadForm.vue';
-import TaskTimerForm from './components/TaskTimer/TaskTimerForm.vue';
+import Header from './components/Header.vue';
 import InputTextAreaForm from './components/InputTextArea/InputTextAreaForm.vue';
-import AssistantLLMForm from './components/AssistantLLM/AssistantLLMForm.vue';
+import MultiselectForm from './components/MultiselectInput/MultiselectForm.vue';
+import PreviewCommons from './components/PreviewCommons.vue';
+import Questions from './components/Questions.vue';
+import RadioForm from './components/RadioInput/RadioInputForm.vue';
+import TableForm from './components/Table/TableForm.vue';
 import TaskPresenterForm from './components/TaskPresenter/TaskPresenterForm.vue';
+import TaskTimerForm from './components/TaskTimer/TaskTimerForm.vue';
+import TextInputForm from './components/TextInput/TextInputForm.vue';
+import TextTaggingForm from './components/TextTagging/TextTaggingForm.vue';
 
 export const routes = [
   {
@@ -376,6 +377,31 @@ export const routes = [
       }
     ]
   },
+  {
+    path: '/anco',
+    name: 'ANCO',
+    components: {
+      default: Content,
+      header: Header
+    },
+    children: [
+      {
+        path: 'form',
+        name: 'ANCO_FORM',
+        components: { default: AncoForm }
+      },
+      {
+        path: 'preview',
+        name: 'ANCO_PREVIEW',
+        components: { default: PreviewCommons }
+      },
+      {
+        path: 'code',
+        name: 'ANCO_CODE',
+        components: { default: PreviewCommons }
+      }
+    ]
+  },
   { path: '/redirect-me', redirect: { name: 'home' } },
   { path: '*', redirect: '/' }
 ];
diff --git a/static/src/components/builder/store/index.js b/static/src/components/builder/store/index.js
index 5fcccfcf..180420df 100644
--- a/static/src/components/builder/store/index.js
+++ b/static/src/components/builder/store/index.js
@@ -1,18 +1,19 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import textInput from './modules/textInput';
-import checkboxInput from './modules/checkboxInput';
-import table from './modules/table';
-import radioInput from './modules/radioInput';
-import textTagging from './modules/textTagging';
+import anco from './modules/anco';
 import assistantLLM from './modules/assistantLLM';
-import dropdownInput from './modules/dropdownInput';
-import multiselectInput from './modules/multiselectInput';
+import checkboxInput from './modules/checkboxInput';
 import conditionalDisplay from './modules/conditionalDisplay';
+import dropdownInput from './modules/dropdownInput';
 import fileUpload from './modules/fileUpload';
-import taskTimer from './modules/taskTimer';
 import inputTextArea from './modules/inputTextArea';
+import multiselectInput from './modules/multiselectInput';
+import radioInput from './modules/radioInput';
+import table from './modules/table';
 import taskPresenter from './modules/taskPresenter';
+import taskTimer from './modules/taskTimer';
+import textInput from './modules/textInput';
+import textTagging from './modules/textTagging';
 
 import { getStoreOptions, setNamespace } from '@dtwebservices/task-presenter-components';
 
@@ -41,6 +42,7 @@ export default new Vuex.Store({
     fileUpload,
     taskTimer,
     inputTextArea,
-    taskPresenter
+    taskPresenter,
+    anco
   }
 });
diff --git a/static/src/components/builder/store/modules/anco.js b/static/src/components/builder/store/modules/anco.js
new file mode 100644
index 00000000..097d7340
--- /dev/null
+++ b/static/src/components/builder/store/modules/anco.js
@@ -0,0 +1,68 @@
+import * as types from '../types';
+
+export function getAncoCategoryObject () {
+  return {
+    label: '',
+    type: '',
+    style: ''
+  };
+}
+
+const initialState = () => {
+  const firstElement = getAncoCategoryObject();
+  return {
+    pybAnswer: '',
+    categoryList: [firstElement],
+    docUrl: '',
+    annotationUrl: '',
+    isValidForm: true
+  };
+};
+
+export const state = {
+  ...initialState()
+};
+
+export const getters = {
+  [types.GET_ANCO_PROPS] (state) {
+    return state;
+  },
+  [types.GET_ANCO_FORM_VALID] () {
+    return { isValid: state.isValidForm };
+  }
+};
+
+export const mutations = {
+  [types.MUTATE_ANCO_PYB_ANSWER] (state, payload) {
+    state.pybAnswer = payload;
+  },
+  [types.MUTATE_ANCO_ADD_LIST_ITEM] (state) {
+    const newObj = getAncoCategoryObject();
+    state.categoryList.push(newObj);
+  },
+  [types.MUTATE_ANCO_DELETE_LIST_ITEM] (state, index) {
+    state.categoryList.splice(index, 1);
+  },
+  [types.MUTATE_ANCO_UPDATE_LIST_ITEM] (state, { category, index }) {
+    state.categoryList.splice(index, 1, category);
+  },
+  [types.MUTATE_ANCO_DOC_URL] (state, payload) {
+    state.docUrl = payload;
+  },
+  [types.MUTATE_ANCO_ANNOTATION_URL] (state, payload) {
+    state.annotationUrl = payload;
+  },
+  [types.MUTATE_CLEAR_ANCO] (state) {
+    const initial = initialState();
+    Object.keys(initial).forEach(key => {
+      state[key] = initial[key];
+    });
+  }
+};
+
+export default {
+  state,
+  mutations,
+  actions: {},
+  getters
+};
diff --git a/static/src/components/builder/store/types.js b/static/src/components/builder/store/types.js
index cafbfcc8..b66c1189 100644
--- a/static/src/components/builder/store/types.js
+++ b/static/src/components/builder/store/types.js
@@ -48,6 +48,9 @@ export const GET_FILE_UPLOAD_ERRORS = 'fileUpload/GET_FILE_UPLOAD_ERRORS';
 export const GET_INPUT_TEXT_AREA_PROPS = 'inputtextarea/PROPS';
 export const GET_INPUT_TEXT_AREA_FORM_VALID = 'inputtextarea/PROPS_VALID';
 
+export const GET_ANCO_PROPS = 'anco/PROPS';
+export const GET_ANCO_FORM_VALID = 'anco/PROPS_VALID';
+
 // Mutations
 export const MUTATE_CLEAR_CHECKBOX_INPUT_FORM = 'checkboxInput/MUTATE_CLEAR_CHECKBOX_FORM';
 export const MUTATE_CHECKBOX_LABEL = 'checkboxInput/MUTATE_CHECKBOX_LABEL';
@@ -167,3 +170,10 @@ export const MUTATE_ALLOW_SAVE_WORK = 'taskPresenter/ALLOW_SAVE_WORK';
 export const MUTATE_AUTO_SAVE_SECONDS = 'taskPresenter/AUTO_SAVE_SECONDS';
 export const MUTATE_ALLOW_ASSIGN_TO_USER = 'taskPresenter/ALLOW_ASSIGN_TO_USER';
 export const MUTATE_CLEAR_TASK_PRESENTER_FORM = 'taskPresenter/MUTATE_CLEAR_TASK_PRESENTER_FORM';
+
+export const MUTATE_ANCO_ADD_LIST_ITEM = 'anco/MUTATE_ANCO_ADD_LIST_ITEM';
+export const MUTATE_ANCO_UPDATE_LIST_ITEM = 'anco/MUTATE_ANCO_UPDATE_LIST_ITEM';
+export const MUTATE_ANCO_DELETE_LIST_ITEM = 'anco/MUTATE_ANCO_DELETE_LIST_ITEM';
+export const MUTATE_ANCO_DOC_URL = 'anco/MUTATE_ANCO_DOC_URL';
+export const MUTATE_ANCO_ANNOTATION_URL = 'anco/MUTATE_ANCO_ANNOTATION_URL';
+export const MUTATE_ANCO_PYB_ANSWER = 'anco/MUTATE_ANCO_PYB_ANSWER';
diff --git a/static/src/components/builder/utils.js b/static/src/components/builder/utils.js
index ac7a9323..2d67cd4f 100644
--- a/static/src/components/builder/utils.js
+++ b/static/src/components/builder/utils.js
@@ -1,29 +1,30 @@
 import Mustache from 'mustache';
-import textInputTemplate from './components/TextInput/textInputTemplate.html';
-import checkboxInputTemplate from './components/CheckboxInput/checkboxInputTemplate.html';
+import ancoTemplate from './components/Anco/ancoTemplate.html';
+import assistantLLMTemplate from './components/AssistantLLM/AssistantLLMTemplate.html';
 import checkboxGroupTemplate from './components/CheckboxInput/checkboxGroupTemplate.html';
+import checkboxInputTemplate from './components/CheckboxInput/checkboxInputTemplate.html';
+import conditionalDisplayTemplate from './components/ConditionalDisplay/conditionalDisplayTemplate.html';
+import dropdownTemplate from './components/DropdownInput/dropdownTemplate.html';
+import fileUploadTemplate from './components/FileUpload/fileUploadTemplate.html';
+import inputTextAreaTemplate from './components/InputTextArea/inputTextAreaTemplate.html';
+import multiselectTemplate from './components/MultiselectInput/multiselectTemplate.html';
+import radioGroupTemplate from './components/RadioInput/radioGroupTemplate.html';
+import checkboxInputColumnTemplate from './components/Table/checkboxInputColumnTemplate.html';
+import inputTextAreaColumnTemplate from './components/Table/inputTextAreaColumnTemplate.html';
+import slotTemplate from './components/Table/slotTemplate.html';
 import tableTemplate from './components/Table/tableTemplate.html';
-import labelTemplate from './components/templates/labelTemplate.html';
 import textInputColumnTemplate from './components/Table/textInputColumnTemplate.html';
-import checkboxInputColumnTemplate from './components/Table/checkboxInputColumnTemplate.html';
+import taskPresenterTemplate from './components/TaskPresenter/taskPresenterTemplate.html';
 import taskTimerTemplate from './components/TaskTimer/taskTimerTemplate.html';
-import cancelButtonTemplate from './components/helpers/cancelButtonTemplate.html';
+import textInputTemplate from './components/TextInput/textInputTemplate.html';
+import textTaggingTemplate from './components/TextTagging/textTaggingTemplate.html';
 import buttonRowTemplate from './components/helpers/buttonRowTemplate.html';
+import cancelButtonTemplate from './components/helpers/cancelButtonTemplate.html';
 import submitButtonTemplate from './components/helpers/submitButtonTemplate.html';
 import submitLastButtonTemplate from './components/helpers/submitLastButtonTemplate.html';
-import slotTemplate from './components/Table/slotTemplate.html';
-import radioGroupTemplate from './components/RadioInput/radioGroupTemplate.html';
-import textTaggingTemplate from './components/TextTagging/textTaggingTemplate.html';
-import dropdownTemplate from './components/DropdownInput/dropdownTemplate.html';
-import multiselectTemplate from './components/MultiselectInput/multiselectTemplate.html';
-import conditionalDisplayTemplate from './components/ConditionalDisplay/conditionalDisplayTemplate.html';
-import fileUploadTemplate from './components/FileUpload/fileUploadTemplate.html';
-import inputTextAreaTemplate from './components/InputTextArea/inputTextAreaTemplate.html';
-import inputTextAreaColumnTemplate from './components/Table/inputTextAreaColumnTemplate.html';
-import assistantLLMTemplate from './components/AssistantLLM/AssistantLLMTemplate.html';
-import taskPresenterTemplate from './components/TaskPresenter/taskPresenterTemplate.html';
+import labelTemplate from './components/templates/labelTemplate.html';
 
-import { flatten, uniq, flow } from 'lodash';
+import { flatten, flow, uniq } from 'lodash';
 
 export const templates = {
   TEXT_INPUT: textInputTemplate,
@@ -79,6 +80,8 @@ export default {
       return this.getSimpleComponentsCode(form, component);
     } else if (component === 'ASSISTANT_LLM') {
       return this.getAssistantLLMCode(form);
+    } else if (component === 'ANCO') {
+      return this.getAncoCode(form);
     } else if (component === 'TASK_PRESENTER') {
        return this.getSimpleComponentsCode(form, component);
     } else {
@@ -409,6 +412,32 @@ export default {
     return output;
   },
 
+  getAncoCode ({ pybAnswer, categoryList = [], docUrl, annotationUrl }) {
+    const categories = categoryList.map(c => ({
+      name: c.name,
+      style: c.style,
+      valueType: c.type
+    }));
+
+    const config = {
+      docUrl,
+      annotationType: "BoundingBox",
+      requiredAnnotationOnLoad: !!annotationUrl,
+      categories: JSON.stringify(categories),
+    }
+
+    if (annotationUrl) {
+      config.annotationUrl = annotationUrl
+    }
+
+    const output = Mustache.render(ancoTemplate, {
+      pybAnswer,
+      ...config
+    });
+
+    return output;
+  },
+
   toMultiDict (keyValueIterator) {
     const dict = {};
     for (const [key, value] of keyValueIterator) {