Merge branch 'main' into edmond/streamline-terminology

.github/workflows/main_push.yaml

@@ -9,12 +9,15 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  IMAGE_NAME: ghcr.io/rdflib/prez-ui
+
 # Grants permissions for GITHUB_TOKEN
 permissions:
   contents: read
-  pages: write      # to deploy to Pages
-  id-token: write   # to verify the deployment originates from an appropriate source
-  packages: write   # to push to GHCR package
+  pages: write # to deploy to Pages
+  id-token: write # to verify the deployment originates from an appropriate source
+  packages: write # to push to GHCR package
 
 jobs:
   # Build & upload artifact for pages
@@ -45,7 +48,7 @@ jobs:
         uses: actions/upload-pages-artifact@v1
         with:
           # Upload build directory
-          path: 'dist'
+          path: "dist"
 
   # Deploy to github pages
   deploy_pages:
@@ -63,24 +66,82 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
-  
+
   # build & push Docker image
   docker:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
+
+      - name: Get latest tag
+        id: latest-tag
+        uses: WyriHaximus/github-action-get-previous-tag@v1
+        with:
+          fallback: "0.1.0"
+
+      - name: Tag starts with v
+        id: tag-starts-with-v
+        if: ${{ startsWith(steps.latest-tag.outputs.tag, 'v') }}
+        uses: mad9000/actions-find-and-replace-string@4
+        with:
+          source: ${{ steps.latest-tag.outputs.tag }}
+          find: "v"
+          replace: ""
+
+      - name: Tag value
+        id: tag-value
+        uses: haya14busa/action-cond@v1
+        with:
+          cond: ${{ startsWith(steps.latest-tag.outputs.tag, 'v') }}
+          if_true: ${{ steps.tag-starts-with-v.outputs.value }}
+          if_false: ${{ steps.latest-tag.outputs.tag }}
+
+      - name: Get next semver patch version
+        id: patch
+        uses: "WyriHaximus/github-action-next-semvers@v1"
+        with:
+          version: ${{ steps.tag-value.outputs.value }}
+
+      - name: Get git commits since last tag
+        id: commitscount
+        run: echo "value=$(git rev-list `git rev-list --tags --no-walk --max-count=1`..HEAD --count)" >> $GITHUB_OUTPUT
+
+      - name: Get git commit hash
+        id: commit-hash
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: type=sha
+
+      - name: Rename git commit hash
+        id: hash
+        uses: mad9000/actions-find-and-replace-string@4
+        with:
+          source: ${{ steps.commit-hash.outputs.version }}
+          find: "sha-"
+          replace: dev.${{ steps.commitscount.outputs.value }}.
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up and use Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push
-        uses: docker/build-push-action@v3
-        env:
-          IMAGE_NAME: ghcr.io/rdflib/prez-ui
+        uses: docker/build-push-action@v4
         with:
           push: true
-          tags: ${{ env.IMAGE_NAME }}:unstable
-
+          tags: |
+            ${{ env.IMAGE_NAME }}:${{ steps.patch.outputs.patch }}-${{ steps.hash.outputs.value }}
+            ${{ env.IMAGE_NAME }}:dev
+          # Set provenance to false due to issue documented here: https://github.com/docker/build-push-action/issues/778
+          provenance: false
+          platforms: linux/amd64,linux/arm64

.github/workflows/release.yaml

@@ -9,11 +9,14 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
+env:
+  IMAGE_NAME: ghcr.io/rdflib/prez-ui
+
 # Grants permissions for GITHUB_TOKEN
 permissions:
   contents: read
-  id-token: write   # to verify the deployment originates from an appropriate source
-  packages: write   # to push to GHCR package
+  id-token: write # to verify the deployment originates from an appropriate source
+  packages: write # to push to GHCR package
 
 jobs:
   # build & push Docker image
@@ -22,23 +25,35 @@ jobs:
     steps:
       - name: Checkout repo
         uses: actions/checkout@v3
-      - name: Get release version tag
-        run: |
-          echo ::set-output name=version::$(echo "${{ github.ref_name }}" | sed "s/^v//g" )
-          echo ::set-output name=version_minor::$(echo "${{ github.ref_name }}" | sed -e "s/^v//g" -e "s/\.[0-9]\+$//g" )
-          echo ::set-output name=version_major::$(echo "${{ github.ref_name }}" | sed -e "s/^v//g" -e "s/\.[0-9]\+$//g" -e "s/\.[0-9]\+$//g" )
-        id: get_version
+
+      - name: Docker metadata
+        id: metadata
+        uses: docker/metadata-action@v3
+        with:
+          images: ${{ env.IMAGE_NAME }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v2
+
+      - name: Set up and use Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
       - name: Login to GitHub Container Registry
         uses: docker/login-action@v2
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
+
       - name: Build and push
-        uses: docker/build-push-action@v3
-        env:
-          IMAGE_NAME: ghcr.io/rdflib/prez-ui
+        uses: docker/build-push-action@v4
         with:
           push: true
-          tags: ${{ env.IMAGE_NAME }}:${{ steps.get_version.outputs.version }},${{ env.IMAGE_NAME }}:${{ steps.get_version.outputs.version_minor }},${{ env.IMAGE_NAME }}:${{ steps.get_version.outputs.version_major }},${{ env.IMAGE_NAME }}:latest
-
+          tags: ${{ steps.metadata.outputs.tags }}
+          # Set provenance to false due to issue documented here: https://github.com/docker/build-push-action/issues/778
+          provenance: false
+          platforms: linux/amd64,linux/arm64

README.md

@@ -1,18 +1,21 @@
 # Prez UI
+
 Prez UI is the front end of [Prez](https://github.com/RDFLib/prez) - a linked data API.
 
 Prez UI is a [Vue.js](https://vuejs.org/) single page application (SPA) that uses [N3.js](https://github.com/rdfjs/N3.js) to process RDF data from the Prez API.
 
 See the Prez UI demo website - https://rdflib.dev/prez-ui/
 
 ## Environment Variables
+
 Configuring an instance of Prez UI is done by supplying environment variables.
 
 [Vite](https://vitejs.dev) automatically imports environment variables from `.env*` files with a preference order (see [Vite Env Variables and Modes](https://vitejs.dev/guide/env-and-mode.html#env-files)), where `.env.[mode].local` will be preferenced over `.env.[mode]` files for example, where `[mode]` would be `development`, `production`, etc. For convenience for local development, it is recommended to create a `.env.development.local` file to set your local environment variables.
 
 See [`.env`](./.env) for the default values for the available environment variables. Note that environment variables must be prefixed with `VITE_`.
 
 ## Theming
+
 Prez UI instances can be themed by providing header & footer HTML files, as well as custom CSS styling. After building your instance of Prez UI (**before which your [environment variables](#environment-variables) must be set**):
 
 ```bash
@@ -32,22 +35,46 @@ These files should be left blank if not being used.
 The [`public/style.css`](public/style.css) CSS file contains CSS variables that can be overridden in your `theme.css` file for easy theming.
 
 ## Docker
+
+Prez container images are available [here](https://github.com/RDFLib/prez/pkgs/container/prez).
+
+#### Image variants
+
+The image name is `ghcr.io/rdflib/prez-ui`.
+
+The `latest` tag points to the latest stable release of Prez. All latest stable releases have a major, major and minor, and major, minor and patch tag pointing to it.
+
+For example, for a release with a git tag of 3.2.4, the following tags will be on the container image:
+
+- `3`
+- `3.2`
+- `3.2.4`
+- `latest`
+
+New commits to the `main` branch creates a rolling dev image with the `dev` tag. The dev builds will also include a tag in the form of major.minor.{patch+1}-dev.{commits-since-last-release}.{short-commit-sha}. This conforms to semantic versioning and will be recognised by orchestration systems to perform automatic releases.
+
+For example, if the latest release is 3.2.4 and there has been 7 new commits since the release and the short commit SHA is fc82562, then the container image tag will be:
+
+- `3.2.5-dev.7.fc82562`
+
 Prez UI can be deployed as a Docker container, which contains an NGINX server serving static files. To theme your Docker container, create a volume at `/app/theme` called `theme/` containing the theming files, e.g.:
 
 ```bash
 docker run -v <YOUR_THEME_FOLDER>:/app/theme rdflib/prez-ui
 ```
 
 ### SSL
+
 To enable SSL for a Docker container deployment, supply your own `nginx.conf` file containing the commented-out lines for SSL in the supplied [`nginx.conf`](./nginx.conf) file in a Docker volume (yet to be implemented).
 
 ## Development
+
 [Visual Studio Code](https://code.visualstudio.com/) is the recommended IDE for development on Prez UI because of its intellisense with TypeScript. These extensions are highly recomended:
 
 - [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
 - [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin)
-    - Make sure to enable [takeover mode](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode)
+  - Make sure to enable [takeover mode](https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode)
 
 Nice-to-haves:
 
-- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)
+- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets)

changelog.md

@@ -1,3 +1,19 @@
+## Change for 2023-05-03
+Add map client to search and item pages
+- SearchView updates to add map for any results with spatial data
+- PropTableView includes a map for any pages with spatial data
+- Temp fix for loading icon issue
+- Minor change to reduce white space for search forms
+
+## Change for 2023-04-27
+
+Updates to SpacePrez search
+- Area type defaults to Nearby for points and Contains for areas
+- Search button bug fixed
+- Search loading feedback
+- Updates to SPAQRL query to remove filters
+- Duplicate search request issue
+
 ## Changes for 2023-03-24
 
 Merge of map search changes for SpacePrez

src/components/ButtonGroup.vue

@@ -7,46 +7,72 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, type PropType, computed } from 'vue'
+import { ref, type PropType, computed, defineEmits, watch } from 'vue'
 
-  type Button = {
-    text: string
-    value: any
+type Button = {
+  text: string
+  value: any
+}
+
+const props = defineProps({
+  buttons: {
+    type: Array as PropType<Button[]>,
+    required: true
+  },
+  allowMultipleSelection: {
+    type: Boolean,
+    default: false
+  },
+  initialValue: {
+    type: String,
+    default: null
   }
+})
 
-  const props = defineProps({
-    buttons: {
-      type: Array as PropType<Button[]>,
-      required: true
-    },
-    allowMultipleSelection: {
-      type: Boolean,
-      default: false
-    }
-  })
-  const selectedButtons = ref<number[]>([])
-
-  function selectButton(index: number) {
-    if (props.allowMultipleSelection) {
-      const isSelected = selectedButtons.value.includes(index)
-
-      if (isSelected) {
-        selectedButtons.value = selectedButtons.value.filter(i => i !== index)
-      } else {
-        selectedButtons.value.push(index)
-      }
+const selectedButtons = ref<number[]>([])
+
+function selectButton(index: number) {
+  if (props.allowMultipleSelection) {
+    const isSelected = selectedButtons.value.includes(index)
+
+    if (isSelected) {
+      selectedButtons.value = selectedButtons.value.filter(i => i !== index)
     } else {
-      selectedButtons.value = [index]
+      selectedButtons.value.push(index)
     }
-    emit('change', selectedValues.value)
+  } else {
+    selectedButtons.value = [index]
   }
 
-  const selectedValues = computed(() => {
-    return selectedButtons.value.map(index => props.buttons[index].value)
-  })
+  emit('change', selectedValues.value)
+}
+
+const selectedValues = computed(() => {
+  return selectedButtons.value.map(index => props.buttons[index].value)
+})
 
-  const emit = defineEmits(['change'])
+const emit = defineEmits(['change'])
 
+if (props.initialValue) {
+  const initialValueIndex = props.buttons.findIndex(button => button.value === props.initialValue)
+  if (initialValueIndex >= 0) {
+    selectedButtons.value.push(initialValueIndex)
+  }
+}
+
+watch(() => props.initialValue, (newValue, oldValue) => {
+  if(newValue == '') {
+    return
+  }
+  const selectedIndex = props.buttons.findIndex(button => button.value == newValue)
+  const selectedValue = (selectedIndex >= 0 ? props.buttons[selectedIndex] : '')
+  if (newValue !== oldValue || newValue != selectedValue) {
+    const newSelectedIndex = props.buttons.findIndex(button => button.value === newValue)
+    if (newSelectedIndex >= 0) {
+      selectedButtons.value = [newSelectedIndex]
+    }
+  }
+})
 </script>
 
 <style scoped>
@@ -56,4 +82,4 @@
   justify-content: flex-start; /* center the buttons horizontally */
   gap: 10px; /* set the spacing between the buttons */
 }
-</style>
+</style>

src/components/FlavourHome.vue

@@ -63,7 +63,8 @@ onMounted(() => {
     display: flex;
     flex-direction: row;
     gap: 16px;
-    margin: 20px auto;
+    margin: 20px 0;
+    max-width: 768px;
     flex-wrap: wrap;
     // justify-content: center;