Add toggle to show hidden parameters

#65

src/components/parameter-schema/ParameterSchemaDescriptionComponent.vue

 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import ParameterGroupDescription from "@/components/parameter-schema/description-mode/ParameterGroupDescription.vue";
 import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
 
@@ -16,15 +16,28 @@ type ParameterGroup = {
   icon?: string;
 };
 
-const navParameterGroups = computed<ParameterGroup[]>(() =>
-  Object.keys(parameterGroups.value).map((group) => {
+const showHidden = ref<boolean>(false);
+
+const navParameterGroups = computed<ParameterGroup[]>(() => {
+  let groups = Object.keys(parameterGroups.value).map((group) => {
     return {
       group: group,
       title: parameterGroups.value[group]["title"],
       icon: parameterGroups.value[group]["fa_icon"],
     };
-  }),
-);
+  });
+  if (!showHidden.value) {
+    groups = groups.filter(
+      // filter all groups that have only hidden parameters
+      (group) =>
+        Object.keys(parameterGroups.value[group.group]["properties"]).filter(
+          (key) =>
+            !parameterGroups.value[group.group]["properties"][key]["hidden"],
+        ).length > 0,
+    );
+  }
+  return groups;
+});
 
 const parameterGroups = computed<Record<string, never>>(
   () => props.schema["definitions"],
@@ -38,6 +51,7 @@ const parameterGroups = computed<Record<string, never>>(
         <parameter-group-description
           :parameter-group="group"
           :parameter-group-name="groupName"
+          :show-hidden="showHidden"
         />
       </div>
     </div>
@@ -53,15 +67,31 @@ const parameterGroups = computed<Record<string, never>>(
               v-for="group in navParameterGroups"
               :key="group.group"
             >
-              <a :href="'#' + group.group"
-                ><font-awesome-icon
+              <a :href="'#' + group.group">
+                <font-awesome-icon
                   :icon="group.icon"
                   v-if="group.icon"
                   class="me-2"
-                />{{ group.title }}</a
+                />
+                {{ group.title }}</a
               >
             </li>
           </ul>
+          <div class="mx-auto mb-3">
+            <input
+              type="checkbox"
+              class="btn-check ms-1"
+              id="btn-check-outlined"
+              v-model="showHidden"
+              autocomplete="off"
+            />
+            <label class="btn btn-outline-primary" for="btn-check-outlined">
+              <font-awesome-icon
+                :icon="showHidden ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
+              />
+              Show hidden Parameters
+            </label>
+          </div>
         </nav>
       </nav>
     </div>

src/components/parameter-schema/ParameterSchemaFormComponent.vue

@@ -62,12 +62,14 @@ const formState = reactive<{
   pipelineNotes: string;
   report_bucket?: string;
   errorType?: string;
+  showHidden: boolean;
 }>({
   formInput: {},
   validated: false,
   pipelineNotes: "",
   report_bucket: undefined,
   errorType: undefined,
+  showHidden: false,
 });
 
 // Computed Properties
@@ -77,15 +79,26 @@ const parameterGroups = computed<Record<string, never>>(
 );
 
 // Create a list with the names of all parameter groups
-const navParameterGroups = computed<ParameterGroup[]>(() =>
-  Object.keys(parameterGroups.value).map((group) => {
+const navParameterGroups = computed<ParameterGroup[]>(() => {
+  let groups = Object.keys(parameterGroups.value).map((group) => {
     return {
       group: group,
       title: parameterGroups.value[group]["title"],
       icon: parameterGroups.value[group]["fa_icon"],
     };
-  }),
-);
+  });
+  if (!formState.showHidden) {
+    groups = groups.filter(
+      // filter all groups that have only hidden parameters
+      (group) =>
+        Object.keys(parameterGroups.value[group.group]["properties"]).filter(
+          (key) =>
+            !parameterGroups.value[group.group]["properties"][key]["hidden"],
+        ).length > 0,
+    );
+  }
+  return groups;
+});
 
 // Watchers
 // =============================================================================
@@ -117,6 +130,7 @@ function updateSchema(schema: Record<string, any>) {
   ]);
   formState.formInput = Object.fromEntries(b);
 }
+
 /* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
 function startWorkflow() {
   errorToast?.hide();
@@ -251,6 +265,7 @@ onMounted(() => {
           v-if="formState.formInput[groupName]"
           :parameter-group-name="groupName"
           :parameter-group="group"
+          :showHidden="formState.showHidden"
         />
       </template>
     </form>
@@ -303,8 +318,8 @@ onMounted(() => {
         <nav v-if="props.schema" class="nav">
           <ul class="ps-0">
             <li class="nav-link">
-              <a href="#pipelineGeneralOptions"
-                ><font-awesome-icon icon="fa-solid fa-gear" class="me-2" />
+              <a href="#pipelineGeneralOptions">
+                <font-awesome-icon icon="fa-solid fa-gear" class="me-2" />
                 General Pipeline Options
               </a>
             </li>
@@ -313,15 +328,35 @@ onMounted(() => {
               v-for="group in navParameterGroups"
               :key="group.group"
             >
-              <a :href="'#' + group.group"
-                ><font-awesome-icon
+              <a :href="'#' + group.group">
+                <font-awesome-icon
                   :icon="group.icon"
                   v-if="group.icon"
                   class="me-2"
-                />{{ group.title }}</a
+                />
+                {{ group.title }}</a
               >
             </li>
           </ul>
+          <div class="mx-auto mb-3">
+            <input
+              type="checkbox"
+              class="btn-check ms-1"
+              id="btn-check-outlined"
+              v-model="formState.showHidden"
+              autocomplete="off"
+            />
+            <label class="btn btn-outline-primary" for="btn-check-outlined">
+              <font-awesome-icon
+                :icon="
+                  formState.showHidden
+                    ? 'fa-solid fa-eye'
+                    : 'fa-solid fa-eye-slash'
+                "
+              />
+              Show hidden Parameters
+            </label>
+          </div>
         </nav>
         <!-- Loading nav links -->
         <div v-else class="placeholder-glow ps-3 pt-3">

src/components/parameter-schema/description-mode/ParameterDescription.vue

@@ -16,6 +16,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showHidden: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const randomIDSuffix = Math.random().toString(16).substring(2, 8);
@@ -32,7 +36,7 @@ const defaultValue = computed<string | undefined>(
 const enumValues = computed<string[] | undefined>(
   () => props.parameter["enum"]?.map((val: string) => val.toString()),
 );
-// const hidden = computed<boolean>(() => props.parameter["hidden"] ?? false);
+const hidden = computed<boolean>(() => props.parameter["hidden"] ?? false);
 const parameterPattern = computed<string | undefined>(
   () => props.parameter["pattern"],
 );
@@ -48,6 +52,7 @@ const showRightColum = computed<boolean>(
 <template>
   <div
     class="row border-top border-bottom border-secondary align-items-start py-2"
+    v-if="showHidden || !hidden"
   >
     <div class="fs-6 col-3">
       <font-awesome-icon :icon="icon" v-if="icon" class="me-2" />

src/components/parameter-schema/description-mode/ParameterGroupDescription.vue

@@ -15,12 +15,16 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  showHidden: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const title = computed<string>(() => props.parameterGroup["title"]);
 const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
 const description = computed<string>(() => props.parameterGroup["description"]);
-/*
+
 const groupHidden = computed<boolean>(() =>
   Object.keys(parameters.value).reduce(
     (acc: boolean, val: string) => acc && parameters.value[val]["hidden"],
@@ -28,14 +32,13 @@ const groupHidden = computed<boolean>(() =>
   ),
 );
 
- */
 const parameters = computed<Record<string, never>>(
   () => props.parameterGroup["properties"],
 );
 </script>
 
 <template>
-  <div class="mb-5">
+  <div class="mb-5" v-if="props.showHidden || !groupHidden">
     <div class="row">
       <h2 :id="props.parameterGroupName">
         <font-awesome-icon :icon="icon" class="me-3" v-if="icon" />{{ title }}
@@ -53,6 +56,7 @@ const parameters = computed<Record<string, never>>(
         :required="
           props.parameterGroup['required']?.includes(parameterName) ?? false
         "
+        :show-hidden="showHidden"
       />
     </template>
   </div>

src/components/parameter-schema/form-mode/ParameterGroupForm.vue

@@ -23,6 +23,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  showHidden: {
+    type: Boolean,
+    default: false,
+  },
 });
 const title = computed<string>(() => props.parameterGroup["title"]);
 const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
@@ -71,7 +75,7 @@ watch(
 </script>
 
 <template>
-  <div class="card mb-3" :hidden="groupHidden">
+  <div class="card mb-3" :hidden="!showHidden && groupHidden">
     <h2 class="card-header" :id="props.parameterGroupName">
       <font-awesome-icon :icon="icon" class="me-2" v-if="icon" />
       {{ title }}
@@ -82,7 +86,7 @@ watch(
         v-for="(parameter, parameterName) in parameters"
         :key="parameterName"
       >
-        <div :hidden="parameter['hidden']">
+        <div :hidden="!showHidden && parameter['hidden']">
           <div class="input-group">
             <span class="input-group-text" :id="parameterName + '-help'">
               <font-awesome-icon