Help angular module

Makefile

@@ -194,7 +194,8 @@ HTML=login/index.html \
 	 record/index.html \
 	 recordedit/mdHelp.html \
 	 lib/switchUserAccounts.html \
-	 $(DIST)/chaise-dependencies.html
+	 $(DIST)/chaise-dependencies.html \
+	 help/index.html
 
 # the minified files that need to be created
 MIN=$(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) \
@@ -203,7 +204,8 @@ MIN=$(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) \
 	$(DIST)/$(RECORDSET_JS_SOURCE_MIN) \
 	$(DIST)/$(RECORDEDIT_JS_SOURCE_MIN) \
 	$(DIST)/$(VIEWER_JS_SOURCE_MIN) \
-	$(DIST)/$(LOGIN_JS_SOURCE_MIN)
+	$(DIST)/$(LOGIN_JS_SOURCE_MIN) \
+	$(DIST)/$(HELP_JS_SOURCE_MIN)
 
  DIST=dist
 
@@ -515,6 +517,28 @@ lib/switchUserAccounts.html: lib/switchUserAccounts.html.in .make-switchuser-inc
 	$(info - creating lib/switchUserAccounts.html)
 	@$(call build_html,.make-switchuser-includes,lib/switchUserAccounts.html)
 
+# -------------------------- help app -------------------------- #
+HELP_JS_SOURCE=help/help.app.js
+
+HELP_JS_SOURCE_MIN=help.min.js
+$(DIST)/$(HELP_JS_SOURCE_MIN): $(HELP_JS_SOURCE)
+	$(call bundle_js_files,$(HELP_JS_SOURCE_MIN),$(HELP_JS_SOURCE))
+
+HELP_CSS_SOURCE=
+
+HELP_VENDOR_ASSET=
+
+.make-help-includes: $(BUILD_VERSION)
+	@> .make-help-includes
+	$(info - creating .make-help-includes)
+	@$(call add_css_link,.make-help-includes,$(HELP_CSS_SOURCE))
+	@$(call add_js_script,.make-help-includes,$(SHARED_JS_VENDOR_BASE) $(DIST)/$(SHARED_JS_VENDOR_ASSET_MIN) $(HELP)/$(HELP_VENDOR_ASSET) $(JS_CONFIG) $(DIST)/$(SHARED_JS_SOURCE_MIN) $(DIST)/$(HELP_JS_SOURCE_MIN))
+	@$(call add_ermrestjs_script,.make-help-includes)
+
+help/index.html: help/index.html.in .make-help-includes
+	$(info - creating help/index.html)
+	@$(call build_html,.make-help-includes,help/index.html)
+
 
 # -------------------------- utility functions -------------------------- #
 

common/navbar.js

@@ -145,7 +145,7 @@
 
     // TODO we might want to refactor this
     function isChaise(link, dcctx) {
-        var appNames = ["record", "recordset", "recordedit", "login"];
+        var appNames = ["record", "recordset", "recordedit", "login", "help"];
 
         // parses the url into a location object
         var eleUrl = document.createElement('a');

common/styles/scss/_help-app.scss

@@ -0,0 +1,38 @@
+.help-container {
+    .app-content-container {
+        // TODO should be removed if we added breadcrumb to the top of the page
+        .main-container {
+            padding-top: 20px;
+        }
+
+        // distant footer and main body
+        .main-body {
+            padding-bottom: 20px;
+        }
+    }
+
+    // override the default that we have for markdown containers
+    .markdown-container {
+        h1 {
+            font-size: $h1-font-size;
+        }
+
+        h2 {
+            font-size: $h2-font-size;
+        }
+
+        h3 {
+            font-size: $h3-font-size;
+        }
+
+        h4 {
+            font-size: $h4-font-size;
+        }
+    }
+
+    .chaise-help-image {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

common/styles/scss/app.scss

@@ -17,6 +17,7 @@
 @import "recordedit-app";
 @import "viewer-app";
 @import "switch-user-accounts";
+@import "help-app";
 
 
 // if we want to hide the page and then show navbar and content together

common/utils.js

@@ -2924,16 +2924,20 @@
             }
         }
 
-        function addTitle() {
+        function addTitle(title) {
             var chaiseConfig = ConfigUtils.getConfigJSON();
 
+            if (typeof title !== "string" || title.length === 0) {
+                title = chaiseConfig.headTitle;
+            }
+
             var titleTag = document.head.getElementsByTagName('title')[0];
             if (titleTag) {
-                titleTag.innerHTML = chaiseConfig.headTitle;
+                titleTag.innerHTML = title;
             } else {
-                var title = document.createElement("title");
-                title.innerHTML = chaiseConfig.headTitle;
-                document.head.appendChild(title);
+                titleTag = document.createElement("title");
+                titleTag.innerHTML = title;
+                document.head.appendChild(titleTag);
             }
         }
 

help/help.app.js

@@ -0,0 +1,101 @@
+(function () {
+    'use strict';
+
+    angular.module('chaise.configure-help', ['chaise.config'])
+
+    .constant('appName', 'help')
+
+    .run(['$rootScope', function ($rootScope) {
+        // When the configuration module's run block emits the `configuration-done` event, attach the app to the DOM
+        $rootScope.$on("configuration-done", function () {
+
+            angular.element(document).ready(function(){
+                angular.bootstrap(document.getElementById("help"), ["chaise.help"]);
+            });
+        });
+    }]);
+
+    angular.module('chaise.help', [
+        'ngSanitize',
+        'ngCookies',
+        'ngAnimate',
+        'duScroll',
+        'chaise.alerts',
+        'chaise.errors',
+        'chaise.modal',
+        'chaise.navbar',
+        'chaise.html',
+        'chaise.utils',
+        'ermrestjs',
+        'ui.bootstrap',
+        'chaise.footer',
+        'chaise.resizable'
+    ])
+
+    .config(['$compileProvider', '$cookiesProvider', '$logProvider', '$provide', '$uibTooltipProvider', 'ConfigUtilsProvider',
+            function($compileProvider, $cookiesProvider, $logProvider, $provide, $uibTooltipProvider, ConfigUtilsProvider) {
+        ConfigUtilsProvider.$get().configureAngular($compileProvider, $cookiesProvider, $logProvider, $uibTooltipProvider);
+
+        $provide.decorator('$templateRequest', ['ConfigUtils', 'UriUtils', '$delegate', function (ConfigUtils, UriUtils, $delegate) {
+            return ConfigUtils.decorateTemplateRequest($delegate, UriUtils.chaiseDeploymentPath());
+        }]);
+    }])
+
+    .constant('helpPages', {
+        'home': {
+            'file': 'home.md',
+            'title': 'Chaise help pages'
+        },
+        'viewer-annotation': {
+            'file': 'viewer-annotation.md',
+            'title': 'Viewer annotation drawing tools'
+        }
+    })
+
+    .run(['ConfigUtils', 'ERMrest', 'headInjector', 'UiUtils', 'UriUtils', 'helpPages', '$rootScope', '$timeout', '$window',
+         function (ConfigUtils, ERMrest, headInjector, UiUtils, UriUtils, helpPages, $rootScope, $timeout, $window) {
+
+        // find the help page based on the given query parameter
+        var pageName = UriUtils.getQueryParam($window.location.href, "page"), helpContent, page;
+
+        // remove the hash (the qetQueryParam doesn't do that properly)
+        if (typeof pageName === "string") {
+            var parts = pageName.split("#");
+            if (parts.length > 0) {
+                pageName = parts[0];
+            }
+        }
+
+        // if there are no pageName, go to home
+        if (!pageName || !(pageName in helpPages)) {
+            pageName = "home";
+        }
+
+        page = helpPages[pageName];
+
+        // change the title
+        headInjector.addTitle(page.title);
+
+        // fetch the help page
+        ConfigUtils.getHTTPService().get(UriUtils.chaiseDeploymentPath() + "help/" + page.file).then(function (response) {
+            helpContent = response.data;
+            return ERMrest.onload();
+        }).then(function () {
+            // show the content
+            $rootScope.helpContent = ERMrest.renderMarkdown(helpContent);
+            $rootScope.displayReady = true;
+
+            $timeout(function () {
+
+                // make sure the height is properly set
+                UiUtils.attachContainerHeightSensors();
+
+                // make sure footer position is correct
+                UiUtils.attachFooterResizeSensor(0);
+            });
+        }).catch(function (err) {
+            throw err;
+        });
+    }]);
+
+})();

help/home.md

@@ -0,0 +1,3 @@
+# Chaise help pages
+
+- [How to annotate an image](?page=viewer-annotation)

help/index.html.in

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" id="help">
+
+<head>
+    <title>Wiki pages</title>
+    %INCLUDES%
+</head>
+
+<body class="chaise-body">
+    <div class="configure-container" ng-app="chaise.configure-help">
+        <loading-spinner></loading-spinner>
+    </div>
+    <div class="app-container help-container">
+        <navbar></navbar>
+        <loading-spinner ng-show="!displayReady"></loading-spinner>
+        <div class="app-content-container" ng-show="displayReady">
+            <!-- <div class="top-panel-container">
+
+            </div> -->
+            <div class="bottom-panel-container">
+                <div class="side-panel-resizable close-panel"></div>
+                <div class="main-container">
+                    <div class="main-body container">
+                        <div ng-bind-html="helpContent | trustedHTML" class="markdown-container help-content"></div>
+                    </div>
+                    <footer></footer>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+
+</html>

help/viewer-annotation.md

@@ -0,0 +1,125 @@
+# How to annotate an image
+
+* [Add a new Annotation](#add-a-new-annotation)
+* [Edit/Delete an existing Annotation](#editdelete-an-existing-annotation)
+* [Draw a Shape](#draw-a-shape)
+
+## Add a new annotation {id=add-a-new-annotation}
+
+1. Make sure that you are logged in.
+
+	![](resources/annotation-documentation-images/Login%20Check.png){.chaise-help-image}
+
+2. On the left hand side, beside the image you will see a `New` button. Click on it to open the `Create annotation` panel.
+
+	![](resources/annotation-documentation-images/NewButton.png){.chaise-help-image}
+
+	![](resources/annotation-documentation-images/CreateAnnotationPanel.png){.chaise-help-image}
+
+3. Fill in the following fields:
+
+	- Select the related anatomical term in the `Anatomy` field. (Required)
+	- Enter any useful description of your annotation in the `Comments` field. You may format your text using the formatting icons above the field. (Optional)
+	- The `Curation Status` field is `In Preparation` by default, which means it is not viewable to the public. You may change this field to `PI Review` if your lab uses that status for internal review or to `Submitted` to send it to the Hub for biocuration and subsequent release to the public.
+	- Select the relevant `Principal Investigator`. (Required)
+	- Select the relevant `Consortium`. (Required)
+
+5. Select the desired annotation shape from the `Annotation Toolbar`. You may choose from pencil icon (freehand drawing), rectangle or circle.
+
+	![](resources/annotation-documentation-images/AnnotationToolbar.png){.chaise-help-image}
+
+6. Draw the shape in the desired location on the image. (You may use multiple and different shapes within the annotation). See [Draw a shape](#draw-a-shape) for more details about the different drawing options.
+
+7. You may de-select the current shape by click on the same shape from the `Annotation Toolbar`.
+
+8. To save your annotation, click on the `Save` button in the `Create annotation` panel.
+
+	![](resources/annotation-documentation-images/SaveButton.png){.chaise-help-image}
+
+## Edit/Delete an existing annotation {id=editdelete-an-existing-annotation}
+
+1. Make sure that you are logged in.
+
+2. Click on the `Edit Annotation` icon of the annotation that you want to edit.
+	![](resources/annotation-documentation-images/EditButton.png){.chaise-help-image}
+
+3. To change the color of the annotation, pick a different color from the color picker (red square). This will change the color of all the shapes of the annotation that share the original color.
+
+	![](resources/annotation-documentation-images/ColorPicker.png){.chaise-help-image}
+	![](resources/annotation-documentation-images/ColorPicker2.png){.chaise-help-image}
+
+4. To delete a shape from this annotation, select the `Erase` tool from the annotation toolbar and click on the shape that you want to delete.
+
+	![](resources/annotation-documentation-images/DeleteButton.png){.chaise-help-image}
+
+5. To add a new shape, select the shape that you want from the annotation toolbar and start drawing it on the image.
+
+	![](resources/annotation-documentation-images/ShapeIcons.png){.chaise-help-image}
+
+6. After you are done making your changes, click on the `Save` button in the `Edit annotation` panel.
+
+7. To delete the entire annotation, click on the `Delete` button in the `Edit annotation` panel.
+
+	![](resources/annotation-documentation-images/DeleteButton.png){.chaise-help-image}
+
+## Draw a shape {id=draw-a-shape}
+
+### Path
+
+1. Select the path tool (pencil icon) from the annotation tool bar.
+	![](resources/annotation-documentation-images/Path.png){.chaise-help-image}
+
+2. Press and hold the left mouse button to draw the path on the image. Drag the mouse to draw the shape.
+
+3. Let go of the mouse button when you are done drawing.
+
+4. To add subsequent paths, repeat steps 2 & 3.
+
+### Rectangle
+
+1. Select the rectangle tool (square icon) from the annotation tool bar.
+
+	![](resources/annotation-documentation-images/Rectangle.png){.chaise-help-image}
+
+2. Press and hold the left mouse button to draw a rectangle on the image. Start dragging your shape with your mouse from the top-left corner to the bottom right corner of the area you want to annotate.
+
+3. Let go of the mouse button when you are done drawing.
+
+4. To add subsequent rectangles, repeat steps 2 & 3.
+
+### Circle
+
+1. Select the circle tool (circle icon) from the annotation tool bar.
+
+	![](resources/annotation-documentation-images/Circle.png){.chaise-help-image}
+
+2. Press and hold the left mouse button to draw the circle on the image. Start dragging your shape from the center of the area you want to annotate out to the desired radius.
+
+3. Let go of the mouse button when you are done drawing.
+
+4. To add subsequent circles, repeat steps 2 & 3.
+
+### Line
+1. Select the line tool (line icon) from the annotation tool bar.
+	![](resources/annotation-documentation-images/Line.png){.chaise-help-image}
+
+2. Press and hold the left mouse button to draw the line on the image. Drag the mouse pointer
+
+to draw. As you drag the mouse, you will see the the line change its end point.
+
+3. Let go of the mouse button when you are done drawing.
+
+4. To add subsequent lines, repeat steps 2 & 3.
+
+
+### Polygon
+1. Select the polygon tool (polygon icon) from the annotation tool bar.
+	![](resources/annotation-documentation-images/Polygon.png){.chaise-help-image}
+
+2. Press and hold the left mouse button to draw the first polygon edge on the image. Drag the mouse pointer to draw.
+
+3. A new vertex can only be added between the first and last vertices that are already present. To add a new vertex, press and hold the mouse button. Move to pointer around to adjust the position of this vertex. You also see an edge between the first vertex & new vertex, and last vertex & new vertex as you move the pointer around.
+
+4. Let go of the mouse button when you are done placing the edge on the image.
+
+5. To add subsequent polygons, de-select the polygon icon from the annotation toolbar and select it again.