From 544ff73172243614d4bdda3fb58a004739b6bd75 Mon Sep 17 00:00:00 2001
From: Amy <amaule65@gmail.com>
Date: Sun, 30 Mar 2025 18:20:46 +0200
Subject: [PATCH 1/3] Frontend organizational refactor
---
frontend/src/App.jsx | 3 +-
.../src/{components => assets/CSS}/modal.css | 0
.../{modal.jsx => RoadmapModal.jsx} | 28 +-
frontend/src/components/adminConsole.jsx | 29 +-
frontend/src/components/milestoneForm.jsx | 160 ++++----
.../src/components/nodesVisualization.jsx | 387 +++++++++---------
frontend/src/components/roadmapUI.jsx | 28 +-
frontend/src/components/userSessions.jsx | 154 ++++---
.../roadmapContext.jsx | 0
.../{components => contexts}/userContext.jsx | 0
.../modalcontent.js} | 2 +-
.../multiRoadmapManagement.js} | 98 +++--
.../queryRoadmap.js} | 55 ++-
.../updateRoadmap.js} | 107 +++--
.../logging.jsx => utilities/utilities.js} | 6 +-
15 files changed, 512 insertions(+), 545 deletions(-)
rename frontend/src/{components => assets/CSS}/modal.css (100%)
rename frontend/src/components/{modal.jsx => RoadmapModal.jsx} (81%)
rename frontend/src/{components => contexts}/roadmapContext.jsx (100%)
rename frontend/src/{components => contexts}/userContext.jsx (100%)
rename frontend/src/{components/modalcontent.jsx => utilities/modalcontent.js} (99%)
rename frontend/src/{components/multiRoadmapManagement.jsx => utilities/multiRoadmapManagement.js} (82%)
rename frontend/src/{components/queryRoadmap.jsx => utilities/queryRoadmap.js} (82%)
rename frontend/src/{components/updateRoadmap.jsx => utilities/updateRoadmap.js} (89%)
rename frontend/src/{components/logging.jsx => utilities/utilities.js} (90%)
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 71f8eb1..f6b002a 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,5 @@
import './App.css'
-//import NodesVisualization from './components/nodesVisualization';
-import RoadmapUI from './components/roadmapUI';
+import RoadmapUI from './components/RoadmapUI';
function App() {
console.log(Date() + '\tApp.jsx called');
diff --git a/frontend/src/components/modal.css b/frontend/src/assets/CSS/modal.css
similarity index 100%
rename from frontend/src/components/modal.css
rename to frontend/src/assets/CSS/modal.css
diff --git a/frontend/src/components/modal.jsx b/frontend/src/components/RoadmapModal.jsx
similarity index 81%
rename from frontend/src/components/modal.jsx
rename to frontend/src/components/RoadmapModal.jsx
index 379b82e..a6b5494 100644
--- a/frontend/src/components/modal.jsx
+++ b/frontend/src/components/RoadmapModal.jsx
@@ -1,36 +1,34 @@
+import { useEffect, useContext, useState } from 'react';
import Modal from 'react-modal';
-import React, { useEffect, useContext, useState } from 'react';
-import RoadmapContext from './roadmapContext';
-import MilestoneForm from './milestoneForm';
-import UpdateRoadmap from './updateRoadmap';
-import SendToLogs from "./logging";
+import '../assets/CSS/modal.css';
-import './modal.css';
+import { sendToLogs } from '../utilities/utilities';
+import RoadmapContext from '../contexts/roadmapContext';
+import MilestoneForm from './MilestoneForm';
-
-function RoadmapModal() {
+const RoadmapModal = () => {
Modal.setAppElement(document.getElementById('RoadmapUI'));
- const [modalIsOpen, setIsOpen] = React.useState(false);
+ const [modalIsOpen, setIsOpen] = useState(false);
const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
- SendToLogs('modal.jsx called');
+ sendToLogs('modal.jsx called');
/*
// for debugging - get the type and value of each property in the roadmapState object:
// (we might decide we want different input field types for displaying/editing different property types)
// let roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{typeof roadmapState[prop]}]{prop}</li>);
let roadmapStateProps = Object.keys(roadmapState).map(prop => '[' + (typeof roadmapState[prop]) + ']' + prop);
- SendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
+ sendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
// alternate ways of getting type, for working around javascript typeof limitations:
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{Object.getPrototypeOf.toString.call(roadmapState[prop])}]{prop}</li>);
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{JSON.stringify(roadmapState[prop])}]{prop}</li>);
*/
- function openModal() {
- setIsOpen(true);
- }
+ // function openModal() {
+ // setIsOpen(true);
+ // }
function afterOpenModal() {
// would this be the right place to initialize the form?
@@ -52,7 +50,7 @@ function RoadmapModal() {
},[])
/*
-// moved form handler from modal.jsx to milestoneForm.jsx
+// moved form handler from modal.jsx to MilestoneForm.jsx
<MilestoneForm onSubmit={onSubmit} />
*/
diff --git a/frontend/src/components/adminConsole.jsx b/frontend/src/components/adminConsole.jsx
index eeedf6e..8aca7b0 100644
--- a/frontend/src/components/adminConsole.jsx
+++ b/frontend/src/components/adminConsole.jsx
@@ -1,42 +1,35 @@
-import React, { useEffect, useContext, useState } from 'react';
-import RoadmapContext from './roadmapContext';
-import QueryRoadmap from "./queryRoadmap";
-import UpdateRoadmap from "./updateRoadmap";
-import SendToLogs from "./logging";
-import MultiRoadmapManager from "./multiRoadmapManagement";
-
+import { useContext, useState } from 'react';
+import RoadmapContext from "../contexts/roadmapContext";
+import { sendToLogs } from '../utilities/utilities';
function AdminConsole() {
-
const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
const [adminConsoleInput, setAdminConsoleInput] = useState('');
const [adminConsoleOutput, setAdminConsoleOutput] = useState('');
- const multiRoadmapManager = MultiRoadmapManager();
- SendToLogs('adminConsole.jsx called');
+ sendToLogs('adminConsole.jsx called');
/*
// for debugging - get the type and value of each property in the roadmapState object:
// (we might decide we want different input field types for displaying/editing different property types)
// let roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{typeof roadmapState[prop]}]{prop}</li>);
let roadmapStateProps = Object.keys(roadmapState).map(prop => '[' + (typeof roadmapState[prop]) + ']' + prop);
- SendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
+ sendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
// alternate ways of getting type, for working around javascript typeof limitations:
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{Object.getPrototypeOf.toString.call(roadmapState[prop])}]{prop}</li>);
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{JSON.stringify(roadmapState[prop])}]{prop}</li>);
*/
// const onSubmit = async (event) => {
- const runCommand = async (event) => {
- SendToLogs(`adminConsole.jsx: runCommand() called with adminConsoleInput: "${adminConsoleInput}"`);
+ const runCommand = async () => {
+ sendToLogs(`adminConsole.jsx: runCommand() called with adminConsoleInput: "${adminConsoleInput}"`);
setAdminConsoleOutput(eval(adminConsoleInput));
- SendToLogs(`adminConsole.jsx: results of eval(adminConsoleInput):`);
- SendToLogs(adminConsoleOutput);
+ sendToLogs(`adminConsole.jsx: results of eval(adminConsoleInput):`);
+ sendToLogs(adminConsoleOutput);
}
-
- if (!roadmapState.userLoginInfo) return ('');
+ if (!roadmapState.userLoginInfo) return null;
return (
<div>
@@ -44,7 +37,7 @@ function AdminConsole() {
<p />
Admin Console
<p />
- <textArea
+ <textarea
id="adminConsoleInputId"
placeholder="type a command to run..."
value={adminConsoleInput}
diff --git a/frontend/src/components/milestoneForm.jsx b/frontend/src/components/milestoneForm.jsx
index 2d7a308..4180fb9 100644
--- a/frontend/src/components/milestoneForm.jsx
+++ b/frontend/src/components/milestoneForm.jsx
@@ -1,38 +1,38 @@
-import React, { useEffect, useLayoutEffect, useContext, useState } from "react";
-import RoadmapContext from "./roadmapContext";
-import UpdateRoadmap from "./updateRoadmap";
-import SendToLogs from "./logging";
+import { useLayoutEffect, useContext, useState } from "react";
+import RoadmapContext from "../contexts/roadmapContext";
+import UpdateRoadmap from "../utilities/updateRoadmap";
+import { sendToLogs } from '../utilities/utilities';
// FIXME - would it be better to rewrite this using react-hook-form instead?
-function Form() {
+function MilestoneForm() {
const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
const [formFields, setFormFields] = useState([]);
const [propsToRemove, setPropsToRemove] = useState([]);
const [selectedRelationshipType, setSelectedRelationshipType] = useState('');
- SendToLogs("milestoneForm(): roadmapState according to milestoneForm:");
- SendToLogs(roadmapState);
+ sendToLogs("MilestoneForm(): roadmapState according to MilestoneForm:");
+ sendToLogs(roadmapState);
// FIXME - if we get selectedNode(s) based on Cytoscape selection state, and that changes while the form is open, the app crashes - we should go back to tracking selectedNode in roadmapState instead -jwb 9.23.24
//let selectedNodes = roadmapState.cy.$(":selected");
//let selectedNode = selectedNodes.data();
- //SendToLogs("selectedNode from cytoscape function:");
+ //sendToLogs("selectedNode from cytoscape function:");
let selectedNode = roadmapState.selectedNode;
- SendToLogs("milestoneForm(): selectedNode from roadmapState:");
- SendToLogs(selectedNode);
- SendToLogs(`milestoneForm(): selectedNode.data() from roadmapState:\n${JSON.stringify(selectedNode.data())}`);
- SendToLogs(selectedNode.data());
+ sendToLogs("MilestoneForm(): selectedNode from roadmapState:");
+ sendToLogs(selectedNode);
+ sendToLogs(`MilestoneForm(): selectedNode.data() from roadmapState:\n${JSON.stringify(selectedNode.data())}`);
+ sendToLogs(selectedNode.data());
const onSubmit = async (event) => {
- SendToLogs(
- "milestoneForm.jsx onSubmit() called with event data:"
+ sendToLogs(
+ "MilestoneForm.jsx onSubmit() called with event data:"
);
- SendToLogs(event);
+ sendToLogs(event);
event.preventDefault();
- SendToLogs(
+ sendToLogs(
"formFields (" +
formFields.length +
" fields, keys: " +
@@ -41,7 +41,7 @@ function Form() {
}) +
"):"
);
- SendToLogs(formFields);
+ sendToLogs(formFields);
//let updatedProps = { ...selectedNode.milestone_properties };
let updatedProps = { ...selectedNode.data().milestone_properties };
@@ -49,7 +49,7 @@ function Form() {
formFields.forEach((formField) => {
let formFieldKey = formField.key;
let formFieldValue = formField.value;
- SendToLogs(
+ sendToLogs(
"Submitted field key: " +
formFieldKey +
" - value: " +
@@ -68,16 +68,16 @@ function Form() {
"newPropertyValue",
].includes(formFieldKey)
) {
- SendToLogs(
+ sendToLogs(
"New value submitted for " + formFieldKey + ": " + formFieldValue
);
updatedProps[formFieldKey] = formFieldValue;
}
}); // end formFields.forEach
-// SendToLogs("Properties explicitly marked for removal:");
-// SendToLogs(propsToRemove);
+// sendToLogs("Properties explicitly marked for removal:");
+// sendToLogs(propsToRemove);
propsToRemove.forEach((propName) => {
-// SendToLogs("Removing property: "+propName);
+// sendToLogs("Removing property: "+propName);
delete updatedProps[propName];
}); // end propsToRemove.forEach
@@ -93,13 +93,13 @@ function Form() {
updatedProperties: updatedProps,
cy: roadmapState.cy,
};
- SendToLogs('onSubmit() calling UpdateRoadmap() with pendingUpdate:');
- SendToLogs(pendingUpdate);
+ sendToLogs('onSubmit() calling UpdateRoadmap() with pendingUpdate:');
+ sendToLogs(pendingUpdate);
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapState.triggerUpdate) {
roadmapState.triggerUpdate();
}
@@ -134,10 +134,10 @@ function Form() {
// (we might decide we want different input field types for displaying/editing different property types)
const roadmapStateProps = Object.keys(roadmapState).map(prop => JSON.stringify(roadmapState[prop]));
const roadmapStateProps = Object.keys(roadmapState).map(prop => [prop,roadmapState[prop]]);
- SendToLogs('roadmapStateProps in milestoneForm.jsx: ');
- SendToLogs(roadmapStateProps);
+ sendToLogs('roadmapStateProps in MilestoneForm.jsx: ');
+ sendToLogs(roadmapStateProps);
const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{typeof roadmapState[prop]}]{prop}</li>);
-// SendToLogs('roadmapStateProps in milestoneForm.jsx: '+roadmapStateProps);
+// sendToLogs('roadmapStateProps in MilestoneForm.jsx: '+roadmapStateProps);
// alternate ways of getting type, for working around javascript typeof limitations:
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{Object.getPrototypeOf.toString.call(roadmapState[prop])}]{prop}</li>);
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{JSON.stringify(roadmapState[prop])}]{prop}</li>);
@@ -147,8 +147,8 @@ function Form() {
// (re-)initialize form
// wrapped in a function in order to call with useEffect, to prevent re-rendering every time a field is added to formFields state
function initializeForm() {
- SendToLogs(`initializeForm() called with selectedNode.data().milestone_properties:\n${JSON.stringify(selectedNode.data().milestone_properties)}`)
- SendToLogs(selectedNode.data().milestone_properties);
+ sendToLogs(`initializeForm() called with selectedNode.data().milestone_properties:\n${JSON.stringify(selectedNode.data().milestone_properties)}`)
+ sendToLogs(selectedNode.data().milestone_properties);
// filter out internal-use-only properties:
// - milestone_id - to prevent duplicate IDs, or IDs with characters that would be illegal in a URI
@@ -166,16 +166,16 @@ function Form() {
value: selectedNode.data().milestone_properties[propName],
}));
- SendToLogs(`initializeForm(): newFormFields:\n${JSON.stringify(newFormFields)}`)
- SendToLogs(newFormFields);
+ sendToLogs(`initializeForm(): newFormFields:\n${JSON.stringify(newFormFields)}`)
+ sendToLogs(newFormFields);
setFormFields(newFormFields);
}
const addProperty = () => {
- // SendToLogs('addProperty() called');
- // SendToLogs('formFields before ('+formFields.length+' fields, keys: '+formFields.map(formField => {return formField.key})+'):')
- // SendToLogs(formFields)
+ // sendToLogs('addProperty() called');
+ // sendToLogs('formFields before ('+formFields.length+' fields, keys: '+formFields.map(formField => {return formField.key})+'):')
+ // sendToLogs(formFields)
// get the new property name/value from the DOM objects...this is probably not the right way to do this
// FIXME - should this be done with an event handler directly on a DIV for the Add Property inputs?
let newPropNameDiv = document.getElementById("newPropertyName");
@@ -196,15 +196,15 @@ function Form() {
// FIXME - should this be done with an event handler directly on a DIV for the Delete Property inputs?
let propName = document.getElementById("removePropertyName").value;
let milestoneId = selectedNode.data().milestone_id;
- SendToLogs(`removeProperty() called to delete property "${propName}" from selectedNode (${milestoneId}):`);
- SendToLogs(selectedNode);
+ sendToLogs(`removeProperty() called to delete property "${propName}" from selectedNode (${milestoneId}):`);
+ sendToLogs(selectedNode);
// filter out internal-use-only properties:
// - milestone_id - to prevent duplicate IDs, or IDs with characters that would be illegal in a URI
// - created_at - because once a node is created, there shouldn't be a need to change this
// - updated_at - because this should be up to the backend
if (!["created_at", "milestone_id", "updated_at"].includes(propName)) {
- SendToLogs(`removeProperty(): removing property "${propName}" from roadmapState.selectedNode.data().milestone_properties for milestone_id ${milestoneId}`);
+ sendToLogs(`removeProperty(): removing property "${propName}" from roadmapState.selectedNode.data().milestone_properties for milestone_id ${milestoneId}`);
const pendingUpdate = {
updateFunction: "deleteProperty()",
@@ -213,22 +213,22 @@ function Form() {
cy: roadmapState.cy,
};
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
setFormFields(formFields.filter((formField) => formField.key !== propName));
let updatedPropsToRemove = [ ...propsToRemove, propName ];
setPropsToRemove(updatedPropsToRemove);
-// SendToLogs('updated propsToRemove:');
-// SendToLogs(propsToRemove);
+// sendToLogs('updated propsToRemove:');
+// sendToLogs(propsToRemove);
/*
// this just removes the property from the in-memory cytoscape object; those updates should be handled by updateRoadmap
let updatedSelectedNode = { ...roadmapState.selectedNode };
- SendToLogs(`removeProperty(): got updatedSelectedNode from roadmapState.selectedNode:`);
- SendToLogs(updatedSelectedNode);
+ sendToLogs(`removeProperty(): got updatedSelectedNode from roadmapState.selectedNode:`);
+ sendToLogs(updatedSelectedNode);
//updatedSelectedNode.milestone_properties = {
updatedSelectedNode.data().milestone_properties = {
...updatedSelectedNode.milestone_properties,
@@ -238,15 +238,15 @@ function Form() {
setRoadmapState({ ...roadmapState, selectedNode: updatedSelectedNode });
*/
} else {
- SendToLogs(`removeProperty(): property to delete is for internal user only - skipping deletion`);
+ sendToLogs(`removeProperty(): property to delete is for internal user only - skipping deletion`);
}
};
const deleteMilestone = async (event) => {
- SendToLogs(
- "milestoneForm.jsx deleteMilestone() called with event data:"
+ sendToLogs(
+ "MilestoneForm.jsx deleteMilestone() called with event data:"
);
- SendToLogs(event);
+ sendToLogs(event);
event.preventDefault();
const pendingUpdate = {
updateFunction: "deleteMilestone()",
@@ -255,10 +255,10 @@ function Form() {
cy: roadmapState.cy,
};
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapState.triggerUpdate) {
roadmapState.triggerUpdate();
}
@@ -266,10 +266,10 @@ function Form() {
};
const addRelationship = async (event) => {
- SendToLogs(
- "milestoneForm.jsx addRelationship() called with event data:"
+ sendToLogs(
+ "MilestoneForm.jsx addRelationship() called with event data:"
);
- SendToLogs(event);
+ sendToLogs(event);
let targetMilestoneId = document.getElementById("addRelationshipTargetNode").value;
let relationshipType = document.getElementById("addRelationshipType").value;
@@ -285,10 +285,10 @@ function Form() {
};
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapState.triggerUpdate) {
roadmapState.triggerUpdate();
}
@@ -297,10 +297,10 @@ function Form() {
const updateRelationship = async (event) => {
- SendToLogs(
- "milestoneForm.jsx updateRelationship() called with event data:"
+ sendToLogs(
+ "MilestoneForm.jsx updateRelationship() called with event data:"
);
- SendToLogs(event);
+ sendToLogs(event);
let selectedEdge = JSON.parse(document.getElementById("updateRelationship").value);
let sourceMilestoneId = selectedEdge.sourceMilestoneId;
let targetMilestoneId = selectedEdge.targetMilestoneId;
@@ -321,10 +321,10 @@ function Form() {
cy: roadmapState.cy,
};
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapState.triggerUpdate) {
roadmapState.triggerUpdate();
}
@@ -333,10 +333,10 @@ function Form() {
const deleteRelationship = async (event) => {
- SendToLogs(
- "milestoneForm.jsx deleteRelationship() called with event data:"
+ sendToLogs(
+ "MilestoneForm.jsx deleteRelationship() called with event data:"
);
- SendToLogs(event);
+ sendToLogs(event);
/*
let targetMilestoneId = document.getElementById(
@@ -370,10 +370,10 @@ function Form() {
};
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
- "returned to milestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
+ sendToLogs(
+ "returned to MilestoneForm.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapState.triggerUpdate) {
roadmapState.triggerUpdate();
}
@@ -384,10 +384,10 @@ function Form() {
// create dropdown list of node's relationships, starting with outgoers as "this node label > RELATIONSHIP TYPE > target node label", and ending with incomers as "this node label < RELATIONSHIP TYPE < source node label"
const enumerateRelationships = (node) => {
- SendToLogs(`enumerating ${node.connectedEdges().length} edges for node ${node.id()}`);
- let edges = node.connectedEdges().sort( (a, b) => {if (a.data("source") == node.id()) return -1});
- //SendToLogs(`enumerateRelationships(): got ${edges.length} edges: `);
- //SendToLogs(edges);
+ sendToLogs(`enumerating ${node.connectedEdges().length} edges for node ${node.id()}`);
+ let edges = node.connectedEdges().sort((a) => {if (a.data("source") == node.id()) return -1});
+ //sendToLogs(`enumerateRelationships(): got ${edges.length} edges: `);
+ //sendToLogs(edges);
let relationshipList = edges
.map((edge) => {
const sourceNode = roadmapState.cy.$id(edge.data("source"));
@@ -400,14 +400,14 @@ function Form() {
dirStr = `>`;
memberA = sourceNode.data("label") || `(no label - milestone ID: ${sourceNode.data("milestone_id")})`;
memberB = targetNode.data("label") || `(no label - milestone ID: ${targetNode.data("milestone_id")})`;
- };
+ }
if (edge.data("target") == node.id()) {
dirStr = `<`;
memberA = targetNode.data("label") || `(no label - milestone ID: ${targetNode.data("milestone_id")})`;
memberB = sourceNode.data("label") || `(no label - milestone ID: ${sourceNode.data("milestone_id")})`;
- };
+ }
if (edge.data("source") == edge.data("target")) dirStr = `-`;
- const selectionLabel = `${memberA} ${dirStr} ${relationshipType} ${dirStr} ${memberB}`;
+ // const selectionLabel = `${memberA} ${dirStr} ${relationshipType} ${dirStr} ${memberB}`;
//{sourceNode.data("label") || `(no label - milestone ID: ${sourceNode.data("milestone_id")})`} > {edge.data("relationshipType")} > {targetNode.data("label") || `(no label - milestone ID: ${targetNode.data("milestone_id")})`}
return <option
@@ -618,4 +618,4 @@ function Form() {
);
}
-export default Form;
+export default MilestoneForm;
diff --git a/frontend/src/components/nodesVisualization.jsx b/frontend/src/components/nodesVisualization.jsx
index 5fefe8b..505c1b3 100644
--- a/frontend/src/components/nodesVisualization.jsx
+++ b/frontend/src/components/nodesVisualization.jsx
@@ -1,4 +1,4 @@
-import React, {
+import {
useEffect,
useState,
useRef,
@@ -9,16 +9,15 @@ import cytoscape from "cytoscape";
import dagre from "cytoscape-dagre";
cytoscape.use(dagre);
-import RoadmapContext from "./roadmapContext";
-import UpdateRoadmap from "./updateRoadmap";
-import QueryRoadmap from "./queryRoadmap";
-import UserSessions from "./userSessions";
-import SendToLogs from "./logging";
-import MultiRoadmapManager from "./multiRoadmapManagement";
+import RoadmapContext from "../contexts/roadmapContext";
+import UpdateRoadmap from "../utilities/updateRoadmap";
+import QueryRoadmap from "../utilities/queryRoadmap";
+import { sendToLogs } from '../utilities/utilities';
+import MultiRoadmapManager from "../utilities/multiRoadmapManagement";
function NodesVisualization() {
- SendToLogs(`nodesVisualization.jsx called`);
+ sendToLogs(`nodesVisualization.jsx called`);
const [data, setData] = useState([]);
const cyRef = useRef(null);
@@ -44,24 +43,24 @@ function NodesVisualization() {
const queryUserProfile = async () => {
- SendToLogs(`nodesVisualization.jsx queryUserProfile() called`);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile() called`);
let userLoginInfo = null;
const pendingQuery = {
queryFunction: "getUserProfile()",
};
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): calling getUserProfile()`);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): calling getUserProfile()`);
const response = await QueryRoadmap(pendingQuery);
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): got response:`);
- SendToLogs(response);
- //SendToLogs(response);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): got response:`);
+ sendToLogs(response);
+ //sendToLogs(response);
const responseData = response.responseData;
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): got responseData:`);
- SendToLogs(responseData);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): got responseData:`);
+ sendToLogs(responseData);
if (!responseData) { // will be set to undefined if not logged in
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): setting userLoginInfo to false`);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): setting userLoginInfo to false`);
userLoginInfo = false;
} else {
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): setting userLoginInfo to the value of responseData`);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): setting userLoginInfo to the value of responseData`);
userLoginInfo = responseData;
}
@@ -69,7 +68,7 @@ function NodesVisualization() {
//setUserLoggedIn(responseData != null && responseData != undefined && Object.keys(responseData).length != 0);
let newUserLoggedInState = (responseData != null && responseData != undefined && Object.keys(responseData).length != 0);
if (newUserLoggedInState != userLoggedInState) {
- SendToLogs(`nodesVisualization.jsx queryUserProfile(): changing userLoggedInState from: ${userLoggedInState} to: ${newUserLoggedInState}`);
+ sendToLogs(`nodesVisualization.jsx queryUserProfile(): changing userLoggedInState from: ${userLoggedInState} to: ${newUserLoggedInState}`);
setUserLoggedInState(newUserLoggedInState);
let newRoadmapState = roadmapState;
newRoadmapState.userLoginInfo = userLoginInfo;
@@ -80,7 +79,7 @@ function NodesVisualization() {
const selectRoadmap = async () => {
- SendToLogs(`selectRoadmap() called`);
+ sendToLogs(`selectRoadmap() called`);
/*
flow for opening a roadmap:
-if the user is not logged in
@@ -100,15 +99,15 @@ flow for opening a roadmap:
// clear current roadmap data
setData([]);
- SendToLogs(`selectRoadmap(): current roadmapState.userLoginInfo:`);
- SendToLogs(roadmapState.userLoginInfo);
+ sendToLogs(`selectRoadmap(): current roadmapState.userLoginInfo:`);
+ sendToLogs(roadmapState.userLoginInfo);
- SendToLogs(`selectRoadmap() calling queryUserProfile to get user profile...`);
+ sendToLogs(`selectRoadmap() calling queryUserProfile to get user profile...`);
let userProfile = await queryUserProfile();
let userEmail = '(anonymous)';
- SendToLogs(`selectRoadmap() got user profile from queryUserProfile:`);
- SendToLogs(userProfile);
- SendToLogs(`selectRoadmap() calling getDatabaseRootNode...`);
+ sendToLogs(`selectRoadmap() got user profile from queryUserProfile:`);
+ sendToLogs(userProfile);
+ sendToLogs(`selectRoadmap() calling getDatabaseRootNode...`);
const databaseRootNode = await getDatabaseRootNode();
//let databaseRootNode = roadmapState.databaseRootNode;
//let databaseRootNode = ManageRoadmaps.getDatabaseRootNode;
@@ -120,10 +119,10 @@ flow for opening a roadmap:
//if (!userLoggedInState) {
if (!userProfile || userProfile == null || userProfile == false || !userProfile.email) {
selectedRoadmapRootNodeId = roadmapState.databaseRootNode.properties.publicRoadmapRootNodeId;
- SendToLogs(`selectRoadmap(): user NOT logged in - selecting public roadmap (roadmap root node ID: ${selectedRoadmapRootNodeId})`);
+ sendToLogs(`selectRoadmap(): user NOT logged in - selecting public roadmap (roadmap root node ID: ${selectedRoadmapRootNodeId})`);
} else {
userEmail = userProfile.email;
- SendToLogs(`selectRoadmap(): user (${userEmail}) is logged in - setting isLoadingRoadmap to true, zooming out, and getting their editable roadmaps...`)
+ sendToLogs(`selectRoadmap(): user (${userEmail}) is logged in - setting isLoadingRoadmap to true, zooming out, and getting their editable roadmaps...`)
// FIXME - this worked one single time...
//cyRef.current.innerHTML = `<h1>${new Date() + ":\t"}LOADING...</h1>`
@@ -135,16 +134,16 @@ flow for opening a roadmap:
let userRoadmaps = allRoadmaps.filter(function(roadmap) {
return (roadmap.users.indexOf(userEmail) != -1);
});
- SendToLogs(`selectRoadmap(): got ${userRoadmaps.length} roadmap(s) for ${userEmail} from database root node:`);
- SendToLogs(userRoadmaps);
+ sendToLogs(`selectRoadmap(): got ${userRoadmaps.length} roadmap(s) for ${userEmail} from database root node:`);
+ sendToLogs(userRoadmaps);
if (userRoadmaps.length == 0) {
- SendToLogs(`selectRoadmap(): ${userEmail} has no editable roadmaps - creating an initial one for them`);
+ sendToLogs(`selectRoadmap(): ${userEmail} has no editable roadmaps - creating an initial one for them`);
//let newRoadmap = await createRoadmap();
- //SendToLogs(`selectRoadmap(): got new roadmap from createRoadmap():`);
+ //sendToLogs(`selectRoadmap(): got new roadmap from createRoadmap():`);
let newRoadmap = await multiRoadmapManager.createRoadmap(roadmapState.cy,roadmapState.databaseRootNode,userEmail);
- SendToLogs(`selectRoadmap(): got new roadmap from multiRoadmapManager.createRoadmap():`);
- SendToLogs(newRoadmap);
+ sendToLogs(`selectRoadmap(): got new roadmap from multiRoadmapManager.createRoadmap():`);
+ sendToLogs(newRoadmap);
userRoadmaps = [ newRoadmap.data ];
// FIXME - do we want to create a starter node for them before their empty roadmap has been loaded into memory? or load their empty roadmap and let them create their own starter node?
@@ -153,18 +152,18 @@ flow for opening a roadmap:
let openForm = false;
// we don't want to update Cytoscape, because the new node will have a relationship to its roadmapRootNode, and the Cytoscape update will fail due to missing relationship target
let updateCytoscape = false;
- SendToLogs(`selectRoadmap(): calling addNode() to create an initial node in the new roadmap`);
+ sendToLogs(`selectRoadmap(): calling addNode() to create an initial node in the new roadmap`);
let firstNode = await addNode(newRoadmap.data.milestone_id,openForm,updateCytoscape);
- SendToLogs(`selectRoadmap(): returned after calling addNode() to create initial node in the new roadmap - firstNode:`);
- SendToLogs(firstNode);
+ sendToLogs(`selectRoadmap(): returned after calling addNode() to create initial node in the new roadmap - firstNode:`);
+ sendToLogs(firstNode);
//await addNodeToRoadmap(firstNode.properties.milestone_id,newRoadmap.properties.milestone_id);
//await multiRoadmapManager.addNodeToRoadmap(firstNode.properties.milestone_id,newRoadmap.properties.milestone_id)
}
selectedRoadmapRootNodeId = userRoadmaps[0].milestone_id;
- SendToLogs(`selectRoadmap(): selecting first editable roadmap for ${userEmail} (roadmap root node ID: ${selectedRoadmapRootNodeId})`);
+ sendToLogs(`selectRoadmap(): selecting first editable roadmap for ${userEmail} (roadmap root node ID: ${selectedRoadmapRootNodeId})`);
} // end if (!userLoggedInState)
- SendToLogs(`selectRoadmap() setting roadmapState.currentRoadmapRootNodeId to ${selectedRoadmapRootNodeId}`);
+ sendToLogs(`selectRoadmap() setting roadmapState.currentRoadmapRootNodeId to ${selectedRoadmapRootNodeId}`);
let newRoadmapState = roadmapState;
//newRoadmapState.currentRoadmapRootNodeId = roadmapRootNodeId;
// neyrokod roadmap for testing:
@@ -172,28 +171,28 @@ flow for opening a roadmap:
newRoadmapState.currentRoadmapRootNodeId = selectedRoadmapRootNodeId;
setRoadmapState(newRoadmapState);
- SendToLogs(`selectRoadmap() getting roadmapData from multiRoadmapManager.openRoadmap() for roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
+ sendToLogs(`selectRoadmap() getting roadmapData from multiRoadmapManager.openRoadmap() for roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
let queryFunction = 'searchMilestonesByProperty()';
//queryFunction = 'getSingleNodeChain()';
//let roadmapData = await multiRoadmapManager.openRoadmap(selectedRoadmapRootNodeId,queryFunction);
let openRoadmapResult = await multiRoadmapManager.openRoadmap(selectedRoadmapRootNodeId,queryFunction,userEmail);
- SendToLogs(`selectRoadmap() got openRoadmapResult from multiRoadmapManager.openRoadmap() for roadmapRootNodeId ${selectedRoadmapRootNodeId} (openRoadmapResult.roadmapRootNodeId: ${openRoadmapResult.roadmapRootNodeId}) and user ${userEmail} (openRoadmapResult.userEmail: ${openRoadmapResult.userEmail}):`);
- SendToLogs(openRoadmapResult);
+ sendToLogs(`selectRoadmap() got openRoadmapResult from multiRoadmapManager.openRoadmap() for roadmapRootNodeId ${selectedRoadmapRootNodeId} (openRoadmapResult.roadmapRootNodeId: ${openRoadmapResult.roadmapRootNodeId}) and user ${userEmail} (openRoadmapResult.userEmail: ${openRoadmapResult.userEmail}):`);
+ sendToLogs(openRoadmapResult);
let roadmapData = openRoadmapResult.data;
// React state does not stay in synch with fetch requests - need to make sure the openRoadmap result is the one for the current user/roadmap
if (openRoadmapResult.userEmail == userEmail && openRoadmapResult.roadmapRootNodeId == selectedRoadmapRootNodeId) {
- SendToLogs(`selectRoadmap() got roadmapData for ${roadmapData.length} nodes - setting isLoadingRoadmap to false, zooming in, and calling setData() for roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
+ sendToLogs(`selectRoadmap() got roadmapData for ${roadmapData.length} nodes - setting isLoadingRoadmap to false, zooming in, and calling setData() for roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
setIsLoadingRoadmap(false);
setData(roadmapData);
// FIXME - this probably doesn't do anything when called from here:
zoomIn();
let roadmapLoadingEndTime = new Date();
- SendToLogs(`selectRoadmap(): roadmap was loading from ${roadmapLoadingStartTime} to ${roadmapLoadingEndTime} - loaded ${roadmapData.length} nodes in ${(roadmapLoadingEndTime - roadmapLoadingStartTime)/1000 + 's'} for roadmapRootNodeId ${selectedRoadmapRootNodeId} (openRoadmapResult.roadmapRootNodeId: ${openRoadmapResult.roadmapRootNodeId}) and user ${userEmail} (openRoadmapResult.userEmail: ${openRoadmapResult.userEmail})`);
+ sendToLogs(`selectRoadmap(): roadmap was loading from ${roadmapLoadingStartTime} to ${roadmapLoadingEndTime} - loaded ${roadmapData.length} nodes in ${(roadmapLoadingEndTime - roadmapLoadingStartTime)/1000 + 's'} for roadmapRootNodeId ${selectedRoadmapRootNodeId} (openRoadmapResult.roadmapRootNodeId: ${openRoadmapResult.roadmapRootNodeId}) and user ${userEmail} (openRoadmapResult.userEmail: ${openRoadmapResult.userEmail})`);
} else {
// FIXME - what do we do if the response we got doesn't match the roadmapRootNodeId & userEmail in the request?
- SendToLogs(`selectRoadmap() got roadmapData for the wrong roadmap/user! Got ${roadmapData.length} nodes for roadmapRootNodeId ${openRoadmapResult.roadmaprootNodeId} and user ${openRoadmapResult.userEmail}, instead of roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
+ sendToLogs(`selectRoadmap() got roadmapData for the wrong roadmap/user! Got ${roadmapData.length} nodes for roadmapRootNodeId ${openRoadmapResult.roadmaprootNodeId} and user ${openRoadmapResult.userEmail}, instead of roadmapRootNodeId ${selectedRoadmapRootNodeId} and user ${userEmail}`);
}
}
@@ -203,9 +202,9 @@ flow for opening a roadmap:
const getDatabaseRootNode = async () => {
// get the root node for the entire multi-roadmap database
- SendToLogs(`getDatabaseRootNode() called`);
+ sendToLogs(`getDatabaseRootNode() called`);
let databaseRootNodeId = import.meta.env.VITE_DATABASE_ROOTNODE_MILESTONEID;
- SendToLogs(`getDatabaseRootNode(): got databaseRootNodeId: ${databaseRootNodeId}`);
+ sendToLogs(`getDatabaseRootNode(): got databaseRootNodeId: ${databaseRootNodeId}`);
// note: the backend uses a CONTAINS operator to compare the query value with the property value
const pendingQuery = {
queryFunction: "searchMilestonesByProperty()",
@@ -214,13 +213,13 @@ flow for opening a roadmap:
query: databaseRootNodeId,
}
};
- SendToLogs(`getDatabaseRootNode(): calling QueryRoadmap with pendingQuery: ${JSON.stringify(pendingQuery)}`);
+ sendToLogs(`getDatabaseRootNode(): calling QueryRoadmap with pendingQuery: ${JSON.stringify(pendingQuery)}`);
const response = await QueryRoadmap(pendingQuery);
- SendToLogs(`getDatabaseRootNode(): got response:`);
- SendToLogs(response);
+ sendToLogs(`getDatabaseRootNode(): got response:`);
+ sendToLogs(response);
const responseData = response.responseData;
- SendToLogs(`getDatabaseRootNode(): got responseData:`);
- SendToLogs(responseData);
+ sendToLogs(`getDatabaseRootNode(): got responseData:`);
+ sendToLogs(responseData);
if (responseData.length != 1) throw `${new Date()}\tgetDatabaseRootNode(): did not find a unique database root node!`
let databaseRootNode = responseData[0][0];
@@ -230,20 +229,20 @@ flow for opening a roadmap:
newRoadmapState.databaseRootNode = databaseRootNode;
setRoadmapState(newRoadmapState);
- SendToLogs(`getDatabaseRootNode(): got database root node:`);
- SendToLogs(databaseRootNode);
+ sendToLogs(`getDatabaseRootNode(): got database root node:`);
+ sendToLogs(databaseRootNode);
return databaseRootNode;
}
const getRoadmapRootNodeId = (roadmaps,roadmapName) => {
- SendToLogs(`getRoadmapRootNodeId() called`);
+ sendToLogs(`getRoadmapRootNodeId() called`);
let roadmapRootNodeMatches = roadmaps.filter(function(roadmap){return roadmap.name === roadmapName});
let roadmapRootNode = roadmapRootNodeMatches[0];
- SendToLogs(`getRoadmapRootNodeId() got ROADMAP root node metadata for roadmapName "${roadmapName}" from the DATABASE root node:`);
- SendToLogs(roadmapRootNode);
+ sendToLogs(`getRoadmapRootNodeId() got ROADMAP root node metadata for roadmapName "${roadmapName}" from the DATABASE root node:`);
+ sendToLogs(roadmapRootNode);
let roadmapRootNodeId = roadmapRootNode.properties.milestone_id;
- SendToLogs(`getRoadmapRootNodeId() got ROADMAP root node ID "${roadmapRootNodeId}" for roadmapName "${roadmapName}" from the DATABASE root node`);
+ sendToLogs(`getRoadmapRootNodeId() got ROADMAP root node ID "${roadmapRootNodeId}" for roadmapName "${roadmapName}" from the DATABASE root node`);
return roadmapRootNodeId;
}
@@ -261,12 +260,12 @@ flow:
*/
/*
// create a new node to be the new roadmap root
- SendToLogs(`createRoadmap(): creating new node to be the new roadmap root node`);
+ sendToLogs(`createRoadmap(): creating new node to be the new roadmap root node`);
// FIXME - maybe it makes more sense to call updateRoadmap directly to add the node, and let addNode() do standard things for regular nodes (like relating to current roadmap root, and opening the modal)
//let newRoadmapRootNode = await addNode();
- //SendToLogs(`createRoadmap(): got new roadmap root node from addNode():`);
+ //sendToLogs(`createRoadmap(): got new roadmap root node from addNode():`);
setIsAddingNode(true);
let newRoadmapRootNode = null;
@@ -279,14 +278,14 @@ flow:
try {
const roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
"createRoadmap(): returned to nodesVisualization.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapUpdateResult.responseData) {
let newNodeFields = roadmapUpdateResult.responseData.records[0]._fields[0];
- SendToLogs(`createRoadmap(): newNodeFields:`);
- SendToLogs(newNodeFields);
+ sendToLogs(`createRoadmap(): newNodeFields:`);
+ sendToLogs(newNodeFields);
let newNodeMilestoneId = newNodeFields.properties.milestone_id;
// construct a new cytoscape node object
@@ -297,14 +296,14 @@ flow:
milestone_properties: newNodeFields.properties,
},
};
- SendToLogs(`createRoadmap(): nodeData:`);
- SendToLogs(nodeData);
+ sendToLogs(`createRoadmap(): nodeData:`);
+ sendToLogs(nodeData);
// add the new cytoscape node to the cytoscape graph object now, since it wasn't in the database the last time the backend was queried
roadmapState.cy.add(nodeData);
// get the new element that we just added
newRoadmapRootNode = roadmapState.cy.nodes(`[milestone_properties.milestone_id = "${newNodeMilestoneId}" ]`);
} else {
- SendToLogs(`createRoadmap(): got empty roadmapUpdateResult!`);
+ sendToLogs(`createRoadmap(): got empty roadmapUpdateResult!`);
}; // end if (roadmapUpdateResult.responseData) for new node
} catch (error) {
console.error("createRoadmap(): Error adding node: ", error);
@@ -312,25 +311,25 @@ flow:
setIsAddingNode(false);
}
- SendToLogs(`createRoadmap(): created new roadmap root node:`);
- SendToLogs(newRoadmapRootNode);
+ sendToLogs(`createRoadmap(): created new roadmap root node:`);
+ sendToLogs(newRoadmapRootNode);
let userEmail = roadmapState.userLoginInfo.email;
let newRoadmap = {
name : '(unnamed roadmap)',
properties : { milestone_id : newRoadmapRootNode.milestone_properties.milestone_id },
users : [ userEmail ],
};
- SendToLogs(`createRoadmap(): built new roadmap metadata entry to add to database root node, based on new node we just created:`);
- SendToLogs(newRoadmap);
+ sendToLogs(`createRoadmap(): built new roadmap metadata entry to add to database root node, based on new node we just created:`);
+ sendToLogs(newRoadmap);
// add an entry to the database root node 'roadmaps' property
- SendToLogs(`createRoadmap(): adding new roadmap to database root node for user ${userEmail}`);
+ sendToLogs(`createRoadmap(): adding new roadmap to database root node for user ${userEmail}`);
let allRoadmaps = JSON.parse(roadmapState.databaseRootNode.properties.roadmaps);
- SendToLogs(`createRoadmap(): got ${allRoadmaps.length} total roadmaps from database root node:`);
- SendToLogs(allRoadmaps);
+ sendToLogs(`createRoadmap(): got ${allRoadmaps.length} total roadmaps from database root node:`);
+ sendToLogs(allRoadmaps);
allRoadmaps.push(newRoadmap);
- SendToLogs(`createRoadmap(): updated allRoadmaps:`);
- SendToLogs(allRoadmaps);
+ sendToLogs(`createRoadmap(): updated allRoadmaps:`);
+ sendToLogs(allRoadmaps);
let updatedProps = {...roadmapState.databaseRootNode.properties};
@@ -345,22 +344,22 @@ flow:
cy: roadmapState.cy,
};
- SendToLogs(`createRoadmap(): calling UpdateRoadmap to add the new roadmap to the database root node with pendingUpdate:`);
- SendToLogs(pendingUpdate);
+ sendToLogs(`createRoadmap(): calling UpdateRoadmap to add the new roadmap to the database root node with pendingUpdate:`);
+ sendToLogs(pendingUpdate);
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
`createRoadmap(): returned to nodesVisualization.jsx after calling UpdateRoadmap to add new roadmap to database root node - roadmapUpdateResult: `
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
// once the new roadmap root node is created, populate the new roadmap with an initial milestone and create a relationship to the roadmap root node, so that we can get a chain of connected milestones from the new roadmap root
// - otherwise, getting a chain of connected milestones may fail if the root node has no relationships
- SendToLogs(`createRoadmap(): creating first node to populate the new roadmap`);
+ sendToLogs(`createRoadmap(): creating first node to populate the new roadmap`);
let firstNode = await addNode();
- SendToLogs(`createRoadmap(): got firstNode from addNode():`);
- SendToLogs(firstNode);
+ sendToLogs(`createRoadmap(): got firstNode from addNode():`);
+ sendToLogs(firstNode);
- SendToLogs(`createRoadmap(): creating relationship between first node and new roadmap root node`);
+ sendToLogs(`createRoadmap(): creating relationship between first node and new roadmap root node`);
await addNodeToRoadmap(firstNode.milestone_id,newRoadmapRootNode.milestone_id);
// update roadmapState to set newRoadmap to be the current roadmap root node, and firstNode to be the selected node for opening the modal
@@ -374,7 +373,7 @@ flow:
// open modal for user to set properties of first node
roadmapState.modalControls.setModalIsOpen(true);
- SendToLogs(`createRoadmap(): done creating new roadmap and adding it to the database root node`);
+ sendToLogs(`createRoadmap(): done creating new roadmap and adding it to the database root node`);
return newRoadmap;
}
@@ -385,8 +384,8 @@ flow:
const getRoadmaps = async () => {
// get the roadmaps accessible to the user that is logged in
// FIXME - maybe this should only be called when user is logged in, and not try to get user login info or ever return public roadmap
- SendToLogs(`getRoadmaps(): roadmapState.databaseRootNode:`);
- SendToLogs(roadmapState.databaseRootNode);
+ sendToLogs(`getRoadmaps(): roadmapState.databaseRootNode:`);
+ sendToLogs(roadmapState.databaseRootNode);
// FIXME - some functions don't always see userRoadmapState.userLoginInfo - tried calling getUserLoginInfo from various places as a workaround, but even that doesn't work
//await roadmapState.getUserLoginInfo();
@@ -401,33 +400,33 @@ flow:
}
};
const response = await QueryRoadmap(pendingQuery);
- SendToLogs(`getRoadmaps(): got response to query for public roadmap root node ID:`);
- SendToLogs(response);
+ sendToLogs(`getRoadmaps(): got response to query for public roadmap root node ID:`);
+ sendToLogs(response);
// not sure why responseData is an array of arrays...
// have userRoadmaps initially default to the public roadmap:
let userRoadmaps = response.responseData[0];
- SendToLogs(`getRoadmaps(): got ${userRoadmaps.length} public roadmap(s) from database root node:`);
- SendToLogs(userRoadmaps);
+ sendToLogs(`getRoadmaps(): got ${userRoadmaps.length} public roadmap(s) from database root node:`);
+ sendToLogs(userRoadmaps);
if (userLoggedInState) {
let userEmail = roadmapState.userLoginInfo.email;
let allRoadmaps = JSON.parse(roadmapState.databaseRootNode.properties.roadmaps);
- SendToLogs(`getRoadmaps(): got ${allRoadmaps.length} total roadmaps from database root node:`);
- SendToLogs(allRoadmaps);
+ sendToLogs(`getRoadmaps(): got ${allRoadmaps.length} total roadmaps from database root node:`);
+ sendToLogs(allRoadmaps);
userRoadmaps = allRoadmaps.filter(function(roadmap) {
return (roadmap.users.indexOf(userEmail) != -1);
});
- SendToLogs(`getRoadmaps(): got ${userRoadmaps.length} roadmap(s) for ${userEmail} from database root node:`);
- SendToLogs(userRoadmaps);
+ sendToLogs(`getRoadmaps(): got ${userRoadmaps.length} roadmap(s) for ${userEmail} from database root node:`);
+ sendToLogs(userRoadmaps);
if (userRoadmaps.length == 0) {
- SendToLogs(`getRoadmaps(): ${userEmail} has no editable roadmaps - creating an initial one for them`);
+ sendToLogs(`getRoadmaps(): ${userEmail} has no editable roadmaps - creating an initial one for them`);
//let newRoadmap = await createRoadmap();
- //SendToLogs(`getRoadmaps(): got new roadmap from createRoadmap():`);
+ //sendToLogs(`getRoadmaps(): got new roadmap from createRoadmap():`);
let newRoadmap = await multiRoadmapManager.createRoadmap();
- SendToLogs(`getRoadmaps(): got new roadmap from multiRoadmapManager.createRoadmap():`);
- SendToLogs(newRoadmap);
+ sendToLogs(`getRoadmaps(): got new roadmap from multiRoadmapManager.createRoadmap():`);
+ sendToLogs(newRoadmap);
userRoadmaps = [ newRoadmap ];
let firstNode = await addNode();
@@ -435,7 +434,7 @@ flow:
}
}
- SendToLogs(`getRoadmaps(): setting roadmapState.currentRoadmapRootNodeId to the user's first roadmap: ${userRoadmaps[0].properties.milestone_id}`);
+ sendToLogs(`getRoadmaps(): setting roadmapState.currentRoadmapRootNodeId to the user's first roadmap: ${userRoadmaps[0].properties.milestone_id}`);
let newRoadmapState = roadmapState;
//newRoadmapState.currentRoadmapRootNodeId = roadmapRootNodeId;
newRoadmapState.currentRoadmapRootNodeId = userRoadmaps[0].properties.milestone_id;
@@ -448,7 +447,7 @@ flow:
// FIXME: can we delete fetchData() now that we have QueryRoadmap?
// might still be useful to fall back to when debugging...but then when can we delete it?
const fetchData = async () => {
- SendToLogs("fetchData() called");
+ sendToLogs("fetchData() called");
try {
const backendBaseUri = import.meta.env.VITE_BACKEND_BASE_URI;
//const backendUri = backendBaseUri + "/api/milestones";
@@ -471,8 +470,8 @@ flow:
};
const response = await fetch(backendUri, requestOptions);
- SendToLogs("got response:");
- SendToLogs(response);
+ sendToLogs("got response:");
+ sendToLogs(response);
//const response = await fetch(backendBaseUri + "/api/milestones");
if (!response.ok) {
@@ -481,8 +480,8 @@ flow:
const responseData = await response.json();
- SendToLogs("got response data:");
- SendToLogs(responseData);
+ sendToLogs("got response data:");
+ sendToLogs(responseData);
setData(responseData);
} catch (error) {
@@ -492,13 +491,13 @@ flow:
const triggerUpdate = () => {
- SendToLogs(`triggerUpdate() called`);
+ sendToLogs(`triggerUpdate() called`);
setUpdateTrigger((prev) => prev + 1);
};
const addNodeToRoadmap = async (milestoneId, roadmapRootNodeId) => {
- SendToLogs(
+ sendToLogs(
`addNodeToRoadmap(): adding node with milestoneId ${milestoneId} to roadmap with root node ID ${roadmapRootNodeId}`
);
@@ -518,10 +517,10 @@ flow:
cy: roadmapState.cy,
};
const roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
`addNodeToRoadmap(): returned to nodesVisualization.jsx after calling UpdateRoadmap to add node to roadmap - roadmapUpdateResult: `
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapUpdateResult.responseData) {
let newEdge = roadmapUpdateResult.responseData.records[0]._fields[0];
@@ -536,8 +535,8 @@ flow:
},
};
- SendToLogs(`addNodeToRoadmap(): edgeData:`);
- SendToLogs(edgeData);
+ sendToLogs(`addNodeToRoadmap(): edgeData:`);
+ sendToLogs(edgeData);
// add the new cytoscape edge to the cytoscape graph object now, since it wasn't in the database the last time the backend was queried
roadmapState.cy.add(edgeData);
}; // end if (roadmapUpdateResult.responseData) for new edge connecting node to roadmap
@@ -572,16 +571,16 @@ flow:
try {
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
"addNode(): returned to nodesVisualization.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
//triggerUpdate();
if (roadmapUpdateResult.responseData) {
let newNodeFields = roadmapUpdateResult.responseData.records[0]._fields[0];
- SendToLogs(`addNode(): newNodeFields:`);
- SendToLogs(newNodeFields);
+ sendToLogs(`addNode(): newNodeFields:`);
+ sendToLogs(newNodeFields);
let newNodeMilestoneId = newNodeFields.properties.milestone_id;
/*
@@ -594,13 +593,13 @@ flow:
milestone_properties: newNodeFields.properties,
},
};
- SendToLogs(`addNode(): nodeData:`);
- SendToLogs(nodeData);
+ sendToLogs(`addNode(): nodeData:`);
+ sendToLogs(nodeData);
// add the new cytoscape node to the cytoscape graph object now, since it wasn't in the database the last time the backend was queried
roadmapState.cy.add(nodeData);
*/
// set the new node's roadmapRootNodeId property
- SendToLogs(`addNode(): setting new node's roadmapRootNodeId to ${roadmapRootNodeId}`);
+ sendToLogs(`addNode(): setting new node's roadmapRootNodeId to ${roadmapRootNodeId}`);
// newNode isn't defined yet - that comes from the Cytoscape object, but we may not be adding this node to Cytoscape
// - but no need to populate updatedProps from existing props if new node doesn't have any props yet
//let updatedProps = newNode.data().milestone_properties;
@@ -616,12 +615,12 @@ flow:
// cy: roadmapState.cy,
};
if (updateCytoscape) pendingUpdate.cy = roadmapState.cy;
- SendToLogs(`addNode(): calling UpdateRoadmap() with pendingUpdate to set new node's roadmapRootNodeId to ${roadmapRootNodeId}:`);
- SendToLogs(pendingUpdate);
+ sendToLogs(`addNode(): calling UpdateRoadmap() with pendingUpdate to set new node's roadmapRootNodeId to ${roadmapRootNodeId}:`);
+ sendToLogs(pendingUpdate);
roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(`addNode(): returned to nodesVisualization.jsx after calling UpdateRoadmap to set the new node's roadmapRootNodeId - roadmapUpdateResult:`);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(`addNode(): returned to nodesVisualization.jsx after calling UpdateRoadmap to set the new node's roadmapRootNodeId - roadmapUpdateResult:`);
+ sendToLogs(roadmapUpdateResult);
// get the new element that we just added
// if we didn't add it to Cytoscape then we can't retrieve it from Cytoscape
@@ -633,7 +632,7 @@ flow:
// open the form automatically to edit the new milestone
if (openForm) {
- // set roadmapState.selectedNode to be the new node, so that it's the node that milestoneForm operates on
+ // set roadmapState.selectedNode to be the new node, so that it's the node that MilestoneForm operates on
const newRoadmapState = { ...roadmapState };
newRoadmapState.nodeSelectionChangedFlag = true;
newRoadmapState.selectedNode = newNode;
@@ -643,7 +642,7 @@ flow:
}
} else {
- SendToLogs(`addNode(): got empty roadmapUpdateResult!`);
+ sendToLogs(`addNode(): got empty roadmapUpdateResult!`);
}; // end if (roadmapUpdateResult.responseData) for new node
} catch (error) {
console.error("addNode(): Error adding node: ", error);
@@ -654,31 +653,31 @@ flow:
}, [isAddingNode, triggerUpdate]);
const addRoadmapRootPropertyToAllRoadmapNodes = () => {
- SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapState.currentRoadmapRootNodeId: ${roadmapState.currentRoadmapRootNodeId}\tnumber of nodes loaded in current roadmap: ${roadmapState.cy.nodes().length}\troadmapState.userLoginInfo: ${JSON.stringify(roadmapState.userLoginInfo)}`);
+ sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapState.currentRoadmapRootNodeId: ${roadmapState.currentRoadmapRootNodeId}\tnumber of nodes loaded in current roadmap: ${roadmapState.cy.nodes().length}\troadmapState.userLoginInfo: ${JSON.stringify(roadmapState.userLoginInfo)}`);
roadmapState.cy.nodes().forEach((selectedNode) => {
let updatedProps = selectedNode.data().milestone_properties;
let nodeCurrentRoot = selectedNode.data('milestone_properties').roadmapRootNodeId;
let nodeNewRoot = roadmapState.currentRoadmapRootNodeId;
if (nodeCurrentRoot) {
- SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId already exists on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
+ sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId already exists on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
if (nodeCurrentRoot != nodeNewRoot) {
- SendToLogs(`!!! addRoadmapRootPropertyToAllRoadmapNodes(): existing roadmapRootNodeId (${nodeCurrentRoot}) is different from new value (${nodeNewRoot}) on node id: ${selectedNode.data().milestone_id}!`);
+ sendToLogs(`!!! addRoadmapRootPropertyToAllRoadmapNodes(): existing roadmapRootNodeId (${nodeCurrentRoot}) is different from new value (${nodeNewRoot}) on node id: ${selectedNode.data().milestone_id}!`);
} else {
-// SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId already matches currentRoadmapRootNodeId on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
+// sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId already matches currentRoadmapRootNodeId on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
}
} else {
- SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId does not exist on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
+ sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): roadmapRootNodeId does not exist on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`);
updatedProps.roadmapRootNodeId = roadmapState.currentRoadmapRootNodeId;
- SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): setting roadmapRootNodeId to nodeNewRoot (${nodeNewRoot}) on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})
+ sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): setting roadmapRootNodeId to nodeNewRoot (${nodeNewRoot}) on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})
- nodeCurrentRoot: ${nodeCurrentRoot}
- updatedProps.roadmapRootNodeId: ${updatedProps.roadmapRootNodeId}`);
// selectedNode.data('milestone_properties').roadmapRootNodeId got updated when we set it in updatedProps, so logging it here is misleading
// - current selectedNode.data('milestone_properties').roadmapRootNodeId: ${selectedNode.data('milestone_properties').roadmapRootNodeId}
-// SendToLogs(updatedProps);
+// sendToLogs(updatedProps);
let pendingUpdate = {
updateFunction: "patchMilestone()",
milestoneId: selectedNode.data().milestone_id,
@@ -688,7 +687,7 @@ flow:
// await isn't allowed in non-async function (even if it's in an async function called from a non-async function)
// let result = await UpdateRoadmap(pendingUpdate);
UpdateRoadmap(pendingUpdate);
- SendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): finished setting roadmapRootNodeId to nodeNewRoot (${nodeNewRoot}) on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`)
+ sendToLogs(`addRoadmapRootPropertyToAllRoadmapNodes(): finished setting roadmapRootNodeId to nodeNewRoot (${nodeNewRoot}) on node #${roadmapState.cy.nodes().indexOf(selectedNode)+1} of ${roadmapState.cy.nodes().length} (id: ${selectedNode.data().milestone_id})`)
}
})
}
@@ -707,7 +706,7 @@ flow:
!roadmapState.modalControls.modalIsOpen
) {
event.preventDefault();
- SendToLogs("initial tab key press detected");
+ sendToLogs("initial tab key press detected");
setRoadmapState((prev) => ({
...prev,
userInput: {
@@ -733,7 +732,7 @@ flow:
!roadmapState.modalControls.modalIsOpen
) {
event.preventDefault();
- SendToLogs("initial control key press detected");
+ sendToLogs("initial control key press detected");
setRoadmapState((prev) => ({
...prev,
userInput: {
@@ -747,7 +746,7 @@ flow:
},
},
}));
- SendToLogs('Enabling scroll wheel zooming - TEMPORARILY DEACTIVATED DUE TO ISSUE WITH HOTKEYS NOT UPDATING RODAMAPSTATE');
+ sendToLogs('Enabling scroll wheel zooming - TEMPORARILY DEACTIVATED DUE TO ISSUE WITH HOTKEYS NOT UPDATING RODAMAPSTATE');
//roadmapState.cy.userZoomingEnabled(true);
}
@@ -759,7 +758,7 @@ flow:
!roadmapState.modalControls.modalIsOpen
) {
event.preventDefault();
- SendToLogs("initial space key press detected");
+ sendToLogs("initial space key press detected");
setRoadmapState((prev) => ({
...prev,
userInput: {
@@ -774,20 +773,20 @@ flow:
},
}));
// add function calls or other activity for SPACE hotkey to test here
- SendToLogs('SPACE key pressed - dumping current roadmapState:');
- SendToLogs(roadmapState);
- SendToLogs(`SPACE key pressed - roadmapState.userInput.keyboard.hotkeysActive.space: ${roadmapState.userInput.keyboard.hotkeysActive.space}`);
+ sendToLogs('SPACE key pressed - dumping current roadmapState:');
+ sendToLogs(roadmapState);
+ sendToLogs(`SPACE key pressed - roadmapState.userInput.keyboard.hotkeysActive.space: ${roadmapState.userInput.keyboard.hotkeysActive.space}`);
/*
const pendingQuery = {
queryFunction: "searchMilestonesByProperty()",
propName: "milestone_id",
};
- SendToLogs(`space hotkey: calling QueryRoadmap with pendingQuery: ${JSON.stringify(pendingQuery)}`);
+ sendToLogs(`space hotkey: calling QueryRoadmap with pendingQuery: ${JSON.stringify(pendingQuery)}`);
const response = await QueryRoadmap(pendingQuery);
const responseData = response.responseData;
- SendToLogs(`space hotkey: got responseData with ${responseData.length} members:`);
- SendToLogs(responseData);
+ sendToLogs(`space hotkey: got responseData with ${responseData.length} members:`);
+ sendToLogs(responseData);
*/
@@ -806,7 +805,7 @@ flow:
event.key === "Tab" &&
roadmapState.userInput.keyboard.hotkeysActive.tab
) {
- SendToLogs("initial tab key release detected");
+ sendToLogs("initial tab key release detected");
setRoadmapState((prev) => ({
...prev,
userInput: {
@@ -827,7 +826,7 @@ flow:
event.key === "control" &&
roadmapState.userInput.keyboard.hotkeysActive.control
) {
- SendToLogs("initial control key release detected");
+ sendToLogs("initial control key release detected");
setRoadmapState((prev) => ({
...prev,
userInput: {
@@ -841,7 +840,7 @@ flow:
},
},
}));
- SendToLogs('Disabling scroll wheel zooming - TEMPORARILY DEACTIVATED DUE TO ISSUE WITH HOTKEYS NOT UPDATING RODAMAPSTATE');
+ sendToLogs('Disabling scroll wheel zooming - TEMPORARILY DEACTIVATED DUE TO ISSUE WITH HOTKEYS NOT UPDATING RODAMAPSTATE');
//roadmapState.cy.userZoomingEnabled(false);
}
@@ -851,7 +850,7 @@ flow:
event.key === ' ' &&
roadmapState.userInput.keyboard.hotkeysActive.space
) {
- SendToLogs('initial space key release detected')
+ sendToLogs('initial space key release detected')
roadmapState.userInput.keyboard.hotkeysActive.space = true
setRoadmapState((prev) => ({
...prev,
@@ -874,11 +873,11 @@ flow:
);
- const drillDown = (targetNode, relationshipType) => {
+ const drillDown = (targetNode) => {
// drill down into one node and its sub-nodes
- SendToLogs('drillDown() called');
- SendToLogs('targetNode: ');
- SendToLogs(targetNode);
+ sendToLogs('drillDown() called');
+ sendToLogs('targetNode: ');
+ sendToLogs(targetNode);
// targetNode.closedNeighborhood().complement().remove();
let nodeClosedNeighborhood = targetNode.closedNeighborhood();
@@ -887,10 +886,10 @@ flow:
const newRoadmapState = { ...roadmapState };
// if the target node has no visible incoming relationships, drill down
if (targetNode.incomers('[relationshipType = "PRECEDES"],[relationshipType = "CONTAINS"]').empty()) {
- SendToLogs('targetNode has no incoming relationships - drilling down')
+ sendToLogs('targetNode has no incoming relationships - drilling down')
// if there are visible nodes outside of the target node's closed neighborhood, drill down
//if (nodeClosedNeighborhood.complement().filter(':visible').nonempty() || targetNode.incomers('[relationshipType = "PRECEDES"],[relationshipType = "CONTAINS"]').empty() ) {
- //SendToLogs('found '+targetNode.closedNeighborhood().complement().filter(':visible').length+' nodes beyond the target node\'s closedNeighborhood that are visible - drilling down')
+ //sendToLogs('found '+targetNode.closedNeighborhood().complement().filter(':visible').length+' nodes beyond the target node\'s closedNeighborhood that are visible - drilling down')
newRoadmapState.navigationHistory.push(visibleElements);
nodeClosedNeighborhood.complement().hide()
nodeClosedNeighborhood.show()
@@ -899,19 +898,19 @@ flow:
// roadmapState.cy.elements().restore()
// hide() and show() are not in the docs but random internet person said they work - https://stackoverflow.com/questions/68544263/how-to-hide-cytoscape-nodes-when-graph-is-ready-rendered
// we could also use the custom '.hidden' style selector that we defined, to do .toggleClass('hidden',true) - although that might not work as documented
- SendToLogs('did not find any nodes beyond the target node\'s closedNeighborhood that are visible - drilling...up?')
+ sendToLogs('did not find any nodes beyond the target node\'s closedNeighborhood that are visible - drilling...up?')
nodeClosedNeighborhood.hide()
newRoadmapState.navigationHistory.pop().show()
recenterAndZoomToVisible()
}
roadmapState.cy.$(':visible').connectedEdges().toggleClass('visible',true);
setRoadmapState(newRoadmapState);
- SendToLogs('drillDown() finished');
+ sendToLogs('drillDown() finished');
}
const recenterAndZoomToVisible = () => {
- SendToLogs('recenterAndZoomToVisible() called');
+ sendToLogs('recenterAndZoomToVisible() called');
let cy = roadmapState.cy;
// apply grid layout to nodes
//let visibleElementsLayout = cy.$(':visible').layout({name:'grid'});
@@ -923,29 +922,29 @@ flow:
// zoom to visible nodes
cy.fit(cy.$(':visible'));
- SendToLogs('recenterAndZoomToVisible() finished');
+ sendToLogs('recenterAndZoomToVisible() finished');
}
const zoomOut = () => {
- SendToLogs('zoomOut() called');
+ sendToLogs('zoomOut() called');
let cy = roadmapState.cy;
cy.animate({
zoom:1e-50,
},{
duration:500,
})
- SendToLogs('zoomOut() finished');
+ sendToLogs('zoomOut() finished');
}
const zoomIn = () => {
- SendToLogs('zoomIn() called');
+ sendToLogs('zoomIn() called');
let cy = roadmapState.cy;
cy.animate({
zoom:1,
},{
duration:1000,
})
- SendToLogs('zoomIn() finished');
+ sendToLogs('zoomIn() finished');
}
useEffect(() => {
@@ -959,7 +958,7 @@ flow:
}, [handleKeyDown, handleKeyUp]);
useEffect(() => {
- SendToLogs(
+ sendToLogs(
Date() + "\tuseEffect() called to (re-)create cytoscape object"
);
if (cyRef.current) {
@@ -1124,13 +1123,13 @@ flow:
// listen for "onetap" instead of "tap" so that this doesn't get triggered by dbltap events
// we don't want to listen for "selected" events because more than one could be selected at a time
cy.on("onetap", "node", function (nodeOnetapEvent) {
- SendToLogs('cy event listener caught node onetap event for node id '+nodeOnetapEvent.target.id()+' - node details below: ');
+ sendToLogs('cy event listener caught node onetap event for node id '+nodeOnetapEvent.target.id()+' - node details below: ');
const targetNode = nodeOnetapEvent.target;
const nodeInfo = targetNode.json().data;
- SendToLogs(nodeInfo);
+ sendToLogs(nodeInfo);
// update roadmap state with new selected node properties
- // SendToLogs('new node is selected - updating roadmap state for new selected node');
+ // sendToLogs('new node is selected - updating roadmap state for new selected node');
const newRoadmapState = { ...roadmapState };
// FIXME - do we still need nodeSelectionChangedFlag?
// update roadmap state to set nodeSelectionChangedFlag, so that Form re-initializes
@@ -1138,22 +1137,22 @@ flow:
newRoadmapState.nodeSelectionChangedFlag = true;
// update roadmap state to set selectedNode, so that selectedNode doesn't change even if the node is de-selected while the form is still open
newRoadmapState.selectedNode = cy.$(':selected');
- // SendToLogs('newRoadmapState.selectedNode.id: '+newRoadmapState.selectedNode.id+' - newRoadmapState.selectedNode.milestone_id: '+newRoadmapState.selectedNode.milestone_id+' - keys: '+Object.keys(newRoadmapState.selectedNode));
+ // sendToLogs('newRoadmapState.selectedNode.id: '+newRoadmapState.selectedNode.id+' - newRoadmapState.selectedNode.milestone_id: '+newRoadmapState.selectedNode.milestone_id+' - keys: '+Object.keys(newRoadmapState.selectedNode));
// FIXME - this works to expose cytoscape functions to other modules that retrieve stuff from roadmapState via Context, but does it cause any issues to put the whole cy object into state/context and pass it around to other components? or is it just a reference?
newRoadmapState.cy = cy;
setRoadmapState(newRoadmapState);
// open modal
- // SendToLogs('opening modal');
+ // sendToLogs('opening modal');
roadmapState.modalControls.setModalIsOpen(true);
});
// listen for "node double tap" events
cy.on("dbltap", "node", function (nodeDblTapEvent) {
- // SendToLogs('cy event listener caught double node tap event for node id '+nodeTapEvent.target.id()+' - node details below: ');
+ // sendToLogs('cy event listener caught double node tap event for node id '+nodeTapEvent.target.id()+' - node details below: ');
const targetNode = nodeDblTapEvent.target;
const nodeInfo = targetNode.json().data;
- // SendToLogs(nodeInfo);
+ // sendToLogs(nodeInfo);
drillDown(targetNode, 'PRECEDES')
});
@@ -1161,27 +1160,27 @@ flow:
// listen for "onetap" instead of "tap" so that this doesn't get triggered by dbltap events
// we don't want to listen for "selected" events because more than one could be selected at a time
cy.on("onetap", "edge", function (edgeOnetapEvent) {
- SendToLogs(
+ sendToLogs(
"cy event listener caught edge onetap event for edge id " +
edgeOnetapEvent.target.id() +
" - edge details below: "
);
const targetEdge = edgeOnetapEvent.target;
const edgeInfo = targetEdge.json().data;
- SendToLogs(edgeInfo);
+ sendToLogs(edgeInfo);
/*
// update roadmap state with new selected edge properties
- // SendToLogs('new edge is selected - updating roadmap state for new selected edge');
+ // sendToLogs('new edge is selected - updating roadmap state for new selected edge');
const newRoadmapState = roadmapState;
newRoadmapState.selectedEdge = edgeInfo;
- // SendToLogs('newRoadmapState.selectedEdge.id: '+newRoadmapState.selectedEdge.id+' - newRoadmapState.selectedEdge.id: '+newRoadmapState.selectedEdge.id+' - keys: '+Object.keys(newRoadmapState.selectedEdge));
+ // sendToLogs('newRoadmapState.selectedEdge.id: '+newRoadmapState.selectedEdge.id+' - newRoadmapState.selectedEdge.id: '+newRoadmapState.selectedEdge.id+' - keys: '+Object.keys(newRoadmapState.selectedEdge));
setRoadmapState(newRoadmapState);
// open modal now that it knows about the new selected edge
- // SendToLogs('opening modal');
+ // sendToLogs('opening modal');
roadmapState.modalControls.setModalIsOpen(true);
- // SendToLogs(document.getElementById('modalDiv'));
+ // sendToLogs(document.getElementById('modalDiv'));
*/
});
@@ -1198,13 +1197,13 @@ flow:
let neyroImportNodes = cy.nodes('[milestone_properties.text]');
// let neyroImportNodes = cy.$(function(ele, i) {return ele.data('text')});
-// SendToLogs('found '+neyroImportNodes.length+' neyroImportNodes ('+neyroImportNodes.roots().length+' roots)');
-// SendToLogs(neyroImportNodes);
+// sendToLogs('found '+neyroImportNodes.length+' neyroImportNodes ('+neyroImportNodes.roots().length+' roots)');
+// sendToLogs(neyroImportNodes);
neyroImportNodes.toggleClass('redBorder',true);
// neyroImportNodes.toggleClass('sizeBySuccessorCount',true);
// set initial view to be nodes without incoming relationships
- //SendToLogs('hiding all non-root nodes');
+ //sendToLogs('hiding all non-root nodes');
//let rootNodes = cy.nodes().roots();
// set initial view to be nodes without incoming relationships *OF A SPECIFIED TYPE*
// FIXME - change 'PRECEDES' here to a variable, populated from a dropdown list of relationship types, to allow the user to view the top-level nodes *for a given relationship type*
@@ -1228,8 +1227,8 @@ flow:
// FIXME - hide some other misc. nodes upon initial load for now; need to figure out a better way to determine what to display initially
//let databaseRootNode = roadmapState.cy.nodes(`[milestone_properties.milestone_id = "${import.meta.env.VITE_DATABASE_ROOTNODE_MILESTONEID}"]`);
let databaseRootNode = cy.nodes(`[milestone_properties.milestone_id = "${import.meta.env.VITE_DATABASE_ROOTNODE_MILESTONEID}"]`);
- //SendToLogs(`cytoscape object for database root node:`);
- //SendToLogs(databaseRootNode);
+ //sendToLogs(`cytoscape object for database root node:`);
+ //sendToLogs(databaseRootNode);
databaseRootNode.hide();
//databaseRootNode.show();
@@ -1244,9 +1243,9 @@ dbRootNode.show();
//databaseRootNode.toggleClass('hidden',true);
let currentRoadmapRootNode = cy.nodes(`[milestone_properties.milestone_id = "${roadmapState.currentRoadmapRootNodeId}"]`);
currentRoadmapRootNode.hide();
- //SendToLogs('visible neyroImportNodes: '+cy.$(':visible').nodes('[milestone_properties.text]').length);
- //SendToLogs('root neyroImportNodes: '+cy.nodes('[milestone_properties.text]').roots().length);
- SendToLogs(`visible elements: ${cy.$(':visible').length} out of ${cy.elements().length} total loaded elements`);
+ //sendToLogs('visible neyroImportNodes: '+cy.$(':visible').nodes('[milestone_properties.text]').length);
+ //sendToLogs('root neyroImportNodes: '+cy.nodes('[milestone_properties.text]').roots().length);
+ sendToLogs(`visible elements: ${cy.$(':visible').length} out of ${cy.elements().length} total loaded elements`);
recenterAndZoomToVisible();
}
@@ -1260,13 +1259,13 @@ dbRootNode.show();
// 'data' is the top-level array of nodes from the backend
if (data.length > 0) {
- SendToLogs("Retrieved data: ");
- SendToLogs(data);
+ sendToLogs("Retrieved data: ");
+ sendToLogs(data);
// 'node' is a sub-array of 2 elements: that node's data, and the edges where that node is the start node
data.forEach((node) => {
/*
if (node[1].length > 0) {
- SendToLogs(
+ sendToLogs(
"Extracting node data and " +
node[1].length +
" edge(s) from node " +
@@ -1275,7 +1274,7 @@ dbRootNode.show();
data.indexOf(node) +
":"
);
- SendToLogs(node);
+ sendToLogs(node);
}
*/
try {
@@ -1305,7 +1304,7 @@ dbRootNode.show();
nodes.push(nodeData);
} catch (err) {
- SendToLogs("Could not load nodeData! err: " + err);
+ sendToLogs("Could not load nodeData! err: " + err);
}
// got node data from first element; now get edge(s) from second element
@@ -1320,7 +1319,7 @@ dbRootNode.show();
},
};
/*
- SendToLogs(
+ sendToLogs(
"Added edge with startNodeElementId " +
edge.startNodeElementId +
", endNodeElementId " +
@@ -1335,19 +1334,19 @@ dbRootNode.show();
if (sourceNodeExists && targetNodeExists) {
edges.push(edgeData);
} else {
- SendToLogs(`Received edge with an endpoint that we don't have! sourceNodeExists: ${sourceNodeExists} - targetNodeExists: ${targetNodeExists} - edgeData:`);
- SendToLogs(edgeData);
+ sendToLogs(`Received edge with an endpoint that we don't have! sourceNodeExists: ${sourceNodeExists} - targetNodeExists: ${targetNodeExists} - edgeData:`);
+ sendToLogs(edgeData);
}
}); // end nodeEdges.forEach((edge)
- // SendToLogs('Nodes extracted so far: '+nodes.length)
- // SendToLogs('Edges extracted so far: '+edges.length)
- // SendToLogs(nodes)
+ // sendToLogs('Nodes extracted so far: '+nodes.length)
+ // sendToLogs('Edges extracted so far: '+edges.length)
+ // sendToLogs(nodes)
}); // end data.forEach((node)
/*
// FIXME: instead of ensuring that selectedNode is always defined in roadmapState, we should fix things so that nothing breaks if selectedNode is not defined -jwb 8.24.24
- SendToLogs(
+ sendToLogs(
"Initializing roadmapState selectedNode to first node retrieved from backend"
);
const newRoadmapState = { ...roadmapState };
@@ -1357,7 +1356,7 @@ dbRootNode.show();
*/
} // end if (data.length > 0)
// Create a single array of nodes and edges
- SendToLogs(
+ sendToLogs(
"Finished extracting " +
nodes.length +
" nodes and " +
diff --git a/frontend/src/components/roadmapUI.jsx b/frontend/src/components/roadmapUI.jsx
index a011e6e..a1dea38 100644
--- a/frontend/src/components/roadmapUI.jsx
+++ b/frontend/src/components/roadmapUI.jsx
@@ -1,11 +1,11 @@
-import { useEffect, useState, useContext } from 'react';
-import NodesVisualization from './nodesVisualization';
-import RoadmapContext from './roadmapContext';
-import Modal from './modal';
-import UserSessions from './userSessions';
+import { useState } from 'react';
+import NodesVisualization from './NodesVisualization';
+import RoadmapContext from "../contexts/roadmapContext";
+import RoadmapModal from './RoadmapModal';
+import UserSessions from './UserSessions';
//import GetUserInfo from './getUserInfo';
-import SendToLogs from "./logging";
-import AdminConsole from "./adminConsole";
+import { sendToLogs } from '../utilities/utilities';
+import AdminConsole from "./AdminConsole";
// FIXME - should UserContext be separated from RoadmapContext? would RoadmapContext provider be moved to the core roadmap div and be nested under the UserContext provider at the roadmapUI level?
// for now, keep it in RoadmapContext for simplicity, but might make sense to disentangle them if e. g. different users could load different roadmaps
@@ -16,7 +16,7 @@ import AdminConsole from "./adminConsole";
// --jwb 10.2.24
function RoadmapUI() {
- SendToLogs('roadmapUI.jsx called');
+ sendToLogs('roadmapUI.jsx called');
const [roadmapState, setRoadmapState] = useState({});
roadmapState.userInput = {
@@ -32,31 +32,25 @@ function RoadmapUI() {
return (
-
<RoadmapContext.Provider value={[roadmapState, setRoadmapState]}>
-
<div id="RoadmapUI" className="uiContainer">
<div className="preRoadmap">
<UserSessions />
- <p>"roadmapUI.jsx, under div class uiContainer / div class preRoadmap, before Visualization div"</p>
+ <p>roadmapUI.jsx, under div class uiContainer / div class preRoadmap, before Visualization div</p>
<div className="navBar">
roadmapUI.jsx, under div class uiContainer / div class preRoadmap / div class navBar
</div>
<p />
<AdminConsole />
</div>
-
- 'roadmapUI.jsx, under div class uiContainer, between div class preRoadmap and div class roadmap'
-
+ roadmapUI.jsx, under div class uiContainer, between div class preRoadmap and div class roadmap
<div className="roadmap" id="roadmapDiv">
Visualization: roadmapUI.jsx, under div class uiContainer / div class roadmap, before calling NodesVisualization
- <Modal />
+ <RoadmapModal />
<NodesVisualization />
</div>
</div>
-
</RoadmapContext.Provider>
-
)
}
diff --git a/frontend/src/components/userSessions.jsx b/frontend/src/components/userSessions.jsx
index 6503cb2..864cb3e 100644
--- a/frontend/src/components/userSessions.jsx
+++ b/frontend/src/components/userSessions.jsx
@@ -1,4 +1,4 @@
-// userSessions.jsx:
+// UserSessions.jsx:
// -provide a login button if user is not logged in
// -provide a logout button if user is logged in
// -update roadmapState with user profile (if logged in) -- FIXME: is it better to put user profile into roadmapState, or to have every component be able to query for user profile?
@@ -6,22 +6,18 @@
// -roadmapState.userLoginInfo : userProfile
// -roadmapState.userLoginInfo.userLoggedInState : <boolean indicating whether or not the user is logged in>
-import React, {
- useContext,
- useState,
-} from 'react';
-import SendToLogs from "./logging";
+import { useContext, useState } from 'react';
+import { sendToLogs } from '../utilities/utilities';
// should UserContext be separated from RoadmapContext? would RoadmapContext provider be moved to the core roadmap div and be nested under the UserContext provider at the roadmapUI level?
// for now, keeping it in RoadmapContext for simplicity, but might make sense to disentangle them if e. g. different users could load different roadmaps
// --jwb 2.21.24
//import UserContext from './userContext';
-import RoadmapContext from './roadmapContext';
-import QueryRoadmap from "./queryRoadmap";
+import RoadmapContext from "../contexts/roadmapContext";
-export default userSessions => {
- SendToLogs(`userSessions.jsx called`);
+const UserSessions = () => {
+ sendToLogs(`UserSessions.jsx called`);
const [roadmapState,setRoadmapState] = useContext(RoadmapContext);
const [userLoggedInState,setUserLoggedInState] = useState(false);
@@ -31,86 +27,85 @@ export default userSessions => {
// FIXME - logging out throws an error on the backend:
//Error: req#logout requires a callback function
// at req.logout.req.logOut (/home/jburson/milestones/backend/node_modules/passport/lib/http/request.js:65:44)
- function logout() {
-// this should get the response from a logout attempt
-// if response.ok, it should setUserLoginState(false)
-// otherwise, it should setUserLoginState(true)? start singing Hotel California?
- SendToLogs('attempting logout...');
- const logoutResponse = fetchLogout();
- newRoadmapState.userLoggedInState = logoutResponse.status;
- newRoadmapState.loginStatusText = logoutResponse.statusText;
- if (logoutResponse.ok) {
- newRoadmapState.userLoginInfo = logoutResponse.data;
- newRoadmapState.userLoginInfo.userLoggedInState = false;
- SendToLogs('logout successful - updating roadmapState with new userLoginInfo: '+newRoadmapState.userLoginInfo);
- setRoadmapState(newRoadmapState);
- //setUserLoginState(false);
- //setUserLoggedInState(false);
- } else {
-// no, but seriously, what do we want to do if a user is unable to log out?
-// setUserLoginState(false);
- //setUserLoggedInState(false);
- SendToLogs('logout failed - getting response content...');
- newRoadmapState.userLoginInfo = logoutResponse.data;
-// newRoadmapState.userLoginInfo.userLoggedInState = false;
-// newRoadmapState.userLoginInfo = logoutResponse.statusText;
- SendToLogs('updating roadmapState with new userLoginInfo: '+newRoadmapState.userLoginInfo);
- setRoadmapState(newRoadmapState);
- }
- }
+// function logout() {
+// // this should get the response from a logout attempt
+// // if response.ok, it should setUserLoginState(false)
+// // otherwise, it should setUserLoginState(true)? start singing Hotel California?
+// sendToLogs('attempting logout...');
+// const logoutResponse = fetchLogout();
+// let newRoadmapState = {};
+// newRoadmapState.userLoggedInState = logoutResponse.status;
+// newRoadmapState.loginStatusText = logoutResponse.statusText;
+// if (logoutResponse.ok) {
+// newRoadmapState.userLoginInfo = logoutResponse.data;
+// newRoadmapState.userLoginInfo.userLoggedInState = false;
+// sendToLogs('logout successful - updating roadmapState with new userLoginInfo: '+newRoadmapState.userLoginInfo);
+// setRoadmapState(newRoadmapState);
+// //setUserLoginState(false);
+// //setUserLoggedInState(false);
+// } else {
+// // no, but seriously, what do we want to do if a user is unable to log out?
+// // setUserLoginState(false);
+// //setUserLoggedInState(false);
+// sendToLogs('logout failed - getting response content...');
+// newRoadmapState.userLoginInfo = logoutResponse.data;
+// // newRoadmapState.userLoginInfo.userLoggedInState = false;
+// // newRoadmapState.userLoginInfo = logoutResponse.statusText;
+// sendToLogs('updating roadmapState with new userLoginInfo: '+newRoadmapState.userLoginInfo);
+// setRoadmapState(newRoadmapState);
+// }
+// }
function queryUserProfile() {
- SendToLogs(`UserSessions queryUserProfile() called`);
+ sendToLogs(`UserSessions queryUserProfile() called`);
let newUserLoginInfo = roadmapState.userLoginInfo;
let newUserLoggedInState = (newUserLoginInfo != undefined && newUserLoginInfo != false && newUserLoginInfo.email);
if (newUserLoggedInState != userLoggedInState) {
- SendToLogs(`UserSessions queryUserProfile(): setting userLoggedInState to: ${newUserLoggedInState}`);
+ sendToLogs(`UserSessions queryUserProfile(): setting userLoggedInState to: ${newUserLoggedInState}`);
setUserLoggedInState(newUserLoggedInState);
- SendToLogs(`UserSessions queryUserProfile(): setting userLoginInfo to newUserLoginInfo`);
+ sendToLogs(`UserSessions queryUserProfile(): setting userLoginInfo to newUserLoginInfo`);
setUserLoginInfo(newUserLoginInfo);
}
}
-
-
- const fetchLogout = async () => {
-// FIXME - logging out throws an error on the backend:
-//Error: req#logout requires a callback function
-// at req.logout.req.logOut (/home/jburson/milestones/backend/node_modules/passport/lib/http/request.js:65:44)
-
- try {
- const backendBaseUri = import.meta.env.VITE_BACKEND_BASE_URI;
- const logoutUri = backendBaseUri + "/api/users/logout";
-
- const requestHeaders = new Headers();
- const frontendOrigin = import.meta.env.VITE_FRONTEND_ORIGIN;
- requestHeaders.append('Access-Control-Allow-Origin',frontendOrigin);
- const requestOptions = {
- mode: 'cors',
- headers: requestHeaders,
- credentials: 'include',
- method: 'DELETE',
- };
- const response = await fetch(logoutUri, requestOptions);
-
- if (!response.ok) {
- throw new Error("Network response was not ok");
- }
- const responseData = await response.json();
- //return response;
- return responseData;
- } catch (error) {
- console.error("Error:", error);
- }
- };
+// const fetchLogout = async () => {
+// // FIXME - logging out throws an error on the backend:
+// //Error: req#logout requires a callback function
+// // at req.logout.req.logOut (/home/jburson/milestones/backend/node_modules/passport/lib/http/request.js:65:44)
+
+// try {
+// const backendBaseUri = import.meta.env.VITE_BACKEND_BASE_URI;
+// const logoutUri = backendBaseUri + "/api/users/logout";
+
+// const requestHeaders = new Headers();
+// const frontendOrigin = import.meta.env.VITE_FRONTEND_ORIGIN;
+// requestHeaders.append('Access-Control-Allow-Origin',frontendOrigin);
+// const requestOptions = {
+// mode: 'cors',
+// headers: requestHeaders,
+// credentials: 'include',
+// method: 'DELETE',
+// };
+// const response = await fetch(logoutUri, requestOptions);
+
+// if (!response.ok) {
+// throw new Error("Network response was not ok");
+// }
+// const responseData = await response.json();
+// //return response;
+// return responseData;
+// } catch (error) {
+// console.error("Error:", error);
+// }
+// };
const getLoginStatusText = () => {
- SendToLogs(`UserSessions getLoginStatusText() called`);
+ sendToLogs(`UserSessions getLoginStatusText() called`);
let loginStatusText = '(not logged in)';
- SendToLogs(`UserSessions getLoginStatusText() calling queryUserProfile()`);
+ sendToLogs(`UserSessions getLoginStatusText() calling queryUserProfile()`);
queryUserProfile();
if (userLoggedInState) {
@@ -121,12 +116,12 @@ export default userSessions => {
const getLoginLogoutButton = () => {
- SendToLogs(`UserSessions getLoginLogoutButton() called`);
+ sendToLogs(`UserSessions getLoginLogoutButton() called`);
- SendToLogs(`UserSessions getLoginLogoutButton(): current value of roadmapState.userLoginInfo:`);
- SendToLogs(roadmapState.userLoginInfo);
+ sendToLogs(`UserSessions getLoginLogoutButton(): current value of roadmapState.userLoginInfo:`);
+ sendToLogs(roadmapState.userLoginInfo);
- SendToLogs(`UserSessions getLoginLogoutButton() calling queryUserProfile()`);
+ sendToLogs(`UserSessions getLoginLogoutButton() calling queryUserProfile()`);
queryUserProfile();
if (userLoggedInState) {
@@ -154,10 +149,11 @@ export default userSessions => {
return (
<div>
- <p>in userSessions.jsx</p>
+ <p>in UserSessions.jsx</p>
{getLoginStatusText()}
{getLoginLogoutButton()}
</div>
)
}
+export default UserSessions;
diff --git a/frontend/src/components/roadmapContext.jsx b/frontend/src/contexts/roadmapContext.jsx
similarity index 100%
rename from frontend/src/components/roadmapContext.jsx
rename to frontend/src/contexts/roadmapContext.jsx
diff --git a/frontend/src/components/userContext.jsx b/frontend/src/contexts/userContext.jsx
similarity index 100%
rename from frontend/src/components/userContext.jsx
rename to frontend/src/contexts/userContext.jsx
diff --git a/frontend/src/components/modalcontent.jsx b/frontend/src/utilities/modalcontent.js
similarity index 99%
rename from frontend/src/components/modalcontent.jsx
rename to frontend/src/utilities/modalcontent.js
index b523417..b96a4ab 100644
--- a/frontend/src/components/modalcontent.jsx
+++ b/frontend/src/utilities/modalcontent.js
@@ -1,5 +1,5 @@
export default {
-return("
+return(
I am the very model of a Singularitarian
I’m combination Transhuman, Immortalist, Extropian
Aggressively I’m changing all my body’s biochemistry
diff --git a/frontend/src/components/multiRoadmapManagement.jsx b/frontend/src/utilities/multiRoadmapManagement.js
similarity index 82%
rename from frontend/src/components/multiRoadmapManagement.jsx
rename to frontend/src/utilities/multiRoadmapManagement.js
index f8de68c..91baa5e 100644
--- a/frontend/src/components/multiRoadmapManagement.jsx
+++ b/frontend/src/utilities/multiRoadmapManagement.js
@@ -1,20 +1,18 @@
// can't call hooks if this is used as an object instead of a function
//import { useEffect, useState, useContext } from 'react';
-//import RoadmapContext from './roadmapContext';
+//import RoadmapContext from "../contexts/roadmapContext";
import QueryRoadmap from "./queryRoadmap";
import UpdateRoadmap from "./updateRoadmap";
-import SendToLogs from "./logging";
+import { sendToLogs } from './utilities';
// what is the difference between these different ways of defining/exporting ?
//function ManageRoadmaps() {
-export default manageRoadmaps => {
- SendToLogs(`MultiRoadmapManagement.jsx called`);
+const manageRoadmaps = () => {
+ sendToLogs(`MultiRoadmapManagement.jsx called`);
// can't call hooks if this is used as an object instead of a function
// const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
- let result = null;
-
/*
// async functions that need to get information to non-async functions should be called from a useEffect, and they should update roadmapState instead of returning results
// can't call hooks if this is used as an object instead of a function
@@ -26,7 +24,7 @@ export default manageRoadmaps => {
const getDatabaseRootNode = async () => {
// get the root node for the entire multi-roadmap database
- SendToLogs(`multiRoadmapManagement getDatabaseRootNode() called`);
+ sendToLogs(`multiRoadmapManagement getDatabaseRootNode() called`);
let databaseRootNodeId = import.meta.env.VITE_DATABASE_ROOTNODE_MILESTONEID;
const pendingQuery = {
queryFunction: "searchMilestonesByProperty()",
@@ -37,15 +35,15 @@ export default manageRoadmaps => {
}
};
const response = await QueryRoadmap(pendingQuery);
- SendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got response:`);
- SendToLogs(response);
+ sendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got response:`);
+ sendToLogs(response);
const responseData = response.responseData;
- SendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got responseData:`);
- SendToLogs(responseData);
+ sendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got responseData:`);
+ sendToLogs(responseData);
if (responseData.length != 1 || responseData[0].length != 2) throw `${new Date()}\tmultiRoadmapManagement getDatabaseRootNode(): did not find a unique database root node! responseData.length: ${responseData.length} - responseData[0].length: ${responseData[0].length}`
let databaseRootNode = responseData[0][0];
- SendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got DATABASE root node:`);
- SendToLogs(databaseRootNode);
+ sendToLogs(`multiRoadmapManagement getDatabaseRootNode(): got DATABASE root node:`);
+ sendToLogs(databaseRootNode);
return databaseRootNode;
/*
let newRoadmapState = roadmapState;
@@ -57,19 +55,19 @@ export default manageRoadmaps => {
// FIXME - replace this with an inline one-liner?
const getRoadmapRootNodeId = (roadmaps,roadmapName) => {
- SendToLogs(`getRoadmapRootNodeId() called`);
+ sendToLogs(`getRoadmapRootNodeId() called`);
let roadmapRootNodeMatches = roadmaps.filter(function(roadmap){return roadmap.name === roadmapName});
let roadmapRootNode = roadmapRootNodeMatches[0];
- SendToLogs(`getRoadmapRootNodeId() got ROADMAP root node metadata for roadmapName "${roadmapName}" from the DATABASE root node:`);
- SendToLogs(roadmapRootNode);
+ sendToLogs(`getRoadmapRootNodeId() got ROADMAP root node metadata for roadmapName "${roadmapName}" from the DATABASE root node:`);
+ sendToLogs(roadmapRootNode);
let roadmapRootNodeId = roadmapRootNode.id;
- SendToLogs(`getRoadmapRootNodeId() got ROADMAP root node ID "${roadmapRootNodeId}" for roadmapName "${roadmapName}" from the DATABASE root node`);
+ sendToLogs(`getRoadmapRootNodeId() got ROADMAP root node ID "${roadmapRootNodeId}" for roadmapName "${roadmapName}" from the DATABASE root node`);
return roadmapRootNodeId;
}
const openRoadmap = async (roadmapRootNodeId, queryFunction, userEmail) => {
- SendToLogs(`openRoadmap() called with roadmapRootNodeId: ${roadmapRootNodeId}`);
+ sendToLogs(`openRoadmap() called with roadmapRootNodeId: ${roadmapRootNodeId}`);
// FIXME - getting full chain of related nodes will run Neo4J out of memory for some roadmaps, but backend route for getting nodes only N hops away doesn't return their relationships
// - does Neo4J run out of memory due to graph cycles? would it help if we only get full chain for a specific relationship type?
@@ -133,7 +131,7 @@ export default manageRoadmaps => {
userEmail: userEmail,
};
- SendToLogs(`openRoadmap() got ${result.responseData.length} results from QueryRoadmap`);
+ sendToLogs(`openRoadmap() got ${result.responseData.length} results from QueryRoadmap`);
//return result.responseData;
return response;
}
@@ -149,17 +147,17 @@ export default manageRoadmaps => {
if (roadmapState.userLoginInfo) {
let userEmail = roadmapState.userLoginInfo.email;
let allRoadmaps = JSON.parse(roadmapState.databaseRootNode.properties.roadmaps);
- SendToLogs(`listRoadmaps(): got ${allRoadmaps.length} total roadmaps from database root node:`);
- SendToLogs(allRoadmaps);
+ sendToLogs(`listRoadmaps(): got ${allRoadmaps.length} total roadmaps from database root node:`);
+ sendToLogs(allRoadmaps);
let userRoadmaps = allRoadmaps.filter(function(roadmap) {
return (roadmap.users.indexOf(userEmail) != -1);
});
- SendToLogs(`listRoadmaps(): got ${userRoadmaps.length} roadmaps for ${userEmail} from database root node:`);
+ sendToLogs(`listRoadmaps(): got ${userRoadmaps.length} roadmaps for ${userEmail} from database root node:`);
} else {
let userRoadmaps = [ roadmapState.databaseRootNode.publicRoadmapRootNodeId ];
- SendToLogs(`listRoadmaps(): got ${userRoadmaps.length} public roadmaps from database root node:`);
+ sendToLogs(`listRoadmaps(): got ${userRoadmaps.length} public roadmaps from database root node:`);
}
- SendToLogs(userRoadmaps);
+ sendToLogs(userRoadmaps);
return userRoadmaps;
*/
}
@@ -178,7 +176,7 @@ flow:
*/
// create a new node to be the new roadmap root
- SendToLogs(`createRoadmap(): creating new node to be the new roadmap root node for ${userEmail}`);
+ sendToLogs(`createRoadmap(): creating new node to be the new roadmap root node for ${userEmail}`);
let newRoadmapRootNode = null;
let newRoadmapName = `unnamed roadmap - ${userEmail} - ${(new Date()).toISOString()}`;
@@ -194,14 +192,14 @@ flow:
};
try {
let roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
"createRoadmap(): returned to multiRoadmapManagement.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
if (roadmapUpdateResult.responseData) {
let newNodeFields = roadmapUpdateResult.responseData.records[0]._fields[0];
- SendToLogs(`createRoadmap(): newNodeFields:`);
- SendToLogs(newNodeFields);
+ sendToLogs(`createRoadmap(): newNodeFields:`);
+ sendToLogs(newNodeFields);
let newNodeMilestoneId = newNodeFields.properties.milestone_id;
// construct a new cytoscape node object
@@ -212,8 +210,8 @@ flow:
milestone_properties: newNodeFields.properties,
},
};
- SendToLogs(`createRoadmap(): nodeData:`);
- SendToLogs(nodeData);
+ sendToLogs(`createRoadmap(): nodeData:`);
+ sendToLogs(nodeData);
newRoadmapRootNode = nodeData;
/*
// add the new cytoscape node to the cytoscape graph object now, since it wasn't in the database the last time the backend was queried
@@ -230,20 +228,20 @@ flow:
milestone_id : newNodeMilestoneId,
users : [ userEmail ],
};
- SendToLogs(`createRoadmap(): adding new roadmap "${newRoadmapName}" (id: ${newNodeMilestoneId}) to database root node (id: ${databaseRootNodeProps.milestone_id}) for ${userEmail}`);
- SendToLogs(`createRoadmap(): new roadmap properties: `);
- SendToLogs(newRoadmapProps);
- SendToLogs(`createRoadmap(): current databaseRootNodeProps:`);
- SendToLogs(databaseRootNodeProps);
- SendToLogs(`createRoadmap(): current list of roadmaps in the database root node:`);
- SendToLogs(allRoadmaps);
+ sendToLogs(`createRoadmap(): adding new roadmap "${newRoadmapName}" (id: ${newNodeMilestoneId}) to database root node (id: ${databaseRootNodeProps.milestone_id}) for ${userEmail}`);
+ sendToLogs(`createRoadmap(): new roadmap properties: `);
+ sendToLogs(newRoadmapProps);
+ sendToLogs(`createRoadmap(): current databaseRootNodeProps:`);
+ sendToLogs(databaseRootNodeProps);
+ sendToLogs(`createRoadmap(): current list of roadmaps in the database root node:`);
+ sendToLogs(allRoadmaps);
allRoadmaps.push(newRoadmapProps);
databaseRootNodeProps.roadmaps = JSON.stringify(allRoadmaps);
- SendToLogs(`createRoadmap(): updated databaseRootNodeProps:`);
- SendToLogs(databaseRootNodeProps);
- SendToLogs(`createRoadmap(): updated list of roadmaps in the database root node:`);
- SendToLogs(JSON.parse(databaseRootNodeProps.roadmaps));
+ sendToLogs(`createRoadmap(): updated databaseRootNodeProps:`);
+ sendToLogs(databaseRootNodeProps);
+ sendToLogs(`createRoadmap(): updated list of roadmaps in the database root node:`);
+ sendToLogs(JSON.parse(databaseRootNodeProps.roadmaps));
pendingUpdate = {
updateFunction: "patchMilestone()",
@@ -251,22 +249,22 @@ flow:
updatedProperties: databaseRootNodeProps,
cy: cy,
};
- SendToLogs(`createRoadmap() calling UpdateRoadmap() with pendingUpdate:`);
- SendToLogs(pendingUpdate);
+ sendToLogs(`createRoadmap() calling UpdateRoadmap() with pendingUpdate:`);
+ sendToLogs(pendingUpdate);
roadmapUpdateResult = await UpdateRoadmap(pendingUpdate);
- SendToLogs(
+ sendToLogs(
"createRoadmap(): returned to multiRoadmapManagement.jsx after calling UpdateRoadmap - roadmapUpdateResult: "
);
- SendToLogs(roadmapUpdateResult);
+ sendToLogs(roadmapUpdateResult);
} else {
- SendToLogs(`createRoadmap(): got empty roadmapUpdateResult!`);
+ sendToLogs(`createRoadmap(): got empty roadmapUpdateResult!`);
}; // end if (roadmapUpdateResult.responseData) for new node
} catch (error) {
console.error("createRoadmap(): Error adding node: ", error);
} finally {
- SendToLogs(`createRoadmap(): returning newRoadmapRootNode:`);
- SendToLogs(newRoadmapRootNode);
+ sendToLogs(`createRoadmap(): returning newRoadmapRootNode:`);
+ sendToLogs(newRoadmapRootNode);
return newRoadmapRootNode;
}
}
@@ -314,4 +312,4 @@ flow:
}
-//export default ManageRoadmaps
+export default manageRoadmaps;
diff --git a/frontend/src/components/queryRoadmap.jsx b/frontend/src/utilities/queryRoadmap.js
similarity index 82%
rename from frontend/src/components/queryRoadmap.jsx
rename to frontend/src/utilities/queryRoadmap.js
index 7891964..2012e36 100644
--- a/frontend/src/components/queryRoadmap.jsx
+++ b/frontend/src/utilities/queryRoadmap.js
@@ -1,5 +1,4 @@
-import React from "react";
-import SendToLogs from "./logging";
+import { sendToLogs } from './utilities';
const QueryRoadmap = async (pendingQuery) => {
/*
@@ -14,14 +13,14 @@ const QueryRoadmap = async (pendingQuery) => {
--jwb 10.6.24
*/
- SendToLogs(`in queryRoadmap.jsx with pendingQuery:`);
- SendToLogs(pendingQuery);
+ sendToLogs(`in queryRoadmap.jsx with pendingQuery:`);
+ sendToLogs(pendingQuery);
let backendBaseUri = import.meta.env.VITE_BACKEND_BASE_URI;
let sendQueryRequest = async (backendUri, restMethod, requestBody) => {
let requestTimestamp = new Date().toISOString();
- SendToLogs(
+ sendToLogs(
`starting sendQueryRequest() with backendUri
${backendUri}
@@ -47,8 +46,8 @@ const QueryRoadmap = async (pendingQuery) => {
};
const response = await fetch(backendUri, requestOptions);
- SendToLogs(`sendQueryRequest() received response from backendUri ${backendUri} for requestTimestamp ${requestTimestamp}: `);
- SendToLogs(response);
+ sendToLogs(`sendQueryRequest() received response from backendUri ${backendUri} for requestTimestamp ${requestTimestamp}: `);
+ sendToLogs(response);
if (!response.ok) {
throw new Error(
`Network response was not ok for requestTimestamp ${requestTimestamp}! Response:
@@ -62,7 +61,7 @@ const QueryRoadmap = async (pendingQuery) => {
// FIXME - put more useful data into the response?
return { responseData: responseData };
} catch (err) {
- SendToLogs(`sendQueryRequest() failed! requestTimestamp: ${requestTimestamp} - backendUri: ${backendUri} - err: ${err}`);
+ sendToLogs(`sendQueryRequest() failed! requestTimestamp: ${requestTimestamp} - backendUri: ${backendUri} - err: ${err}`);
return { err: err };
}
};
@@ -70,42 +69,42 @@ const QueryRoadmap = async (pendingQuery) => {
async function getMilestones() {
- SendToLogs(`getMilestones() getting all milestones with PRECEDES relationships...`);
+ sendToLogs(`getMilestones() getting all milestones with PRECEDES relationships...`);
const restMethod = "GET";
const backendUri = backendBaseUri + "/api/milestones/";
- SendToLogs(`
+ sendToLogs(`
getMilestones() calling backendUri
${backendUri}
to get all milestones with PRECEDES relationships`
);
let result = await sendQueryRequest(backendUri, restMethod);
- SendToLogs(`getMilestones() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
+ sendToLogs(`getMilestones() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
return result;
}
async function getAllMilestones() {
- SendToLogs(`getAllMilestones() getting all milestones...`);
+ sendToLogs(`getAllMilestones() getting all milestones...`);
const restMethod = "GET";
const backendUri = backendBaseUri + "/api/milestones/all";
- SendToLogs(`
+ sendToLogs(`
getAllMilestones() calling backendUri
${backendUri}
to get all milestones`
);
//return await sendQueryRequest(backendUri, restMethod);
let result = await sendQueryRequest(backendUri, restMethod);
- SendToLogs(`getAllMilestones() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
+ sendToLogs(`getAllMilestones() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
return result;
}
async function searchMilestonesByProperty() {
- SendToLogs(`searchMilestonesByProperty() searching all nodes by property...`);
+ sendToLogs(`searchMilestonesByProperty() searching all nodes by property...`);
const requestBody = JSON.stringify(pendingQuery.queryProperties);
const propName = pendingQuery.propName;
//const restMethod = "GET";
const restMethod = "POST";
const backendUri = backendBaseUri + "/api/milestones/search/" + propName;
- SendToLogs(`
+ sendToLogs(`
searchMilestonesByProperty() calling backendUri
${backendUri}
with restMethod
@@ -116,65 +115,65 @@ const QueryRoadmap = async (pendingQuery) => {
);
//return await sendQueryRequest(backendUri, restMethod, requestBody);
let result = await sendQueryRequest(backendUri, restMethod, requestBody);
- SendToLogs(`searchMilestonesByProperty() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
+ sendToLogs(`searchMilestonesByProperty() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
return result;
}
async function getSingleNodeChain() {
- SendToLogs(`getSingleNodeChain() getting a chain of related nodes...`);
+ sendToLogs(`getSingleNodeChain() getting a chain of related nodes...`);
const milestoneId = pendingQuery.milestoneId;
const restMethod = "GET";
const backendUri = backendBaseUri + "/api/milestones/" + milestoneId;
- SendToLogs(`
+ sendToLogs(`
getSingleNodeChain() calling backendUri
${backendUri}
to get a chain of related nodes...`
);
//return await sendQueryRequest(backendUri, restMethod);
let result = await sendQueryRequest(backendUri, restMethod);
- SendToLogs(`getSingleNodeChain() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
+ sendToLogs(`getSingleNodeChain() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
return result;
}
async function getSingleNodeNeighbors() {
- SendToLogs(`getSingleNodeNeighbors() getting a chain of neighboring nodes up to N hops away...`);
+ sendToLogs(`getSingleNodeNeighbors() getting a chain of neighboring nodes up to N hops away...`);
const milestoneId = pendingQuery.milestoneId;
const hopCount = pendingQuery.hopCount;
const direction = pendingQuery.direction;
const restMethod = "GET";
const backendUri = backendBaseUri + "/api/milestones/" + milestoneId + "/" + hopCount + "/" + direction;
- SendToLogs(`
+ sendToLogs(`
getSingleNodeNeighbors() calling backendUri
${backendUri}
to get a chain of ${hopCount} neighboring nodes...`
);
//return await sendQueryRequest(backendUri, restMethod);
let result = await sendQueryRequest(backendUri, restMethod);
- SendToLogs(`getSingleNodeNeighbors() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
+ sendToLogs(`getSingleNodeNeighbors() got result.responseData.length: ${result.responseData.length}, from backendUri: ${backendUri}`);
return result;
}
async function getUserProfile() {
- SendToLogs(`getUserProfile() getting the current user profile...`);
+ sendToLogs(`getUserProfile() getting the current user profile...`);
const restMethod = "GET";
const backendUri = backendBaseUri + "/api/users/profile/";
- SendToLogs(`
+ sendToLogs(`
getUserProfile() calling backendUri
${backendUri}
to get the current user profile...`
);
//return await sendQueryRequest(backendUri, restMethod);
let result = await sendQueryRequest(backendUri, restMethod);
- SendToLogs(`getUserProfile() got user profile: ${result.responseData}`);
+ sendToLogs(`getUserProfile() got user profile: ${result.responseData}`);
return result;
}
const queryFunction = pendingQuery.queryFunction;
- SendToLogs("Calling queryFunction " + queryFunction);
+ sendToLogs("Calling queryFunction " + queryFunction);
let result;
try {
result = await eval(queryFunction);
@@ -182,7 +181,7 @@ const QueryRoadmap = async (pendingQuery) => {
// default:
// throw new Error(`Unknown query function: ${queryFunction}`);
} catch (err) {
- SendToLogs(
+ sendToLogs(
`Failed to call queryFunction ${queryFunction}! err: ${err}`
);
diff --git a/frontend/src/components/updateRoadmap.jsx b/frontend/src/utilities/updateRoadmap.js
similarity index 89%
rename from frontend/src/components/updateRoadmap.jsx
rename to frontend/src/utilities/updateRoadmap.js
index 0b4cd65..b820c24 100644
--- a/frontend/src/components/updateRoadmap.jsx
+++ b/frontend/src/utilities/updateRoadmap.js
@@ -1,8 +1,4 @@
-import { React, useContext } from "react";
-import SendToLogs from "./logging";
-//import RoadmapContext from "./roadmapContext";
-
-
+import { sendToLogs } from './utilities';
const UpdateRoadmap = async (pendingUpdate) => {
/*
@@ -18,13 +14,12 @@ const UpdateRoadmap = async (pendingUpdate) => {
--jwb 3.7.24
*/
-// const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
- SendToLogs("in updateRoadmap.jsx with pendingUpdate:");
- SendToLogs(pendingUpdate);
+ sendToLogs("in updateRoadmap.jsx with pendingUpdate:");
+ sendToLogs(pendingUpdate);
let backendBaseUri = import.meta.env.VITE_BACKEND_BASE_URI;
let sendUpdateRequest = async (backendUri, restMethod, requestBody) => {
- SendToLogs(
+ sendToLogs(
"starting sendUpdateRequest() with backendUri " +
backendUri +
", requestBody " +
@@ -47,8 +42,8 @@ const UpdateRoadmap = async (pendingUpdate) => {
};
const response = await fetch(backendUri, requestOptions);
- SendToLogs("sendUpdateRequest() received response: ");
- SendToLogs(response);
+ sendToLogs("sendUpdateRequest() received response: ");
+ sendToLogs(response);
if (!response.ok) {
throw new Error(
"Network response was not ok! Response: " +
@@ -61,7 +56,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
// FIXME - put more useful data into the response?
return { responseData: responseData };
} catch (err) {
- SendToLogs("sendUpdateRequest() failed! err: " + err);
+ sendToLogs("sendUpdateRequest() failed! err: " + err);
return { err: err };
}
};
@@ -69,16 +64,16 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function postMilestone() {
// create a new milestone
- SendToLogs("postMilestone() creating a new milestone...");
+ sendToLogs("postMilestone() creating a new milestone...");
const requestBody = JSON.stringify(pendingUpdate.newProperties);
const restMethod = "POST";
const backendUri = backendBaseUri + "/api/milestones/";
- SendToLogs(
+ sendToLogs(
"postMilestone() calling backendUri " +
backendUri +
" to create a new milestone with requestBody:"
);
- SendToLogs(requestBody);
+ sendToLogs(requestBody);
//return await sendUpdateRequest(backendUri, restMethod, requestBody);
//let response = await sendUpdateRequest(backendUri, restMethod, requestBody);
//let roadmapUpdateResult = await response;
@@ -103,8 +98,8 @@ const UpdateRoadmap = async (pendingUpdate) => {
pendingUpdate.cy.add(nodeData);
let newCyNode = pendingUpdate.cy.nodes(`[milestone_properties.milestone_id = "${newNodeMilestoneId}"]`);
- SendToLogs(`postMilestone() added a new node with milestone ID ${newNodeMilestoneId} to Cytoscape:`);
- SendToLogs(newCyNode.data());
+ sendToLogs(`postMilestone() added a new node with milestone ID ${newNodeMilestoneId} to Cytoscape:`);
+ sendToLogs(newCyNode.data());
} // done adding new node to in-memory cytoscape object - what should we do if the response was bad?
return roadmapUpdateResult;
@@ -113,7 +108,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function postMilestoneAndRelationship() {
// create a new milestone AND relationship - requires Cypher ID of existing node; results in new node PRECEDES existing node
- SendToLogs("postMilestoneAndRelationship() creating a new milestone AND relationship...");
+ sendToLogs("postMilestoneAndRelationship() creating a new milestone AND relationship...");
//const requestBody = `{relationship:${pendingUpdate.relationshipType}}`
const requestBodyObj = {
relationship:pendingUpdate['relationshipType'],
@@ -121,20 +116,20 @@ const UpdateRoadmap = async (pendingUpdate) => {
const requestBody = JSON.stringify(requestBodyObj);
const restMethod = "POST";
const backendUri = backendBaseUri + "/api/milestones/" + pendingUpdate.relationshipTarget;
- SendToLogs(
+ sendToLogs(
"postMilestoneAndRelationship() calling backendUri " +
backendUri +
" to create a new milestone and relationship with requestBody:"
);
- SendToLogs(requestBody);
+ sendToLogs(requestBody);
//return await sendUpdateRequest(backendUri, restMethod, requestBody);
// FIXME - this does a double 'await', which we shouldn't actually need - was probably just from confusion over why the calling function did an 'await' after we return from here (reason: because this is an async function, it returns its own promise)
//let response = await sendUpdateRequest(backendUri, restMethod, requestBody);
//let roadmapUpdateResult = await response;
let roadmapUpdateResult = await sendUpdateRequest(backendUri, restMethod, requestBody);
- SendToLogs("postMilestoneAndRelationship() got roadmapUpdateResult from backend:");
- SendToLogs(roadmapUpdateResult);
+ sendToLogs("postMilestoneAndRelationship() got roadmapUpdateResult from backend:");
+ sendToLogs(roadmapUpdateResult);
// error-checking to make sure the update was made successfully before applying the corresponding change to the in-memory cytoscape object
if (roadmapUpdateResult.responseData && pendingUpdate.cy) {
@@ -150,14 +145,14 @@ const UpdateRoadmap = async (pendingUpdate) => {
},
};
// add the new cytoscape node to the cytoscape graph object
- SendToLogs("postMilestoneAndRelationship() adding new node to the in-memory cytoscape graph object:");
- SendToLogs(nodeData);
+ sendToLogs("postMilestoneAndRelationship() adding new node to the in-memory cytoscape graph object:");
+ sendToLogs(nodeData);
pendingUpdate.cy.add(nodeData);
// get the new node that we just added
let newNode = pendingUpdate.cy.nodes(`[milestone_properties.milestone_id = "${newNodeMilestoneId}" ]`);
- SendToLogs("postMilestoneAndRelationship() new node added to the in-memory cytoscape graph object:");
- SendToLogs(newNode.data());
+ sendToLogs("postMilestoneAndRelationship() new node added to the in-memory cytoscape graph object:");
+ sendToLogs(newNode.data());
//newNode.toggleClass('visible',true);
newNode.show();
@@ -176,8 +171,8 @@ const UpdateRoadmap = async (pendingUpdate) => {
relationshipType: pendingUpdate['relationshipType'],
},
};
- SendToLogs("postMilestoneAndRelationship() adding new edge to the cytoscape graph object in memory:");
- SendToLogs(edgeData);
+ sendToLogs("postMilestoneAndRelationship() adding new edge to the cytoscape graph object in memory:");
+ sendToLogs(edgeData);
pendingUpdate.cy.add(edgeData);
} // done adding new node & edge to in-memory cytoscape object - what should we do if the response was bad (i. e. this is the end of the IF block; what would go into an ELSE block)?
@@ -186,33 +181,33 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function patchMilestone() {
// update an existing milestone
- SendToLogs("patchMilestone() updating an existing milestone...");
+ sendToLogs("patchMilestone() updating an existing milestone...");
const milestoneId = pendingUpdate.milestoneId;
const requestBody = JSON.stringify(pendingUpdate.updatedProperties);
const restMethod = "PATCH";
const backendUri = backendBaseUri + "/api/milestones/" + milestoneId;
- SendToLogs(
+ sendToLogs(
"patchMilestone() calling backendUri " +
backendUri +
" to update milestoneId " +
milestoneId +
" with requestBody:"
);
- SendToLogs(requestBody);
+ sendToLogs(requestBody);
//return await sendUpdateRequest(backendUri, restMethod, requestBody);
let roadmapUpdateResult = await sendUpdateRequest(backendUri, restMethod, requestBody);
// error-checking to make sure the update was made successfully before applying the corresponding change to the in-memory cytoscape object
if (roadmapUpdateResult.responseData && pendingUpdate.cy) {
- SendToLogs("patchMilestone() got roadmapUpdateResult.responseData:");
- SendToLogs(roadmapUpdateResult.responseData);
+ sendToLogs("patchMilestone() got roadmapUpdateResult.responseData:");
+ sendToLogs(roadmapUpdateResult.responseData);
// FIXME - finish writing this block to retrieve the existing node from the Cytoscape object, modify its properties from the request, and update the Cytoscape object with the new properties
// backend is not (at least currently) returning the full properties of the updated node, so for updated properties, we need to use what we requested instead of actual
//let updatedProperties = roadmapUpdateResult.responseData.records[0]._fields[0].properties;
let updatedProperties = pendingUpdate.updatedProperties;
- SendToLogs("patchMilestone() updating the in-memory cytoscape graph object with updated node data:");
- SendToLogs(updatedProperties);
+ sendToLogs("patchMilestone() updating the in-memory cytoscape graph object with updated node data:");
+ sendToLogs(updatedProperties);
// get the cytoscape node corresponding to the milestoneId
let updatedNode = pendingUpdate.cy.nodes(`[milestone_properties.milestone_id = "${milestoneId}" ]`);
updatedNode.data(updatedProperties);
@@ -223,13 +218,13 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function deleteMilestone() {
// delete a milestone and its relationships
- SendToLogs(
+ sendToLogs(
"deleteMilestone() deleting a milestone and its relationships..."
);
const restMethod = "DELETE";
const backendUri =
backendBaseUri + "/api/milestones/" + pendingUpdate.milestoneId;
- SendToLogs(
+ sendToLogs(
"deleteMilestone() calling backendUri " +
backendUri +
" to delete milestoneId " +
@@ -253,7 +248,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
// same route used to update existing relationship, at least for now
// FIXME - should this be deprecated, and just use the updateRelationship function (or vice versa)?
// - no: even if we call the same route on the backend, we still want to do different things to the in-memory cytoscape object depending on whether we're adding or updating an edge
- SendToLogs("addRelationship() adding a relationship...");
+ sendToLogs("addRelationship() adding a relationship...");
let relationshipType = pendingUpdate.relationshipType;
let requestBodyObj = {
relationship : relationshipType
@@ -268,7 +263,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
"/" +
targetNodeId +
"/oneWay";
- SendToLogs(
+ sendToLogs(
"addRelationship() calling backendUri " +
backendUri +
" to add relationship: milestoneId " +
@@ -298,14 +293,14 @@ const UpdateRoadmap = async (pendingUpdate) => {
relationshipType: relationshipType,
},
};
- SendToLogs("addRelationship() adding new edge to the cytoscape graph object in memory:");
- SendToLogs(edgeData);
+ sendToLogs("addRelationship() adding new edge to the cytoscape graph object in memory:");
+ sendToLogs(edgeData);
pendingUpdate.cy.add(edgeData);
// get the new edge that we just added
let newEdge = pendingUpdate.cy.edges(`[source = "${sourceNode.data.id}" ][target = "${targetNode.data.id}" ][relationshipType = "${relationshipType}" ]`);
- SendToLogs("addRelationship() new edge added to the in-memory cytoscape graph object:");
- SendToLogs(newEdge.data());
+ sendToLogs("addRelationship() new edge added to the in-memory cytoscape graph object:");
+ sendToLogs(newEdge.data());
newEdge.show();
}; // done adding edge to the in-memory cytoscape object - what should we do if the response was bad (i. e. this is the end of the IF block; what would go into an ELSE block)?
@@ -316,7 +311,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
// FIXME - after finding that it can cause issues with Neo4J and is not recommended to create 2 single-direction relationships instead of one bi-directional relationship, should we deprecate the OneWay & TwoWay functions?
// - no: even if we call the same route on the backend, we still want to do different things to the in-memory cytoscape object depending on whether we're adding or updating an edge
// update (or add) a one-way relationship
- SendToLogs("updateRelationshipOneWay() updating a relationship...");
+ sendToLogs("updateRelationshipOneWay() updating a relationship...");
let relationshipType = pendingUpdate.relationshipType;
let requestBodyObj = {
relationship : relationshipType
@@ -332,7 +327,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
"/" +
targetNodeId +
"/oneWay";
- SendToLogs(
+ sendToLogs(
"updateRelationshipOneWay() calling backendUri " +
backendUri +
" to update relationship: milestoneId " +
@@ -354,7 +349,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function updateRelationshipTwoWay() {
// update a two-way relationship, or turn a one-way relationship into a two-way relationship
- SendToLogs("updateRelationshipTwoWay() updating a relationship...");
+ sendToLogs("updateRelationshipTwoWay() updating a relationship...");
let relationshipType = pendingUpdate.relationshipType;
let requestBodyObj = {
relationship : relationshipType
@@ -368,7 +363,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
"/" +
pendingUpdate.milestoneId2 +
"/twoWay";
- SendToLogs(
+ sendToLogs(
"updateRelationshipTwoWay() calling backendUri " +
backendUri +
" to update relationship milestoneId " +
@@ -387,7 +382,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
// update a relationship
// same route used to create new relationship, at least for now
// FIXME - should this be deprecated, and just use the addRelationship function (or vice versa)?
- SendToLogs("updateRelationship() updating a relationship...");
+ sendToLogs("updateRelationship() updating a relationship...");
let relationshipType = pendingUpdate.relationshipType;
let sourceNodeId = pendingUpdate.milestoneId;
let targetNodeId = pendingUpdate.milestoneId2;
@@ -398,7 +393,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
sourceNodeId +
"/" +
targetNodeId;
- SendToLogs(
+ sendToLogs(
"addRelationship() calling backendUri " +
backendUri +
" to add relationship: milestoneId " +
@@ -431,7 +426,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function deleteRelationship() {
// delete a relationship
- SendToLogs("deleteRelationship() deleting a relationship...");
+ sendToLogs("deleteRelationship() deleting a relationship...");
let relationshipType = pendingUpdate.relationshipType;
let sourceNodeId = pendingUpdate.milestoneId;
let targetNodeId = pendingUpdate.milestoneId2;
@@ -446,7 +441,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
sourceNodeId +
"/" +
targetNodeId;
- SendToLogs(
+ sendToLogs(
"deleteRelationship() calling backendUri " +
backendUri +
" to delete relationship: milestoneId " +
@@ -462,7 +457,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
// error-checking to make sure the update was made successfully before applying the corresponding change to the in-memory cytoscape object
if (roadmapUpdateResult.responseData && pendingUpdate.cy) {
- SendToLogs(`deleteRelationship() removing edge with ID ${pendingUpdate.edgeId} from in-memory cytoscape object`);
+ sendToLogs(`deleteRelationship() removing edge with ID ${pendingUpdate.edgeId} from in-memory cytoscape object`);
let deletedEdge = pendingUpdate.cy.$id(pendingUpdate.edgeId);
pendingUpdate.cy.remove(deletedEdge);
@@ -472,7 +467,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
async function deleteProperty() {
// delete a property from a node
- SendToLogs("deleteProperty() deleting a property...");
+ sendToLogs("deleteProperty() deleting a property...");
const restMethod = "DELETE";
const backendUri =
backendBaseUri +
@@ -480,7 +475,7 @@ const UpdateRoadmap = async (pendingUpdate) => {
pendingUpdate.milestoneId +
"/" +
pendingUpdate.property;
- SendToLogs(
+ sendToLogs(
"deleteProperty() calling backendUri " +
backendUri +
" to delete property " +
@@ -494,12 +489,12 @@ const UpdateRoadmap = async (pendingUpdate) => {
const updateFunction = pendingUpdate.updateFunction;
- SendToLogs("UpdateRoadmap: calling updateFunction " + updateFunction);
+ sendToLogs("UpdateRoadmap: calling updateFunction " + updateFunction);
let result = null;
try {
result = await eval(updateFunction);
} catch (err) {
- SendToLogs(
+ sendToLogs(
"UpdateRoadmap: failed to call updateFunction " + updateFunction + "! err: " + err
);
result = { err: err };
diff --git a/frontend/src/components/logging.jsx b/frontend/src/utilities/utilities.js
similarity index 90%
rename from frontend/src/components/logging.jsx
rename to frontend/src/utilities/utilities.js
index 1ce2a8d..e9a9c1a 100644
--- a/frontend/src/components/logging.jsx
+++ b/frontend/src/utilities/utilities.js
@@ -1,6 +1,4 @@
-import React from "react";
-
-function SendToLogs(logData) {
+export const sendToLogs = (logData) => {
/*
this should:
-get the information from props about the information to log
@@ -24,5 +22,3 @@ function SendToLogs(logData) {
console.log(logMessage);
}
}
-
-export default SendToLogs;
--
GitLab
From 41b8ec4f8a18f2ab1a3c922082de146e2a005399 Mon Sep 17 00:00:00 2001
From: Amy <amaule65@gmail.com>
Date: Thu, 3 Apr 2025 11:01:57 +0200
Subject: [PATCH 2/3] Capitalize component file names
---
frontend/src/components/{adminConsole.jsx => AdminConsole.jsx} | 0
frontend/src/components/{milestoneForm.jsx => MilestoneForm.jsx} | 0
.../components/{nodesVisualization.jsx => NodesVisualization.jsx} | 0
frontend/src/components/{roadmapUI.jsx => RoadmapUI.jsx} | 0
frontend/src/components/{userSessions.jsx => UserSessions.jsx} | 0
5 files changed, 0 insertions(+), 0 deletions(-)
rename frontend/src/components/{adminConsole.jsx => AdminConsole.jsx} (100%)
rename frontend/src/components/{milestoneForm.jsx => MilestoneForm.jsx} (100%)
rename frontend/src/components/{nodesVisualization.jsx => NodesVisualization.jsx} (100%)
rename frontend/src/components/{roadmapUI.jsx => RoadmapUI.jsx} (100%)
rename frontend/src/components/{userSessions.jsx => UserSessions.jsx} (100%)
diff --git a/frontend/src/components/adminConsole.jsx b/frontend/src/components/AdminConsole.jsx
similarity index 100%
rename from frontend/src/components/adminConsole.jsx
rename to frontend/src/components/AdminConsole.jsx
diff --git a/frontend/src/components/milestoneForm.jsx b/frontend/src/components/MilestoneForm.jsx
similarity index 100%
rename from frontend/src/components/milestoneForm.jsx
rename to frontend/src/components/MilestoneForm.jsx
diff --git a/frontend/src/components/nodesVisualization.jsx b/frontend/src/components/NodesVisualization.jsx
similarity index 100%
rename from frontend/src/components/nodesVisualization.jsx
rename to frontend/src/components/NodesVisualization.jsx
diff --git a/frontend/src/components/roadmapUI.jsx b/frontend/src/components/RoadmapUI.jsx
similarity index 100%
rename from frontend/src/components/roadmapUI.jsx
rename to frontend/src/components/RoadmapUI.jsx
diff --git a/frontend/src/components/userSessions.jsx b/frontend/src/components/UserSessions.jsx
similarity index 100%
rename from frontend/src/components/userSessions.jsx
rename to frontend/src/components/UserSessions.jsx
--
GitLab
From 809681e5498a1259c82831f6e24b03294b16efd5 Mon Sep 17 00:00:00 2001
From: Amy <amaule65@gmail.com>
Date: Fri, 4 Apr 2025 12:51:52 +0200
Subject: [PATCH 3/3] Rename logs for modal.jsx to RoadmapModal.jsx
---
frontend/src/components/AdminConsole.jsx | 2 +-
frontend/src/components/RoadmapModal.jsx | 6 +++---
2 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/frontend/src/components/AdminConsole.jsx b/frontend/src/components/AdminConsole.jsx
index 8aca7b0..00cee19 100644
--- a/frontend/src/components/AdminConsole.jsx
+++ b/frontend/src/components/AdminConsole.jsx
@@ -15,7 +15,7 @@ function AdminConsole() {
// (we might decide we want different input field types for displaying/editing different property types)
// let roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{typeof roadmapState[prop]}]{prop}</li>);
let roadmapStateProps = Object.keys(roadmapState).map(prop => '[' + (typeof roadmapState[prop]) + ']' + prop);
- sendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
+ sendToLogs('roadmapStateProps in RoadmapModal.jsx: '+roadmapStateProps);
// alternate ways of getting type, for working around javascript typeof limitations:
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{Object.getPrototypeOf.toString.call(roadmapState[prop])}]{prop}</li>);
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{JSON.stringify(roadmapState[prop])}]{prop}</li>);
diff --git a/frontend/src/components/RoadmapModal.jsx b/frontend/src/components/RoadmapModal.jsx
index a6b5494..0cd45c4 100644
--- a/frontend/src/components/RoadmapModal.jsx
+++ b/frontend/src/components/RoadmapModal.jsx
@@ -12,14 +12,14 @@ const RoadmapModal = () => {
const [modalIsOpen, setIsOpen] = useState(false);
const [roadmapState, setRoadmapState] = useContext(RoadmapContext);
- sendToLogs('modal.jsx called');
+ sendToLogs('RoadmapModal.jsx called');
/*
// for debugging - get the type and value of each property in the roadmapState object:
// (we might decide we want different input field types for displaying/editing different property types)
// let roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{typeof roadmapState[prop]}]{prop}</li>);
let roadmapStateProps = Object.keys(roadmapState).map(prop => '[' + (typeof roadmapState[prop]) + ']' + prop);
- sendToLogs('roadmapStateProps in modal.jsx: '+roadmapStateProps);
+ sendToLogs('roadmapStateProps in RoadmapModal.jsx: '+roadmapStateProps);
// alternate ways of getting type, for working around javascript typeof limitations:
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{Object.getPrototypeOf.toString.call(roadmapState[prop])}]{prop}</li>);
// const roadmapStateProps = Object.keys(roadmapState).map(prop => <li>[{JSON.stringify(roadmapState[prop])}]{prop}</li>);
@@ -50,7 +50,7 @@ const RoadmapModal = () => {
},[])
/*
-// moved form handler from modal.jsx to MilestoneForm.jsx
+// moved form handler from RoadmapModal.jsx to MilestoneForm.jsx
<MilestoneForm onSubmit={onSubmit} />
*/
--
GitLab