FMV with KLV Support

client/src/MapStore.ts

@@ -8,6 +8,7 @@ import {
   Context,
   Dataset,
   DisplayConfiguration,
+  FMVLayer,
   LayerCollection,
   NetCDFData,
   NetCDFImageWorking,
@@ -66,9 +67,9 @@ export default class MapStore {
   public static datasetsByContext = reactive<Record<number, Dataset[]>>({});
 
   // Layers
-  public static mapLayersByDataset = reactive<Record<number, (VectorMapLayer | RasterMapLayer | NetCDFData)[]>>({});
+  public static mapLayersByDataset = reactive<Record<number, (VectorMapLayer | RasterMapLayer | NetCDFData | FMVLayer)[]>>({});
 
-  public static selectedMapLayers = ref<(VectorMapLayer | RasterMapLayer | NetCDFLayer)[]>([]);
+  public static selectedMapLayers = ref<(VectorMapLayer | RasterMapLayer | NetCDFLayer | FMVLayer)[]>([]);
 
   public static visibleMapLayers: Ref<Set<string>> = ref(new Set());
 
@@ -88,6 +89,10 @@ export default class MapStore {
     () => this.selectedMapLayers.value.filter((layer) => layer.type === 'netcdf'),
   );
 
+  public static selectedFMVMapLayers: Ref<FMVLayer[]> = computed(
+    () => this.selectedMapLayers.value.filter((layer) => layer.type === 'fmv'),
+  );
+
   public static async loadCollections() {
     MapStore.availableCollections.value = await UVdatApi.getLayerCollections();
   }
@@ -121,8 +126,8 @@ export default class MapStore {
     if (initial && MapStore.displayConfiguration.value.default_displayed_layers.length) {
       const datasetIds = MapStore.displayConfiguration.value.default_displayed_layers.map((item) => item.dataset_id);
       const datasetIdLayers = await UVdatApi.getDatasetsLayers(datasetIds);
-      const layerByDataset: Record<number, (VectorMapLayer | RasterMapLayer | NetCDFData)[]> = {};
-      const toggleLayers: (VectorMapLayer | RasterMapLayer | NetCDFLayer)[] = [];
+      const layerByDataset: Record<number, (VectorMapLayer | RasterMapLayer | NetCDFData | FMVLayer)[]> = {};
+      const toggleLayers: (VectorMapLayer | RasterMapLayer | NetCDFLayer | FMVLayer)[] = [];
       const enabledLayers = MapStore.displayConfiguration.value.default_displayed_layers;
       datasetIdLayers.forEach((item) => {
         if (item.dataset_id !== undefined) {
@@ -180,7 +185,8 @@ export default class MapStore {
 
   public static vectorFeatureTableGraphVisible = ref(false);
 
-  public static vectorFeatureTableData: Ref<{ layerId: number, vectorFeatureId: number, defaultGraphs?: string[] } | null> = ref(null);
+  public static vectorFeatureTableData:
+  Ref<{ layerId: number, vectorFeatureId: number, defaultGraphs?: string[] } | null> = ref(null);
 
   public static setVectorFeatureTableData = (layerId: number, vectorFeatureId: number, defaultGraphs?: string[]) => {
     if (MapStore.mapLayerFeatureGraphsVisible.value) {
@@ -409,7 +415,8 @@ export default class MapStore {
         globalMax = Math.max(globalMax, max);
       }
     });
-    if ((MapStore.mapLayerFeatureGraphsVisible.value && MapStore.mapLayerFeatureGraphs.value.length) || MapStore.vectorFeatureTableGraphVisible.value) {
+    if ((MapStore.mapLayerFeatureGraphsVisible.value
+      && MapStore.mapLayerFeatureGraphs.value.length) || MapStore.vectorFeatureTableGraphVisible.value) {
       globalMin = Math.min(globalMin, MapStore.graphChartsMinMax.value.min);
       globalMax = Math.max(globalMax, MapStore.graphChartsMinMax.value.max);
       stepSize = Math.min(stepSize, MapStore.graphChartsMinMax.value.stepSize);

client/src/api/UVDATApi.ts

@@ -10,6 +10,8 @@ import {
   Dataset,
   DerivedRegion,
   DisplayConfiguration,
+  FMVLayer,
+  FMVLayerData,
   FeatureGraphData,
   FeatureGraphs,
   FeatureGraphsRequest,
@@ -363,7 +365,7 @@ export default class UVdatApi {
   public static async getMapLayerCollectionList(
     layers: LayerCollectionLayer[],
     enabled? : boolean,
-  ): Promise<(VectorMapLayer | RasterMapLayer | NetCDFLayer)[]> {
+  ): Promise<(VectorMapLayer | RasterMapLayer | NetCDFLayer | FMVLayer)[]> {
     return (await UVdatApi.apiClient.post('/map-layers/', { layers }, { params: { enabled } })).data;
   }
 
@@ -375,6 +377,10 @@ export default class UVdatApi {
     return (await UVdatApi.apiClient.get(`/vectors/${mapLayerId}/bbox`)).data;
   }
 
+  public static async getFMVBbox(mapLayerId: number): Promise<Bounds> {
+    return (await UVdatApi.apiClient.get(`/fmv-layer/${mapLayerId}/bbox`)).data;
+  }
+
   public static async getMapLayersBoundingBox(
     rasterMapLayerIds: number[] = [],
     vectorMapLayerIds: number[] = [],
@@ -626,7 +632,7 @@ export default class UVdatApi {
   public static async getMapLayerList(
     layerIds: number[],
     layerTypes : AbstractMapLayer['type'][],
-  ): Promise<(VectorMapLayer | RasterMapLayer | NetCDFLayer)[]> {
+  ): Promise<(VectorMapLayer | RasterMapLayer | NetCDFLayer | FMVLayer)[]> {
     const params = new URLSearchParams();
 
     layerIds.forEach((id) => params.append('mapLayerIds', id.toString()));
@@ -663,4 +669,8 @@ export default class UVdatApi {
     const response = await UVdatApi.apiClient.patch('display-configuration/', config);
     return response.data;
   }
+
+  public static async getFMVLayerData(layerId: number): Promise<FMVLayerData> {
+    return (await UVdatApi.apiClient.get(`/fmv-layer/${layerId}/`)).data;
+  }
 }

client/src/components/DataSelection/DatasetItem.vue

@@ -5,7 +5,9 @@ import {
   onUnmounted,
   ref,
 } from 'vue';
-import { NetCDFData, RasterMapLayer, VectorMapLayer } from '../../types';
+import {
+  FMVLayer, NetCDFData, RasterMapLayer, VectorMapLayer,
+} from '../../types';
 import { toggleLayerSelection } from '../../map/mapLayers';
 import MapStore from '../../MapStore';
 import NetCDFDataConfigurator from './NetCDFDataConfigurator.vue';
@@ -16,7 +18,7 @@ export default defineComponent({
   },
   props: {
     layer: {
-      type: Object as PropType<RasterMapLayer | VectorMapLayer | NetCDFData>,
+      type: Object as PropType<RasterMapLayer | VectorMapLayer | NetCDFData | FMVLayer>,
       required: true,
     },
   },
@@ -71,7 +73,7 @@ export default defineComponent({
 
 <template>
   <v-checkbox
-    v-if="layer.type === 'raster' || layer.type === 'vector'"
+    v-if="layer.type === 'raster' || layer.type === 'vector' || layer.type === 'fmv'"
     :model-value="!!selectedLayers.find((item) => (item.id === layer.id))"
     class="layer-checkbox"
     density="compact"

client/src/components/DataSelection/UploadFile.vue

@@ -13,7 +13,9 @@ export default defineComponent({
     const uploadProgress = ref<number>(0);
     const uploadFile = ref<File | null>(null);
     const uploadError = ref<unknown>();
-    const acceptTypes = ref('.geojson, .json, .tif, .tiff, .zip, .gpkg, .nc');
+    const acceptTypes = ref(
+      '.geojson, .json, .tif, .tiff, .zip, .gpkg, .nc, .mpg, .mp4, .avi, .mov, .mkv, .webm, .jpg, .jpeg, .png, .gif',
+    );
 
     const fileInput = ref<HTMLInputElement | null>(null);