Implement HelpPanel

index.html

@@ -46,6 +46,9 @@
             { path: '/debug', component: components.Debug },
         ]
     });
+    router.afterEach((to, from) => {
+        store.dispatch('hide_help');
+    });
 
     var app = new Vue({
         router: router,

js/Basket.vue

@@ -23,6 +23,10 @@
                                 :concept_palette="concept_palette"
                                 :is_fullscreen="is_fullscreen">
     </resource-information-panel>
+    <help-panel>
+      <h2>Basket view</h2>
+      <p>This view presents your current selection. You can remove items, or ask the LAM to sort them into a Sequence.</p>
+    </help-panel>
   </div>
 </template>
 

js/Components.js

@@ -12,6 +12,7 @@ export default {
         "BarLegend",
         "ConceptBar",
         "CountOverlay",
+        "HelpPanel",
         "ItemDetail",
         "LetterCube",
         "NeighborGraph",

js/HelpPanel.vue

@@ -0,0 +1,60 @@
+<template>
+  <div v-if="show_help" class="x5gon-help">
+    <slot></slot>
+    <img class="close-help"
+         src="img/help_close.svg"
+         title="Close help"
+         alt="Close"
+         @click="close_help"></img>
+  </div>
+</template>
+
+<script>
+    module.exports = {
+        name: "HelpPanel",
+        computed: {
+            ...Vuex.mapState([ "show_help" ]),
+        },
+        methods: {
+            close_help: function () {
+                console.log("close");
+                this.$store.dispatch('hide_help');
+            },
+        },
+    };
+</script>
+
+<style type="text/css">
+  div.x5gon-help {
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 70%;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    font-family: Open Sans;
+    font-size: 18px;
+    padding: 40px 20px;
+  }
+  .x5gon-help h1 {
+      margin-top: .5em;
+      font-weight: 600;
+      font-size: 24px;
+  }
+  .x5gon-help h2 {
+      margin-top: .5em;
+      font-weight: 600;
+      font-size: 20px;
+  }
+  .x5gon-help p {
+      margin-top: .5em;
+  }
+  .close-help {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      cursor: pointer;
+  }
+</style>

js/Notification.vue

@@ -23,7 +23,6 @@
     top: 0;
     left: 0;
     right: 0;
-    height: 2em;
     display: flex;
     flex-direction: column;
     align-items: center;

js/Overview.vue

@@ -29,6 +29,25 @@
                                 @concept_mouseover="on_concept_mouseover"
                                 @concept_mouseout="on_concept_mouseout">
     </resource-information-panel>
+    <help-panel>
+      <h2>Overview view</h2>
+      <p>This view presents a graph of resources, built from a
+      reference resource (the one with a white disc).</p>
+      <p>The number of displayed neighbors can be modified using the
+      slider in the top-left corner.</p>
+      <p>Below the graph, you can see a description of the currently
+        active (hovered) resource, in order to evaluate its
+        relevance. The horizontal bar presents the relative weights of
+        the top 5 wikifier concepts, that are common among all
+        presented resources.
+      </p>
+      <p>You can add a resource to the basket of selected resources
+      using the <img src="img/add_to_basket.svg" alt="Add to basket"
+      /> icon that is displayed when the mouse cursor is over a
+      resource. You can also use the active resource as new reference
+      resource with the <img src="img/new_reference.svg" alt="New
+      reference" /> icon.</p>
+    </help-panel>
   </div>
 </template>
 

js/Sequence.vue

@@ -65,6 +65,16 @@
       </ul>
     </div>
     <x5gon-toolbar></x5gon-toolbar>
+    <help-panel>
+      <h2>Sequence view</h2>
+      <p>This view presents an ordered sequence of resources,
+        generated from a basket. The LAM system proposes an order for
+        the elements. It also indicates the respective distances between
+        resources: the more white the area between 2 resources is, the
+        closer they are.</p>
+      <p>Through the right menu, you can ask the LAM system to suggest
+        additional resources to include into this sequence.</p>
+    </help-panel>
   </div>
 </template>
 

js/Store.js

@@ -49,6 +49,7 @@ const store = new Vuex.Store({
         notification_messages: [],
         // Loading message. If not null, display loading spinner
         loading_message: "",
+        show_help: false,
     },
 
     // Mutation are synchronous. They should normally not be directly called, but instead through actions (see below)
@@ -142,6 +143,9 @@ const store = new Vuex.Store({
             console.log("validat_insertion", state.sequence, state.insertions);
         },
 
+        show_help(state, value) {
+            state.show_help = !!value;
+        },
     },
 
     // Actions are asynchronous. They are called with the dispatch method (or through mapActions in components)
@@ -338,7 +342,14 @@ const store = new Vuex.Store({
             let item = this.state.insertions[index];
             commit("validate_insertion", index);
             commit("add_to_basket", item);
-        }
+        },
+
+        async show_help({ commit }) {
+            commit("show_help", true);
+        },
+        async hide_help({ commit }) {
+            commit("show_help", false);
+        },
     }
 });
 

js/X5gonToolbar.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="toolbar toolbar-right">
-      <img class="toolbar-icon"
+      <img class="toolbar-icon toolbar-icon-help"
            title="Help"
            alt="?"
            @click="show_help"
@@ -55,6 +55,7 @@
               this.$router.push('/sequence');
           },
           show_help: function () {
+              this.$store.dispatch('show_help');
           },
       }
   }