new page

.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/DiagContext.module.css

@@ -0,0 +1,21 @@
+.container{
+    width: 100%;
+    height: 60%;
+}
+
+.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;
+}

components/DiagContext.tsx

@@ -0,0 +1,141 @@
+import React, { useState, useCallback} from 'react';
+import styles from './DiagContext.module.css';
+import { options } from '../lib/context/options';
+import P5Canvas from './diagnosis/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.container}>
+      <h2 className="text-lg font-semibold mb-2">Context</h2>
+      {/* <div className={styles.context_space}> */}
+      {/* <P5Canvas context={items} canvas={canvas} setCanvas={setCanvas}/>
+        <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">
+          <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 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/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/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/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/HypothesisList.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import Hypothesis from './Hypothesis';
+
+const HypothesisList: React.FC = ({items, hypos, setHypos}) => {
+  const addHypothesis = () => {
+    const newHypothesis = { title: 'Updated hypothesis', content: 'fill in your updated hypothesis' };
+    setHypos([newHypothesis, ...hypos]);
+  };
+
+  const updateHypothesis = (index: number, content: string) => {
+    const newHypotheses = [...hypos];
+    newHypotheses[index].content = content;
+    setHypos(newHypotheses);
+  };
+
+  const deleteHypothesis = (index: number) => {
+    const newHypos = [...hypos];
+    newHypos.splice(index, 1); // Remove the hypothesis at the specified index
+    setHypos(newHypos);
+  };
+
+  // const [popupVisible, setPopupVisible] = useState(false);
+  // const togglePopup = () => {
+  //   setPopupVisible(!popupVisible);
+  // };
+
+  // const closePopup = () => {
+  //   setPopupVisible(false);
+  // };
+
+  return (
+    <div className="p-2">
+      <button
+        onClick={addHypothesis}
+        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full absolute right-4"
+      >
+        Add New Hypothesis
+      </button>
+      <div className="mt-12">
+        {hypos.map((hypoData, index) => (
+          <Hypothesis
+            key={index}
+            hypoData={hypoData}
+            setHypoContent={(content) => updateHypothesis(index, content)}
+            onDelete={() => deleteHypothesis(index)}
+          />
+        ))}
+      </div>
+      {/* <button
+        className={`fixed left-4 bottom-4 p-2 bg-blue-500 text-white rounded cursor-pointer ${
+          popupVisible ? 'hidden' : ''
+        }`}
+        onClick={togglePopup}
+      >
+        Are you stuck? <br /> Take a look at our list of root causes
+      </button> */}
+      {/* {popupVisible && (
+        <div className="fixed bottom-12 left-4 bg-white p-4 border border-gray-300 rounded shadow-md">
+          <button onClick={closePopup} className="absolute top-2 right-2 text-gray-500 cursor-pointer hover:text-red-500">&times;</button>
+          <h3 className="text-lg font-semibold mb-2">Root Causes:</h3>
+          <ul>
+            {items.map((item, index) => (
+              <li key={index}>
+                <p><strong>{item.rc}</strong></p>
+                {/* <ul>
+                  {item.context.map((ctx, i) => (
+                    <li key={i}><strong>Context:</strong> {ctx.title}</li>
+                  ))}
+                </ul> */}
+                {/* <p><strong>Strategy:</strong> {item.strategy}</p>
+                <br></br>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )} */}
+    </div>
+  );
+};
+
+export default HypothesisList;

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>
-
     )
 }