Components expansion and restructuring

_config.yml

@@ -16,4 +16,4 @@ github:
 url: https://beta.plant-humanities.org/
 baseurl: /
 
-components: /juncture/dist/js/index.js
+components: /juncture/wc/dist/js/index.js

j2/README.md

@@ -0,0 +1,25 @@
+# Hello, Juncture
+
+This example illustrates the use of an image and a map into a Juncture essay.   
+
+## Aulacophora indica
+
+.ve-media src=wc:The_Bug_Peek.jpg right
+
+The image depicts a leaf beetle (Aulacophora indica) (Family: Chrysomelidae; subfamily: Galerucinae) looking out from a leaf hole of Alnus nepalensis tree. Adult leaf beetles make holes in host plant leaves while feeding. They camouflage themselves with these holes.
+
+This image is hosted on [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:The_Bug_Peek.jpg) and was runner-up for Wikimedia Commons Picture of the Year for 2021.
+
+Image controls are located in the top-left corner of the image and can be seen when hovering over the image.  These controls support image zoom, rotation, full-screen viewing, and repositioning to start position.  Panning can be performed with keyboard arrow keys or by mouse click-and-drag.
+
+Image information can be seen when hovering the cursor over the info icon located in the top-right corner of the image.  The Image information popover includes image title, description, attribution statement, and reuse rights.
+
+## Chitwan National Park, Nepal
+
+.ve-map center=Q1075023 zoom=10 right
+
+The map is centered on the Chitwan National Park in Nepal, which is the location associated with the image above.  The Wikidata identifier for Chitwan National Park is `Q1075023`.  When a map location is specified using a Wikidata ID (or QID) Juncture can automatically retrieve the geographic coordinates for map centering.
+
+An alternative to using a Wikidata identifier for map positioning is to use regular latitude and longitude coordinates.  In that approach the QID would be replaced with the coordinates `27.5,84.333`, resulting in an identical map.
+
+Similar to the image viewer, map zooming is controlled using the buttons located in the top-left corner of the map viewer.  Panning is performed with the keyboard arrow keys or by mouse click-and-drag.

juncture/index.js

@@ -86,7 +86,7 @@ function createJunctureV1App() {
   new window.Vue({
     el: '#vue',
     components: {
-      'juncture-v1': window.httpVueLoader(`${window.config.baseurl}/juncture/src/components/JunctureV1.sfc.vue`)
+      'juncture-v1': window.httpVueLoader(`${window.config.baseurl}/juncture/sfc/Juncture.vue`)
     },
     data: () => ({ html })
   })

juncture/sfc/D3PlusNetwork.vue

@@ -0,0 +1,93 @@
+<template>
+    <div id="datavis" :style="containerStyle" />
+</template>
+
+<script>
+
+/* global d3plus */
+
+// Uses https://d3plus.org/
+const viewerLabel = 'Network Viewer'
+const viewerIcon = 'fas fa-project-diagram'
+const dependencies = [
+    'https://d3plus.org/js/d3.min.js',
+    'https://d3plus.org/js/d3plus.min.js',
+    'https://d3plus.org/js/d3plus-network.v0.6.full.min.js'
+]
+
+module.exports = {
+    name: 've-d3plus-network',
+    props: {
+      items: Array,
+      viewerIsActive: Boolean,
+      width: Number,
+      height: Number
+    },
+    data: () => ({
+    viewerLabel,
+    viewerIcon,
+    dependencies,
+    }),
+    computed: {
+      containerStyle() { return { width: `${this.width}px`, height: this.viewerIsActive ? `${this.height}px` : '0', overflowY: 'auto !important', marginLeft: '24px' } },
+      item() { return this.items.length > 0 ? this.items[0] : {} }
+    },
+    mounted() {
+        // console.log(this.$options.name, this.items)
+        if (typeof d3plus === 'object') {
+            this.init()
+        } else {
+            this.loadDependencies(dependencies, 0, this.init)
+        }
+    },
+    methods: {
+        init() {
+            fetch(this.item.url).then(resp => resp.text())
+            .then(delimitedDataString => {
+                const data = this.transformData(this.delimitedStringToObjArray(delimitedDataString))
+                new d3plus.Network() // eslint-disable-line no-undef
+                    .select('#datavis')
+                    .links(data.edges)
+                    .nodes(data.nodes)
+                    .render()
+            })
+        },
+        transformData(objArray) {
+            const nodes = {}
+            const transformed = { nodes: [], edges: [] }
+            objArray.forEach((obj) => {
+                ['source', 'target'].forEach((nodeType) => {
+                let nodeId = obj[nodeType].id || obj[nodeType].label
+                if (nodes[nodeId] === undefined) {
+                    let id = transformed.nodes.length
+                    // let qid = obj[nodeType].id[0] === 'Q' ? obj[nodeType].id : undefined
+                    let label = obj[nodeType].label || obj[nodeType].id
+                    nodes[nodeId] = id
+                    transformed.nodes.push({ id: label })
+                }
+                });
+            });
+            objArray.forEach((obj) => {
+                transformed.edges.push({
+                    source: nodes[obj.source.id || obj.source.label],
+                    target: nodes[obj.target.id || obj.target.label]
+                })
+            })
+            return transformed;
+        }
+    },
+    watch: {
+    items() {
+      // console.log(`${this.$options.name}.watch.items`, this.items)
+      this.init()
+    }
+    }
+  }
+</script>
+
+<style scoped>
+  body {
+    margin: 0;
+    /* overflow: hidden; */
+  }
+</style>

juncture/sfc/D3PlusRingNetwork.vue

@@ -0,0 +1,91 @@
+<template>
+    <div id="datavis" :style="containerStyle"></div>
+</template>
+
+<script>
+
+/* global d3plus */
+
+// Uses https://d3plus.org/
+
+const viewerLabel = 'Network Viewer'
+const viewerIcon = 'fas fa-project-diagram'
+const dependencies = [
+    // 'https://fonts.googleapis.com/css?family=Roboto',
+    // 'https://d3plus.org/css/styles.css?v=3',
+    // 'https://d3plus.org/js/d3.min.js',
+    // 'https://d3plus.org/js/d3plus.min.js',
+    // 'https://d3plus.org/js/d3plus-network.v0.6.full.min.js',
+    'https://cdn.jsdelivr.net/npm/d3plus@2'
+]
+
+module.exports = {
+    name: 've-d3plus-ring-network',
+    props: {
+      items: Array,
+      viewerIsActive: Boolean,
+      width: Number,
+      height: Number
+    },
+    data: () => ({
+    viewerLabel,
+    viewerIcon,
+    dependencies,
+    }),
+    computed: {
+      filteredItems() { return this.items.filter(item => item[this.componentName]) },
+      item() { return this.filteredItems.length > 0 ? this.filteredItems[0] : {} },
+      containerStyle() { return { 
+          width: `${this.width}px`,
+          height: this.viewerIsActive ? `${this.height}px` : '0',
+          overflowY: 'auto !important', 
+          marginLeft: '24px',
+          backgroundColor: this.items[0] ? this.items[0].background || 'white' : 'white'
+        }
+      },
+    },
+    mounted() {
+        // console.log(this.$options.name, this.items)
+        if (typeof d3plus === 'object') {
+            this.init()
+        } else {
+            this.loadDependencies(dependencies, 0, this.init)
+        }
+    },
+    methods: {
+        init() {
+            var links;
+            fetch(this.item.url).then(resp => resp.text())
+            .then(delimitedDataString => {
+                links = this.delimitedStringToObjArray(delimitedDataString)
+                    .map(item => { return { source: item.source.label, target: item.target.label } })
+            })
+            .then(() => {
+                //remove old viscontent DOM object
+                var oldObj = document.getElementById("viscontent");
+                if (oldObj){
+                    oldObj.remove();
+                }
+
+                //add new viscontent DOM object
+                var newDiv = document.createElement("div");
+                newDiv.setAttribute('id', 'viscontent');
+                document.getElementById("datavis").appendChild(newDiv)
+
+                var viz = new d3plus.Rings() // eslint-disable-line no-undef
+                    .select('#viscontent')
+                    .links(links)
+                    .label(d => d.id)
+                    .center(this.item.center)
+                
+                viz.render()
+            });
+        }
+    },
+    watch: {
+        items() {
+            this.init()
+        }
+    }
+  }
+</script>

juncture/sfc/Graphic.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="grid-container" :style="containerStyle">
+        <div id="graphic-container" v-if="this.svg" :style="graphicStyle">
+            <div id="graphic" v-html="this.svg"></div>
+        </div>
+        <div id="graphic-container" v-if="this.image" :style="graphicStyle">
+            <img id="graphic" :src="this.image">
+        </div>
+        <div class="citation">
+            <span class="title">{{this.items[0].title}}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+const viewerLabel = 'Graphic Viewer'
+const viewerIcon = 'fas fa-atom'
+
+module.exports = {
+    name: 've-graphic',
+    props: {
+      items: Array,
+      viewerIsActive: Boolean,
+      width: Number,
+      height: Number,
+    },
+    
+    data: () => ({
+        svg: undefined,
+        image: undefined,
+        viewerLabel,
+        viewerIcon
+    }),
+    
+    computed: {
+        containerStyle() {
+            return {
+                // width: `${this.width}px`,
+                height: this.viewerIsActive ? '100%' : '0',
+                // maxHeight: `${this.height}px` ? `${this.height}px` : '',
+                overflowY: 'auto !important',
+            }
+        },
+        graphicItems() { return this.items.filter(item => item[this.componentName]) },
+        input() { return this.graphicItems.length > 0 ? this.graphicItems[0].img || this.graphicItems[0].url || this.graphicItems[0].file : null },
+        graphicStyle() {
+            return {
+                //width: `${this.width}px`,
+                //height: `${this.height}px`,
+                overflowY: 'auto !important',
+                marginLeft: '0',   
+            }
+        }      
+    },
+    mounted() { this.loadDependencies(this.dependencies, 0, this.init) },
+    methods: {
+        init() {
+            //check if svg
+            if (this.input.split('.').pop() == 'svg'){
+                fetch(this.input).then((resp) => resp.text())
+                    .then((dataString) => {
+                        this.svg = dataString;
+                    })
+            }
+            else {
+                this.image = this.input
+            }
+           
+        },
+    },
+    watch: {
+        items() {
+            this.init()
+        }
+    }
+  }
+</script>
+
+<style scoped>
+
+    .grid-container {
+        display: grid;
+        grid-template-rows: auto 5%;
+        grid-template-areas:
+        "main"
+        "footer";
+        justify-items: center;
+        align-items: start;
+    }
+
+    #graphic-container {
+        grid-area: main;
+        width:100%;
+    }
+
+    #graphic {
+        width:100%;
+    }
+
+    .citation {
+        /*
+      grid-area: footer;
+      z-index: 2;
+      justify-self: stretch;
+      align-self: stretch;
+      background-color: #ccc;
+      padding: 3px 6px;
+        text-align: center;
+        line-height: 1;
+        */
+
+        justify-self: stretch;
+        /*align-self: stretch;*/
+        max-height: 30px;
+        overflow: auto; 
+        background-color: #ccc;
+        padding: 9px 6px;
+        text-align: center;
+        line-height: 1; 
+    }
+
+    .title {
+      font-size: 0.9rem;
+      font-weight: bold;
+    }
+</style>