Joint refactor

client/src/components/App/App.jsx

@@ -12,12 +12,17 @@ import Login from '../../views/Login/Login';
 import $ from 'jquery';
 import Signup from '../../views/Signup/Signup';
 
+const GRAPH_STATE = {
+    CREATE: 0,
+    PROOF: 1
+}
 
 export default function App(props) {
     const workspace = useRef(null);
 
     const [muted, setMuted] = useState(true);
     const [sound, setSound] = useState(null);
+    const [graphState, setGraphState] = useState(GRAPH_STATE.CREATE);
 
     //initial render
     useEffect(() => {
@@ -54,6 +59,10 @@ export default function App(props) {
         audio.play();
     }
 
+    const handleGraphStateChange = (newGraphState) => {
+        setGraphState(newGraphState);
+    }
+
     /*
     const getGraphForExport = () => {
         return workspace.current.mainPaper.current.sheet.graph; 
@@ -84,17 +93,17 @@ export default function App(props) {
     return (
         <div id="app" className="app text-black dark:text-white bg-white dark:bg-slate-700">
             <BrowserRouter>
-                <Header muted={muted} handleMuteToggle={handleMuteToggle}/>
+                <Header muted={muted} handleMuteToggle={handleMuteToggle} graphState={graphState}/>
                 <Routes>
                     <Route path="/" element={
                         <Dashboard/>
                     } />
                     <Route path="/create/:id" element={
-                        <Create handlePlayAudio={handlePlayAudio}/>
-                    } />
-                    <Route path="/proof" element={
-                        <Create handlePlayAudio={handlePlayAudio}/>
+                        <Create handlePlayAudio={handlePlayAudio} handleGraphStateChange={handleGraphStateChange} />
                     } />
+                    {/* <Route path="/proof" element={
+                        <Create handlePlayAudio={handlePlayAudio} handleGraphStateChange={handleGraphStateChange}/>
+                    } /> */}
                     <Route path="/login" element={
                         <Login/>
                     } />

client/src/components/Header/Header.jsx

@@ -3,6 +3,12 @@ import { Link } from "react-router-dom";
 import Navbar from "@components/Header/Navbar/Navbar";
 import Profile from "@components/Header/Profile/Profile";
 import eg_logo from "@assets/images/eg_logo.png";
+
+const GRAPH_STATE = {
+  CREATE: 0,
+  PROOF: 1
+}
+
 /**
  * Component for Header of Existential Graphs.
  * 
@@ -19,7 +25,13 @@ export default function Header( props ) {
           className=" w-10 flex-item m-2 mr-20"
           />
         </Link>
-        <Navbar />
+
+        {/* <Navbar /> */}
+        <div className="w-full flex flex-row justify-around items-center">
+          <p className="inline-block text-black hover:text-slate-600 dark:text-white dark:hover:text-slate-400 text-3xl">
+            {props.graphState === GRAPH_STATE.CREATE ? 'Create' : 'Proof'} Mode
+          </p>
+        </div>
       </div>
 
       <Profile />

client/src/components/Paper/ProofView/ProofStep.jsx

@@ -0,0 +1,23 @@
+
+const ruleMap = {
+    'Start': 'Proof Start',
+    'insert_double_cut': 'Insert Double Cut',
+    'erase_double_cut': 'Erase Double Cut',
+    'insert_subgraph': 'Insert Subgraph',
+    'erase_subgraph': 'Erase Subgraph',
+    'copy_subgraph': 'Copy Subgraph',
+    'paste_subgraph': 'Paste Subgraph',
+    'iteration': 'Iteration',
+    'deiteration': 'Deiteration'
+}
+
+export default function ProofStep(props) {
+    return (
+        <div 
+            className={`w-full px-6 py-3 text-lg border-b-2 border-slate-400 hover:cursor-pointer hover:bg-slate-300 font-mono ${props.selected ? 'bg-slate-300' : ''}`}
+            onClick={props.onClick}    
+        >
+            { ruleMap[props.rule] ||  '???'}
+        </div>
+    )
+}

client/src/components/Paper/ProofView/ProofView.jsx

@@ -0,0 +1,76 @@
+import { useState } from "react"
+import ProofStep from "./ProofStep";
+
+
+
+export default function ProofView(props) {
+
+    const [expanded, setExpanded] = useState(true);
+
+    const handleToggleExpand = () => {
+        setExpanded(!expanded);
+    }
+
+    return (
+        <div>
+            <div id='proof-view' className="absolute right-10 top-8 w-96 ">
+                { 
+                props.show &&    
+                <button 
+                    type='button' 
+                    className="text-left font-mono font-bold text-slate-600 px-3 py-3 collapse bg-slate-300 hover:bg-slate-200 border-solid border-2 border-slate-600 w-full flex flex-row justify-between items-center"
+                    onClick={handleToggleExpand}
+                >
+                    Proof View
+                    <span className="text-3xl">{expanded ? '-' : '+' }</span>
+                </button>
+                }
+
+                { 
+                props.show && expanded &&  
+                <div className="w-full bg-slate-100 border-solid border-2 border-slate-600 border-t-0 min-h-[200px] max-h-96 overflow-y-scroll">
+                    {
+                        props.hypergraph.toArray().map((node, i) => (
+                            <ProofStep
+                                rule={node.rule}
+                                verified={node.verified}
+                                selected={i === props.index}
+                                key={i}
+                                onClick={() => props.handleChangeHypergraphIndex(i)}
+                            />
+                        ))
+
+                        // this.state.data.map((history_item, num) => (
+                        //     (num === 0) ?  null :
+                        //     <ProofStep 
+                        //         num={num}
+                        //         total={this.state.data.length}
+                        //         id={this.props.id_prefix + num}
+                        //         cells={history_item}
+                        //         active={this.state.index === num}
+                        //         onClick={this.handleJump.bind(this, num)}
+                        //         key={num}
+                        //     />
+                        // ))
+                    }
+                </div>
+                }
+
+            </div>
+
+            <div id='proof-view-bottom' className="fixed bottom-10 inset-x-1/2 w-96 translate-x-[-50%]">
+                { 
+                props.show &&    
+                <div className="flex flex-row justify-between align-items"> 
+                    <button onClick={() => props.handleChangeHypergraphIndex(props.index-1)} className="px-4 py-2 text-2xl text-slate-500 font-bold hover:bg-slate-200 rounded-xl">&lt;</button>
+                    <p className="text-2xl font-mono text-slate-500 m-auto"> Step {props.index + 1} / {props.hypergraph.toArray().length} </p>
+                    <button onClick={() => props.handleChangeHypergraphIndex(props.index + 1)} className="px-4 py-2 text-2xl text-slate-500 font-bold hover:bg-slate-200 rounded-xl">&gt;</button>
+                </div>
+
+                }
+
+            </div>
+        </div>
+
+    )
+}

client/src/components/Toolbar/GraphTool/GraphTool.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import addCutPng from "@assets/images/addcut.png";
+import insertDoubleCutPng from "@assets/images/insertdoublecut.png";
+import removeDoubleCutPng from "@assets/images/removedoublecut.png";
+import insertSubgraphPng from "@assets/images/insertsubgraph.png";
+import removeSubgraphPng from "@assets/images/removesubgraph.png"; 
+import copySubgraphPng from "@assets/images/copysubgraph.png";
+import pasteSubgraphPng from "@assets/images/pastesubgraph.png";
+import iterationPng from '@assets/images/iteration.png';
+import deiterationPng from '@assets/images/deiteration.png';
+
+const imageMap = {
+  'Cut': addCutPng,
+  'Insert Double Cut' : insertDoubleCutPng,
+  'Erase Double Cut' : removeDoubleCutPng,
+  'Insert Subgraph' : insertSubgraphPng,
+  'Erase Subgraph' : removeSubgraphPng,
+  'Copy Subgraph' : copySubgraphPng,
+  'Paste Subgraph' : pasteSubgraphPng,
+  'Iteration' : iterationPng,
+  'Deiteration' : deiterationPng,
+  'Confirm Insertion': insertSubgraphPng,
+  'Cancel Insertion': removeSubgraphPng
+};
+
+/**
+ * Insert Double Cut
+Erase Double Cut
+Insert Subgraph
+Erase Subgraph
+Copy Subgraph
+Paste Subgraph
+ */
+
+export default function GraphTool(props) {
+
+  let text_color = props.selected ? 'text-red-400' : '';
+
+  if (props.is_auto) {
+    text_color = 'hover:text-purple-600 text-blue-600';
+  }
+
+  return (
+    <div className='z-9 w-max h-max bg-slate-200 dark:bg-slate-500 flex flex-col px-2 font-mono hover:cursor-pointer hover:bg-slate-300 '>
+            <button onClick={props.onClick} className='inline-block min-h-[2rem] min-w-[2rem] m-auto'>
+              <img src={imageMap[props.children]} alt={props.children + '.png'}></img>
+            </button>
+            <span className={`h-min ${text_color}`}>
+              { props.requiresConfirmation 
+                ? (
+                  props.waitingOnConfirmation
+                  ? <div className='z-10 flex justify-between w-full mr-2 mb-1 mt-1 min-h-max'>
+                      <button onClick={()=>props.handleConfirm()} className='font-mono text-xs text-green-700 bg-emerald-100 p-1 rounded-xl hover:bg-emerald-200'>Confirm</button>
+                      <button onClick={()=>props.handleCancel()} className='font-mono text-xs text-red-700 bg-red-100 p-1 rounded-xl hover:bg-red-200'>Cancel</button>
+                    </div>
+                  : props.children
+                )
+                : props.children}
+            </span>
+    </div>
+  );
+}