From 44801808d6f355a192b4b4a891bf5abbe7f63eea Mon Sep 17 00:00:00 2001 From: Patrick Altman Date: Fri, 26 Jun 2020 11:55:35 -0500 Subject: [PATCH 01/59] Show a map with all points when in named entity mode --- src/components/EntityMap.vue | 76 ++++++++++++ src/reader/widgets/ReaderWidget.vue | 110 ++++++++++++++++++ .../NamedEntitiesWidget/NamedEntity.vue | 32 +---- 3 files changed, 189 insertions(+), 29 deletions(-) create mode 100644 src/components/EntityMap.vue diff --git a/src/components/EntityMap.vue b/src/components/EntityMap.vue new file mode 100644 index 0000000..8b894aa --- /dev/null +++ b/src/components/EntityMap.vue @@ -0,0 +1,76 @@ + + + + + diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue index 36cdd15..9a70767 100644 --- a/src/reader/widgets/ReaderWidget.vue +++ b/src/reader/widgets/ReaderWidget.vue @@ -20,6 +20,45 @@ :textSize="textSize" :textWidth="textWidth" /> +
+
+ + No map + + + Vertical Map + + + Horizontal Map + +
+
+ +
+ +
+
+
{ @@ -82,6 +139,9 @@ imageMode() { return this.$store.state.displayMode === 'folio'; }, + namedEntitiesMode() { + return this.$store.state.displayMode === 'named-entities'; + }, imageIdentifier() { return this.gqlData && this.gqlData.imageAnnotations.edges.length ? this.gqlData.imageAnnotations.edges[0].node.imageIdentifier @@ -92,6 +152,18 @@ ? new URN(this.$route.query.urn) : this.$store.getters[`${MODULE_NS}/firstPassageUrn`]; }, + coordinatesList() { + return this.gqlData.passageTextParts.edges.map(e => { + return e.node.tokens.edges.map(te => { + return te.node.namedEntities.edges + .map(ne => ne.node) + .filter(n => n.kind === 'PLACE' && n.data.coordinates) + .map(n => { + return n.data.coordinates.split(', ').map(c => parseFloat(c)); + }); + }); + }).flat().flat(); + }, gqlQuery() { if (this.urn) { this.$store.dispatch( @@ -130,6 +202,8 @@ edges { node { id + kind + data } } } @@ -265,5 +339,41 @@ font-size: 0.8em; font-style: italic; } + + .entity-mode { + flex: 1; + .map-direction-none { + + } + &.map-direction-horizontal { + .entity-mode-container { + flex-direction: column; + .map { + height: 300px; + width: 100%; + } + } + } + &.map-direction-vertical { + .entity-mode-container { + flex-direction: row; + .map { + height: 100vh; + flex: 1; + } + } + } + .toolbar { + a.active { + font-weight: 700; + padding: 0 1rem; + } + } + .entity-mode-container { + display: flex; + .map { + } + } + } diff --git a/src/widgets/NamedEntitiesWidget/NamedEntity.vue b/src/widgets/NamedEntitiesWidget/NamedEntity.vue index fd468bb..a06f599 100644 --- a/src/widgets/NamedEntitiesWidget/NamedEntity.vue +++ b/src/widgets/NamedEntitiesWidget/NamedEntity.vue @@ -11,28 +11,15 @@
{{ entity.description }}
Read More
- - - - - +
- + diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue index 29e9830..5b1146b 100644 --- a/src/components/ImageViewer.vue +++ b/src/components/ImageViewer.vue @@ -84,11 +84,11 @@ const openHandler = () => { this.errorMessage = null; this.displayViewer = true; - } + }; const openFailedHandler = err => { this.errorMessage = err.message; this.displayViewer = false; - } + }; this.viewer.addHandler('open', openHandler, false); this.viewer.addHandler('open-failed', openFailedHandler, false); }, @@ -112,9 +112,9 @@ .error { margin: 10px 0px; - padding:12px; - color: #D8000C; - background-color: #FFD2D2; + padding: 12px; + color: #d8000c; + background-color: #ffd2d2; vertical-align: middle; max-width: 40em; } diff --git a/src/components/LoaderBall.vue b/src/components/LoaderBall.vue index 56e3393..1d3bb7b 100644 --- a/src/components/LoaderBall.vue +++ b/src/components/LoaderBall.vue @@ -16,7 +16,7 @@ background-color: #343a40; } .partial-loader { - margin-top: 1.0em; + margin-top: 1em; text-align: center; transform: translate3d(0, 0, 0); } diff --git a/src/components/Paginator.vue b/src/components/Paginator.vue index 74eee0b..40e662f 100644 --- a/src/components/Paginator.vue +++ b/src/components/Paginator.vue @@ -1,7 +1,7 @@ diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue index 198cbe2..6c948ab 100644 --- a/src/reader/widgets/ReaderWidget.vue +++ b/src/reader/widgets/ReaderWidget.vue @@ -166,16 +166,19 @@ : this.$store.getters[`${MODULE_NS}/firstPassageUrn`]; }, coordinatesList() { - return this.gqlData.passageTextParts.edges.map(e => { - return e.node.tokens.edges.map(te => { - return te.node.namedEntities.edges - .map(ne => ne.node) - .filter(n => n.kind === 'PLACE' && n.data.coordinates) - .map(n => { - return n.data.coordinates.split(', ').map(c => parseFloat(c)); - }); - }); - }).flat().flat(); + return this.gqlData.passageTextParts.edges + .map(e => { + return e.node.tokens.edges.map(te => { + return te.node.namedEntities.edges + .map(ne => ne.node) + .filter(n => n.kind === 'PLACE' && n.data.coordinates) + .map(n => { + return n.data.coordinates.split(', ').map(c => parseFloat(c)); + }); + }); + }) + .flat() + .flat(); }, gqlQuery() { if (this.urn) { @@ -356,7 +359,6 @@ .entity-mode { flex: 1; .map-direction-none { - } &.map-direction-horizontal { .entity-mode-container { @@ -407,8 +409,8 @@ diff --git a/src/widgets/DisplayModeWidget.vue b/src/widgets/DisplayModeWidget.vue index 9d87b07..c55a8c6 100644 --- a/src/widgets/DisplayModeWidget.vue +++ b/src/widgets/DisplayModeWidget.vue @@ -63,11 +63,13 @@ }, methods: { setWideLayout() { - document.getElementsByClassName('main-layout')[0] + document + .getElementsByClassName('main-layout')[0] .classList.add('main-layout-wide'); }, setNormalLayout() { - document.getElementsByClassName('main-layout')[0] + document + .getElementsByClassName('main-layout')[0] .classList.remove('main-layout-wide'); }, setWideText() { @@ -83,22 +85,22 @@ setDefault() { this.$store.dispatch(SET_DISPLAY_MODE_DEFAULT); this.setNormalLayout(); - this.setNormalText() + this.setNormalText(); }, setInterlinear() { this.$store.dispatch(SET_DISPLAY_MODE_INTERLINEAR); this.setNormalLayout(); - this.setNormalText() + this.setNormalText(); }, setFolio() { this.$store.dispatch(SET_DISPLAY_MODE_FOLIO); this.setWideLayout(); - this.setNormalText() + this.setNormalText(); }, setNamedEntities() { this.$store.dispatch(SET_DISPLAY_MODE_NAMED_ENTITIES); this.setNormalLayout(); - this.setNormalText() + this.setNormalText(); }, setMetrical() { this.$store.dispatch(SET_DISPLAY_MODE_METRICAL); @@ -108,7 +110,7 @@ setSentence() { this.$store.dispatch(SET_DISPLAY_MODE_SENTENCE_ALIGNMENTS); this.setWideLayout(); - this.setNormalText() + this.setNormalText(); }, }, }; diff --git a/src/widgets/LibraryWidget/Node.vue b/src/widgets/LibraryWidget/Node.vue index fb34a4d..b3fe7cc 100644 --- a/src/widgets/LibraryWidget/Node.vue +++ b/src/widgets/LibraryWidget/Node.vue @@ -53,7 +53,7 @@ }, nodeUrnIndex() { return this.readerUrn.absolute.indexOf( - this.urn.slice(0, this.urn.length - 1) // trim trailing colon + this.urn.slice(0, this.urn.length - 1), // trim trailing colon ); }, readerUrn() { diff --git a/src/widgets/NamedEntitiesWidget/NamedEntity.vue b/src/widgets/NamedEntitiesWidget/NamedEntity.vue index a06f599..ece3176 100644 --- a/src/widgets/NamedEntitiesWidget/NamedEntity.vue +++ b/src/widgets/NamedEntitiesWidget/NamedEntity.vue @@ -53,7 +53,7 @@ ).length > 0 ); }, - } + }, }; @@ -63,16 +63,16 @@ height: 250px; } .named-entity.selected { - background: $gray-100; - margin-left: -10px; - padding: 3px 7px; - border-left: 3px solid $gray-800; - .named-entity-description { - color: $gray-700; - } - .icon { - color: $gray-800; - } + background: $gray-100; + margin-left: -10px; + padding: 3px 7px; + border-left: 3px solid $gray-800; + .named-entity-description { + color: $gray-700; + } + .icon { + color: $gray-800; + } } .icon { color: $gray-600; diff --git a/src/widgets/ScholiaWidget.vue b/src/widgets/ScholiaWidget.vue index 033e899..e4212ef 100644 --- a/src/widgets/ScholiaWidget.vue +++ b/src/widgets/ScholiaWidget.vue @@ -43,7 +43,7 @@ comment: e.node.data.comment, lemma: e.node.data.lemma, references: e.node.data.references, - } + }; }) ); }, diff --git a/src/widgets/TokenAnnotationWidget.vue b/src/widgets/TokenAnnotationWidget.vue index 83c3a7a..1d70e62 100644 --- a/src/widgets/TokenAnnotationWidget.vue +++ b/src/widgets/TokenAnnotationWidget.vue @@ -1,6 +1,8 @@ + + diff --git a/src/reader/widgets/ReaderWidget.vue b/src/reader/widgets/ReaderWidget.vue index 5f00f68..65cf276 100644 --- a/src/reader/widgets/ReaderWidget.vue +++ b/src/reader/widgets/ReaderWidget.vue @@ -35,29 +35,11 @@ class="entity-mode" :class="`map-direction-${showMap ? showMap : 'none'}`" > -
- - - - - - - - - -
+
From 71eda87c1cebc4c9ca1dead4a95ac553e4f5ced1 Mon Sep 17 00:00:00 2001 From: Patrick Altman Date: Tue, 7 Jul 2020 13:48:13 -0500 Subject: [PATCH 11/59] Use left justify to distinguish from hamburger --- src/components/EntityMapToolbar.vue | 2 +- src/main.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/EntityMapToolbar.vue b/src/components/EntityMapToolbar.vue index 3c90c3c..96303ff 100644 --- a/src/components/EntityMapToolbar.vue +++ b/src/components/EntityMapToolbar.vue @@ -1,7 +1,7 @@