From b19bab9098e3eae71845faa7c8d17e9d03548d22 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Thu, 12 May 2022 13:06:49 +1000 Subject: Enable info-display for search suggestions Add info-icon to SearchModal, sending event when clicked. Change App to allow info-modal display on top of search-modal. Also make info-icon-click events send a node name instead of a LayoutNode, and make TileInfoModal and server get/send additional node info, seeing as the client might not have info about the node's common name, tips, etc, anymore. --- backend/server.py | 5 ++++- src/App.vue | 20 +++++++++++--------- src/components/SearchModal.vue | 26 ++++++++++++++++++++++---- src/components/Tile.vue | 6 +++--- src/components/TileInfoModal.vue | 22 +++++++++++----------- 5 files changed, 51 insertions(+), 28 deletions(-) diff --git a/backend/server.py b/backend/server.py index 374fb53..6d2970d 100755 --- a/backend/server.py +++ b/backend/server.py @@ -121,8 +121,11 @@ def lookupNodeInfo(name): imgInfo = None if row != None: imgInfo = {"eolId": row[0], "sourceUrl": row[1], "license": row[2], "copyrightOwner": row[3]} + # Get other info + temp = lookupNodes([name], False) + nodeObj = temp[name] if name in temp else None # - return {"desc": desc, "imgInfo": imgInfo} + return {"desc": desc, "imgInfo": imgInfo, "nodeObj": nodeObj} class DbServer(BaseHTTPRequestHandler): def do_GET(self): diff --git a/src/App.vue b/src/App.vue index 55dc271..3cabecd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -100,7 +100,7 @@ export default defineComponent({ layoutMap: initLayoutMap(layoutTree), // Maps names to LayoutNode objects overflownRoot: false, // Set when displaying a root tile with many children, with overflow // Modals and settings related - infoModalNode: null as LayoutNode | null, // Node to display info for, or null + infoModalNodeName: null as string | null, // Name of node to display info for, or null helpOpen: false, searchOpen: false, settingsOpen: false, @@ -323,9 +323,11 @@ export default defineComponent({ this.overflownRoot = false; }, // For tile-info events - onInfoIconClick(node: LayoutNode){ - this.resetMode(); - this.infoModalNode = node; + onInfoIconClick(nodeName: string){ + if (!this.searchOpen){ + this.resetMode(); + } + this.infoModalNodeName = nodeName; }, // For help events onHelpIconClick(){ @@ -574,7 +576,7 @@ export default defineComponent({ }); }, resetMode(){ - this.infoModalNode = null; + this.infoModalNodeName = null; this.searchOpen = false; this.helpOpen = false; this.settingsOpen = false; @@ -634,12 +636,12 @@ export default defineComponent({ text-white/40 hover:text-white hover:cursor-pointer"/> - + - + diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index eccc685..bc77a39 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -1,6 +1,7 @@ @@ -143,8 +159,10 @@ export default defineComponent({
+ class="border p-1 hover:underline hover:cursor-pointer" @click="resolveSearch(sugg.name)"> + {{sugg.name == sugg.altName ? sugg.name : `${sugg.altName} (aka ${sugg.name})`}}
...
diff --git a/src/components/Tile.vue b/src/components/Tile.vue index ddf2fc0..86770ef 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -315,7 +315,7 @@ export default defineComponent({ this.$emit(this.isLeaf ? 'leaf-click-held' : 'nonleaf-click-held', this.layoutNode); }, onInfoIconClick(evt: Event){ - this.$emit('info-icon-click', this.layoutNode); + this.$emit('info-icon-click', this.layoutNode.name); }, // Mouse hover handling onMouseEnter(evt: Event){ @@ -341,8 +341,8 @@ export default defineComponent({ onInnerNonleafClickHeld(node: LayoutNode){ this.$emit('nonleaf-click-held', node); }, - onInnerInfoIconClick(node: LayoutNode){ - this.$emit('info-icon-click', node); + onInnerInfoIconClick(nodeName: string){ + this.$emit('info-icon-click', nodeName); }, // Other onTransitionEnd(evt: Event){ diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 6701f1f..4b904b2 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -13,27 +13,25 @@ export default defineComponent({ desc: null as null | string, fromRedirect: false, imgInfo: null as null | {eolId: string, sourceUrl: string, license: string, copyrightOwner: string}, + tolNode: null as null | TolNode, }; }, props: { - node: {type: Object as PropType, required: true}, + nodeName: {type: String, required: true}, tolMap: {type: Object as PropType, required: true}, uiOpts: {type: Object, required: true}, }, computed: { - tolNode(): TolNode { - return this.tolMap.get(this.node.name)!; - }, displayName(): string { - if (this.tolNode.commonName == null){ - return capitalizeWords(this.node.name); + if (this.tolNode == null || this.tolNode.commonName == null){ + return capitalizeWords(this.nodeName); } else { - return `${capitalizeWords(this.tolNode.commonName)} (aka ${capitalizeWords(this.node.name)})`; + return `${capitalizeWords(this.tolNode.commonName)} (aka ${capitalizeWords(this.nodeName)})`; } }, imgStyles(): Record { return { - backgroundImage: this.tolNode.imgName != null ? + backgroundImage: this.tolNode != null && this.tolNode.imgName != null ? 'linear-gradient(to bottom, rgba(0,0,0,0.4), #0000 40%, #0000 60%, rgba(0,0,0,0.4) 100%),' + 'url(\'/img/' + this.tolNode.imgName.replaceAll('\'', '\\\'') + '\')' : 'none', @@ -55,7 +53,7 @@ export default defineComponent({ created(){ let url = new URL(window.location.href); url.pathname = '/data/info'; - url.search = '?name=' + encodeURIComponent(this.node.name); + url.search = '?name=' + encodeURIComponent(this.nodeName); fetch(url.toString()) .then(response => response.json()) .then(obj => { @@ -63,6 +61,7 @@ export default defineComponent({ if (obj.desc != null){ this.desc = obj.desc.text; this.fromRedirect = obj.desc.fromRedirect; + this.tolNode = obj.nodeObj; } this.imgInfo = obj.imgInfo; } @@ -81,8 +80,9 @@ export default defineComponent({ class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/>

{{displayName}} -
({{tolNode.children.length}} children)
-
({{tolNode.tips}} tips)
+
+ ({{tolNode.children.length}} children, {{tolNode.tips}} tips) +

-- cgit v1.2.3