Seankwarren

Flowchart-Designer.md

@@ -35,4 +35,10 @@ We leave exact timing to the candidate. Must fit Within 5 days total.
 
 # Examples
 
-To view examples or discuss this task more in details, please [contact us](README.md).
+We recommend reviewing the following:
+
+- Introduction to Flowcharts: https://www.geeksforgeeks.org/an-introduction-to-flowcharts/
+- An example convergence workflow: https://docs.mat3ra.com/models/auxiliary-concepts/reciprocal-space/convergence/
+- ReactFlow library examples: https://reactflow.dev/docs/examples/overview/ and https://pro.reactflow.dev/pro-examples
+
+To discuss this task more in details, please [contact us](README.md).

Materials-Designer.md

@@ -4,9 +4,9 @@
 
 # Overview
 
-Create a skeleton IDE (integrated development environment) for materials design. Close to Adobe Dreamweaver (or any other IDE) - when you can change html-markup and simultaneously see the result in another tab. We edit material in XYZ format and view result in 3D.
+Create a skeleton IDE (integrated development environment) for materials design, where one can change text and simultaneously see the visual result in another tab. We edit material in XYZ format and view result in 3D.
 
-Front-end developers: use Meteor and React.js and minimalistic UX/UI.
+Front-end developers: use React.js and minimalistic UX/UI.
 
 Pure UI/UX designers: create high fidelity mockups. 
 

README.md

@@ -18,7 +18,7 @@ Each file represents an assignment similar to what one would get when hired.
 | Front-End / UX | [Materials Designer](Materials-Designer.md)  | ReactJS / UX Design, ThreeJS   |
 | Front-End / UX | [Flowchart Designer](Flowchart-Designer.md)  | ReactJS / UX Design, DAG       |
 | Back-End / Ops | [Parallel Uploader](Parallel-File-Uploader.md)   | Python, OOD, Threading, Objectstore |
-| CI/CD, DevOps  | [End-to-End Tests](End-To-End-Tests.md)    | BDD tests, CI/CD workflows, Cypress |
+| CI/CD, DevOps  | [End-to-End Tests](End-to-End-Tests.md)    | BDD tests, CI/CD workflows, Cypress |
 | HPC, Cloud Inf | [Cloud HPC Bench.](Cloud-Infrastructure.md)    | HPC Cluster, Linpack, Benchmarks |
 | HPC, Containers| [Containerized HPC](Containerization-HPC.md)    | HPC Cluster, Containers, Benchmarks |
 

seankwarren/README.md

@@ -0,0 +1,109 @@
+# Flowchart Calculator
+
+Flowchart Calculator is a Meteor/React application that allows users to create flowcharts representing mathematical operations, functions, and logical comparisons. It's built using React, Meteor, and MongoDB and the React Flow library.
+
+## Features
+
+- Drag and drop interface for adding nodes to the flowchart
+- Live calculation and display of results
+- Support for arithmetic operations (+, -, *, /, ^), functions (sin, cos, tan, exp), and logical comparisons (>, <, >=, <=, ==, !=)
+- View real-time syntax-highlighted JSON representation of nodes and edges
+- Interactive flowchart editor powered by React Flow
+- Support for saving and loading flowcharts
+- Dark mode 🎉
+
+## Usage
+
+- Drag and drop a custom node (input, operation, comparison, or output) from the buttons panel onto the flowchart area.
+- Connect nodes using the handles on each node. Ensure to connect the output handle of one node to the input handle of another.
+- Edit input nodes or operation/comparison nodes to see the updated output values in the output nodes.
+- View the JSON representation of nodes and edges in the right pane.
+- Name and save flowcharts and reload them
+
+## Setup
+
+Install dependencies using `npm install`.
+
+Run the development server using `meteor`.
+> will launch on <a href="http://localhost:3000/">localhost:3000/</a>
+
+Run tests with `npm run cypress:open`
+
+
+## Front-end Environment Structure:
+    imports
+    │
+    ├── api
+    │   └── flows.js                            // Defines collection on MongoDB
+    └── ui
+        ├── App.jsx                             // Root component for React
+        ├── components                          // All React components
+        │   ├── customNodes                     // Custom node types for React Flow
+        │   │   ├── BinaryNode.jsx
+        │   │   ├── ComparisonNode.jsx
+        │   │   ├── InputNode.jsx
+        │   │   ├── OutputNode.jsx
+        │   │   ├── UnaryNode.jsx
+        │   │   ├── index.js                    // Allows for destructured import
+        │   │   └── nodeTypes.jsx               // Defines node types for React Flow
+        │   ├── mainPage                        // Main page elements
+        │   │   ├── FlowchartCalculator.jsx     // Main component containing the app's state
+        │   │   ├── FlowchartCanvas.jsx         // Contains the React Flow component
+        │   │   ├── JSONViewer.jsx              // Contains the JSON panel
+        │   │   └── NodeButtons.jsx             // Contains the drag and drop node buttons
+        │   └── reusable                        // Generic components that can be reused anywhere
+        │       ├── DarkModeContext.jsx
+        │       ├── DarkModeSwitch.jsx          
+        │       ├── DraggableButton.jsx         
+        │       └── ResizablePane.jsx           
+        ├── hooks                               // Hooks for maintaining state
+        │   ├── useDraggable.jsx                // Handles Drag & Drop functionality
+        │   ├── useInputField.jsx               // Handles InputField state change
+        │   ├── useLocalFlowData.jsx            // Handles all state for React Flow
+        │   ├── usePrevious.jsx                 // Stores previous value of a state
+        │   ├── useRemoteFlowData.jsx           // Handles interaction with flows on DB
+        │   ├── useResizeable.jsx               // Stores state for SplitPane
+        │   ├── useToggleable.jsx               // Handles state change for any toggleable state
+        │   └── useUpdateOutputNodes.jsx        // Contains logic for updating outputs on state change
+        ├── styles
+        │   ├── a11y_light.css                  // Syntax highlighting styling
+        │   └── index.css                       // Main page styling
+        └── utils
+            ├── calculate.js                    // Recursive calculation function
+            ├── createNode.js                   // Node creation logic
+            ├── getNodeColor.js                 // Access node colors
+            ├── operationDef.js                 // Defines operations for the different node type
+            ├── performOperation.js             // Performs a single operation
+            └── startingNode.js                 // Contains the starting instructions node
+
+
+
+
+
+
+## Complete User Stories:
+- [x] As an end user, I should be able to perform calculations using these 4 binary operators (+, -, *, /) and 6 comparison operators (<, >, >=, <=, ==, !=).
+- [x] As an end user, when I operate on two values, I should be able to read the output as a number in an output node.
+- [x] As an end user, when I compare two values, I should be able to read the output as 'true' or 'false' in an output node.
+- [x] As an end user, when I operate on or compare two values, the top-most edge should always come first in the operation. e.g $3\over4$ vs $4\over3$
+- [x] As an end user, when I add any nodes or edges, the results in all output nodes should update.
+- [x] As an end user, the result should update on any change to the input values or selected operators that I make.
+- [x] As an end user, I should be able to construct flowcharts of arbitrary depth and number of output cells.
+- [x] As an end user, I should be able to drag desired nodes onto the flowchart, and they should be placed at the dropped position.
+- [x] As an end user, I should be able to edit the flowchart and have the JSON update accordingly.
+- [x] As an end user, I should be able to use common unary operators such as sin, cos, tan, and e<sup>x</sup>.
+- [x] As an end user, I should be able to use the y<sup>x</sup> binary operator, that takes two inputs and calculates the exponential.
+- [x] As an end user, node types should be quickly and easily distinguished by shape and color.
+- [x] As an end user, I should see some nodes on screen when I launch the application that explain how to use the app.
+- [x] As an end user, I should be able to easily read the JSON representation with syntax highlighting.
+- [x] As an end user, I should be able to click a 'Save Flow' button to save the JSON datastructure to a MongoDB instance.
+- [x] As an end user, I should be able to select a saved flow from a dropdown list and load it in the flowchart and JSON viewers.
+- [x] As an end user, I should be able to click on a button called 'clear' to clear the flowchart.
+- [x] As a development user, I should be able to automatically test all of the binary, unary, and comparison operations using cypress.
+- [x] As a development user, I should be able to automatically test all basic user interactions, including toggling darkmode, __resizing the pane__, clearing the flowchart, dragging and dropping nodes, and drawing edges using cypress.
+- [x] As a development user, I should be able to automatically test the save and load procedure using cypress.
+- [x] As a development user, I should be able to automatically test a complex flowchart like the tanh() function using cypress.
+
+### TODO User Stories:
+- [ ] As a development user, I should be able to automatically test that the rendered JSON is updated on change, and accurate using cypress.
+- [ ] As a development user, I should be able to unit test each react component and hook using jest.

seankwarren/flowchart-calculator/.babelrc

@@ -0,0 +1,7 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
+}
+

seankwarren/flowchart-calculator/.meteor/.finished-upgraders

@@ -0,0 +1,19 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
+1.4.1-add-shell-server-package
+1.4.3-split-account-service-packages
+1.5-add-dynamic-import-package
+1.7-split-underscore-from-meteor-base
+1.8.3-split-jquery-from-blaze

seankwarren/flowchart-calculator/.meteor/.id

@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+rcv4oc4b8z25.ahdsmkkw6g4

seankwarren/flowchart-calculator/.meteor/packages

@@ -0,0 +1,22 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base@1.5.1             # Packages every Meteor app needs to have
+mobile-experience@1.1.0       # Packages for a great mobile UX
+mongo@1.16.5                   # The database Meteor supports right now
+reactive-var@1.0.12            # Reactive variable for tracker
+
+standard-minifier-css@1.9.0   # CSS minifier run for production mode
+standard-minifier-js@2.8.1    # JS minifier run for production mode
+es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
+ecmascript@0.16.6              # Enable ECMAScript2015+ syntax in app code
+typescript@4.9.4              # Enable TypeScript syntax in .ts and .tsx modules
+shell-server@0.5.0            # Server-side component of the `meteor shell` command
+hot-module-replacement@0.5.2  # Update client in development without reloading the page
+
+
+static-html             # Define static page content in .html files
+react-meteor-data       # React higher-order component for reactively tracking Meteor data

seankwarren/flowchart-calculator/.meteor/platforms

@@ -0,0 +1,2 @@
+server
+browser

seankwarren/flowchart-calculator/.meteor/release

@@ -0,0 +1 @@
+METEOR@2.11.0

seankwarren/flowchart-calculator/.meteor/versions

@@ -0,0 +1,71 @@
+allow-deny@1.1.1
+autoupdate@1.8.0
+babel-compiler@7.10.3
+babel-runtime@1.5.1
+base64@1.0.12
+binary-heap@1.0.11
+blaze-tools@1.1.3
+boilerplate-generator@1.7.1
+caching-compiler@1.2.2
+caching-html-compiler@1.2.1
+callback-hook@1.5.0
+check@1.3.2
+ddp@1.4.1
+ddp-client@2.6.1
+ddp-common@1.4.0
+ddp-server@2.6.0
+diff-sequence@1.1.2
+dynamic-import@0.7.2
+ecmascript@0.16.6
+ecmascript-runtime@0.8.0
+ecmascript-runtime-client@0.12.1
+ecmascript-runtime-server@0.11.0
+ejson@1.1.3
+es5-shim@4.8.0
+fetch@0.1.3
+geojson-utils@1.0.11
+hot-code-push@1.0.4
+hot-module-replacement@0.5.2
+html-tools@1.1.3
+htmljs@1.1.1
+id-map@1.1.1
+inter-process-messaging@0.1.1
+launch-screen@1.3.0
+logging@1.3.2
+meteor@1.11.1
+meteor-base@1.5.1
+minifier-css@1.6.2
+minifier-js@2.7.5
+minimongo@1.9.2
+mobile-experience@1.1.0
+mobile-status-bar@1.1.0
+modern-browsers@0.1.9
+modules@0.19.0
+modules-runtime@0.13.1
+modules-runtime-hot@0.14.1
+mongo@1.16.5
+mongo-decimal@0.1.3
+mongo-dev-server@1.1.0
+mongo-id@1.0.8
+npm-mongo@4.14.0
+ordered-dict@1.1.0
+promise@0.12.2
+random@1.2.1
+react-fast-refresh@0.2.6
+react-meteor-data@2.7.1
+reactive-var@1.0.12
+reload@1.3.1
+retry@1.1.0
+routepolicy@1.1.1
+shell-server@0.5.0
+socket-stream-client@0.5.0
+spacebars-compiler@1.3.1
+standard-minifier-css@1.9.0
+standard-minifier-js@2.8.1
+static-html@1.3.2
+templating-tools@1.2.2
+tracker@1.3.1
+typescript@4.9.4
+underscore@1.0.12
+webapp@1.13.4
+webapp-hashing@1.1.1

seankwarren/flowchart-calculator/__mocks__/meteor/meteor.js

@@ -0,0 +1,10 @@
+const Meteor = {
+    isClient: true,
+    isServer: false,
+    methods: () => {},
+    call: jest.fn(),
+    startup: jest.fn(),
+    subscribe: jest.fn(),
+};
+
+export default Meteor

seankwarren/flowchart-calculator/client/index.js

@@ -0,0 +1 @@
+import './main.jsx';

seankwarren/flowchart-calculator/client/main.html

@@ -0,0 +1,8 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Flowchart Calculator</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>

seankwarren/flowchart-calculator/client/main.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Meteor } from 'meteor/meteor';
+import App from '/imports/ui/App';
+
+Meteor.startup(() => {
+  const container = document.getElementById('app');
+  const root = createRoot(container);
+  root.render(<App />);
+
+  // Dispatch the 'meteor-app-loaded' event
+  const event = new Event('meteor-app-loaded');
+  window.dispatchEvent(event);
+});

seankwarren/flowchart-calculator/cypress.config.js

@@ -0,0 +1,10 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+    e2e: {
+        setupNodeEvents(on, config) {
+        // implement node event listeners here
+        },
+        baseUrl: 'http://localhost:3000',
+    },
+});