Askgpt (#93)

* initial new layout for askgpt dashbaord

* Documented code

Author: bradley-erickson

modules/lo_dash_react_components/src/lib/components/LOPanelLayout.react.js

@@ -24,7 +24,7 @@ export default class LOPanelLayout extends Component {
         {leftPanels.map(panel =>
           <div
             key={panel.id}
-            className={shown.includes(panel.id) ? 'side-panel open' : 'side-panel'}
+            className={shown.includes(panel.id) ? 'side-panel open' : 'side-panel closed'}
             style={{ width: shown.includes(panel.id) ? panel.width : 0 }}
           >
             {panel.children}
@@ -36,7 +36,7 @@ export default class LOPanelLayout extends Component {
         {rightPanels.map(panel =>
           <div
             key={panel.id}
-            className={shown.includes(panel.id) ? 'side-panel open' : 'side-panel'}
+            className={shown.includes(panel.id) ? 'side-panel open' : 'side-panel closed'}
             style={{ width: shown.includes(panel.id) ? panel.width : 0 }}
           >
             {panel.children}

modules/lo_dash_react_components/src/lib/components/LOPanelLayout.scss

@@ -9,4 +9,7 @@
     .side-panel {
         transition: all 0.3s ease-in-out;
     }
+    .side-panel.closed {
+        overflow: hidden
+    }
 }

modules/wo_bulk_essay_analysis/wo_bulk_essay_analysis/assets/scripts.js

@@ -88,7 +88,7 @@ const extractPDF = async function (base64String) {
   const allTextPromises = []
 
   for (let pageNumber = 1; pageNumber <= totalPages; pageNumber++) {
-    let pageTextPromise = pdf.getPage(pageNumber).then(function (page) {
+    const pageTextPromise = pdf.getPage(pageNumber).then(function (page) {
       return page.getTextContent()
     }).then(function (textContent) {
       return textContent.items.map(item => item.str).join(' ')
@@ -98,13 +98,16 @@ const extractPDF = async function (base64String) {
   }
 
   const allTexts = await Promise.all(allTextPromises)
-  const allText = allTexts.join(' ')
+  const allText = allTexts.join('\n')
 
   return allText
 }
 
 window.dash_clientside.bulk_essay_feedback = {
-  send_to_loconnection: async function (state, hash, clicks, query, systemPrompt, rubricText) {
+  /**
+   * Sends data to server via websocket
+   */
+  send_to_loconnection: async function (state, hash, clicks, query, systemPrompt, tags) {
     if (state === undefined) {
       return window.dash_clientside.no_update
     }
@@ -120,7 +123,7 @@ window.dash_clientside.bulk_essay_feedback = {
       if (trig.prop_id.includes('bulk-essay-analysis-submit-btn')) {
         decoded.gpt_prompt = query
         decoded.system_prompt = systemPrompt
-        decoded.rubric = rubricText
+        decoded.tags = tags
       }
 
       const message = {
@@ -135,12 +138,19 @@ window.dash_clientside.bulk_essay_feedback = {
     return window.dash_clientside.no_update
   },
 
+  /**
+   * adds submitted query to history and clear input
+   */
   update_input_history_on_query_submission: async function (clicks, query, history) {
     if (clicks > 0) {
       return ['', history.concat(query)]
     }
+    return [query, window.dash_clientside.no_update]
   },
 
+  /**
+   * update history based on history browser storage
+  */
   update_history_list: function (history) {
     const items = history.map((x) => {
       return {
@@ -156,6 +166,9 @@ window.dash_clientside.bulk_essay_feedback = {
     }
   },
 
+  /**
+   * update student cards based on new data in storage
+   */
   update_student_grid: function (message, history) {
     const currPrompt = history.length > 0 ? history[history.length - 1] : ''
     const cards = message.map((x) => {
@@ -164,14 +177,96 @@ window.dash_clientside.bulk_essay_feedback = {
     return cards
   },
 
-  update_rubric: async function (contents, filename) {
+  /**
+   * show attachment panel upon uploading document and populate fields
+  */
+  open_and_populate_attachment_panel: async function (contents, filename, timestamp, shown) {
     if (filename === undefined) {
-      return ['', '']
+      return ['', '', shown]
     }
     let data = ''
     if (filename.endsWith('.pdf')) {
       data = await extractPDF(contents)
     }
-    return [data, `Current: ${filename}`]
+    // TODO add support for docx-like files
+    return [data, filename.slice(0, filename.lastIndexOf('.')), shown.concat('attachment')]
+  },
+
+  /**
+   * append tag in curly braces to input
+  */
+  add_tag_to_input: function (clicks, curr, store) {
+    const trig = window.dash_clientside.callback_context.triggered[0]
+    const trigProp = trig.prop_id
+    const trigJSON = JSON.parse(trigProp.slice(0, trigProp.lastIndexOf('.')))
+    if (trig.value > 0) {
+      return curr.concat(` {${trigJSON.index}}`)
+    }
+    return window.dash_clientside.no_update
+  },
+
+  /**
+   * enable/disabled submit based on query
+   * makes sure there is a query and the tags are properly formatted
+  */
+  disabled_query_submit: function (query, store) {
+    if (query.length === 0) {
+      return [true, 'Please create a request before submitting.']
+    }
+    const tags = Object.keys(store)
+    const queryTags = query.match(/[^{}]+(?=})/g) || []
+    const diffs = queryTags.filter(x => !tags.includes(x))
+    if (diffs.length > 0) {
+      return [true, `Unable to find [${diffs.join(',')}] within the tags. Please check that the spelling is correct or remove the extra tags.`]
+    } else if (!queryTags.includes('student_text')) {
+      return [true, 'Submission requires the inclusion of {student_text} to run the request over the student essays.']
+    }
+    return [false, '']
+  },
+
+  /**
+   * enable/disable the save attachment button if tag is already in use/blank
+   */
+  disable_attachment_save_button: function (label, tags) {
+    if (label.length === 0) {
+      return [true, 'Please add a unique label to your attachment']
+    } else if (tags.includes(label)) {
+      return [true, `Label ${label} is already in use.`]
+    }
+    return [false, '']
+  },
+
+  /**
+   * populate word bank of tags
+   */
+  update_tag_buttons: function (tagStore) {
+    const tagLabels = Object.keys(tagStore)
+    const tags = tagLabels.map((val) => {
+      const button = {
+        namespace: 'dash_bootstrap_components',
+        type: 'Button',
+        props: {
+          children: val,
+          id: { type: 'bulk-essay-analysis-tag', index: val },
+          n_clicks: 0,
+          size: 'sm',
+          color: 'secondary'
+        }
+      }
+      return button
+    })
+    return tags
+  },
+
+  /**
+   * Save attachment to tag storage
+   */
+  save_attachment: function (clicks, label, text, tagStore, shown) {
+    if (clicks > 0) {
+      const newStore = tagStore
+      newStore[label] = text
+      return [newStore, shown.filter(item => item !== 'attachment')]
+    }
+    return tagStore
   }
 }