Add extra params component to show fields specified in validation_sch…

…ema of instrument_type that needs things populated in extra_params

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ocs-component-lib",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "private": false,
   "description": "Component library for an astronomical observatory control system frontend",
   "scripts": {

src/components/RequestGroupComposition/Configuration.vue

@@ -307,6 +307,14 @@
               </data-loader>
             </custom-modal>
             <!-- End dither fields -->
+            <extra-params-fields
+              :extra-params.sync="configuration.extra_params"
+              :validation-schema="extraParamsValidationSchema"
+              :errors="getFromObject(errors, 'extra_params', {})"
+              :parent-show="show"
+              @extraparamsupdate="update"
+            >
+            </extra-params-fields>
           </b-form>
         </b-col>
       </b-row>
@@ -388,6 +396,7 @@ import ConstraintsPanel from '@/components/RequestGroupComposition/ConstraintsPa
 import Target from '@/components/RequestGroupComposition/Target.vue';
 import DitherPatternPlot from '@/components/Plots/DitherPatternPlot.vue';
 import DataLoader from '@/components/Util/DataLoader.vue';
+import ExtraParamsFields from '@/components/RequestGroupComposition/ExtraParamsFields.vue';
 import { collapseMixin } from '@/mixins/collapseMixins.js';
 import { getFromObject, objAsString } from '@/util';
 import requestExpansionWithModalConfirm from '@/composables/requestExpansionWithModalConfirm.js';
@@ -403,6 +412,7 @@ export default {
     CustomAlert,
     InstrumentConfigPanel,
     DitherPatternPlot,
+    ExtraParamsFields,
     ConstraintsPanel,
     Target
   },
@@ -624,6 +634,9 @@ export default {
       }
       return _.sortBy(options, 'text');
     },
+    extraParamsValidationSchema: function() {
+      return _.get(this.availableInstruments, [this.configuration.instrument_type, 'validation_schema', 'extra_params'], {});
+    },
     ditheringIsAllowed: function() {
       return this.ditheringAllowed(this.configuration, this.requestIndex, this.index);
     },

src/components/RequestGroupComposition/CustomField.vue

@@ -23,9 +23,11 @@
           :value="value"
           :state="validationState"
           :type="type"
+          :list="field + '-field-' + $parent.id + '-list'"
           @input="update($event)"
           @blur="blur($event)"
         />
+        <b-form-datalist v-if="list" :id="field + '-field-' + $parent.id + '-list'" :options="list"></b-form-datalist>
         <slot name="inline-input" />
       </b-input-group>
       <span v-for="error in errors" :key="error" class="errors text-danger">
@@ -69,6 +71,13 @@ export default {
         return _.kebabCase(this.label);
       }
     },
+    list: {
+      // For adding a datalist of options to the form field
+      type: Array,
+      default: function() {
+        return null;
+      }
+    },
     errors: {
       validator: function(value) {
         return value === null || typeof value === 'object';

src/components/RequestGroupComposition/ExtraParamsFields.vue

@@ -0,0 +1,147 @@
+<template>
+  <span>
+    <span v-for="field in fields" :key="field.field">
+      <custom-field
+        v-if="!field.options && field.show"
+        v-model="extraParams[field.field]"
+        :field="field.field"
+        :type="field.type"
+        :errors="fieldError(field.field)"
+        :label="field.label"
+        :desc="field.description"
+        :hide="!show"
+        hide-when-collapsed
+        @input="update"
+      >
+      </custom-field>
+      <custom-select
+        v-if="field.options && field.show"
+        v-model="extraParams[field.field]"
+        :field="field.field"
+        :options="field.options"
+        :errors="fieldError(field.field)"
+        :label="field.label"
+        :desc="field.description"
+        :hide="!show"
+        hide-when-collapsed
+        @input="update"
+      >
+      </custom-select>
+    </span>
+  </span>
+</template>
+<script>
+import _ from 'lodash';
+import CustomField from '@/components/RequestGroupComposition/CustomField.vue';
+import CustomSelect from '@/components/RequestGroupComposition/CustomSelect.vue';
+
+export default {
+  name: 'ExtraParamsFields',
+  components: {
+    CustomField,
+    CustomSelect,
+  },
+  props: {
+    extraParams: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    validationSchema: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    errors: {
+      validator: function(value) {
+        return value === null || typeof value === 'object';
+      },
+      default: function() {
+        return null;
+      }
+    },
+    hide: {
+      type: Boolean
+    },
+    parentShow: {
+      type: Boolean
+    }
+  },
+  data: function() {
+    return {
+      show: this.parentShow
+    };
+  },
+  watch: {
+    validationSchema: function() {
+      // When the validation schema changes, this means the selected instrument type has changed
+      // Clear the extra_params section and set any default values in the schema here
+      var cleanedExtraParams = {};
+      for (let fieldIndex in this.fields) {
+        let field = this.fields[fieldIndex];
+        if (field.default) {
+          cleanedExtraParams[field.field] = field.default;
+        }
+      }
+      // Add some other extra_params fields that are handled separately back into the config if they were there
+      let separate_params = ['offset_ra', 'offset_dec'];
+      for (let index in separate_params) {
+        if (separate_params[index] in this.extraParams) {
+          cleanedExtraParams[separate_params[index]] = this.extraParams[separate_params[index]]
+        }
+      }
+      this.$emit("update:extraParams", cleanedExtraParams);
+      console.log("Schema changed!")
+    }
+  },
+  computed: {
+    fields: function() {
+      var extraParamsFields = [];
+      if (this.validationSchema) {
+        if (this.validationSchema.schema) {
+          for (const [field, schema] of Object.entries(this.validationSchema.schema)) {
+            var extraParamsField = {
+              'field': field,
+              'type': this.typeMapping(schema.type),
+              'description': schema.description,
+              'label': schema.label || _.capitalize(field).split('_').join(' '),
+              'show': schema.show || true,
+              'default': schema.default,
+              'min': schema.min,
+              'max': schema.max,
+              'options': schema.allowed,
+              'required': schema.required || false
+            };
+            extraParamsFields.push(extraParamsField);
+          }
+        }
+      }
+      return extraParamsFields;
+    }
+  },
+  methods: {
+    fieldError: function(field) {
+      if (this.errors){
+        return this.errors[field]
+      }
+      return null
+    },
+    update: function() {
+      this.$emit("extraparamsupdate");
+    },
+    typeMapping: function(type) {
+      if (type == 'string') {
+        return 'text';
+      }
+      else if(type == 'float' || type == 'integer') {
+        return 'number';
+      }
+      return type;
+    }
+  }
+};
+</script>
+<style scoped>
+</style>

src/components/RequestGroupComposition/InstrumentConfigForm.vue

@@ -84,6 +84,14 @@
       :errors="null"
       @input="update"
     />
+    <extra-params-fields
+      :extra-params.sync="instrumentConfig.extra_params"
+      :validation-schema="extraParamsValidationSchema"
+      :errors="getFromObject(errors, 'extra_params', {})"
+      :parent-show="show"
+      @extraparamsupdate="update"
+    >
+    </extra-params-fields>
   </b-form>
 </template>
 <script>
@@ -92,13 +100,15 @@ import { toRef } from '@vue/composition-api';
 import baseInstrumentConfig from '@/composables/baseInstrumentConfig.js';
 import CustomField from '@/components/RequestGroupComposition/CustomField.vue';
 import CustomSelect from '@/components/RequestGroupComposition/CustomSelect.vue';
+import ExtraParamsFields from '@/components/RequestGroupComposition/ExtraParamsFields.vue';
 import { getFromObject } from '@/util';
 
 export default {
   name: 'InstrumentConfigForm',
   components: {
     CustomField,
-    CustomSelect
+    CustomSelect,
+    ExtraParamsFields
   },
   props: {
     id: {
@@ -148,6 +158,7 @@ export default {
       rotatorModeOptions,
       requiredRotatorModeFields,
       availableOpticalElementGroups,
+      extraParamsValidationSchema,
       update,
       updateOpticalElement,
       updateInstrumentConfigExtraParam
@@ -162,6 +173,7 @@ export default {
       rotatorModeOptions,
       requiredRotatorModeFields,
       availableOpticalElementGroups,
+      extraParamsValidationSchema,
       // Methods
       update,
       updateOpticalElement,

src/components/RequestGroupComposition/RequestGroupCompositionForm.vue

@@ -132,6 +132,7 @@ export default {
                 {
                   type: 'EXPOSE',
                   instrument_type: '',
+                  extra_params: {},
                   instrument_configs: [
                     {
                       exposure_count: 1,

src/components/RequestGroupComposition/index.js

@@ -3,8 +3,9 @@ import CustomDatetime from './CustomDatetime.vue';
 import CustomField from './CustomField.vue';
 import CustomModal from './CustomModal.vue';
 import CustomSelect from './CustomSelect.vue';
+import ExtraParamsFields from './ExtraParamsFields.vue';
 import FormPanel from './FormPanel.vue';
 import RequestGroupCompositionForm from './RequestGroupCompositionForm.vue';
 import SexagesimalCustomField from './SexagesimalCustomField.vue';
 
-export { CustomAlert, CustomDatetime, CustomField, CustomModal, CustomSelect, FormPanel, RequestGroupCompositionForm, SexagesimalCustomField };
+export { CustomAlert, CustomDatetime, CustomField, CustomModal, CustomSelect, ExtraParamsFields, FormPanel, RequestGroupCompositionForm, SexagesimalCustomField };

src/components/index.js

@@ -8,6 +8,7 @@ import {
   CustomField,
   CustomModal,
   CustomSelect,
+  ExtraParamsFields,
   FormPanel,
   RequestGroupCompositionForm,
   SexagesimalCustomField
@@ -27,6 +28,7 @@ export {
   CustomSelect,
   DataLoader,
   DitherPatternPlot,
+  ExtraParamsFields,
   FormPanel,
   ObservationDetail,
   ObservationsTable,

src/composables/baseInstrumentConfig.js

@@ -43,6 +43,10 @@ export default function baseInstrumentConfig(instrumentConfig, availableInstrume
     return readoutModes;
   });
 
+  const extraParamsValidationSchema = computed(() => {
+    return _.get(availableInstruments.value, [selectedInstrument.value, 'validation_schema', 'instrument_configs', 'schema', 'schema', 'extra_params'], {});
+  });
+
   const rotatorModeOptions = computed(() => {
     let options = [];
     let requiredModeFields = [];
@@ -196,6 +200,7 @@ export default function baseInstrumentConfig(instrumentConfig, availableInstrume
     rotatorModeOptions,
     requiredRotatorModeFields,
     availableOpticalElementGroups,
+    extraParamsValidationSchema,
     // Methods
     update,
     updateOpticalElement,