added help section in router + more cosmetic bits

src/containers/AnnotatorRouter.tsx

@@ -1,49 +1,60 @@
-import {Redirect, Route, Switch, useHistory, useLocation} from "react-router-dom";
+import {
+  Redirect,
+  Route,
+  Switch,
+  useHistory,
+  useLocation,
+} from "react-router-dom";
 import ResourceLoader from "./ResourceLoader";
 import SolidWrapper from "./SolidWrapper";
 import React from "react";
-import {useSession} from "@inrupt/solid-ui-react";
-import {Col, Row} from "react-bootstrap-v5";
-
+import { useSession } from "@inrupt/solid-ui-react";
+import { Col, Row } from "react-bootstrap-v5";
+import HelpPage from "./HelpPage";
 /**
  * Check if the user is logged in with a solid session. If not, show a message informing
  * them that they need to be logged in.
  * If the are logged in, route to resource chooser or the annotator.
  */
 const AnnotatorRouter = () => {
-
-  const {session} = useSession();
+  const { session } = useSession();
 
   const history = useHistory();
   const location = useLocation();
   const query = new URLSearchParams(location.search);
-  const resource = query.get('resource');
+  const resource = query.get("resource");
 
   // Can't annotate with no resource, redirect to /new
-  if (location.pathname === '/annotate' && !resource) {
-    history.push('/new');
+  if (location.pathname === "/annotate" && !resource) {
+    history.push("/new");
   }
 
   if (!session.info.isLoggedIn) {
-    return <Row>
-      <Col/>
-      <Col xs={5}>Log in to get started</Col>
-      <Col/>
-    </Row>;
+    return (
+      <Row>
+        <Col />
+        <Col xs={5}>Log in to get started</Col>
+        <Col />
+      </Row>
+    );
   }
 
-  return <Switch>
+  return (
+    <Switch>
       <Route exact path="/">
         <Redirect to="/new" />
       </Route>
       <Route exact path="/new">
-        <ResourceLoader/>
+        <ResourceLoader />
       </Route>
       <Route exact path="/annotate">
         <SolidWrapper resourceUri={resource!} />
       </Route>
+      <Route exact path="/help">
+        <HelpPage />
+      </Route>
     </Switch>
-
+  );
 };
 
-export default AnnotatorRouter;
+export default AnnotatorRouter;

src/containers/HelpPage.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+const HelpPage = () => {
+  return (
+    <div>
+      <h3>Below you can find some tips on how to use the annotation tool:</h3>
+      <br />
+      <div>
+        <h4>How do I create an annotation?</h4>
+        <ol>
+          <li>
+            Select the type of selection you want to use (note, measure,
+            directives etc)
+          </li>
+          <li>
+            Drag across the score in order to select the elements you want to
+            annotate
+          </li>
+          <li>
+            You can select discontinuous measures by holding the shift key
+          </li>
+          <li>
+            Sometimes slurs can get in the way of your selection, you can
+            deselect unwanted measures by holding the shift key and clicking on
+            the measure you wish to deselect
+          </li>
+          <li>
+            Select the type of annotation you wish to submit (description, link
+            etc)
+          </li>
+          <li>
+            Type the text or paste the URL you wish to attach to the annotation
+          </li>
+          <li>Click the green submit button</li>
+        </ol>
+        <h4>I made a mistake in my annotation, how can I delete it?</h4>
+        <ul>
+          <li>
+            You can delete you annotation by clicking the rubbish bin icon in
+            the annotation item and click yes to delete it
+          </li>
+        </ul>
+
+        <h4>
+          I have replied to an annotation but I can’t see my reply, where is it?
+        </h4>
+        <ul>
+          <li>
+            You can see all the replies to the specific annotation by clicking
+            the “show replies button” in the annotation you are replying to
+          </li>
+        </ul>
+        <h4>
+          Can I create a different type of reply (media or image content)?
+        </h4>
+        <ul>
+          <li>
+            Not right now, this feature will be released in a future version of
+            the software
+          </li>
+        </ul>
+        <h4>How does the solid pod system work, is my data really safe?</h4>
+        <ul>
+          <li>
+            Solid was purposely built for data safety and protection, and by
+            design everything contained in the pod is private unless specified.
+            For more information visit the{" "}
+            <a
+              href="https://solidproject.org/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              solid project
+            </a>{" "}
+            page for more info
+          </li>
+        </ul>
+        <h4>I have found a bug, what can i do?</h4>
+        <ul>
+          <li>
+            Please submit a bug report to{" "}
+            <a href="mailto:fzuba001@gold.ac.uk?subject=Bug report">
+              fzuba001@gold.ac.uk
+            </a>{" "}
+            describing the nature of the bug and how to reproduce it, make sure
+            to include browser model and operating system used. Thanks! :)
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default HelpPage;

src/containers/Navigation.tsx

@@ -1,9 +1,10 @@
-import {useContext} from "react";
+import { useContext } from "react";
 import { Nav, Navbar } from "react-bootstrap-v5";
 import {
   CombinedDataProvider,
   LoginButton,
-  LogoutButton, SessionContext,
+  LogoutButton,
+  SessionContext,
   Text,
 } from "@inrupt/solid-ui-react";
 
@@ -31,6 +32,9 @@ export default function Navigation() {
         <Nav.Link as={Link} to="/new">
           New
         </Nav.Link>
+        <Nav.Link as={Link} to="/help">
+          Help
+        </Nav.Link>
       </Nav>
       <Nav>
         {session.info.isLoggedIn ? (

src/containers/SelectableScoreApp.tsx

@@ -12,7 +12,6 @@ import ArrowToLeft from "../graphics/arrow-to-left-regular.svg";
 import ArrowToRight from "../graphics/arrow-to-right-regular.svg";
 import SearchMinus from "../graphics/search-minus-solid.svg";
 import SearchPlus from "../graphics/search-plus-solid.svg";
-import HelpModal from "./HelpModal";
 import { AnyAction, bindActionCreators, Dispatch } from "redux";
 import { connect } from "react-redux";
 import FtempoSearch from "./FtempoSearch";
@@ -300,10 +299,14 @@ class SelectableScoreApp extends Component<
    * Called when the AnnotationSubmitter wants to save an annotation
    */
   saveAnnotation = async (annotation: any) => {
-    console.log("selectable score: about to save an annotation")
+    console.log("selectable score: about to save an annotation");
     console.log(annotation);
-    const solidClient = new SolidClient()
-    await solidClient.saveAnnotation(annotation, this.props.solidSession, this.props.submitUri)
+    const solidClient = new SolidClient();
+    await solidClient.saveAnnotation(
+      annotation,
+      this.props.solidSession,
+      this.props.submitUri
+    );
     // TODO: we shouldn't reload all annotations - instead just update state and re-compute boxes
     await this.onRefreshClick();
   };
@@ -312,14 +315,18 @@ class SelectableScoreApp extends Component<
    * Called when the "load annotations" <button> is clicked
    */
   onRefreshClick = async () => {
-    const solidClient = new SolidClient()
+    const solidClient = new SolidClient();
     // TODO: correctly get the pod uri for this session
     let podUrl = new URL(this.props.solidSession.info!.webId!).origin;
-    if (!podUrl.endsWith('/')) {
-      podUrl = podUrl + '/';
+    if (!podUrl.endsWith("/")) {
+      podUrl = podUrl + "/";
     }
     const containerUrl = podUrl + this.props.submitUri;
-    const annotations = await solidClient.fetchAnnotations(new URL(containerUrl), this.props.solidSession, {});
+    const annotations = await solidClient.fetchAnnotations(
+      new URL(containerUrl),
+      this.props.solidSession,
+      {}
+    );
     console.log("loaded annotations");
     console.log(annotations);
     this.setState({
@@ -330,7 +337,7 @@ class SelectableScoreApp extends Component<
       annoToDisplay: [],
     });
     this.onReceiveAnnotationContainerContent(annotations);
-  }
+  };
 
   onMediaClick = (bodyMedia: string) => {
     console.log("button click", bodyMedia);
@@ -368,7 +375,7 @@ class SelectableScoreApp extends Component<
       return;
     }
     // FIXME: Validate that these are (TROMPA?) Web Annotations
-    content = content.filter((c) => c &&  c["@id"]!.endsWith(".jsonld"));
+    content = content.filter((c) => c && c["@id"]!.endsWith(".jsonld"));
 
     let measuresToAnnotationsMapList = content.map((anno) => {
       let distinctMeasures: any[] = [];
@@ -740,14 +747,18 @@ class SelectableScoreApp extends Component<
           </div>
         </div>
 
-        <FtempoSearch
-          onButtonPress={this.onFtempoSearchButton}
-          vrvToolkit={this.props.score.vrvTk}
-          counter={this.state.ftempoSearchCounter}
-        />
+        {this.state.applicationMode === ApplicationMode.Ready && (
+          <div>
+            <FtempoSearch
+              onButtonPress={this.onFtempoSearchButton}
+              vrvToolkit={this.props.score.vrvTk}
+              counter={this.state.ftempoSearchCounter}
+            />
+            <h3>Annotate the score using the Annotation Tools</h3>
+            <button onClick={this.annotate}>Make an annotation</button>
+          </div>
+        )}
 
-        <h3>Annotate the score using the Annotation Tools</h3>
-        <button onClick={this.annotate}>Make an annotation</button>
         {/*selector for the component selection*/}
         {this.state.applicationMode === ApplicationMode.Annotate && (
           <div>
@@ -812,10 +823,6 @@ class SelectableScoreApp extends Component<
           >
             help
           </button>
-          <HelpModal
-            isOpen={this.state.helpWindowIsActive}
-            onRequestClose={this.deactivateModal}
-          />
         </div>
       </div>
     );