From 7fe07c25a2cde7408ef55596af3f471348beb2e4 Mon Sep 17 00:00:00 2001
From: Maaike <mlimper@wmo.int>
Date: Thu, 22 Aug 2024 17:01:33 +0200
Subject: [PATCH] Fix/data centric monitoring (#57)

* fix: replace topic hierarchy with dataset identifier to align monitoring page with data-centric approach

* feat: only show inspect button for BUFR files

* fix: replace topic selectors with dataset ID selectors + return object 'metadata' containing both dataset ID and topic + style: improve look of station editor and other pages

* fix: query API by metadata ID rather than data ID in monitoring page

* build: lock Vuetify version to 3.7.0 to prevent breaking changes
---
 Dockerfile                                    |   2 +-
 package-lock.json                             |   8 +-
 package.json                                  |   4 +-
 src/components/CodeListSelector.vue           |   8 +-
 src/components/CsvToBUFRForm.vue              | 116 +++--
 src/components/DatasetEditorForm.vue          |   7 +-
 src/components/DatasetIdentifierSelector.vue  | 150 +++++++
 src/components/DownloadButton.vue             |   2 -
 src/components/ImportOSCAR.vue                | 397 -----------------
 src/components/StationEditor.vue              | 342 ---------------
 src/components/SynopForm.vue                  |  28 +-
 src/components/TopicHierarchySelector.vue     | 125 ------
 src/components/{ => monitoring}/BarChart.vue  |   0
 .../{ => monitoring}/MonitoringPage.vue       |  41 +-
 .../NotificationDashboard.vue                 |  71 +--
 .../{ => monitoring}/PublishedData.vue        |  72 ++--
 .../{ => monitoring}/StationMap.vue           |   0
 .../{ => monitoring}/StationStats.vue         |   0
 .../{ => monitoring}/SummaryStats.vue         |   0
 src/components/stations/ImportOSCAR.vue       | 407 ++++++++++++++++++
 src/components/stations/StationEditor.vue     | 330 ++++++++++++++
 .../{ => stations}/StationTable.vue           |   5 +-
 src/components/stations/TopicSelector.vue     | 138 ++++++
 src/views/ImportOSCAR.vue                     |   2 +-
 src/views/MonitoringPage.vue                  |   2 +-
 src/views/StationEditor.vue                   |   2 +-
 src/views/StationTable.vue                    |   2 +-
 27 files changed, 1214 insertions(+), 1047 deletions(-)
 create mode 100644 src/components/DatasetIdentifierSelector.vue
 delete mode 100644 src/components/ImportOSCAR.vue
 delete mode 100644 src/components/StationEditor.vue
 delete mode 100644 src/components/TopicHierarchySelector.vue
 rename src/components/{ => monitoring}/BarChart.vue (100%)
 rename src/components/{ => monitoring}/MonitoringPage.vue (81%)
 rename src/components/{ => monitoring}/NotificationDashboard.vue (84%)
 rename src/components/{ => monitoring}/PublishedData.vue (64%)
 rename src/components/{ => monitoring}/StationMap.vue (100%)
 rename src/components/{ => monitoring}/StationStats.vue (100%)
 rename src/components/{ => monitoring}/SummaryStats.vue (100%)
 create mode 100644 src/components/stations/ImportOSCAR.vue
 create mode 100644 src/components/stations/StationEditor.vue
 rename src/components/{ => stations}/StationTable.vue (96%)
 create mode 100644 src/components/stations/TopicSelector.vue

diff --git a/Dockerfile b/Dockerfile
index d43c7dc..f940aa0 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,7 +4,7 @@ FROM node:lts-alpine
 WORKDIR /wis2box-webapp
 
 # copy both 'package.json' and 'package-lock.json' (if available)
-COPY package*.json .
+COPY package*.json ./
 
 # install project dependencies
 RUN npm install
diff --git a/package-lock.json b/package-lock.json
index 3c1f97d..8a6a727 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,7 @@
         "vue-router": "^4.0.0",
         "vue-tel-input": "^8.3.1",
         "vue3-apexcharts": "^1.4.4",
-        "vuetify": "^3.4.0",
+        "vuetify": "3.7.0",
         "webfontloader": "^1.0.0"
       },
       "devDependencies": {
@@ -3203,9 +3203,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.6.10",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.6.10.tgz",
-      "integrity": "sha512-Myd9+EFq4Gmu61yKPNVS0QdGQkcZ9cHom27wuvRw7jgDxM+X4MT9BwQRk/Dt1q3G3JlK8oh+ZYyq5Ps/Z73cMg==",
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.7.0.tgz",
+      "integrity": "sha512-x+UaU4SPYNcJSE/voCTBFrNn0q9Spzx2EMfDdUj0NYgHGKb59OqnZte+AjaJaoOXy1AHYIGEpm5Ryk2BEfgWuw==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },
diff --git a/package.json b/package.json
index 05060c0..b1e17d9 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "vue-router": "^4.0.0",
     "vue-tel-input": "^8.3.1",
     "vue3-apexcharts": "^1.4.4",
-    "vuetify": "^3.4.0",
+    "vuetify": "3.7.0",
     "webfontloader": "^1.0.0"
   },
   "devDependencies": {
@@ -43,6 +43,6 @@
     "vite-plugin-vuetify": "^1.0.0"
   },
   "overrides": {
-    "esbuild": "^0.21.0"
+    "esbuild": "^0.21.5"
   }
 }
diff --git a/src/components/CodeListSelector.vue b/src/components/CodeListSelector.vue
index 9b2470e..c039e59 100644
--- a/src/components/CodeListSelector.vue
+++ b/src/components/CodeListSelector.vue
@@ -21,6 +21,8 @@
       clearable
       persistent-hint
       return-object
+      variant="outlined"
+      class="my-5"
       />
     </div>
     <div v-else class="error">
@@ -29,14 +31,14 @@
 </template>
 
 <script>
-  import { defineComponent, ref, onBeforeMount, watch, onMounted} from 'vue';
-  import { VCard, VCardItem, VAutocomplete} from 'vuetify/lib/components/index.mjs';
+  import { defineComponent, ref, onBeforeMount, watch } from 'vue';
+  import { VCard, VAutocomplete} from 'vuetify/lib/components/index.mjs';
 
 
   export default defineComponent({
     name: 'CodeListSelector',
     components: {
-      VCard, VCardItem, VAutocomplete
+      VCard, VAutocomplete
     },
     props: {
       codeList: {type: String},
diff --git a/src/components/CsvToBUFRForm.vue b/src/components/CsvToBUFRForm.vue
index bdeb950..41fdbb8 100644
--- a/src/components/CsvToBUFRForm.vue
+++ b/src/components/CsvToBUFRForm.vue
@@ -23,8 +23,8 @@
                         value="2" :color="step2Color">
                     </v-stepper-item>
                     <v-stepper-item
-                        :complete="status.topicHierarchy"
-                        title="Select topic hierarchy"
+                        :complete="status.datasetIdentifier"
+                        title="Select dataset"
                         value="3" :color="step3Color">
                     </v-stepper-item>
                     <v-stepper-item
@@ -76,7 +76,7 @@
                             </v-card-item>
                             <v-card-item>
                                 <v-list v-if="validationWarnings.length > 0">
-                                    <v-list-item v-for="message in validationWarnings" base-color="warning">
+                                    <v-list-item v-for="message in validationWarnings" :key="message" base-color="warning">
                                         <template v-slot:prepend>
                                             <v-icon icon="mdi-alert-circle"></v-icon>
                                         </template>
@@ -84,7 +84,7 @@
                                     </v-list-item>
                                 </v-list>
                                 <v-list v-if="validationErrors.length > 0">
-                                    <v-list-item v-for="message in validationErrors" base-color="error">
+                                    <v-list-item v-for="message in validationErrors" :key="message" base-color="error">
                                         <template v-slot:prepend>
                                             <v-icon icon="mdi-alert-circle"></v-icon>
                                         </template>
@@ -96,10 +96,10 @@
                     </v-stepper-window-item>
                     <v-stepper-window-item value="3">
                         <v-card>
-                            <v-card-title>Select topic hierarchy</v-card-title>
-                            <v-card-item>
-                              <TopicHierarchySelector :value="topicSelected" @update:modelValue="newValue => topicSelected = newValue"/>
-                            </v-card-item>
+                            <v-card-title>Select dataset identifier</v-card-title>
+                            <v-col cols="12">
+                                <DatasetIdentifierSelector :value="datasetSelected" @update:modelValue="newValue => datasetSelected = newValue"/>
+                            </v-col>
                         </v-card>
                     </v-stepper-window-item>
                     <v-stepper-window-item value="4">
@@ -107,7 +107,7 @@
                             <v-card-title>Authorize and publish</v-card-title>
                             <v-card-text>
                               <v-text-field label="wis2box auth token for 'processes/wis2box'" v-model="token" rows="1"
-                              :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'"
+                              :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'" autocomplete="one-time-code"
                               @click:append="showToken = !showToken"
                               :rules="[v => !!v || 'Token is required']"
                               variant="outlined">
@@ -253,7 +253,7 @@
     import { VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem, VStepperActions} from 'vuetify/lib/components/index.mjs';
     import InspectBufrButton from '@/components/InspectBufrButton.vue';
     import DownloadButton from '@/components/DownloadButton.vue';
-    import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
+    import DatasetIdentifierSelector from '@/components/DatasetIdentifierSelector.vue';
     import * as d3 from 'd3';
     export default defineComponent({
         name: 'CsvToBUFRForm',
@@ -262,7 +262,7 @@
             VChip, VTooltip, VListItem, VList, VContainer,
             VCardTitle, VIcon, VStepper, VStepperHeader, VStepperItem, VStepperWindow, VStepperWindowItem,
             VStepperActions, VDialog, InspectBufrButton, DownloadButton,
-            TopicHierarchySelector
+            DatasetIdentifierSelector
         },
         setup() {
             // reactive variables
@@ -273,21 +273,20 @@
             const step=ref(0);
             const validationWarnings = ref([]);
             const validationErrors = ref([]);
-            const status = ref(null);
+            const status = ref({
+                fileLoaded: false,
+                fileValidated: false,
+                datasetIdentifier: false,
+                password: false
+            });
             // Variable to control whether token is seen or not
             const showToken = ref(false);
             const token = ref(null);
-            const topicSelected = ref(null);
+            const datasetSelected = ref(null);
             const rawCSV = ref(null);
             const msg = ref(null);
             const showDialog = ref(null);
             const scrollRef = ref(null);
-            status.value = {
-                fileLoaded: false,
-                fileValidated: false,
-                topicHierarchy: false,
-                password: false
-            }
             const result = ref(null);
             const notificationsOnPending = ref(false);
 
@@ -309,7 +308,7 @@
                 return "#003DA5"
             })
             const step3Color = computed(() => {
-                if (status.value.topicHierarchy) {
+                if (status.value.datasetIdentifier) {
                     return "#64BF40"
                 }
                 return "#003DA5"
@@ -321,7 +320,7 @@
                 return "#003DA5"
             })
             const step5Complete = computed(() => {
-                return status.value.fileLoaded && status.value.fileValidated && status.value.topicHierarchy && status.value.password && status.value.submitted;
+                return status.value.fileLoaded && status.value.fileValidated && status.value.datasetIdentifier && status.value.password && status.value.submitted;
             })
             const step5Color = computed(() => {
                 if (step5Complete.value) {
@@ -337,11 +336,11 @@
                 return "Unknown";
             });
             const numberNotifications = computed( () => {
-                var messagesPublished = 0;
+                let messagesPublished = 0;
                 if( result.value ){
                   messagesPublished = result.value['messages published'];
                 }
-                return "WIS2 notifications published: " + messagesPublished;;
+                return "WIS2 notifications published: " + messagesPublished;
             });
             // life cycle hooks
             onMounted( () => {
@@ -359,8 +358,8 @@
                     // load schema
                     await fetch("./csv2bufr/csvw_schema.json").then( (response) => response.json() ).then( (theData) => {schema.value = theData.tableSchema.columns});
                     // now load the data file
-                    var reader = new FileReader();
-                    reader.readAsText(incomingFile.value[0]);
+                    let reader = new FileReader();
+                    reader.readAsText(incomingFile.value);
                     reader.onload = async () => {
                         validationErrors.value = [];
                         validationWarnings.value = [];
@@ -376,9 +375,9 @@
                             divider: true
                         }));
                         // check the headers against the schema
-                        for(var column in headers.value ){
-                            var key = headers.value[column].key
-                            var schemaColumn = schema.value.find( col => col.titles === key )
+                        for(let column in headers.value ){
+                            let key = headers.value[column].key
+                            let schemaColumn = schema.value.find( col => col.titles === key )
                             if( ! schemaColumn ){
                                 validationWarnings.value.push("Column '" + key +
                                     "' not found in schema, data will be skipped")
@@ -390,29 +389,29 @@
                                 schemaColumn.present = true;
                             }
                         }
-                        for(var col in schema.value){
+                        for(let col in schema.value){
                             if(!schema.value[col].present){
-                                key = schema.value[col].titles;
+                                let key = schema.value[col].titles;
                                 validationWarnings.value.push("Column '" + key +
                                     "' missing from data file, data will be set to missing in BUFR encoding");
                             }
                         }
                         // now validate the data
-                        var count = 0;
+                        let count = 0;
                         for(const record of theData.value){
                             count++;
                             for( const key in record){
-                                var header = headers.value.find(header => header.key === key );
-                                var value = record[key];
+                                let header = headers.value.find(header => header.key === key );
+                                let value = record[key];
                                 record[key] = {
                                     value: value,
                                     status: "",
                                     msg: ""
                                 }
-                                var valid_min = false;
-                                var valid_max = false;
-                                var msg = "";
-                                var status = "success";
+                                let valid_min = false;
+                                let valid_max = false;
+                                let msg = "";
+                                let status = "success";
                                 if( header.inSchema ){
                                     if( header.dataType.minimum ){
                                         valid_min = header.dataType.minimum
@@ -433,7 +432,6 @@
                                         status = 'error';
                                         validationErrors.value.push(msg);
                                     }
-                                    // console.log(status + ": " + msg);
                                 }else{
                                     status = "warning";
                                     msg = "Field not in schema";
@@ -446,11 +444,11 @@
                                 record[key].status = status;
                                 record[key].msg = msg;
                             }
-                        };
+                        }
                         // get limits and kind from schema
                     };
                     step.value = 1;
-                };
+                }
             };
             const submit = async() => {
                 CsvToBUFR();
@@ -460,7 +458,8 @@
               const payload = {
                   inputs: {
                       data: rawCSV.value,
-                      channel: topicSelected.value.id,
+                      channel: datasetSelected.value.metadata.topic,
+                      metadata_id: datasetSelected.value.metadata.id,
                       notify: notificationsOnPending.value,
                       template: "aws-template"
                   }
@@ -501,7 +500,7 @@
                 const data = await response.json();
                 result.value = data;
                 result.value.files = [];
-                for( var item in result.value.data_items){
+                for( let item in result.value.data_items){
                   result.value.files.push( result.value.data_items[item].file_url);
                 }
               }
@@ -510,7 +509,7 @@
                 step.value = step.value === 0 ? 0 : step.value - 1;
             };
             const next = () => {
-                var proceed = false;
+                let proceed = false;
                 switch (step.value){
                   case 0:
                     if( status.value.fileLoaded){
@@ -532,12 +531,11 @@
                     }
                     break;
                   case 2:
-                    if( status.value.topicHierarchy ){
+                    if( status.value.datasetIdentifier ){
                       proceed = true;
                     }else{
                       showDialog.value = true;
-                      console.log(topicSelected.value)
-                      msg.value = "Please select a topic to publish on before proceeding";
+                      msg.value = "Please select a dataset to publish on before proceeding";
                     }
                     break;
                   case 3:
@@ -555,22 +553,15 @@
                 }
             };
 
-            // Define watches
-            watch( topicSelected, (val) => {
-              console.log(val);
-              if( val ){
-                status.value.topicHierarchy = true;
-              }else{
-                status.value.topicHierarchy = false;
-              }
+            // Watchers
+            watch( datasetSelected, (val) => {
+              status.value.datasetIdentifier = !!val;
             });
+  
             watch( incomingFile, (val) => {
-              if( val && val.length > 0){
-                status.value.fileLoaded = true;
-              }else{
-                status.value.fileLoaded = false;
-              }
-            } );
+              status.value.fileLoaded = !!val;
+            });
+  
             watch( validationErrors, (val) => {
               if( val && val.length > 0 ){
                 status.value.fileValidated = false;
@@ -578,7 +569,8 @@
                 status.value.fileValidated = true;
               }
             });
-            watch( token, (val) => {
+
+            watch( token, () => {
               if( token.value && token.value.length > 0 ){
                 status.value.password = true;
               }else{
@@ -588,7 +580,7 @@
 
             return {theData, headers, incomingFile, loadCSV, step, prev, next, scrollToRef,
                     validationWarnings, validationErrors, status, showToken, token, notificationsOnPending, step1Color, step2Color, step3Color, step4Color, step5Complete, step5Color,
-                    topicSelected, submit, msg, showDialog, result, resultTitle, numberNotifications};
+                    datasetSelected, submit, msg, showDialog, result, resultTitle, numberNotifications};
         },
     })
 </script>
diff --git a/src/components/DatasetEditorForm.vue b/src/components/DatasetEditorForm.vue
index a045351..f21ed40 100644
--- a/src/components/DatasetEditorForm.vue
+++ b/src/components/DatasetEditorForm.vue
@@ -82,7 +82,7 @@
                     </v-card-text>
                     <v-container>
                         <v-text-field label="wis2box auth token for 'processes/wis2box'" v-model="token" rows="1"
-                            :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'"
+                            :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'" autocomplete="one-time-code"
                             @click:append="showToken = !showToken" :rules="[rules.token]" variant="outlined">
                         </v-text-field>
                     </v-container>
@@ -390,7 +390,7 @@
                 </v-card-title>
                 <v-card-text>
                     <v-text-field label="wis2box auth token for 'processes/wis2box'" v-model="token" rows="1"
-                        :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'"
+                        :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'" :type="showToken ? 'text' : 'password'" autocomplete="one-time-code"
                         @click:append="showToken = !showToken" :rules="[rules.token]" variant="outlined">
                     </v-text-field>
                 </v-card-text>
@@ -855,7 +855,7 @@ export default defineComponent({
         const message = ref("Select existing discovery metadata file or create a new file.");
         const submissionIssues = ref([]);
         // List of datasets to select from, if any
-        const items = ref([]);
+        const items = ref(['Loading...']);
         // Dialog for initial information when creating
         // a new dataset
         const showInitialDialog = ref(false);
@@ -1073,7 +1073,6 @@ export default defineComponent({
                 // Get CSV response and parse it into an object
                 const responseData = await response.text();
                 const parsed = Papa.parse(responseData, { header: true });
-                console.log(parsed.data)
                 // Filter out any empty data (the final row of the CSV)
                 const filteredData = parsed.data.filter(item => item.Name && item.Description);
                 // Map this data into the correct format for the v-select component
diff --git a/src/components/DatasetIdentifierSelector.vue b/src/components/DatasetIdentifierSelector.vue
new file mode 100644
index 0000000..20f000c
--- /dev/null
+++ b/src/components/DatasetIdentifierSelector.vue
@@ -0,0 +1,150 @@
+<template>
+  <div v-if="!errorMessage">
+    <v-select v-if="(options !== null)" :items="options" item-title="id" item-value="metadata" :label="label"
+      v-model="selected" :readonly="readonly" :rules="rules"
+      :hint="selected ? selected.description : 'Select dataset identifier'" persistent-hint :multiple="multiple"
+      return-object variant="outlined" />
+  </div>
+  <div v-else class="error">
+    <v-text-field class="text-error" readonly>{{ errorMessage }}</v-text-field>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, computed, onBeforeMount, watch } from 'vue';
+import { VSelect, VTextField } from 'vuetify/lib/components/index.mjs';
+
+
+export default defineComponent({
+  name: 'DatasetIdentifierSelector',
+  components: {
+    VSelect, VTextField
+  },
+  props: {
+    modelValue: {},
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    rules: {
+      type: Array
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    // Static variables
+    const testMode = import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined;
+
+    // Reactive variables
+    const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
+    const options = ref(null);
+    const selected = ref([]);
+    const errorMessage = ref(null);
+
+    // Computed
+    const label = computed(() => {
+      let label = "Dataset Identifier";
+      if (props.multiple) {
+        label += "s";
+      }
+      return label;
+    });
+
+    const fetchOptions = async () => {
+      // Get dataset IDs
+      if (testMode) {
+        // If test mode enabled, show test IDs
+        console.log("TEST_MODE is enabled");
+        options.value = [
+          {
+            id: "urn:wmo:md:test1-centre:core.test1.test1.test1",
+            metadata: {
+              'id': "urn:wmo:md:test1-centre:core.test1.test1.test1",
+              'topic': "origin/a/wis2/test1-centre/core/test1"
+            },
+            description: "Test 1 description"
+          },
+          {
+            id: "urn:wmo:md:test2-centre:core.test2.test2.test2",
+            metadata: {
+              'id': "urn:wmo:md:test2-centre:core.test2.test2.test2",
+              'topic': "origin/a/wis2/test2-centre/core/test2"
+            },
+            description: "Test 2 description"
+          },
+        ]
+
+      }
+      else {
+        try {
+          const response = await fetch(apiUrl);
+          if (!response.ok) {
+            throw new Error(`HTTP error! Status: ${response.status}`);
+          }
+          else {
+            const data = await response.json();
+            if (data.features) {
+              // Use Array.map to create a new array of the dataset IDs
+              options.value = data.features.map(feature => {
+                if (feature.properties?.identifier) {
+                  return {
+                    id: feature.properties.identifier,
+                    metadata: {
+                      "id": feature.properties.identifier,
+                      "topic": feature.properties['wmo:topicHierarchy']
+                    },
+                    description: feature.properties['description']
+                  }
+                }
+              }
+              );
+            }
+            else {
+              console.error("API response is not an object");
+            }
+          }
+        }
+        catch (error) {
+          errorMessage.value = "Error fetching dataset identifiers, please check the API end point." +
+            " See logs for more information.";
+          console.error("Error fetching dataset identifiers:", error)
+        }
+      }
+    };
+
+
+    onBeforeMount(async () => {
+      let m = false;
+      await fetchOptions();
+      if (props.modelValue && props.modelValue.length) {
+        for (const topic of props.modelValue.metadata.topic) {
+          const option = options.value.find(option => option.value.metadata.topic === topic);
+          if (option) {
+            m = true;
+            selected.value.push(option);
+          }
+        }
+      }
+      if (m) {
+        emit("update:modelValue", selected.value);
+      }
+    });
+
+    watch(() => props.modelValue, (newValue) => {
+      selected.value = newValue;
+    });
+
+    watch(() => selected.value, (newValue) => {
+      if (selected.value) {
+        emit("update:modelValue", newValue);
+      }
+    });
+
+    return { label, selected, options, errorMessage };
+  }
+});
+</script>
diff --git a/src/components/DownloadButton.vue b/src/components/DownloadButton.vue
index 589b96b..d65cdad 100644
--- a/src/components/DownloadButton.vue
+++ b/src/components/DownloadButton.vue
@@ -38,7 +38,6 @@ export default defineComponent({
             // Create a temporary anchor element to initiate the download
             const link = document.createElement('a');
             if( props.fileUrl != '' ) {
-                //console.log("Downloading file from URL: " + props.fileUrl)
                 link.href = props.fileUrl;
                 link.target = '_blank';
                 // Programmatically trigger the click event on the link to start the download
@@ -47,7 +46,6 @@ export default defineComponent({
                 URL.revokeObjectURL(link.href);
             }
             else if( props.data != '' ) {
-                //console.log("Downloading file from data: " + props.data)
                 // Decode the base64 encoded data
                 const decodedData = atob(props.data);
                 // Convert the decoded data to a Uint8Array
diff --git a/src/components/ImportOSCAR.vue b/src/components/ImportOSCAR.vue
deleted file mode 100644
index cec472f..0000000
--- a/src/components/ImportOSCAR.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<template>
-  <v-sheet align="center">
-    <APIStatus/>
-    <v-dialog v-model="showDialog" width="auto">
-      <v-card>
-        <v-card-text>{{errorMessage}}</v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    <v-dialog v-model="showLoading" width="auto">
-      <v-card>
-        <v-card-text>Searching for station record on OSCAR/Surface</v-card-text>
-        <v-progress-linear indeterminate rounded height="12" color="#004f9f">
-        </v-progress-linear>
-      </v-card>
-    </v-dialog>
-    <v-dialog v-model="showRedirect" width="auto">
-      <v-card align="center">
-        <v-card-text>{{redirectMessage}}</v-card-text>
-        <v-card-text color-text="warning">{{redirectWarning}}</v-card-text>
-        <v-card-actions align="center">
-          <v-btn color="primary" @click='router.push("/station")' elevation=2>Cancel</v-btn>
-          <v-btn color="warning" @click='router.push("/station/")'  elevation=2>Create new station</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    <v-card max-width="1200px">
-      <v-card-title class="big-title">Import station from OSCAR/Surface</v-card-title>
-      <v-card-item>
-        <v-form>
-          <v-text-field :rules="[rules.validWSI]" v-model="wsi" label="WIGOS Station Identifier" hint="Enter WIGOS Station Identifier" persistent-hint/>
-          <v-card-actions align="center">
-            <v-btn @click="submit">Search</v-btn>
-          </v-card-actions>
-        </v-form>
-      </v-card-item>
-    </v-card>
-    <v-card v-if="station && station._meta.ready" max-width="1200px">
-      <v-form v-model="formValid" align="left">
-        <v-card-item>
-          <v-text-field
-            label="Station name"
-            v-model="station.properties.name"
-            readonly
-            :rules="[rules.validName]"
-            hint="Enter name of station" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="WIGOS station identifier"
-            v-model="station.properties.wigos_station_identifier"
-            readonly
-            :rules="[rules.validWSI]"
-            hint="Enter the WIGOS station identifier" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="Traditional station identifier"
-            v-model="station.properties.traditional_station_identifier"
-            hint="Enter the traditional (5 or 7 digit) station identifier" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-container>
-            <v-row>
-              <v-col cols="4">
-                <v-row>
-                <v-text-field
-                  label="Longitude (decimal degrees E), -180 to 180"
-                  v-model="station.geometry.longitude"
-                  :rules="[rules.validLongitude]"
-                  type="number"
-                  hint="Enter the station longitude (degrees E)" persistent-hint/>
-                </v-row>
-                <v-row>
-                  <v-text-field
-                  label="Latitude (decimal degrees N), -90 to 90"
-                  v-model="station.geometry.latitude"
-                  :rules="[rules.validLatitude]"
-                  type="number"
-                  hint="Enter the station latitude (degrees N)" persistent-hint/>
-              </v-row>
-              <v-row>
-                <v-text-field
-                  label="Station elevation above sea level (metres)"
-                  v-model="station.geometry.elevation"
-                  :rules="[rules.validElevation]"
-                  type="number"
-                  hint="Station elevation above sea level (metres)" persistent-hint/>
-              </v-row>
-              </v-col>
-              <v-col cols="8">
-                <LocatorMap
-                    :longitude="parseFloat(station.geometry.longitude)"
-                    :latitude="parseFloat(station.geometry.latitude)"/>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-item>
-        <v-card-item><CodeListSelector codeList="facilityType" label="Facility type" defaultHint= "Select facility type" v-model="station.properties.facility_type"/></v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="Barometer height above sea level"
-            v-model="station.properties.barometer_height"
-            :rules="[rules.validBarometerHeight]"
-            hint="Enter barometer height (metres)" persistent-hint type="number">
-          </v-text-field>
-        </v-card-item>
-        <v-card-item><CodeListSelector codeList="WMORegion" label="WMO Region" defaultHint= "Select WMO region" v-model="station.properties.wmo_region"/></v-card-item>
-        <v-card-item><CodeListSelector codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/></v-card-item>
-        <v-card-item><CodeListSelector codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/></v-card-item>
-         <v-card-item>
-          <TopicHierarchySelector v-model="station.properties.topics" multiple :rules="[rules.topic]"/>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>
-        </v-card-item>
-        <v-card-actions>
-          <v-btn @click="confirm()" :disabled="!formValid" elevation=2>Save</v-btn>
-          <v-btn @click="router.push('/station')" elevation=2>Cancel</v-btn>
-        </v-card-actions>
-      </v-form>
-    </v-card>
-  </v-sheet>
-</template>
-<script>
-  import {defineComponent, ref, onBeforeMount, watch} from "vue";
-  import {VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, VProgressLinear} from 'vuetify/lib/components/index.mjs';
-  import {useRoute, useRouter} from 'vue-router';
-  import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
-  import LocatorMap from '@/components/LocatorMap.vue';
-  import CodeListSelector from '@/components/CodeListSelector.vue';
-  import APIStatus from '@/components/APIStatus.vue';
-
-    function stripHTMLTags(input){
-      if( typeof input !== 'string' ){
-        console.warning("Invalid input passed to stripHTMLTags, empty string returned")
-        return '';
-      }
-      const tag_regex = /<\/?[a-zA-Z]+\/?>/g;
-      const escapes = /[\x00-\x1F\x7F;\\]/g;
-      return input.replace(tag_regex,'').replace(escapes,'');
-    }
-
-  export default defineComponent({
-    name: "ImportOSCAR",
-    components: {
-      VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, LocatorMap,
-      CodeListSelector, VProgressLinear, APIStatus, TopicHierarchySelector
-    },
-    setup(){
-      const wsi = ref("");
-      // this needs to be moved to a class / pinia model.
-      const station = ref({
-              id: null,  // WSI
-              type: 'Feature',
-              geometry: {
-                type: 'Point',
-                coordinates: [null,null,null]
-              },
-              properties: {
-                name: null,
-                wigos_station_identifier: null,  // WSI
-                traditional_station_identifier: null,
-                facility_type: {},
-                territory_name: {},
-                barometer_height: null,
-                wmo_region: {},
-                url: null,
-                topics: [],
-                status: {},
-                id: null  // WSI
-              },
-              _meta: {
-                ready: false
-              }
-      });
-
-      const errorMessage = ref(null);
-      const showDialog = ref(false);
-      const showLoading = ref(false);
-      const redirectMessage = ref(null);
-      const redirectWarning = ref(null);
-      const showRedirect = ref(false);
-      const token = ref(null);
-      const rules = ref({
-        validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
-        validTSI: value => value && value.length > 0  ? true : 'TSI must be set',
-        validLongitude: value => ! (Math.abs(value) > 180 || isNaN(value)) ? true : 'Invalid longitude',
-        validLatitude: value => value && ! (Math.abs(value) > 90 || isNaN(value)) ? true : 'Invalid latitude',
-        validElevation: value => value && ! isNaN(value) ? true : 'Invalid elevation',
-        validBarometerHeight: value => value && ! isNaN(value) ? true : 'Invalid barometer height',
-        validName: value => value && value.length > 0 ? true : 'Name must be set',
-        token: value => value && value.length > 0 ? true : 'Please enter the authorization token',
-        topic: value => value.length > 0 ? true : 'Select at least one topic'
-      });
-      const data = ref(null);
-      const router = useRouter();
-      const formValid = ref(null);
-      const territoryOptions = ref(null);
-      const WMORegionOptions = ref(null);
-      const facilityTypeOptions = ref(null);
-      const operatingStatusOptions = ref(null);
-
-      onBeforeMount( async() => {
-          territoryOptions.value = await loadCodeList('territory');
-          facilityTypeOptions.value = await loadCodeList('facilityType');
-          operatingStatusOptions.value = await loadCodeList('operatingStatus');
-          WMORegionOptions.value = await loadCodeList('WMORegion');
-      });
-
-      const loadCodeList = async (codeList) => {
-        try{
-          const clist = await fetch(`${import.meta.env.VITE_BASE_URL}/codelists/${codeList}.json`);
-          var data = null;
-          if( clist.ok ){
-            await clist.json().then( (d) => data = d);
-          }else{
-           errorMessage.value = "HTTP error fetching code list, please see console.";
-           console.log(clist);
-           showDialog.value = true;
-           showLoading.value = false;
-          }
-        }catch(error){
-          errorMessage.value = "HTTP error fetching code list, please see console.";
-          showDialog.value = true;
-          showLoading.value = false;
-          console.log(error);
-        };
-        return data['@graph'].filter(item => item['@type'] === "skos:Concept");
-      };
-
-
-      const confirm = async () => {
-        var apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
-        var leaf = "";
-        apiURL = apiURL + leaf;
-        var record = {
-          id: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
-          type: 'Feature',
-          geometry: {
-            type: 'Point',
-            coordinates: [parseFloat(station.value.geometry.longitude),
-                          parseFloat(station.value.geometry.latitude),
-                          parseFloat(station.value.geometry.elevation)]
-          },
-          properties: {
-            name: stripHTMLTags(station.value.properties.name),
-            wigos_station_identifier: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
-            traditional_station_identifier: stripHTMLTags(station.value.properties.traditional_station_identifier),
-            facility_type: station.value.properties.facility_type['skos:notation'] ?? null,
-              territory_name: station.value.properties.territory_name['skos:notation'] ?? null,
-            barometer_height: parseFloat(station.value.properties.barometer_height),
-            wmo_region: station.value.properties.wmo_region['skos:notation'] ?? null,
-            url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
-                    stripHTMLTags(station.value.properties.wigos_station_identifier),
-            topics: station.value.properties.topics.map( (topic) => (topic.id)),
-            status: station.value.properties.status['skos:notation'] ?? null,
-            id: stripHTMLTags(station.value.properties.wigos_station_identifier)  // WSI
-          }
-        }
-
-        try{
-          const response = await fetch(apiURL, {
-              method: 'POST',
-              headers: {
-                  'encode': 'json',
-                  'Content-Type': 'application/geo+json',
-                  'Authorization': 'Bearer '+ token.value
-              },
-              body: JSON.stringify(record)
-            });
-          if (!response.ok) {
-            console.log(record);
-              if (response.status == 400) {
-                  errorMessage.value = "Station already imported, please edit via the station list"
-              }
-              else if (response.status == 401) {
-                errorMessage.value = "Unauthorized, please provide a valid 'collections/stations' token"
-              }
-              else if (response.status == 404) {
-                errorMessage.value = "Error submitting record, API not found"
-              }
-              else if (response.status == 500) {
-                errorMessage.value = "Error submitting record, internal server error"
-              }
-              else {
-                errorMessage.value = "Error submitting record, please check the console";
-                console.error('HTTP error', response.status);
-              }
-            showDialog.value = true;
-            showLoading.value = false;
-          } else {
-            errorMessage.value = "Station successfully submitted, redirecting to station viewer.";
-            showDialog.value = true;
-            showLoading.value = false;
-            setTimeout( () => {router.push("/station/"+wsi.value+"?action=view")}, 3000);
-          }
-        }catch(error){
-          errorMessage.value = "HTTP error posting to API, please see console.";
-          showDialog.value = true;
-          showLoading.value = false;
-          console.log(record);
-          console.log(error);
-          console.log(apiURL);
-        }
-      };
-
-      const submit = async () => {
-        showLoading.value = true;
-        var apiURL = `${import.meta.env.VITE_API_URL}/processes/oscar2feature/execution`;
-        var payload = {
-              "inputs": {
-                "wigos_station_identifier": stripHTMLTags(wsi.value)
-              }
-            };
-        // get data
-        try {
-          const response = await fetch(
-            apiURL, {
-              method: 'POST',
-              headers: {
-                  'encode': 'json',
-                  'Content-Type': 'application/json',
-                  'authorization': 'Bearer '+ token.value
-              },
-              body: JSON.stringify(payload)
-            }
-          );
-          if( ! response.ok ){
-            console.log(response);
-            errorMessage.value = "Error fetching form OSCAR/Surface via WIS2box API, please check status of the API and OSCAR/Surface. See console for more details.";
-            console.error(response.status);
-            showDialog.value = true;
-            showLoading.value = false;
-          }else{
-            data.value = await response.json();
-          };
-        } catch( error ) {
-          errorMessage.value = "Error fetching form OSCAR/Surface via WIS2box API, please check status of the API and OSCAR/Surface. See console for more details.";
-          console.log(error);
-          showDialog.value = true;
-          showLoading.value = false;
-        };
-        if( data.value ){
-          if( data.value.feature ){
-            station.value.id = data.value.feature.id;
-            station.value.type = data.value.feature.type;
-            station.value.geometry.type = data.value.feature.geometry.type;
-            station.value.geometry.coordinates = data.value.feature.geometry.coordinates;
-            station.value.geometry.longitude = station.value.geometry.coordinates[0];
-            station.value.geometry.latitude = station.value.geometry.coordinates[1];
-            station.value.geometry.elevation = station.value.geometry.coordinates.length === 3 ?
-                  station.value.geometry.coordinates[2] : null;
-            station.value.properties.name = data.value.feature.properties.name;
-            station.value.properties.wigos_station_identifier = data.value.feature.properties.wigos_station_identifier;
-            station.value.properties.traditional_station_identifier = data.value.feature.properties.traditional_station_identifier;
-            station.value.properties.barometer_height = data.value.feature.properties.barometer_height;
-            station.value.properties.url = data.value.feature.properties.url;
-            station.value.properties.id = data.value.feature.properties.id;
-            station.value.properties.facility_type = data.value.feature.properties.facility_type;
-            station.value.properties.territory_name = data.value.feature.properties.territory_name;
-            station.value.properties.wmo_region = data.value.feature.properties.wmo_region;
-            station.value.properties.status = data.value.feature.properties.status;
-
-            station.value._meta.ready = true;
-            showLoading.value = false;
-          }else if(data.value.error){
-            redirectMessage.value = "Station not found in OSCAR, unable to import." +
-                                    " Please register station in OSCAR/Surface and try again." ;
-
-            redirectWarning.value = "For development and testing purposes stations can be created directly." +
-                                    "To add a new station to the WIS2box please click the 'create new station' button";
-            showRedirect.value = true;
-            showLoading.value = false;
-          }else{
-            errorMessage.value = "Unexpected response, see logs for further details.";
-            console.error("Error fetching station details:", data.value);
-            showDialog.value = true;
-            showLoading.value = false;
-          }
-        };
-      };
-
-      watch( () => station.value.properties.wmo_region, (newValue) => {
-        console.log(newValue);
-      });
-
-      return {wsi, errorMessage, showDialog, rules, router, station, formValid, confirm, showLoading,
-          redirectMessage, redirectWarning, showRedirect, submit, token};
-    }
-  });
-</script>
diff --git a/src/components/StationEditor.vue b/src/components/StationEditor.vue
deleted file mode 100644
index 661ee9a..0000000
--- a/src/components/StationEditor.vue
+++ /dev/null
@@ -1,342 +0,0 @@
-<template>
-  <v-sheet align="center">
-    <APIStatus/>
-    <v-dialog v-model="showDialog" width="auto">
-      <v-card>
-        <v-card-text>{{errorMessage}}</v-card-text>
-        <v-card-actions>
-          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-    <v-card-title v-if="!readonly">{{ route.params.id ? 'Edit' : 'Create new' }} station</v-card-title>
-    <v-card-title v-else>View station</v-card-title>
-    <v-card v-if="station" max-width="1200px">
-      <v-form v-model="formValid" align="left">
-        <v-card-item>
-          <v-text-field
-            label="Station name"
-            v-model="station.properties.name"
-            :rules="[rules.validName]"
-            :readonly="readonly || route.params.id.length>0"
-            hint="Enter name of station" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="WIGOS station identifier"
-            v-model="station.properties.wigos_station_identifier"
-            :rules="[rules.validWSI]"
-            :readonly="readonly || route.params.id.length>0"
-            hint="Enter the WIGOS station identifier" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="Traditional station identifier"
-            v-model="station.properties.traditional_station_identifier"
-            :readonly="readonly"
-            hint="Enter the traditional station identifier (ASCII or numeric characters only)" persistent-hint>
-          </v-text-field>
-        </v-card-item>
-        <v-card-item>
-          <v-container>
-            <v-row>
-              <v-col cols="4">
-                <v-row>
-                <v-text-field
-                  label="Longitude (decimal degrees E), -180 to 180"
-                  v-model="station.geometry.longitude"
-                  :rules="[rules.validLongitude]"
-                  :readonly="readonly"
-                  type="number"
-                  hint="Enter the station longitude (degrees E)" persistent-hint/>
-                </v-row>
-                <v-row>
-                  <v-text-field
-                  label="Latitude (decimal degrees N), -90 to 90"
-                  v-model="station.geometry.latitude"
-                  :rules="[rules.validLatitude]"
-                  :readonly="readonly"
-                  type="number"
-                  hint="Enter the station latitude (degrees N)" persistent-hint/>
-              </v-row>
-              <v-row>
-                <v-text-field
-                  label="Station elevation above sea level (metres)"
-                  v-model="station.geometry.elevation"
-                  :rules="[rules.validElevation]"
-                  :readonly="readonly"
-                  type="number"
-                  hint="Station elevation above sea level (metres)" persistent-hint/>
-              </v-row>
-              </v-col>
-              <v-col cols="8">
-                <LocatorMap
-                    :longitude="parseFloat(station.geometry.longitude)"
-                    :latitude="parseFloat(station.geometry.latitude)"/>
-              </v-col>
-            </v-row>
-          </v-container>
-        </v-card-item>
-        <v-card-item><CodeListSelector :readonly="readonly" codeList="facilityType" label="Facility type" defaultHint= "Select facility type" v-model="station.properties.facility_type"/></v-card-item>
-        <v-card-item>
-          <v-text-field
-            label="Barometer height above sea level"
-            v-model="station.properties.barometer_height"
-            :rules="[rules.validBarometerHeight]"
-            :readonly="readonly"
-            hint="Enter barometer height (metres)" persistent-hint type="number">
-          </v-text-field>
-        </v-card-item>
-        <v-card-item><CodeListSelector :readonly="readonly" codeList="WMORegion" label="WMO Region" defaultHint= "Select WMO region" v-model="station.properties.wmo_region"/></v-card-item>
-        <v-card-item><CodeListSelector :readonly="readonly" codeList="territory" label="Territory or WMO member operating the station" defaultHint= "Select territory" v-model="station.properties.territory_name"/></v-card-item>
-        <v-card-item><CodeListSelector :readonly="readonly" codeList="operatingStatus" label="Operating status" defaultHint= "Select operating status" v-model="station.properties.status"/></v-card-item>
-         <v-card-item>
-          <TopicHierarchySelector v-model="station.properties.topics" multiple :readonly="readonly" :rules="[rules.topic]"/>
-        </v-card-item>
-        <v-card-item>
-          <v-text-field :rules="[rules.token]" type="password" clearable v-model="token" label='wis2box auth token for "collections/stations"' hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>
-        </v-card-item>
-        <v-card-actions v-if="!readonly">
-          <v-btn @click="registerStation()" elevation=2 :disabled="!formValid">Save</v-btn>
-          <v-btn @click="cancelEdit()" elevation=2>Cancel</v-btn>
-        </v-card-actions>
-        <v-card-actions v-else>
-          <v-btn @click="router.push('/station/'+route.params.id+'?action=edit')" elevation=2>Edit</v-btn>
-        </v-card-actions>
-      </v-form>
-    </v-card>
-    </v-sheet>
-  </template>
-  <script>
-    import {defineComponent, ref, watch, onBeforeMount, onMounted} from 'vue';
-    import {VSheet, VCard, VCardItem, VTextField, VContainer, VRow, VCol, VBtn, VCardActions} from 'vuetify/lib/components/index.mjs';
-    import {VForm} from 'vuetify/lib/components/index.mjs';
-    import TopicHierarchySelector from '@/components/TopicHierarchySelector.vue';
-    import LocatorMap from '@/components/LocatorMap.vue';
-    import {useRoute, useRouter} from 'vue-router';
-    import CodeListSelector from '@/components/CodeListSelector.vue';
-    import APIStatus from '@/components/APIStatus.vue';
-
-    function stripHTMLTags(input){
-      if( typeof input !== 'string' ){
-        console.warning("Invalid input passed to stripHTMLTags, empty string returned")
-        return '';
-      }
-      const tag_regex = /<\/?[a-zA-Z]+\/?>/g;
-      const escapes = /[\x00-\x1F\x7F;\\]/g;
-      return input.replace(tag_regex,'').replace(escapes,'');
-    }
-
-    export default defineComponent({
-      name: 'StationEditor',
-      components: {
-        VContainer, VRow, VContainer, VCard, VCardItem, VTextField, APIStatus,
-        TopicHierarchySelector, VBtn, VCardActions, LocatorMap, VForm, CodeListSelector
-      },
-      setup(){
-        const route = useRoute();
-        const router = useRouter();
-        const station = ref(null);
-        const topics = ref([null]);
-        const showDialog = ref(false);
-        const errorMessage = ref(null);
-        const operatingStatusOptions = ref(null);
-        const territoryOptions = ref(null);
-        const WMORegionOptions = ref(null);
-        const facilityTypeOptions = ref(null);
-        const readonly = ref(false);
-        const msg = ref('');
-        const token = ref(null);
-        const formValid = ref(null);
-
-        // define validation rules
-        const rules = ref({
-          validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
-          validTSI: value => value && value.length > 0  ? true : 'TSI must be set',
-          validLongitude: value => ! (Math.abs(value) > 180 || isNaN(value)) ? true : 'Invalid longitude',
-          validLatitude: value => value && ! (Math.abs(value) > 90 || isNaN(value)) ? true : 'Invalid latitude',
-          validElevation: value => value && ! isNaN(value) ? true : 'Invalid elevation',
-          validBarometerHeight: value => value && ! isNaN(value) ? true : 'Invalid barometer height',
-          validName: value => value && value.length > 0 ? true : 'Name must be set',
-          token: value => value && value.length > 0 ? true : 'Please enter the authorization token',
-          topic: value => value.length > 0 ? true : 'Select at least one topic'
-        });
-        const cancelEdit = async () => {
-          readonly.value = true;
-          if( route.params.id ){
-            loadStation(route.params.id);
-            router.push('/station/'+route.params.id);
-          }else{
-            router.push('/station');
-          };
-        };
-
-        const registerStation = async () => {
-          if( ! formValid.value ){
-            errorMessage.value = "Please correct validation errors before submitting"
-            showDialog.value = true;
-            return;
-          }
-          var record = {
-            id: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
-            type: 'Feature',
-            geometry: {
-              type: 'Point',
-              coordinates: [parseFloat(station.value.geometry.longitude),
-                            parseFloat(station.value.geometry.latitude),
-                            parseFloat(station.value.geometry.elevation)]
-            },
-            properties: {
-              name: stripHTMLTags(station.value.properties.name),
-              wigos_station_identifier: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
-              traditional_station_identifier: stripHTMLTags(station.value.properties.traditional_station_identifier),
-              facility_type: station.value.properties.facility_type['skos:notation'] ?? null,
-              territory_name: station.value.properties.territory_name['skos:notation'] ?? null,
-              barometer_height: parseFloat(station.value.properties.barometer_height),
-              wmo_region: station.value.properties.wmo_region['skos:notation'] ?? null,
-              url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
-                      stripHTMLTags(station.value.properties.wigos_station_identifier),
-              topics: station.value.properties.topics.map( (topic) => (topic.id)),
-              status: station.value.properties.status['skos:notation'] ?? null,
-              id: stripHTMLTags(station.value.properties.wigos_station_identifier)  // WSI
-            }
-          }
-          var apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
-          var leaf = route.params.id ? "/" + route.params.id : "";
-          apiURL = apiURL + leaf;
-          const response = await fetch(apiURL, {
-              method: route.params.id ? 'PUT' : 'POST',
-              headers: {
-                  'encode': 'json',
-                  'Content-Type': 'application/geo+json',
-                  'authorization': 'Bearer '+ token.value
-              },
-              body: JSON.stringify(record)
-            });
-          if (!response.ok) {
-              console.log(record);
-              if (response.status == 401) {
-                errorMessage.value = "Unauthorized, please provide a valid 'collections/stations' token"
-              }
-              else if (response.status == 404) {
-                errorMessage.value = "Error submitting record, API not found"
-              }
-              else if (response.status == 500) {
-                errorMessage.value = "Error submitting record, internal server error"
-              }
-              else {
-                errorMessage.value = "Error submitting record, please check the console";
-                console.error('HTTP error', response.status);
-              }
-              showDialog.value = true;
-          } else {
-            errorMessage.value = "Station successfully submitted, redirecting to station list.";
-            showDialog.value = true;
-            setTimeout( () => {router.push("/station")}, 3000); // short pause to give backend time to catch up.
-          }
-        };
-
-        onBeforeMount( async () => {
-          if(route.query.action==="edit"){
-            readonly.value = false;
-          }else{
-            readonly.value = true;
-          }
-        });
-
-
-        onMounted( async () => {
-          // load codes lists
-          if (route.params.id){
-            await loadStation( route.params.id );
-          };
-          if( ! station.value ){
-            readonly.value = false;
-            station.value = {
-              id: null,  // WSI
-              type: 'Feature',
-              geometry: {
-                type: 'Point',
-                coordinates: [null,null,null]
-              },
-              properties: {
-                name: null,
-                wigos_station_identifier: null,  // WSI
-                traditional_station_identifier: null,
-                facility_type: null,
-                territory_name: null,
-                barometer_height: null,
-                wmo_region: null,
-                url: null,
-                topics: [],
-                status: null,
-                id: null  // WSI
-              }
-            };
-          }
-        })
-
-        // load station
-        const loadStation = async (wsi) => {
-          const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items/${wsi}`;
-          try {
-            const response  = await fetch(apiURL);
-            if (!response.ok && response.status !== 404){
-              throw new Error(`HTTP error! Status: ${response.status}`);
-            }else if(response.status === 404){
-              errorMessage.value = "Station not found, please check the ID or register a new station."
-              showDialog.value = true;
-              router.push('/station/');
-            } else{
-              var data = await response.json();
-              station.value = {
-                id: data.id,  // WSI
-                type: data.type,
-                geometry: {
-                  type: data.geometry.type,
-                  coordinates: data.geometry.coordinates,
-                  longitude: data.geometry.coordinates[0],
-                  latitude: data.geometry.coordinates[1],
-                  elevation: data.geometry.coordinates[2]
-                },
-                properties: {
-                  name: data.properties.name,
-                  wigos_station_identifier: data.properties.wigos_station_identifier,  // WSI
-                  traditional_station_identifier: data.properties.traditional_station_identifier,
-                  facility_type: data.properties.facility_type,
-                  territory_name: data.properties.territory_name,
-                  barometer_height: data.properties.barometer_height,
-                  wmo_region: data.properties.wmo_region,
-                  url: data.properties.url,
-                  topics: JSON.parse(JSON.stringify(data.properties.topics)),
-                  status: data.properties.status,
-                  id: data.properties.id  // WSI
-                }
-              };
-            }
-          }
-          catch (error) {
-            errorMessage.value = "Error fetching station details, please check the API end point." +
-                                  " See logs for more information.";
-            console.error("Error fetching station details:", error)
-          }
-        }
-
-        watch( (route), () => {
-          if(route.query.action === "edit"){
-            readonly.value = false;
-          }else{
-            readonly.value = true;
-          }
-        })
-        return {station, topics, registerStation, showDialog, msg, rules, route, router,
-          readonly, errorMessage, token, formValid,
-          cancelEdit
-
-        };
-      }
-    });
-  </script>
-
diff --git a/src/components/SynopForm.vue b/src/components/SynopForm.vue
index 7d554a2..019d54d 100644
--- a/src/components/SynopForm.vue
+++ b/src/components/SynopForm.vue
@@ -41,19 +41,22 @@
                                     </v-col>
                                 </v-row>
 
-                                <!-- Topic hierarchy selection -->
+                                <!-- Dataset identifier selection -->
                                 <v-row>
                                     <v-col cols="12">
-                                        <TopicHierarchySelector v-model="topic"></TopicHierarchySelector>
+                                        <DatasetIdentifierSelector v-model="datasetSelected"></DatasetIdentifierSelector>
                                     </v-col>
                                 </v-row>
 
+
                                 <!-- Execution token -->
                                 <v-row>
+                                    <v-divider class="mb-5"/>
                                     <v-col cols="12">
                                         <v-text-field label="wis2box auth token for 'processes/wis2box'" v-model="token"
                                             rows="1" :append-icon="showToken ? 'mdi-eye' : 'mdi-eye-off'"
                                             :type="showToken ? 'text' : 'password'"
+                                            autocomplete="one-time-code"
                                             @click:append="showToken = !showToken"
                                             :rules="[v => !!v || 'Token is required']"
                                             variant="outlined" />
@@ -211,8 +214,8 @@
 
 <script>
 import { defineComponent, ref, computed, watch } from 'vue';
-import { VCard, VCardTitle, VCardText, VCardItem, VForm, VTextarea, VBtn, VListGroup } from 'vuetify/lib/components/index.mjs';
-import TopicHierarchySelector from './TopicHierarchySelector.vue';
+import { VCard, VCardTitle, VCardItem, VForm, VTextarea, VBtn, VListGroup } from 'vuetify/lib/components/index.mjs';
+import DatasetIdentifierSelector from '@/components/DatasetIdentifierSelector.vue';
 import InspectBufrButton from '@/components/InspectBufrButton.vue';
 import DownloadButton from '@/components/DownloadButton.vue';
 
@@ -221,13 +224,12 @@ export default defineComponent({
     components: {
         VCard,
         VCardTitle,
-        VCardText,
         VCardItem,
         VTextarea,
         VForm,
         VBtn,
         VListGroup,
-        TopicHierarchySelector,
+        DatasetIdentifierSelector,
         InspectBufrButton,
         DownloadButton
     },
@@ -247,10 +249,8 @@ export default defineComponent({
         const aaxxPresent = ref(true);
         // Boolean to check if = delimiter is in bulletin
         const equalsPresent = ref(true);
-        // List of topic hierarchies before they are obtained from discovery metadata
-        const topicList = ref(["test1", "test2", "test3"]);
-        // Topic hierarchy selected by user
-        const topic = ref(null);
+        // Dataset selected by user
+        const datasetSelected = ref(null);
         // Execution token to be entered by user
         const token = ref(null);
         // Variable to control whether token is seen or not
@@ -274,7 +274,7 @@ export default defineComponent({
 
         // Boolean for whether the submit button is disabled or not
         const submitDisabled = computed(() => {
-            return (datePossible.value === false) || !bulletin.value || !aaxxPresent.value || !equalsPresent.value || !topic.value || !token.value
+            return (datePossible.value === false) || !bulletin.value || !aaxxPresent.value || !equalsPresent.value || !datasetSelected.value || !token.value
         })
 
         // Computes the result title re: success, partial success, or failure
@@ -402,7 +402,8 @@ export default defineComponent({
                     year: date.value.year, // Year of data
                     month: date.value.month + 1, // Month of data, +1 as JS starts 
                     // from 0 for months
-                    channel: topic.value.id, // Topic hierarchy
+                    channel: datasetSelected.value.metadata.topic, // Topic hierarchy
+                    metadata_id: datasetSelected.value.metadata.id, // Dataset identifier
                     notify: notificationsOn.value // Boolean for WIS2 notifications
                 }
             };
@@ -496,8 +497,7 @@ export default defineComponent({
             bulletin,
             aaxxPresent,
             equalsPresent,
-            topicList,
-            topic,
+            datasetSelected,
             token,
             showToken,
             notificationsOnPending,
diff --git a/src/components/TopicHierarchySelector.vue b/src/components/TopicHierarchySelector.vue
deleted file mode 100644
index f92e111..0000000
--- a/src/components/TopicHierarchySelector.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-    <div v-if="! errorMessage">
-      <v-select
-        v-if="(options !== null)"
-        :items="options"
-        item-title="name"
-        item-value="id"
-        label="Topic hierarchy"
-        v-model="selected"
-        :readonly="readonly"
-        :rules="rules"
-        :hint="selected ? selected.description : 'Select topic hierarchy'"
-        persistent-hint
-        :multiple="multiple"
-        return-object
-        variant="outlined"
-        />
-    </div>
-    <div v-else class="error">
-      <v-text-field class="text-error" readonly>{{ errorMessage }}</v-text-field>
-    </div>
-</template>
-
-<script>
-import { defineComponent, ref, onBeforeMount, watch, onErrorCaptured } from 'vue';
-import { VSelect, VTextField } from 'vuetify/lib/components/index.mjs';
-
-
-export default defineComponent({
-  name: 'SelectTopicHierarchy',
-  components: {
-    VSelect, VTextField
-  },
-  props: {
-    modelValue: {},
-    readonly: false,
-    multiple: false,
-    rules: {
-      type: Array
-    }
-  },
-  emits: ["update:modelValue"],
-  setup(props, { emit }) {
-    const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
-    const options = ref(null);
-    const selected = ref([]);
-    const errorMessage = ref(null);
-
-    const fetchOptions = async () => {
-      // Get topic hierarchies
-      if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
-        // If test mode enabled, show test topics
-        console.log("TEST_MODE is enabled");
-        options.value = [
-          {name: "test1", id: "test1", description: "Test 1"}, {name: "test2", id: "test2", description: "Test 2"}, {name: "test3", id: "test3", description: "Test 3"}
-        ]
-
-      }
-      else {
-        console.log("Fetching topic hierarchy from:", apiUrl);
-        try {
-          const response = await fetch(apiUrl);
-          if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-          }
-          else {
-            const data = await response.json();
-            if (data.features) {
-              // Use Array.map to create a new array of the topic hierarchies
-              options.value = data.features.map(feature => {
-                if (feature.properties && feature.properties['wmo:topicHierarchy']) {
-                  return {
-                    name: feature.properties['wmo:topicHierarchy'],
-                    id: feature.properties['wmo:topicHierarchy'],
-                    description: feature.properties['description']
-                  }
-                }
-              }
-              );
-            }
-            else {
-              console.error("API response is not an object");
-            }
-          }
-        }
-        catch (error) {
-          errorMessage.value = "Error fetching topic hierarchy, please check the API end point." +
-            " See logs for more information.";
-          console.error("Error fetching topic hierarchy:", error)
-        }
-      }
-    };
-
-
-    onBeforeMount(async () => {
-      var m = false;
-      await fetchOptions();
-      if (props.modelValue && props.modelValue.length) {
-        for (const topicId of props.modelValue) {
-          const option = options.value.find( option => option.id === topicId );
-          if (option){
-            m = true;
-            selected.value.push(option);
-          }
-        }
-      }
-      if(m){
-        emit("update:modelValue", selected.value);
-      }
-    });
-
-    watch( () => props.modelValue, (newValue) => {
-      selected.value = newValue;
-    });
-
-    watch( () => selected.value, (newValue) => {
-      if (selected.value) {
-        emit("update:modelValue", newValue);
-      }
-    });
-
-    return { selected, options, errorMessage };
-  }
-});
-</script>
diff --git a/src/components/BarChart.vue b/src/components/monitoring/BarChart.vue
similarity index 100%
rename from src/components/BarChart.vue
rename to src/components/monitoring/BarChart.vue
diff --git a/src/components/MonitoringPage.vue b/src/components/monitoring/MonitoringPage.vue
similarity index 81%
rename from src/components/MonitoringPage.vue
rename to src/components/monitoring/MonitoringPage.vue
index 0648ffd..f1588a1 100644
--- a/src/components/MonitoringPage.vue
+++ b/src/components/monitoring/MonitoringPage.vue
@@ -4,14 +4,14 @@
             <v-card-title class="big-title">WIS2 Notifications Monitoring Dashboard</v-card-title>
 
             <v-card-item>
-                <!-- Drop down selection for the topic the user wants to monitor -->
-                <v-row>
+                <!-- Drop down selection for the dataset ID the user wants to monitor -->
+                <v-row class="mt-2">
                     <v-col cols="10">
-                        <TopicHierarchySelector v-model="selectedTopicTemp" class="mb-3"></TopicHierarchySelector>
+                        <DatasetIdentifierSelector v-model="selectedDatasetTemp" class="mb-3"></DatasetIdentifierSelector>
                     </v-col>
                 </v-row>
                 <!-- Remaining selections: datetime range, WSI, and limit -->
-                <v-row>
+                <v-row class="my-0">
                     <v-col>
                         <v-row>
                             <v-col cols="5">
@@ -52,7 +52,7 @@
         <v-col cols="12" class="max-dashboard-width">
             <!-- Dashboard visualising the notifications of the topic selected -->
             <!-- A key is needed to ensure this dashboard updates when the props are changed -->
-            <NotificationDashboard :topicHierarchy="selectedTopic.id" :startDate="selectedStartDate"
+            <NotificationDashboard :datasetID="selectedDataset.metadata.id" :startDate="selectedStartDate"
                 :endDate="selectedEndDate" :wsi="searchedWsi" :limit="selectedLimit" v-if="showDashboard"
                 :key="dashboardKey" class="my-4" />
         </v-col>
@@ -64,20 +64,20 @@ import { defineComponent, ref, computed } from 'vue';
 import { VCardTitle } from 'vuetify/lib/components/index.mjs';
 import VueDatePicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
-import TopicHierarchySelector from './TopicHierarchySelector.vue';
-import NotificationDashboard from '@/components/NotificationDashboard.vue';
+import DatasetIdentifierSelector from '@/components/DatasetIdentifierSelector.vue';
+import NotificationDashboard from '@/components/monitoring/NotificationDashboard.vue';
 
 export default defineComponent({
     name: 'MonitoringPage',
     components: {
         VCardTitle,
         VueDatePicker,
-        TopicHierarchySelector,
+        DatasetIdentifierSelector,
         NotificationDashboard
     },
     setup() {
         // Static variables
-
+        const testMode = import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined;
         const now = new Date();
         const twentyFourHoursAgo = new Date(now.getTime() - 86400000);
 
@@ -89,8 +89,8 @@ export default defineComponent({
 
         // Topic selected by the user, used to get the topic hierarchy
         // from the topics array
-        const selectedTopicTemp = ref(null);
-        const selectedTopic = ref(null);
+        const selectedDatasetTemp = ref(null);
+        const selectedDataset = ref(null);
         // Date range for notifications, defaults to [24 hours from now, now]
         const selectedDateRangeTemp = ref([twentyFourHoursAgo, now]);
         const selectedStartDate = ref(twentyFourHoursAgo);
@@ -104,15 +104,15 @@ export default defineComponent({
         const selectedLimitTemp = ref(100);
         const selectedLimit = ref(100);
         // Boolean to show the notification dashboard
-        const showDashboard = ref(false);
         // Key to make sure dashboard always updates when the update button is pressed
+        const showDashboard = ref(false);
         const dashboardKey = ref(0);
 
         // Computed
 
         // Boolean for whether the monitor button is disabled or not
         const updateDisabled = computed(() => {
-            return !selectedTopicTemp.value || !selectedDateRangeTemp.value || (selectedDateRangeTemp.value.length !== 2)
+            return !selectedDatasetTemp.value || !selectedDateRangeTemp.value || (selectedDateRangeTemp.value.length !== 2)
         })
 
         // Methods
@@ -121,7 +121,7 @@ export default defineComponent({
         // user clicks on the monitor button
         const handleUpdate = () => {
             // Update props
-            selectedTopic.value = selectedTopicTemp.value;
+            selectedDataset.value = selectedDatasetTemp.value;
             selectedStartDate.value = new Date(selectedDateRangeTemp.value[0]);
             selectedEndDate.value = new Date(selectedDateRangeTemp.value[1]);
             searchedWsi.value = searchedWsiTemp.value;
@@ -130,14 +130,17 @@ export default defineComponent({
             dashboardKey.value++
             // Display dashboard
             showDashboard.value = true;
-            // Log
-            console.log('Sent start time:', selectedStartDate.value.toISOString())
-            console.log('Sent end time:', selectedEndDate.value.toISOString())
+            // Log in test mode
+            if (testMode) {
+                console.log('TEST_MODE is enabled')
+                console.log('Sent start time:', selectedStartDate.value.toISOString())
+                console.log('Sent end time:', selectedEndDate.value.toISOString())
+            }
         }
 
         return {
-            selectedTopicTemp,
-            selectedTopic,
+            selectedDatasetTemp,
+            selectedDataset,
             selectedDateRangeTemp,
             selectedStartDate,
             selectedEndDate,
diff --git a/src/components/NotificationDashboard.vue b/src/components/monitoring/NotificationDashboard.vue
similarity index 84%
rename from src/components/NotificationDashboard.vue
rename to src/components/monitoring/NotificationDashboard.vue
index 2ce3f06..f47eaf9 100644
--- a/src/components/NotificationDashboard.vue
+++ b/src/components/monitoring/NotificationDashboard.vue
@@ -59,16 +59,16 @@
 
 <script>
 import { defineComponent, ref, onMounted } from 'vue';
-import BarChart from './BarChart.vue';
-import SummaryStats from './SummaryStats.vue';
-import StationStats from './StationStats.vue';
-import PublishedData from './PublishedData.vue';
-import StationMap from './StationMap.vue';
+import BarChart from '@/components/monitoring/BarChart.vue';
+import SummaryStats from '@/components/monitoring/SummaryStats.vue';
+import StationStats from '@/components/monitoring/StationStats.vue';
+import PublishedData from '@/components/monitoring/PublishedData.vue';
+import StationMap from '@/components/monitoring/StationMap.vue';
 
 export default defineComponent({
     name: 'NotificationDashboard',
     props: {
-        topicHierarchy: {
+        datasetID: {
             type: String,
             required: true
         },
@@ -97,13 +97,13 @@ export default defineComponent({
         StationMap
     },
     setup(props) {
-
         // Static variables
-
+        const testMode = import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined;
         // Example message of Romania synoptic dataset
         const testMessageSynoptic = [
             {
-                "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d", "geometry": {
+                "id": "urn:wmo:md:test1-centre:core.test1.test1.test1", 
+                "geometry": {
                     "type": "Point",
                     "coordinates": [6.146197, 46.223432, 1]
                 },
@@ -112,7 +112,7 @@ export default defineComponent({
                     "datetime": "2022-03-31T00:00:00Z",
                     "pubtime": "2023-09-22T08:55:20Z",
                     "wigos_station_identifier": "0-20000-0-15020",
-                    "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d"
+                    "identifier": "urn:wmo:md:test1-centre:core.test1.test1.test1"
                 },
                 "links": [
                     {
@@ -127,7 +127,8 @@ export default defineComponent({
                     }]
             },
             {
-                "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d", "geometry": {
+                "id": "urn:wmo:md:test1-centre:core.test1.test1.test1",
+                "geometry": {
                     "type": "Point",
                     "coordinates": [6.146197, 46.223432, 1]
                 },
@@ -136,7 +137,7 @@ export default defineComponent({
                     "datetime": "2022-03-31T00:00:00Z",
                     "pubtime": "2023-09-22T08:55:20Z",
                     "wigos_station_identifier": "0-20000-0-15020",
-                    "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d"
+                    "identifier": "urn:wmo:md:test1-centre:core.test1.test1.test1"
                 },
                 "links": [
                     {
@@ -151,7 +152,8 @@ export default defineComponent({
                     }]
             },
             {
-                "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d", "geometry": {
+                "id": "urn:wmo:md:test1-centre:core.test1.test1.test1",
+                "geometry": {
                     "type": "Point",
                     "coordinates": [6.146197, 46.423432, 1]
                 },
@@ -160,7 +162,7 @@ export default defineComponent({
                     "datetime": "2022-03-31T00:00:00Z",
                     "pubtime": "2023-09-22T08:55:20Z",
                     "wigos_station_identifier": "0-20000-0-15030",
-                    "id": "8855221f-2112-43fa-b2da-1552e8aa9a2d"
+                    "identifier": "urn:wmo:md:test1-centre:core.test1.test1.test1"
                 },
                 "links": [
                     {
@@ -178,7 +180,7 @@ export default defineComponent({
         // Example message of Malawi surface dataset
         const testMessageSurface = [
             {
-                "id": "af14d8c4-5f63-45af-8171-7730ec9932ba",
+                "id": "urn:wmo:md:test2-centre:core.test2.test2.test2",
                 "geometry": {
                     "type": "Point",
                     "coordinates": [6.146197, 46.223432]
@@ -188,7 +190,7 @@ export default defineComponent({
                     "datetime": "2022-03-31T00:00:00Z",
                     "pubtime": "2023-09-19T13:40:49Z",
                     "wigos_station_identifier": "0-20000-0-15015",
-                    "id": "af14d8c4-5f63-45af-8171-7730ec9932ba"
+                    "identifier": "urn:wmo:md:test2-centre:core.test2.test2.test2"
                 },
                 "links": [
                     {
@@ -212,10 +214,13 @@ export default defineComponent({
         // Methods
 
         // Method to get canonical URL from a message
-        const getCanonicalUrl = (links) => {
+        const getCanonicalInfo = (links) => {
             const canonicalLink = links.find(link => link.rel === "canonical");
             if (canonicalLink) {
-                return canonicalLink.href;
+                return {
+                    'url': canonicalLink.href,
+                    'type': canonicalLink.type
+                };
             }
             return '';
         }
@@ -225,7 +230,8 @@ export default defineComponent({
             const selectedFields = features.map(item => ({
                 id: item.id,
                 pubtime: new Date(item.properties.pubtime),
-                canonical_url: getCanonicalUrl(item.links),
+                canonical_url: getCanonicalInfo(item.links).url,
+                type: getCanonicalInfo(item.links).type,
                 wsi: item.properties.wigos_station_identifier,
                 coordinates: item.geometry?.coordinates ?? null // Geometry may not be present
             }));
@@ -236,17 +242,18 @@ export default defineComponent({
         // Make API call
         const apiCall = async () => {
             const apiUrl = `${import.meta.env.VITE_API_URL}/collections/messages/items`;
-            console.log("Fetching notifications from:", apiUrl);
+            if (testMode) {
+                console.log("TEST_MODE is enabled");
+                console.log("Fetching notifications from:", apiUrl);
+            }
             try {
                 let params;
 
-                // data_id is props.topicHierarchy with origin/a/wis2/ removed
-                let data_id = props.topicHierarchy.replace("origin/a/wis2/", "");
                 // If WSI prop is given, include it in the search:
                 if (props.wsi) {
                     params = new URLSearchParams({
                         f: 'json', // Specify the response format as JSON
-                        data_id: `${data_id}%`, // Filter by data_id that starts with the provided topic hierarchy
+                        metadata_id: `${props.datasetID}%`, // Filter by dataset
                         sortBy: '-datetime', // Sort by time in descending order
                         datetime: `${props.startDate.toISOString()}/${props.endDate.toISOString()}`, // Filter to date range specified by user
                         wigos_station_identifier: `${props.wsi}`, // Filter by WSI searched
@@ -256,14 +263,16 @@ export default defineComponent({
                 else {
                     params = new URLSearchParams({
                         f: 'json', // Specify the response format as JSON
-                        data_id: `${data_id}%`, // Filter by data_id that starts with the provided topic hierarchy
+                        metadata_id: `${props.datasetID}%`, // Filter by dataset
                         sortBy: '-datetime', // Sort by time in descending order
                         datetime: `${props.startDate.toISOString()}/${props.endDate.toISOString()}`, // Filter to date range specified by user
                         limit: `${props.limit}`, // Limit number of notifications shown on dashboard
                     });
                 }
                 // Make the HTTP GET request
-                console.log("API request:", `${apiUrl}?${params}`)
+                if (testMode) {
+                    console.log("API request:", `${apiUrl}?${params}`)
+                }
                 const response = await fetch(`${apiUrl}?${params}`);
                 if (!response.ok) {
                     throw new Error(`HTTP error! Status: ${response.status}`);
@@ -286,20 +295,17 @@ export default defineComponent({
         // Retrieve messages
         const updateMessages = async () => {
             // Check if TEST_MODE is set in .env file or if VITE_API_URL is not set
-            if (import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined) {
+            if (testMode) {
                 console.log("TEST_MODE is enabled");
-                console.log("Dataset selected: ", props.topicHierarchy);
+                console.log("Dataset selected: ", props.datasetID);
                 // Use example data selected by user
-                if (props.topicHierarchy == "test1") {
+                if (props.datasetID == "urn:wmo:md:test1-centre:core.test1.test1.test1") {
                     messages.value = getMessagesFromFeatures(testMessageSynoptic);
                     console.log(messages.value)
                 }
-                else if (props.topicHierarchy == "test2") {
+                else if (props.datasetID == "urn:wmo:md:test2-centre:core.test2.test2.test2") {
                     messages.value = getMessagesFromFeatures(testMessageSurface);
                 }
-                else if (props.topicHierarchy == "test3") {
-                    messages.value = getMessagesFromFeatures(testMessageSynoptic);
-                }
             }
             // If not in test mode, make the API call
             else {
@@ -309,7 +315,6 @@ export default defineComponent({
 
         // Mounted lifecycle hook to display newest notification dashboard
         onMounted(() => {
-            console.log("Mounted updateMessages")
             updateMessages();
         })
 
diff --git a/src/components/PublishedData.vue b/src/components/monitoring/PublishedData.vue
similarity index 64%
rename from src/components/PublishedData.vue
rename to src/components/monitoring/PublishedData.vue
index 0d194fc..467426b 100644
--- a/src/components/PublishedData.vue
+++ b/src/components/monitoring/PublishedData.vue
@@ -5,33 +5,36 @@
     </v-card-title>
     <!-- Limit the size of the list and add scroll feature -->
     <v-card-text>
-      <v-text-field v-model="fileSearch" placeholder="Search for a file..." clearable/>
+      <v-text-field v-model="fileSearch" placeholder="Search for a file..." clearable variant="outlined" />
     </v-card-text>
     <div class="scrollable-file-list">
-      <template v-for="(file_url, index) in filteredFileUrls" :key="index">
+      <template v-for="(file, index) in filteredFiles" :key="index">
         <v-list class="file-list">
-            <v-row justify="center" align="center">
-              <v-col cols="5">
-
-                <!-- Display the timestamp -->
-                <div class="secondary">
-                  {{ formatTime(filteredPublishTimes[index]) }} UTC
-                </div>
-
-                <!-- Display the file name -->
-                <div class="url-font">
-                  {{ getFileName(file_url) }}
-                </div>
-              </v-col>
-
-              <v-col cols="3">
-                <DownloadButton :fileName="getFileName(file_url)" :fileUrl="file_url" :block="true" />
-              </v-col>
-
-              <v-col cols="3">
-                <InspectBufrButton :fileName="getFileName(file_url)" :fileUrl="file_url" :block="true" />
-              </v-col>
-            </v-row>
+          <v-row justify="center" align="center">
+            <v-col cols="5">
+
+              <!-- Display the timestamp -->
+              <div class="secondary">
+                {{ formatTime(filteredPublishTimes[index]) }} UTC
+              </div>
+
+              <!-- Display the file name -->
+              <div class="url-font">
+                {{ getFileName(file.url) }}
+              </div>
+            </v-col>
+            
+            <v-divider vertical class="mr-5"/>
+
+            <v-col cols="3">
+              <DownloadButton :fileName="getFileName(file.url)" :fileUrl="file.url" :block="true" />
+            </v-col>
+
+            <v-col cols="3">
+              <InspectBufrButton v-if="file.type === 'application/x-bufr'" :fileName="getFileName(file.url)"
+                :fileUrl="file.url" :block="true" />
+            </v-col>
+          </v-row>
         </v-list>
         <v-divider />
       </template>
@@ -42,8 +45,8 @@
 <script>
 import { defineComponent, ref, computed } from 'vue';
 import { VCard, VCardTitle } from 'vuetify/lib/components/index.mjs';
-import DownloadButton from './DownloadButton.vue';
-import InspectBufrButton from './InspectBufrButton.vue';
+import DownloadButton from '@/components/DownloadButton.vue';
+import InspectBufrButton from '@/components/InspectBufrButton.vue';
 
 export default defineComponent({
   name: 'PublishedData',
@@ -69,15 +72,18 @@ export default defineComponent({
 
     // Computed
 
-    // Filter the file URLs in published data by the search parameter
-    const filteredFileUrls = computed(() => {
-      // Create array of file urls from the messages
-      let fileUrls = props.messages.map(message => message.canonical_url);
+    // Filter the files in published data by the search parameter
+    const filteredFiles = computed(() => {
+      // Create array of objects with url and type from the messages
+      let fileObjects = props.messages.map(message => ({
+        url: message.canonical_url,
+        type: message.type
+      }));
 
       if (fileSearch.value) {
-        return fileUrls.filter(url => getFileName(url).includes(fileSearch.value));
+        return fileObjects.filter(file => getFileName(file.url).includes(fileSearch.value));
       }
-      return fileUrls;
+      return fileObjects;
     });
 
     // Filter the associated publish times by the search parameter
@@ -112,7 +118,7 @@ export default defineComponent({
 
     return {
       fileSearch,
-      filteredFileUrls,
+      filteredFiles,
       filteredPublishTimes,
       getFileName,
       formatTime
diff --git a/src/components/StationMap.vue b/src/components/monitoring/StationMap.vue
similarity index 100%
rename from src/components/StationMap.vue
rename to src/components/monitoring/StationMap.vue
diff --git a/src/components/StationStats.vue b/src/components/monitoring/StationStats.vue
similarity index 100%
rename from src/components/StationStats.vue
rename to src/components/monitoring/StationStats.vue
diff --git a/src/components/SummaryStats.vue b/src/components/monitoring/SummaryStats.vue
similarity index 100%
rename from src/components/SummaryStats.vue
rename to src/components/monitoring/SummaryStats.vue
diff --git a/src/components/stations/ImportOSCAR.vue b/src/components/stations/ImportOSCAR.vue
new file mode 100644
index 0000000..2c77fcc
--- /dev/null
+++ b/src/components/stations/ImportOSCAR.vue
@@ -0,0 +1,407 @@
+<template>
+  <v-sheet align="center">
+    <APIStatus />
+    <v-dialog v-model="showDialog" width="auto">
+      <v-card>
+        <v-card-text>{{ errorMessage }}</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="showLoading" width="auto">
+      <v-card>
+        <v-card-text>Searching for station record on OSCAR/Surface</v-card-text>
+        <v-progress-linear indeterminate rounded height="12" color="#004f9f">
+        </v-progress-linear>
+      </v-card>
+    </v-dialog>
+    <v-dialog v-model="showRedirect" width="auto">
+      <v-card align="center">
+        <v-card-text>{{ redirectMessage }}</v-card-text>
+        <v-card-text color-text="warning">{{ redirectWarning }}</v-card-text>
+        <v-card-actions align="center">
+          <v-btn color="primary" @click='router.push("/station")' elevation=2>Cancel</v-btn>
+          <v-btn color="warning" @click='router.push("/station/")' elevation=2>Create new station</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-card max-width="1200px">
+      <v-card-title class="big-title">Import station from OSCAR/Surface</v-card-title>
+      <v-card-item>
+        <v-form>
+          <v-text-field :rules="[rules.validWSI]" v-model="wsi" label="WIGOS Station Identifier"
+            hint="Enter WIGOS Station Identifier" persistent-hint />
+          <v-card-actions align="center">
+            <v-btn @click="submit">Search</v-btn>
+          </v-card-actions>
+        </v-form>
+      </v-card-item>
+    </v-card>
+    <v-card v-if="station && station._meta.ready" max-width="1200px">
+      <v-form v-model="formValid" align="left">
+        <v-card-item>
+          <v-text-field label="Station name" v-model="station.properties.name" readonly :rules="[rules.validName]"
+            hint="Enter name of station" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <v-text-field label="WIGOS station identifier" v-model="station.properties.wigos_station_identifier" readonly
+            :rules="[rules.validWSI]" hint="Enter the WIGOS station identifier" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <v-text-field label="Traditional station identifier"
+            v-model="station.properties.traditional_station_identifier"
+            hint="Enter the traditional (5 or 7 digit) station identifier" persistent-hint>
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <v-container>
+            <v-row>
+              <v-col cols="4">
+                <v-row>
+                  <v-text-field label="Longitude (decimal degrees E), -180 to 180" v-model="station.geometry.longitude"
+                    :rules="[rules.validLongitude]" type="number" hint="Enter the station longitude (degrees E)"
+                    persistent-hint />
+                </v-row>
+                <v-row>
+                  <v-text-field label="Latitude (decimal degrees N), -90 to 90" v-model="station.geometry.latitude"
+                    :rules="[rules.validLatitude]" type="number" hint="Enter the station latitude (degrees N)"
+                    persistent-hint />
+                </v-row>
+                <v-row>
+                  <v-text-field label="Station elevation above sea level (metres)" v-model="station.geometry.elevation"
+                    :rules="[rules.validElevation]" type="number" hint="Station elevation above sea level (metres)"
+                    persistent-hint />
+                </v-row>
+              </v-col>
+              <v-col cols="8">
+                <LocatorMap :longitude="parseFloat(station.geometry.longitude)"
+                  :latitude="parseFloat(station.geometry.latitude)" />
+              </v-col>
+            </v-row>
+          </v-container>
+        </v-card-item>
+        <v-card-item>
+          <CodeListSelector codeList="facilityType" label="Facility type" defaultHint="Select facility type"
+            v-model="station.properties.facility_type" />
+        </v-card-item>
+        <v-card-item>
+          <v-text-field label="Barometer height above sea level" v-model="station.properties.barometer_height"
+            :rules="[rules.validBarometerHeight]" hint="Enter barometer height (metres)" persistent-hint type="number">
+          </v-text-field>
+        </v-card-item>
+        <v-card-item>
+          <CodeListSelector codeList="WMORegion" label="WMO Region" defaultHint="Select WMO region"
+            v-model="station.properties.wmo_region" />
+        </v-card-item>
+        <v-card-item>
+          <CodeListSelector codeList="territory" label="Territory or WMO member operating the station"
+            defaultHint="Select territory" v-model="station.properties.territory_name" />
+        </v-card-item>
+        <v-card-item>
+          <CodeListSelector codeList="operatingStatus" label="Operating status" defaultHint="Select operating status"
+            v-model="station.properties.status" />
+        </v-card-item>
+        <v-card-item>
+          <TopicSelector v-model="station.properties.topics" multiple :rules="[rules.topic]" class="mt-2" />
+        </v-card-item>
+        <v-card-item>
+          <v-text-field :rules="[rules.token]" type="password" autocomplete="one-time-code" clearable v-model="token"
+            label='wis2box auth token for "collections/stations"'
+            hint='Enter wis2box auth token for "collections/stations"' persistent-token></v-text-field>
+        </v-card-item>
+        <v-card-actions>
+          <v-btn @click="confirm()" :disabled="!formValid" elevation=2>Save</v-btn>
+          <v-btn @click="router.push('/station')" elevation=2>Cancel</v-btn>
+        </v-card-actions>
+      </v-form>
+    </v-card>
+  </v-sheet>
+</template>
+<script>
+import { defineComponent, ref, onBeforeMount, watch } from "vue";
+import { VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, VProgressLinear } from 'vuetify/lib/components/index.mjs';
+import { useRouter } from 'vue-router';
+import TopicSelector from '@/components/stations/TopicSelector.vue';
+import LocatorMap from '@/components/LocatorMap.vue';
+import CodeListSelector from '@/components/CodeListSelector.vue';
+import APIStatus from '@/components/APIStatus.vue';
+
+function stripHTMLTags(input) {
+  if (typeof input !== 'string') {
+    console.warning("Invalid input passed to stripHTMLTags, empty string returned")
+    return '';
+  }
+  const tag_regex = /<\/?[a-zA-Z]+\/?>/g;
+  const escapes = /[\x00-\x1F\x7F;\\]/g;
+  return input.replace(tag_regex, '').replace(escapes, '');
+}
+
+export default defineComponent({
+  name: "ImportOSCAR",
+  components: {
+    VSheet, VCard, VCardTitle, VCardItem, VForm, VTextField, VBtn, VCardActions, LocatorMap,
+    CodeListSelector, VProgressLinear, APIStatus, TopicSelector
+  },
+  setup() {
+    const wsi = ref("");
+    // this needs to be moved to a class / pinia model.
+    const station = ref({
+      id: null,  // WSI
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [null, null, null]
+      },
+      properties: {
+        name: null,
+        wigos_station_identifier: null,  // WSI
+        traditional_station_identifier: null,
+        facility_type: {},
+        territory_name: {},
+        barometer_height: null,
+        wmo_region: {},
+        url: null,
+        topics: [],
+        status: {},
+        id: null  // WSI
+      },
+      _meta: {
+        ready: false
+      }
+    });
+
+    const errorMessage = ref(null);
+    const showDialog = ref(false);
+    const showLoading = ref(false);
+    const redirectMessage = ref(null);
+    const redirectWarning = ref(null);
+    const showRedirect = ref(false);
+    const token = ref(null);
+    const rules = ref({
+      validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
+      validTSI: value => value && value.length > 0 ? true : 'TSI must be set',
+      validLongitude: value => !(Math.abs(value) > 180 || isNaN(value)) ? true : 'Invalid longitude',
+      validLatitude: value => value && !(Math.abs(value) > 90 || isNaN(value)) ? true : 'Invalid latitude',
+      validElevation: value => value && !isNaN(value) ? true : 'Invalid elevation',
+      validBarometerHeight: value => value && !isNaN(value) ? true : 'Invalid barometer height',
+      validName: value => value && value.length > 0 ? true : 'Name must be set',
+      token: value => value && value.length > 0 ? true : 'Please enter the authorization token',
+      topic: value => value.length > 0 ? true : 'Select at least one topic'
+    });
+    const data = ref(null);
+    const router = useRouter();
+    const formValid = ref(null);
+    const territoryOptions = ref(null);
+    const WMORegionOptions = ref(null);
+    const facilityTypeOptions = ref(null);
+    const operatingStatusOptions = ref(null);
+    const selectedDataset = ref(null);
+
+    onBeforeMount(async () => {
+      territoryOptions.value = await loadCodeList('territory');
+      facilityTypeOptions.value = await loadCodeList('facilityType');
+      operatingStatusOptions.value = await loadCodeList('operatingStatus');
+      WMORegionOptions.value = await loadCodeList('WMORegion');
+    });
+
+    const loadCodeList = async (codeList) => {
+      let data;
+      try {
+        const clist = await fetch(`${import.meta.env.VITE_BASE_URL}/codelists/${codeList}.json`);
+        if (clist.ok) {
+          await clist.json().then((d) => data = d);
+        } else {
+          errorMessage.value = "HTTP error fetching code list, please see console.";
+          console.log(clist);
+          showDialog.value = true;
+          showLoading.value = false;
+        }
+      } catch (error) {
+        errorMessage.value = "HTTP error fetching code list, please see console.";
+        showDialog.value = true;
+        showLoading.value = false;
+        console.log(error);
+      }
+      return data['@graph'].filter(item => item['@type'] === "skos:Concept");
+    };
+
+
+    const confirm = async () => {
+      let apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
+      let leaf = "";
+      apiURL = apiURL + leaf;
+      let record = {
+        id: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [parseFloat(station.value.geometry.longitude),
+          parseFloat(station.value.geometry.latitude),
+          parseFloat(station.value.geometry.elevation)]
+        },
+        properties: {
+          name: stripHTMLTags(station.value.properties.name),
+          wigos_station_identifier: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
+          traditional_station_identifier: stripHTMLTags(station.value.properties.traditional_station_identifier),
+          facility_type: station.value.properties.facility_type['skos:notation'] ?? null,
+          territory_name: station.value.properties.territory_name['skos:notation'] ?? null,
+          barometer_height: parseFloat(station.value.properties.barometer_height),
+          wmo_region: station.value.properties.wmo_region['skos:notation'] ?? null,
+          url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
+            stripHTMLTags(station.value.properties.wigos_station_identifier),
+          topics: station.value.properties.topics.map((selected) => (selected.topic)),
+          status: station.value.properties.status['skos:notation'] ?? null,
+          id: stripHTMLTags(station.value.properties.wigos_station_identifier)  // WSI
+        }
+      }
+
+      try {
+        const response = await fetch(apiURL, {
+          method: 'POST',
+          headers: {
+            'encode': 'json',
+            'Content-Type': 'application/geo+json',
+            'Authorization': 'Bearer ' + token.value
+          },
+          body: JSON.stringify(record)
+        });
+        if (!response.ok) {
+          console.log(record);
+          if (response.status == 400) {
+            errorMessage.value = "Station already imported, please edit via the station list"
+          }
+          else if (response.status == 401) {
+            errorMessage.value = "Unauthorized, please provide a valid 'collections/stations' token"
+          }
+          else if (response.status == 404) {
+            errorMessage.value = "Error submitting record, API not found"
+          }
+          else if (response.status == 500) {
+            errorMessage.value = "Error submitting record, internal server error"
+          }
+          else {
+            errorMessage.value = "Error submitting record, please check the console";
+            console.error('HTTP error', response.status);
+          }
+          showDialog.value = true;
+          showLoading.value = false;
+        } else {
+          errorMessage.value = "Station successfully submitted, redirecting to station viewer.";
+          showDialog.value = true;
+          showLoading.value = false;
+          setTimeout(() => { router.push("/station/" + wsi.value + "?action=view") }, 3000);
+        }
+      } catch (error) {
+        errorMessage.value = "HTTP error posting to API, please see console.";
+        showDialog.value = true;
+        showLoading.value = false;
+        console.log(record);
+        console.log(error);
+        console.log(apiURL);
+      }
+    };
+
+    const submit = async () => {
+      showLoading.value = true;
+      let apiURL = `${import.meta.env.VITE_API_URL}/processes/oscar2feature/execution`;
+      let payload = {
+        "inputs": {
+          "wigos_station_identifier": stripHTMLTags(wsi.value)
+        }
+      };
+      // get data
+      try {
+        const response = await fetch(
+          apiURL, {
+          method: 'POST',
+          headers: {
+            'encode': 'json',
+            'Content-Type': 'application/json',
+            'authorization': 'Bearer ' + token.value
+          },
+          body: JSON.stringify(payload)
+        }
+        );
+        if (!response.ok) {
+          console.log(response);
+          errorMessage.value = "Error fetching form OSCAR/Surface via WIS2box API, please check status of the API and OSCAR/Surface. See console for more details.";
+          console.error(response.status);
+          showDialog.value = true;
+          showLoading.value = false;
+        } else {
+          data.value = await response.json();
+        }
+      } catch (error) {
+        errorMessage.value = "Error fetching form OSCAR/Surface via WIS2box API, please check status of the API and OSCAR/Surface. See console for more details.";
+        console.log(error);
+        showDialog.value = true;
+        showLoading.value = false;
+      }
+      if (data.value) {
+        if (data.value.feature) {
+          station.value.id = data.value.feature.id;
+          station.value.type = data.value.feature.type;
+          station.value.geometry.type = data.value.feature.geometry.type;
+          station.value.geometry.coordinates = data.value.feature.geometry.coordinates;
+          station.value.geometry.longitude = station.value.geometry.coordinates[0];
+          station.value.geometry.latitude = station.value.geometry.coordinates[1];
+          station.value.geometry.elevation = station.value.geometry.coordinates.length === 3 ?
+            station.value.geometry.coordinates[2] : null;
+          station.value.properties.name = data.value.feature.properties.name;
+          station.value.properties.wigos_station_identifier = data.value.feature.properties.wigos_station_identifier;
+          station.value.properties.traditional_station_identifier = data.value.feature.properties.traditional_station_identifier;
+          station.value.properties.barometer_height = data.value.feature.properties.barometer_height;
+          station.value.properties.url = data.value.feature.properties.url;
+          station.value.properties.id = data.value.feature.properties.id;
+          station.value.properties.facility_type = data.value.feature.properties.facility_type;
+          station.value.properties.territory_name = data.value.feature.properties.territory_name;
+          station.value.properties.wmo_region = data.value.feature.properties.wmo_region;
+          station.value.properties.status = data.value.feature.properties.status;
+
+          station.value._meta.ready = true;
+          showLoading.value = false;
+        } else if (data.value.error) {
+          redirectMessage.value = "Station not found in OSCAR, unable to import." +
+            " Please register station in OSCAR/Surface and try again.";
+
+          redirectWarning.value = "For development and testing purposes stations can be created directly." +
+            "To add a new station to the WIS2box please click the 'create new station' button";
+          showRedirect.value = true;
+          showLoading.value = false;
+        } else {
+          errorMessage.value = "Unexpected response, see logs for further details.";
+          console.error("Error fetching station details:", data.value);
+          showDialog.value = true;
+          showLoading.value = false;
+        }
+      }
+    };
+
+    // Watchers
+    watch(() => station.value.properties.wmo_region, (newValue) => {
+      console.log(newValue);
+    });
+
+    return {
+      wsi,
+      errorMessage,
+      showDialog,
+      rules,
+      router,
+      station,
+      formValid,
+      confirm,
+      showLoading,
+      redirectMessage,
+      redirectWarning,
+      showRedirect,
+      submit,
+      token,
+      selectedDataset
+    };
+  }
+});
+</script>
diff --git a/src/components/stations/StationEditor.vue b/src/components/stations/StationEditor.vue
new file mode 100644
index 0000000..26eae89
--- /dev/null
+++ b/src/components/stations/StationEditor.vue
@@ -0,0 +1,330 @@
+<template>
+  <v-sheet align="center">
+    <APIStatus />
+    <v-dialog v-model="showDialog" width="auto">
+      <v-card>
+        <v-card-text>{{ errorMessage }}</v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" block @click="showDialog = false">Close</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    <v-card-title v-if="!readonly">{{ route.params.id ? 'Edit' : 'Create new' }} station</v-card-title>
+    <v-card-title v-else>View station</v-card-title>
+    <v-card v-if="station" max-width="1200px">
+      <v-form v-model="formValid" align="left">
+        <v-container class="pa-5">
+          <v-text-field label="Station name" v-model="station.properties.name" :rules="[rules.validName]"
+            :readonly="readonly || route.params.id.length > 0" hint="Enter name of station" persistent-hint
+            variant="outlined" class="my-5">
+          </v-text-field>
+          <v-text-field label="WIGOS station identifier" v-model="station.properties.wigos_station_identifier"
+            :rules="[rules.validWSI]" :readonly="readonly || route.params.id.length > 0"
+            hint="Enter the WIGOS station identifier" persistent-hint variant="outlined" class="my-5">
+          </v-text-field>
+          <v-text-field label="Traditional station identifier"
+            v-model="station.properties.traditional_station_identifier" :readonly="readonly"
+            hint="Enter the traditional station identifier (ASCII or numeric characters only)" persistent-hint
+            variant="outlined" class="my-5">
+          </v-text-field>
+          <v-container>
+            <v-row>
+              <v-col cols="4">
+                <v-row>
+                  <v-text-field label="Longitude (decimal degrees E), -180 to 180" v-model="station.geometry.longitude"
+                    :rules="[rules.validLongitude]" :readonly="readonly" type="number"
+                    hint="Enter the station longitude (degrees E)" persistent-hint variant="outlined" class="my-5" />
+                </v-row>
+                <v-row>
+                  <v-text-field label="Latitude (decimal degrees N), -90 to 90" v-model="station.geometry.latitude"
+                    :rules="[rules.validLatitude]" :readonly="readonly" type="number"
+                    hint="Enter the station latitude (degrees N)" persistent-hint variant="outlined" class="my-5" />
+                </v-row>
+                <v-row>
+                  <v-text-field label="Station elevation above sea level (metres)" v-model="station.geometry.elevation"
+                    :rules="[rules.validElevation]" :readonly="readonly" type="number"
+                    hint="Station elevation above sea level (metres)" persistent-hint variant="outlined" class="my-5" />
+                </v-row>
+              </v-col>
+              <v-col cols="8">
+                <LocatorMap :longitude="parseFloat(station.geometry.longitude)"
+                  :latitude="parseFloat(station.geometry.latitude)" variant="outlined" />
+              </v-col>
+            </v-row>
+          </v-container>
+          <CodeListSelector :readonly="readonly" codeList="facilityType" label="Facility type"
+            defaultHint="Select facility type" v-model="station.properties.facility_type" class="my-5" />
+          <v-text-field label="Barometer height above sea level" v-model="station.properties.barometer_height"
+            :rules="[rules.validBarometerHeight]" :readonly="readonly" hint="Enter barometer height (metres)"
+            persistent-hint type="number" variant="outlined" class="my-5">
+          </v-text-field>
+          <CodeListSelector :readonly="readonly" codeList="WMORegion" label="WMO Region" defaultHint="Select WMO region"
+            v-model="station.properties.wmo_region" />
+          <CodeListSelector :readonly="readonly" codeList="territory"
+            label="Territory or WMO member operating the station" defaultHint="Select territory"
+            v-model="station.properties.territory_name" />
+          <CodeListSelector :readonly="readonly" codeList="operatingStatus" label="Operating status"
+            defaultHint="Select operating status" v-model="station.properties.status" />
+          <TopicSelector v-model="station.properties.topics" multiple :readonly="readonly"
+            :rules="[rules.topic]" class="mt-2" />
+          <v-divider />
+          <v-text-field :rules="[rules.token]" type="password" autocomplete="one-time-code" clearable v-model="token"
+            label='wis2box auth token for "collections/stations"'
+            hint='Enter wis2box auth token for "collections/stations"' persistent-token variant="outlined"
+            class="my-5"></v-text-field>
+          <v-card-actions v-if="!readonly">
+            <v-btn @click="registerStation()" elevation=2 :disabled="!formValid">Save</v-btn>
+            <v-btn @click="cancelEdit()" elevation=2>Cancel</v-btn>
+          </v-card-actions>
+          <v-card-actions v-else>
+            <v-btn @click="router.push('/station/' + route.params.id + '?action=edit')" elevation=2>Edit</v-btn>
+          </v-card-actions>
+        </v-container>
+      </v-form>
+    </v-card>
+  </v-sheet>
+</template>
+<script>
+import { defineComponent, ref, watch, onBeforeMount, onMounted } from 'vue';
+import { VCard, VTextField, VContainer, VRow, VBtn, VCardActions, VForm } from 'vuetify/lib/components/index.mjs';
+import TopicSelector from '@/components/stations/TopicSelector.vue';
+import LocatorMap from '@/components/LocatorMap.vue';
+import { useRoute, useRouter } from 'vue-router';
+import CodeListSelector from '@/components/CodeListSelector.vue';
+import APIStatus from '@/components/APIStatus.vue';
+
+function stripHTMLTags(input) {
+  if (typeof input !== 'string') {
+    console.warning("Invalid input passed to stripHTMLTags, empty string returned")
+    return '';
+  }
+  const tag_regex = /<\/?[a-zA-Z]+\/?>/g;
+  const escapes = /[\x00-\x1F\x7F;\\]/g;
+  return input.replace(tag_regex, '').replace(escapes, '');
+}
+
+export default defineComponent({
+  name: 'StationEditor',
+  components: {
+    VContainer, VRow, VCard, VTextField, APIStatus,
+    TopicSelector, VBtn, VCardActions, LocatorMap, VForm, CodeListSelector
+  },
+  setup() {
+    // Reactive variables
+    const route = useRoute();
+    const router = useRouter();
+    const station = ref(null);
+    const topics = ref([null]);
+    const showDialog = ref(false);
+    const errorMessage = ref(null);
+    const readonly = ref(false);
+    const msg = ref('');
+    const token = ref(null);
+    const formValid = ref(null);
+    const selectedDataset = ref(null);
+
+    // Define validation rules
+    const rules = ref({
+      validWSI: value => /^0-[0-9]{1,5}-[0-9]{0,5}-[0-9a-zA-Z]{1,16}$/.test(value) || 'Invalid WSI',
+      validTSI: value => value && value.length > 0 ? true : 'TSI must be set',
+      validLongitude: value => !(Math.abs(value) > 180 || isNaN(value)) ? true : 'Invalid longitude',
+      validLatitude: value => value && !(Math.abs(value) > 90 || isNaN(value)) ? true : 'Invalid latitude',
+      validElevation: value => value && !isNaN(value) ? true : 'Invalid elevation',
+      validBarometerHeight: value => value && !isNaN(value) ? true : 'Invalid barometer height',
+      validName: value => value && value.length > 0 ? true : 'Name must be set',
+      token: value => value && value.length > 0 ? true : 'Please enter the authorization token',
+      topic: value => value.length > 0 ? true : 'Select at least one topic'
+    });
+
+    // Methods
+
+    const cancelEdit = async () => {
+      readonly.value = true;
+      if (route.params.id) {
+        loadStation(route.params.id);
+        router.push('/station/' + route.params.id);
+      } else {
+        router.push('/station');
+      }
+    };
+
+    const registerStation = async () => {
+      if (!formValid.value) {
+        errorMessage.value = "Please correct validation errors before submitting"
+        showDialog.value = true;
+        return;
+      }
+      let record = {
+        id: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
+        type: 'Feature',
+        geometry: {
+          type: 'Point',
+          coordinates: [parseFloat(station.value.geometry.longitude),
+          parseFloat(station.value.geometry.latitude),
+          parseFloat(station.value.geometry.elevation)]
+        },
+        properties: {
+          name: stripHTMLTags(station.value.properties.name),
+          wigos_station_identifier: stripHTMLTags(station.value.properties.wigos_station_identifier),  // WSI
+          traditional_station_identifier: stripHTMLTags(station.value.properties.traditional_station_identifier),
+          facility_type: station.value.properties.facility_type['skos:notation'] ?? null,
+          territory_name: station.value.properties.territory_name['skos:notation'] ?? null,
+          barometer_height: parseFloat(station.value.properties.barometer_height),
+          wmo_region: station.value.properties.wmo_region['skos:notation'] ?? null,
+          url: "https://oscar.wmo.int/surface/#/search/station/stationReportDetails/" +
+            stripHTMLTags(station.value.properties.wigos_station_identifier),
+          topics: station.value.properties.topics.map((selected) => (selected.topic)),
+          status: station.value.properties.status['skos:notation'] ?? null,
+          id: stripHTMLTags(station.value.properties.wigos_station_identifier)  // WSI
+        }
+      }
+      let apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items`;
+      let leaf = route.params.id ? "/" + route.params.id : "";
+      apiURL = apiURL + leaf;
+      const response = await fetch(apiURL, {
+        method: route.params.id ? 'PUT' : 'POST',
+        headers: {
+          'encode': 'json',
+          'Content-Type': 'application/geo+json',
+          'authorization': 'Bearer ' + token.value
+        },
+        body: JSON.stringify(record)
+      });
+      if (!response.ok) {
+        console.log(record);
+        if (response.status == 401) {
+          errorMessage.value = "Unauthorized, please provide a valid 'collections/stations' token"
+        }
+        else if (response.status == 404) {
+          errorMessage.value = "Error submitting record, API not found"
+        }
+        else if (response.status == 500) {
+          errorMessage.value = "Error submitting record, internal server error"
+        }
+        else {
+          errorMessage.value = "Error submitting record, please check the console";
+          console.error('HTTP error', response.status);
+        }
+        showDialog.value = true;
+      } else {
+        errorMessage.value = "Station successfully submitted, redirecting to station list.";
+        showDialog.value = true;
+        setTimeout(() => { router.push("/station") }, 3000); // short pause to give backend time to catch up.
+      }
+    };
+
+    // Mounted methods
+    onBeforeMount(async () => {
+      if (route.query.action === "edit") {
+        readonly.value = false;
+      } else {
+        readonly.value = true;
+      }
+    });
+
+
+    onMounted(async () => {
+      // load codes lists
+      if (route.params.id) {
+        await loadStation(route.params.id);
+      }
+      if (!station.value) {
+        readonly.value = false;
+        station.value = {
+          id: null,  // WSI
+          type: 'Feature',
+          geometry: {
+            type: 'Point',
+            coordinates: [null, null, null]
+          },
+          properties: {
+            name: null,
+            wigos_station_identifier: null,  // WSI
+            traditional_station_identifier: null,
+            facility_type: null,
+            territory_name: null,
+            barometer_height: null,
+            wmo_region: null,
+            url: null,
+            topics: [],
+            status: null,
+            id: null  // WSI
+          }
+        };
+      }
+    })
+
+    // load station
+    const loadStation = async (wsi) => {
+      const apiURL = `${import.meta.env.VITE_API_URL}/collections/stations/items/${wsi}`;
+      try {
+        const response = await fetch(apiURL);
+        if (!response.ok && response.status !== 404) {
+          throw new Error(`HTTP error! Status: ${response.status}`);
+        } else if (response.status === 404) {
+          errorMessage.value = "Station not found, please check the ID or register a new station."
+          showDialog.value = true;
+          router.push('/station/');
+        } else {
+          let data = await response.json();
+          station.value = {
+            id: data.id,  // WSI
+            type: data.type,
+            geometry: {
+              type: data.geometry.type,
+              coordinates: data.geometry.coordinates,
+              longitude: data.geometry.coordinates[0],
+              latitude: data.geometry.coordinates[1],
+              elevation: data.geometry.coordinates[2]
+            },
+            properties: {
+              name: data.properties.name,
+              wigos_station_identifier: data.properties.wigos_station_identifier,  // WSI
+              traditional_station_identifier: data.properties.traditional_station_identifier,
+              facility_type: data.properties.facility_type,
+              territory_name: data.properties.territory_name,
+              barometer_height: data.properties.barometer_height,
+              wmo_region: data.properties.wmo_region,
+              url: data.properties.url,
+              topics: data.properties.topics,
+              status: data.properties.status,
+              id: data.properties.id  // WSI
+            }
+          };
+        }
+      }
+      catch (error) {
+        errorMessage.value = "Error fetching station details, please check the API end point." +
+          " See logs for more information.";
+        console.error("Error fetching station details:", error)
+      }
+    }
+
+    // Watchers
+    watch((route), () => {
+      if (route.query.action === "edit") {
+        readonly.value = false;
+      } else {
+        readonly.value = true;
+      }
+    })
+
+    return {
+      station,
+      topics,
+      registerStation,
+      showDialog,
+      msg,
+      rules,
+      route,
+      router,
+      readonly,
+      errorMessage,
+      token,
+      formValid,
+      cancelEdit,
+      selectedDataset
+    };
+  }
+});
+</script>
diff --git a/src/components/StationTable.vue b/src/components/stations/StationTable.vue
similarity index 96%
rename from src/components/StationTable.vue
rename to src/components/stations/StationTable.vue
index 93c71ee..a9cd4da 100644
--- a/src/components/StationTable.vue
+++ b/src/components/stations/StationTable.vue
@@ -5,7 +5,7 @@
       <v-card>
         <v-card-title class="big-title">Stations</v-card-title>
         <v-card-item v-if="items">
-          <VTextField style="width: 400px;" v-model="search" prepend-icon="mdi-text-search" label="Search" single-line hide-details></VTextField>
+          <VTextField style="width: 400px;" v-model="search" prepend-icon="mdi-text-search" label="Search" single-line hide-details variant="outlined"></VTextField>
           <VDataTable :headers="headers" :items="items" :search="search" dense small>
               <template v-slot:item.actions="{ item }">
                 <v-icon size="small" @click="editRecord(item)">mdi-pen</v-icon>
@@ -22,7 +22,7 @@
                   <v-card>
                     <v-card-text>Please type the WIGOS station identifier to confirm the deletion</v-card-text>
                     <v-card-item><v-text-field v-model="stationToDelete" label="Station to delete"></v-text-field></v-card-item>
-                    <v-card-item><v-text-field type="password" clearable v-model="token" label="Auth token"></v-text-field></v-card-item>
+                    <v-card-item><v-text-field type="password" autocomplete="one-time-code" clearable v-model="token" label="Auth token"></v-text-field></v-card-item>
                     <v-card-actions>
                       <v-btn
                           color="error"
@@ -82,6 +82,7 @@ export default defineComponent({
             throw new Error(`HTTP error! Status: ${response.status}`);
           }else{
             let featureCollection = await response.json();
+            console.log("featureCollection", featureCollection);
             items.value = featureCollection.features.map( (feature) => {
               return{
                 actions: "actions",
diff --git a/src/components/stations/TopicSelector.vue b/src/components/stations/TopicSelector.vue
new file mode 100644
index 0000000..e04c8e9
--- /dev/null
+++ b/src/components/stations/TopicSelector.vue
@@ -0,0 +1,138 @@
+<template>
+    <div v-if="!errorMessage">
+      <v-select v-if="(options !== null)" :items="options" item-title="topic" item-value="topic" :label="label"
+        v-model="selected" :readonly="readonly" :rules="rules"
+        :hint="selected ? selected.description : 'Select topic'" persistent-hint :multiple="multiple"
+        return-object variant="outlined" />
+    </div>
+    <div v-else class="error">
+      <v-text-field class="text-error" readonly>{{ errorMessage }}</v-text-field>
+    </div>
+  </template>
+  
+  <script>
+  import { defineComponent, ref, computed, onBeforeMount, watch } from 'vue';
+  import { VSelect, VTextField } from 'vuetify/lib/components/index.mjs';
+  
+  
+  export default defineComponent({
+    name: 'TopicSelector',
+    components: {
+      VSelect, VTextField
+    },
+    props: {
+      modelValue: {},
+      readonly: {
+        type: Boolean,
+        default: false
+      },
+      multiple: {
+        type: Boolean,
+        default: false
+      },
+      rules: {
+        type: Array
+      }
+    },
+    emits: ["update:modelValue"],
+    setup(props, { emit }) {
+      // Static variables
+      const testMode = import.meta.env.VITE_TEST_MODE === "true" || import.meta.env.VITE_API_URL == undefined;
+  
+      // Reactive variables
+      const apiUrl = `${import.meta.env.VITE_API_URL}/collections/discovery-metadata/items?f=json`;
+      const options = ref(null);
+      const selected = ref([]);
+      const errorMessage = ref(null);
+  
+      // Computed
+      const label = computed(() => {
+        let label = "Topic";
+        if (props.multiple) {
+          label += "s";
+        }
+        return label;
+      });
+
+      const fetchOptions = async () => {
+        // Get dataset IDs
+        if (testMode) {
+          // If test mode enabled, show test IDs
+          console.log("TEST_MODE is enabled");
+          options.value = [
+            {
+              topic: "origin/a/wis2/test1-centre/core/test1",
+              description: "Test 1 description"
+            },
+            {
+              topic: "origin/a/wis2/test2-centre/core/test2",
+              description: "Test 2 description"
+            },
+          ]
+  
+        }
+        else {
+          try {
+            const response = await fetch(apiUrl);
+            if (!response.ok) {
+              throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+            else {
+              const data = await response.json();
+              if (data.features) {
+                // Use Array.map to create a new array of the dataset IDs
+                options.value = data.features.map(feature => {
+                  if (feature.properties) {
+                    return {
+                      topic: feature.properties['wmo:topicHierarchy'],
+                      description: feature.properties['description']
+                    }
+                  }
+                });
+              }
+              else {
+                console.error("API response is not an object");
+              }
+            }
+          }
+          catch (error) {
+            errorMessage.value = "Error fetching dataset identifiers, please check the API end point." +
+              " See logs for more information.";
+            console.error("Error fetching dataset identifiers:", error)
+          }
+        }
+      };
+  
+  
+      onBeforeMount(async () => {
+        let m = false;
+        await fetchOptions();
+        if (props.modelValue && props.modelValue.length) {
+          for (const topic of props.modelValue) {
+            const option = options.value.find(option => option.topic === topic);
+            if (option) {
+              m = true;
+              selected.value.push(option);
+            }
+          }
+        }
+        if (m) {
+          emit("update:modelValue", selected.value);
+        }
+      });
+  
+      watch(() => props.modelValue, (newValue) => {
+        selected.value = newValue;
+      });
+  
+      watch(() => selected.value, (newValue) => {
+        if (selected.value) {
+          emit("update:modelValue", newValue);
+        }
+      });
+  
+      return { label, selected, options, errorMessage };
+    }
+  });
+  </script>
+  
\ No newline at end of file
diff --git a/src/views/ImportOSCAR.vue b/src/views/ImportOSCAR.vue
index 8f6c1ae..06c12fa 100644
--- a/src/views/ImportOSCAR.vue
+++ b/src/views/ImportOSCAR.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  import ImportOSCAR from '@/components/ImportOSCAR.vue'
+  import ImportOSCAR from '@/components/stations/ImportOSCAR.vue'
 </script>
diff --git a/src/views/MonitoringPage.vue b/src/views/MonitoringPage.vue
index 267d638..ed3e67f 100644
--- a/src/views/MonitoringPage.vue
+++ b/src/views/MonitoringPage.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  import MonitoringPage from '@/components/MonitoringPage.vue'
+  import MonitoringPage from '@/components/monitoring/MonitoringPage.vue'
 </script>
\ No newline at end of file
diff --git a/src/views/StationEditor.vue b/src/views/StationEditor.vue
index 8c7c0a7..4f447dc 100644
--- a/src/views/StationEditor.vue
+++ b/src/views/StationEditor.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  import StationEditor from '@/components/StationEditor.vue'
+  import StationEditor from '@/components/stations/StationEditor.vue'
 </script>
diff --git a/src/views/StationTable.vue b/src/views/StationTable.vue
index dff89ae..439d010 100644
--- a/src/views/StationTable.vue
+++ b/src/views/StationTable.vue
@@ -3,5 +3,5 @@
 </template>
 
 <script setup>
-  import StationTable from '@/components/StationTable.vue'
+  import StationTable from '@/components/stations/StationTable.vue'
 </script>