Diagnosis interface 2024 w

.env

@@ -1 +1,2 @@
-MONGO_URI=mongodb+srv://JordanCheckoff:[email protected]/?retryWrites=true&w=majority;
+MONGO_URI=mongodb+srv://JordanCheckoff:[email protected]/?retryWrites=true&w=majority;
+API_URL=https://orchestration-engine-qjfcs.ondigitalocean.app

README.md

@@ -6,4 +6,4 @@ Install packages using `yarn install`.
 
 ## Development
 
-Start a development server using `yarn dev` and navigate to `localhost:3000`. Changes in code will automatically cause the website to be re-built and update the browser.
+Start a development server using `yarn dev` and navigate to `localhost:8080`. Changes in code will automatically cause the website to be re-built and update the browser.

components/DiagSidebar.module.css

@@ -0,0 +1,8 @@
+.problem_textbox {
+    width: 100%;
+    height: 100%; 
+    margin: 10px 0;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+

components/DiagSidebar.tsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react';
+import styles from './DiagSidebar.module.css';
+
+interface SidebarProps {
+  content: string;
+  setContent: (content: string) => void;
+  title: string;
+  project: string;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ content, setContent, title, project}) => {
+  useEffect(() => {
+  }, []);
+
+  const handleContentChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setContent(event.target.value);
+  };
+
+  return (
+    <div>
+      <h1 className="text-xl font-bold mb-2">Your detector for {title} has been triggered for {project}.</h1>
+      <h2 className="text-lg font-semibold mb-2">Detector Debrief</h2>
+      <textarea
+        className={styles.problem_textbox}
+        value={content}
+        onChange={handleContentChange}
+      />
+    </div>
+  );
+};
+
+export default Sidebar;

components/dashboard/Sig.tsx

@@ -1,16 +1,26 @@
 import Link from 'next/link';
-
+import React from 'react';
 
 export const Sig = ({name, responses}) => {
 
     let sig_responses = responses.filter((x) => x.sigName === name)
 
+    const getAbbreviation = (inputString: string): string => {
+        const words = inputString.split(/[\s-]+/);
+        let abbreviation = '';
+        for (const word of words) {
+          if (word.length > 0) {
+            abbreviation += word[0].toUpperCase();
+          }
+        }
+        return abbreviation;
+      };
+
     return (
         <div className="border-2 p-3 rounded-lg mt-3">
             <h3 className="text-xl">{name}</h3>
-            {sig_responses.length > 0 ? sig_responses.map((res, i) => <><Link key={i} href={"/response?response=" + res._id}><u>Diagnosis Page for {res.title}-{res.sigName}</u></Link><br /></>)
+            {sig_responses.length > 0 ? sig_responses.map((res, i) => <><Link key={i} href={"/response?response=" + res._id}><u>{res.title}-Accounting for Difference-{getAbbreviation(res.sigName)}</u></Link><br /></>)
             : <p>No active issues</p>}
         </div>
-
     )
 }

components/diagnosis/DiagContext.module.css

@@ -0,0 +1,34 @@
+.container{
+    width: 100%;
+    height: 100%;
+}
+
+.context_space {
+    padding: 20px;
+    background-color: white;
+    width: 100%;
+    height: 90%;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.context_scrollable {
+    background-color: white;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    position: relative;
+}
+
+.headerTitle {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+}
+
+.contextDiv {
+  background-color: white;
+  padding: 15px; 
+  margin: 8px; 
+  height: 60%;
+}

components/diagnosis/DiagContext.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useCallback} from 'react';
+import styles from './DiagContext.module.css';
+import { options } from '../../lib/context/options';
+import P5Canvas from './P5Canvas';
+
+const Context: React.FC = ({ items, setItems, context_lib, canvas, setCanvas}) => {
+  const [popupOptions, setPopupOptions] = useState(
+    options.filter((option) => !items.some((item) => item.title === option))
+  );
+
+  const [isPopupOpen, setPopupOpen] = useState(false);
+
+  const openPopup = () => {
+    setPopupOpen(true);
+  };
+
+  const closePopup = () => {
+    setPopupOpen(false);
+  };
+
+  const addOptionToContext = (option: any) => {
+    const newItem = { title: option, data: context_lib[option] };
+    setItems([...items, newItem]);
+    setPopupOptions(popupOptions.filter((popOption) => popOption !== option));
+    setCanvas([...canvas, { type: newItem.title, xPos: 50, yPos: 50 }]);
+  };
+
+  const removeItem = (index) => {
+    const removedItem = items[index];
+    const updatedItems = [...items];
+    updatedItems.splice(index, 1);
+    setItems(updatedItems);
+    setPopupOptions([...popupOptions, removedItem.title]); // Add the removed item back to popupOptions
+  };
+
+  const test = ['Sprint log-Total Points Commited This Sprint', 'PRC-link to PRC']
+
+  return (
+    <div className={styles.contextDiv}>
+    <h2 className={styles.headerTitle}>Context</h2>
+      <div className={styles.container}>
+        <div className={styles.context_space} style={{ whiteSpace: 'pre-line'}}>
+          < div className={styles.context_scrollable} style={{whiteSpace: 'pre-line', overflowY: 'auto'}}>
+          {items.map((option, index) => (
+            <div
+              key={index}
+              className="bg-blue-200 p-4 rounded-md mb-2"
+              style={{ display: 'flex', justifyContent: 'space-between', paddingLeft: '1em'}}
+            >
+            {(option.title === 'PRC-link to PRC' || option.title === 'Link to Sprint Log') ? (
+              <a href={option.data} target="_blank" rel="noopener noreferrer">
+                {option.title}: {option.data}
+              </a>
+            ) : (
+              `${option.title}: ${option.data}`
+            )}
+              <button
+                className="bg-red-500 text-white p-2 rounded-md ml-2"
+                onClick={() => removeItem(index)}
+              >
+                X
+              </button>
+            </div>
+          ))}
+          </div>
+          <button
+            className="bg-blue-500 text-white p-2 rounded-md absolute bottom-4 right-4"
+            onClick={openPopup}
+          >
+            Add Context
+          </button>
+        </div>
+        {isPopupOpen && (
+          <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-[2]">
+            <div className="bg-white p-4 rounded-md">
+              <h3 className="text-lg font-semibold mb-2">
+                Select an option to add
+              </h3>
+              <ul>
+                {popupOptions.map((option, index) => (
+                  <li key={index} className="mb-2">
+                    <button
+                      className="bg-blue-500 text-white p-2 rounded-md"
+                      onClick={() => addOptionToContext(option)}
+                    >
+                      {option}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+              <button
+                className="bg-red-500 text-white p-2 rounded-md mt-4"
+                onClick={closePopup}
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+      </div>
+  );
+};
+
+export default Context;

components/diagnosis/GamePlan.module.css

@@ -0,0 +1,24 @@
+.sideBySideItem2 {
+    width: 60%;
+    background-color: white;
+    padding: 8px;
+  }
+
+  .sideBySideItem2 textarea {
+    width: 100%;
+    background-color: #e5e7eb;;
+    height: 200px;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .sideBySideItem2 p {
+    font-size: 0.8rem;
+    margin-bottom: 10px;
+  }
+
+.headerTitle {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }

components/diagnosis/GamePlan.tsx

@@ -0,0 +1,30 @@
+import React, { useState, useEffect, ChangeEvent } from 'react';
+import styles from './GamePlan.module.css';
+
+interface Props {
+  plan: string;
+  setPlan: (content: string) => void;
+}
+
+
+const GamePlan: React.FC<Props> = ({plan, setPlan}) => {
+  const handleInputChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    setPlan(event.target.value);
+  };
+
+  return (
+    <div className={styles.sideBySideItem2}>
+      <h2 className={styles.headerTitle}>Game Plan</h2>
+      <p>Before going into your SIG meeting, write down some questions you plan to ask your students. 
+        We have some suggested questions in the root cause list to help you both ask broadly and ask about specific root causes.</p>
+        <textarea 
+        className={styles.textArea} 
+        value={plan} 
+        onChange={handleInputChange} 
+        placeholder="Enter your questions here...">
+      </textarea>
+    </div>
+  );
+};
+
+export default GamePlan;

components/diagnosis/Guidelines.module.css

@@ -0,0 +1,18 @@
+.header {
+    background-color: white;
+    padding: 15px; 
+    margin: 8px; 
+  }
+
+  .headerTitle {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+
+.list {
+    font-size: 14px;
+    margin-left: 30px;
+    list-style-type: disc;
+  }

components/diagnosis/Guidelines.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './Guidelines.module.css';
+
+const Guidelines: React.FC = () => {
+
+  return (
+    <div className={styles.header}>
+        <h2 className={styles.headerTitle}>Guidelines for Asking Questions During SIG</h2>
+            <p>Here are some guidelines to help you formulate questions to ask during SIG: </p>
+            <ul>
+                <li className={styles.list}>Try to scaffold as much as you can by keep asking &apos;why&apos; to get to the bottom of the issue. 
+                For example, if a student said they didn&apos;t reach out for help, ask “why was that? Did you feel a lack of support, 
+                or you didn&apos;t know any help-seeking channels?”</li>
+                <li className={styles.list}>Ask metacognitive questions! For the cognitive issues we see, there is usually a metacognitive 
+                cause. Try asking questions like:
+                <ul>
+                    <li className={styles.list}>Why did you decide to [action]?</li>
+                    <li className={styles.list}>How did you feel when …?</li>
+                    <li className={styles.list}>Why did you do one thing over another?</li>
+                    <li className={styles.list}>Do you feel like your decision was a mature decision?</li>
+                    <li className={styles.list}>Why did you feel compelled to…?</li>
+                    <li className={styles.list}>Why is it hard for you to…?</li>
+                </ul>
+                </li>
+            </ul>
+    </div>
+  );
+};
+
+export default Guidelines;

components/diagnosis/Hypothesis.module.css

@@ -0,0 +1,14 @@
+.hypo_textbox {
+    width: 100%;
+    height: 75%;
+    margin: 10px 0;
+    padding: 10px;
+    box-sizing: border-box;
+  }
+
+  .hypo_container{
+    margin: 10px;
+    padding: 20px;
+    background: lightgray;
+    height: 35vh;
+}

components/diagnosis/Hypothesis.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import styles from './Hypothesis.module.css';
+
+interface HypothesisProps {
+  hypoData: { title: string; content: string };
+  setHypoContent: (content: string) => void;
+  onDelete: () => void;
+}
+
+const Hypothesis: React.FC<HypothesisProps> = ({ hypoData, setHypoContent, onDelete}) => {
+
+  const handleHypoChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setHypoContent(event.target.value);
+  };
+
+  return (
+    <div className={styles.hypo_container} style={{ position: 'relative' }}>
+    <h2 className="text-lg font-semibold mb-2">{hypoData.title}</h2>
+    <button
+      onClick={onDelete}
+      className="absolute top-4 right-4 text-black bg-transparent border-none cursor-pointer"
+    >
+      ✕
+    </button>
+    <textarea
+      className={styles.hypo_textbox}
+      value={hypoData.content}
+      onChange={handleHypoChange}
+    />
+  </div>
+  );
+};
+
+export default Hypothesis;

components/diagnosis/HypothesisList.module.css

@@ -0,0 +1,11 @@
+.header {
+    background-color: white;
+    padding: 15px; 
+    margin: 8px; 
+  }
+
+  .headerTitle {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }