Bug/vgnwb 227 (#130)

* [VGNWB-219] moved type id to settings. Allowed them to be configurable through export statements and added default values.

* [VGNWB-219] updated ready

* [VGNWB-219] removed import settings

* [VGNWB-219] removed import and changed lifecycle to concept

* [VGNWB-219] updated concept type

* [VGNWB-210] added code to allow filters to stay applied when going between pages. Also added code to cleanup url

* [VGNWB-210] fixed filter resets when switching pages and added a bottom previous button

* [VGNWB-210] fixed previous button and set debug back to False

* [VGNWB-210] updated annotations view and template in in order to fix loss of filter state.

* [VGNWB-210] removed unnecessary js file and script tag, plus unused imports

* [VGNWB-207] added filter to filter out duplicate identities

* [VGNWB-223]Fixed concept filter from resetting.

* [VGNWB-223] removed unused files.

* [VGNWB-223] removed unused files.

* [VGNWB-223] removed unused files.

* [VGNWB-223] removed unused div.

* [VGNWB-223] fixed indentation.

* [VGNWB-223] removed trailing comma.

* [VGNWB-223] fixed id

* [VGNWB-223] removed print statements and combined else if into elif.

* [VGNWB-226] fixed scroll issue

* [VGNWB-226] removed print statement and trailing slash.

* [VGNWB-226] Update css.

* [VGNWB-227] Added recently used concepts to search box when selecting concepts.

* [VGNWB-227] added functions to filter duplicates and get concept count.

* [VGNWB-227] added concept picker for recent and most used concepts.

* [VGNWB-227] fixed spacing and added if statement to component.

* [VGNWV-227] added six and updated psycopg2 to 2.7.1 to fix build failing

* [VGNWB-227] simplified loop for sorting concepts counts.

* [VGNWB-227] added compare function.

* [VGNWB-227] updated recently used concept sort

* [VGNWB-227] fixed sorting, changed appellationMap to appellationsUri, handling case of less than three concepts.

* [VGNWB-227] refactored duplicate appellation sorting and added the use of maps to count appellation occurences.

* [VGNWB-227] refactored merge loop and broke out while loop into its own function.

* [VGNWB-227] removed unused lodash script import.

* [VGWB-227] changed count to a local variable.

annotations/static/annotations/css/annotators/text.css

@@ -97,6 +97,7 @@
     font-size: 0.8em;
     padding: 5px;
     border: 0.5px solid #ddd;
+    max-height: auto;
 }
 .appellation-creator .form-control {
     font-size: 1.0em;

annotations/static/annotations/js/annotators/text.js

@@ -84,6 +84,8 @@ var ConceptSearch = {
         search: function() {
             this.searching = true;    // Instant feedback for the user.
 
+            this.$emit('search', this.searching); // emit search to remove concept picker
+
             // Asynchronous quries are beautiful.
             var self = this;    // Need a closure since Concept is global.
             var payload = {search: this.query};
@@ -178,7 +180,7 @@ ConceptCreator = {
             name: "",
             description: "",
             concept_type: "",
-            pos: "noun",
+            pos: "",
             concept_types: [],
             error: false,
             submitted: false
@@ -258,6 +260,7 @@ DateAppellationCreator = {
             day: null,
             submitted: false,
             saving: false
+
         }
     },
     template: `<div class="appellation-creator">
@@ -327,24 +330,121 @@ DateAppellationCreator = {
         }
     }
 }
+ConceptPickerItem = {
+    props: ['concept'],
+    components: {
+    },
+    template: `<div class="list-group-item concept-item clearfix" id="concept-{{ concept.interpretation.uri }}">
+                <div>
+                    <a v-on:click="select" style="cursor: pointer;">{{ concept.interpretation_label }} ({{ concept.interpretation.authority }})</a>
+                </div>
+                <div class="text text-muted">{{ concept.interpretation.description }}</div>
+            </div>`,
+    methods: {
+        select: function() {
+            this.$emit('selectconcept', this.concept);
+            },
 
+        }
+    }
+
+ConceptPicker = {
+    props: ['appellations'],
+    components: {
+        'concept-picker-item': ConceptPickerItem
+    },
+    data: function() {
+        return {
+            conceptsFinal: [],
+            appell: [],
+            appellationCount: [],
+        }
+    },
+    template: `<div  class="concept-picker" style="max-height: 50vh; overflow-y: scroll;">
+                <concept-picker-item
+                    v-on:selectconcept="selectConcept"
+                    v-for="concept in conceptsFinal"
+                    v-bind:concept=concept>
+                </concept-picker-item>
+               </div>`,
+    methods: {
+        selectConcept: function(concept) {
+            // Clear the concept search results.
+            this.concepts = [];
+            this.$emit('selectconcept', concept);
+        },
+        addConcepts: function (appellationMapEntires) {
+            var count = 0
+            while(count <= 3) {
+                var appellation = appellationMapEntires.next().value;
+                if (appellation == null) {
+                    break
+                } 
+                if (!this.conceptsFinal.includes(appellation[1][0])){
+                    this.conceptsFinal.push(appellation[1][0]);
+                    count++;
+                }
+            }
+        },
+        merge: function (appellations) {
+            this.conceptsFinal = [];
+            this.appell = appellations;
+            // Sort by date
+            function compare(a,b) {
+                if (Date.parse(a.created) > Date.parse(b.created))
+                  return -1;
+                if (Date.parse(a.created) < Date.parse(b.created))
+                  return 1;
+                return 0;
+            }
+            this.appell.sort(compare);
+            var appellationMap = new Map();
+            // set map items from appell array
+            this.appell.forEach(function(item){ 
+                if (appellationMap.has(item.interpretation.uri)) {
+                        appellationMap.get(item.interpretation.uri).push(item);
+                    } else {
+                        appellationMap.set(item.interpretation.uri, [item]);
+                    }
+            });
+            var appellationMapEntires = appellationMap.entries();
+            // add non-duplicate objects to conceptsFinal sorted by most recent
+            this.addConcepts(appellationMapEntires);
+            // sort appellationMap by length
+            var sortedMap = new Map([...appellationMap.entries()].sort(function (a, b) {
+                return b[1].length - a[1].length
+            }));
+            var sortedMapItems = sortedMap.entries();
+            // add non-duplicate objects to conceptsFinal sorted by most occuring
+            this.addConcepts(sortedMapItems);
+            return this.conceptsFinal;
+        },
+    },
+    created: function () {
+        this.merge(this.appellations);
+
+    },
+}
 
 AppellationCreator = {
-    props: ["position", "user", "text", "project"],
+    props: ["position", "user", "text", "project", 'appellations'],
     components: {
         'concept-search': ConceptSearch,
-        'concept-creator': ConceptCreator
+        'concept-creator': ConceptCreator,
+        'concept-picker': ConceptPicker
     },
     data: function() {
         return {
             concept: null,
             create: false,
             submitted: false,
-            saving: false
+            saving: false,
+            search: false,
+            display: true
 
         }
     },
-    template: `<div class="appellation-creator" style="max-height: 300px; overflow-y: scroll;">
+    template: `<div class="appellation-creator" style="max-height: 80vh; overflow-y: scroll;">
                     <div class="h4">
                         What is this?
                         <span class="glyphicon glyphicon-question-sign"
@@ -378,24 +478,42 @@ AppellationCreator = {
                        </div>
                    </div>
                    <concept-search
+                       @search="setSearch"
                        v-if="concept == null && !create"
                        v-on:selectconcept="selectConcept">
                    </concept-search>
                    <concept-creator
                        v-if="create && concept == null"
                        v-on:createdconcept="createdConcept">
                    </concept-creator>
+                   <concept-picker
+                        v-show="display"
+                        v-if="concept == null && !create"
+                        v-bind:appellations=appellations
+                        v-on:selectconcept="selectConcept">
+                   </concept-picker>
                    <div>
                        <a v-on:click="cancel" class="btn btn-xs btn-danger">Cancel</a>
                    </div>
                </div>`,
+
+    watch: {
+        search: function () {
+            if (this.search ==  true){
+                this.display = false;
+            }
+        }
+    },
     methods: {
         reset: function() {
             this.concept = null;
             this.create = false;
             this.submitted = false;
             this.saving = false;
         },
+        setSearch: function (search) { // removes concept picker if searching concept to keep it from looking messy
+            this.search = search;
+        },
         cancel: function() {
             this.reset();
             this.$emit('cancelappellation');
@@ -425,7 +543,7 @@ AppellationCreator = {
                     occursIn: this.text.id,
                     createdBy: this.user.id,
                     project: this.project.id,
-                    interpretation: this.concept.uri
+                    interpretation: this.concept.uri || this.concept.interpretation.uri
                 }).then(function(response) {
                     self.reset();
                     self.$emit('createdappellation', response.body);
@@ -1015,6 +1133,7 @@ Appellator = new Vue({
             self.appellations.push(appellation);
             self.selectAppellation(appellation);
             this.selected_text = null;
+            this.updateAppellations(); // call update appellations when a new appelation is created to update list
         },
         createdDateAppellation: function(appellation) {
             self = this;

annotations/templates/annotations/vue.html

@@ -124,7 +124,8 @@
                                             v-bind:project=project
                                             v-bind:position=selected_text
                                             v-on:cancelappellation="cancelAppellation"
-                                            v-on:createdappellation="createdAppellation">
+                                            v-on:createdappellation="createdAppellation"
+                                            v-bind:appellations=appellations>
                                         </appellation-creator>
                                     </div>
                                     <div v-bind:class="{

annotations/views/rest_views.py

@@ -211,7 +211,6 @@ def create(self, request, *args, **kwargs):
 
         try:
             serializer.is_valid(raise_exception=True)
-            print 'asdfasdfasdf'
         except Exception as E:
             print serializer.errors
             raise E

requirements.txt

@@ -42,3 +42,4 @@ six==1.10.0
 Unidecode==0.4.20
 urllib3==1.19.1
 xmltodict==0.10.2
+dicttoxml==1.6.6