Fix image modal, add demo and github actions

.github/workflows/deploy.yml

@@ -0,0 +1,44 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build public view
+        run: npm run build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    permissions:
+      pages: write
+      id-token: write
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc -b && vite build",
+    "build": "vite build",
     "preview": "vite preview",
     "test": "vitest"
   },

src/App.vue

@@ -1,11 +1,12 @@
 <template>
-  <VuePinpoint
-    :key-id="103"
-    base-url="http://localhost:3000/api/v1"
-    project-token="3oerVKf82_196cIECvHYNg"
-  />
+  <VuePinpoint v-bind="config" />
+  <DemoPanelAPI @set="(data) => (config = { ...data })" />
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import VuePinpoint from './components/VuePinpoint.vue'
+import DemoPanelAPI from './components/Demo/DemoPanelAPI.vue'
+
+const config = ref({})
 </script>

src/adapters/makeFigure.ts

@@ -1,10 +1,16 @@
-import { Figure } from '@/types'
+import { Figure, APIConfig } from '@/types'
 
-export function makeFigure(figure: any): Figure {
+export function makeFigure(
+  figure: any,
+  { baseUrl, projectToken }: APIConfig
+): Figure {
   return {
     caption: figure.caption,
     label: figure.label,
     position: figure.position,
-    image: figure.medium
+    image: figure.medium,
+    original: `${baseUrl}/${figure.original_png?.substring(
+      8
+    )}?project_token=${projectToken}`
   }
 }

src/adapters/makeLead.ts

@@ -1,13 +1,13 @@
-import { Lead } from '@/types'
+import { APIConfig, Lead } from '@/types'
 import { makeFigure } from './makeFigure'
 
-export function makeLead(item: any): Lead {
+export function makeLead(item: any, config: APIConfig): Lead {
   return {
     text: item.text,
     parentId: item.parent_id,
     targetId: item.target_id,
     targetType: item.target_type,
     position: item.position,
-    figures: item.figures?.map(makeFigure) || []
+    figures: item.figures?.map((item) => makeFigure(item, config)) || []
   }
 }

src/components/Demo/DemoPanelAPI.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="demo-panel-api">
+    <div>
+      <button
+        type="button"
+        @click="toggle"
+      >
+        {{ isVisible ? '-' : '+' }}
+      </button>
+    </div>
+    <template v-if="isVisible">
+      <div>
+        <label>API Url</label>
+        <input
+          type="text"
+          v-model="config.baseUrl"
+        />
+      </div>
+
+      <div>
+        <label>Project token</label>
+        <input
+          type="text"
+          v-model="config.projectToken"
+        />
+      </div>
+
+      <div>
+        <label>Lead ID</label>
+        <input
+          type="text"
+          v-model="config.leadId"
+        />
+      </div>
+
+      <button
+        type="button"
+        @click="() => emit('set', config)"
+      >
+        Load
+      </button>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const emit = defineEmits(['set'])
+
+const config = ref({
+  /*   leadId: 103,
+  baseUrl: 'https://sfg.taxonworks.org/api/v1',
+  projectToken: '3oerVKf82_196cIECvHYNg' */
+})
+const isVisible = ref(true)
+
+function toggle() {
+  isVisible.value = !isVisible.value
+}
+</script>
+
+<style scoped>
+.demo-panel-api {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  right: 0;
+  top: 0;
+  background-color: white;
+  gap: 0.5rem;
+  font-size: 14px;
+  border-left: 1px solid black;
+  border-bottom: 1px solid black;
+  padding: 1.5rem 1.5rem;
+  border-bottom-left-radius: 0.5rem;
+
+  label {
+    display: block;
+  }
+}
+</style>

src/components/Figure/FigureItem.vue

@@ -10,7 +10,8 @@
       @close="() => (isModalVisible = false)"
     >
       <img
-        src="https://picsum.photos/id/237/200/300"
+        class="pinpoint-figure-image"
+        :src="figure.original"
         @click="() => (isModalVisible = true)"
       />
     </VModal>
@@ -39,4 +40,9 @@ const isModalVisible = ref<boolean>(false)
   border: 1px solid black;
   cursor: pointer;
 }
+
+.pinpoint-figure-image {
+  max-width: 90vw;
+  max-height: 90vh;
+}
 </style>

src/components/Modal.vue

@@ -67,12 +67,5 @@ onUnmounted(() => {
   @media (min-width: 768px) {
     height: auto;
   }
-
-  @media (min-width: 640px) {
-    max-width: 640px;
-  }
-  @media (min-width: 768px) {
-    max-width: 768px;
-  }
 }
 </style>

src/components/VuePinpoint.vue

@@ -14,7 +14,7 @@ import Couplet from './Couplet.vue'
 import PreviousCouplets from './PreviousCouplets.vue'
 
 type Props = {
-  keyId: Number
+  leadId: Number
   projectToken: String
   baseUrl: string
 }
@@ -27,10 +27,13 @@ const error = ref(null)
 provide('store', store)
 
 watch(
-  () => props.keyId,
+  [() => props.leadId, () => props.projectToken, () => props.baseUrl],
   () => {
-    if (props.keyId) {
-      store.loadKey(props.keyId).catch((response) => {
+    store.reset()
+    store.setConfig(props)
+    if (props.leadId && props.baseUrl && props.projectToken && props.baseUrl) {
+      console.log(props.baseUrl)
+      store.loadKey(props.leadId).catch((response) => {
         console.log(response.message)
         error.value = response
       })

src/store/key.ts

@@ -1,4 +1,4 @@
-import { Lead, Entry, Node } from '../types'
+import { Lead, Entry, Node, APIConfig } from '../types'
 import { Metadata } from './../types/Metadata'
 import { reactive } from 'vue'
 import { TaxonWorks } from '@/services/TaxonWorks'
@@ -14,54 +14,70 @@ type Store = {
   metadata: Metadata | null
   entries: Entries
   leads: Leads
+  config: APIConfig
 }
 
-function makeEntries(entries: any) {
-  return Object.fromEntries(
-    Object.entries(entries).map(([key, value]) => [key, makeEntry(value)])
-  )
+function initStore(config: APIConfig): Store {
+  return {
+    currentNode: null,
+    metadata: null,
+    entries: {},
+    leads: {},
+    nodes: {},
+    config
+  }
 }
 
-function makeLeads(leads: any) {
-  return Object.fromEntries(
-    Object.entries(leads).map(([key, value]) => [key, makeLead(value)])
-  )
-}
+export function useKeyStore(config) {
+  let service = new TaxonWorks(config)
+  const state: Store = reactive(initStore(config))
 
-function mergeEntriesAndLeads(entries: Entries, leads: Leads): Nodes {
-  const nodes: Nodes = {}
+  function makeEntries(entries: any) {
+    return Object.fromEntries(
+      Object.entries(entries).map(([key, value]) => [key, makeEntry(value)])
+    )
+  }
 
-  for (const [id, lead] of Object.entries(leads)) {
-    const entry = entries[id]
+  function setConfig(config: APIConfig) {
+    state.config = config
+    service = new TaxonWorks(config)
+  }
 
-    nodes[id] = {
-      id: parseInt(id, 10),
-      ...lead,
-      ...entry
-    }
+  function reset() {
+    Object.assign(state, initStore(config))
+  }
 
-    if (!entry) {
-      Object.assign(nodes[id], { children: [] })
-    }
+  function makeLeads(leads: any) {
+    return Object.fromEntries(
+      Object.entries(leads).map(([key, value]) => [
+        key,
+        makeLead(value, state.config)
+      ])
+    )
   }
 
-  return nodes
-}
+  function mergeEntriesAndLeads(entries: Entries, leads: Leads): Nodes {
+    const nodes: Nodes = {}
 
-export function useKeyStore(config) {
-  const service = new TaxonWorks(config)
-  const state: Store = reactive({
-    currentNode: null,
-    metadata: null,
-    entries: {},
-    leads: {},
-    nodes: {},
-    config
-  })
+    for (const [id, lead] of Object.entries(leads)) {
+      const entry = entries[id]
+
+      nodes[id] = {
+        id: parseInt(id, 10),
+        ...lead,
+        ...entry
+      }
+
+      if (!entry) {
+        Object.assign(nodes[id], { children: [] })
+      }
+    }
+
+    return nodes
+  }
 
   const loadKey = (id: Number) => {
     return service.getDichotomousKey(id).then(({ data, metadata }) => {
-      console.log(data)
       state.entries = makeEntries(data.entries)
       state.leads = makeLeads(data.leads)
       state.nodes = mergeEntriesAndLeads(state.entries, state.leads)
@@ -77,6 +93,8 @@ export function useKeyStore(config) {
   return {
     state,
     loadKey,
-    setCurrentNode
+    setCurrentNode,
+    setConfig,
+    reset
   }
 }

src/types/Figure.ts

@@ -3,4 +3,5 @@ export type Figure = {
   label: string | null
   position: number
   image: string
+  original: string
 }

src/types/apiConfig.ts

@@ -0,0 +1,4 @@
+export type APIConfig = {
+  baseUrl: string
+  projectToken: string
+}

src/types/index.ts

@@ -3,3 +3,4 @@ export * from './Figure'
 export * from './Lead'
 export * from './Metadata'
 export * from './Node'
+export * from './apiConfig'

src/utils/makeRequest.ts

@@ -34,7 +34,9 @@ export async function makeRequest(
     const response = await fetch(makeUrlParameters(url, parameters), options)
 
     if (!response.ok) {
-      throw new Error(`Error response: ${response.statusText}`)
+      throw new Error(
+        `Error response: ${response.status} ${response.statusText}`
+      )
     }
 
     const datosRespuesta = await response.json()