vue-girder-slicer-cli-ui 0.0.8

package/src/components/GirderSlicerTaskCard.tw.vue

@@ -0,0 +1,184 @@
+<script lang="ts">
+import { PropType, Ref, computed, defineComponent, ref, watch } from 'vue';
+import parse from '../parser/parse';
+import GirderControlsPanel from './GirderControlsPanel.tw.vue';
+import RestClient from '../api/girderRest';
+import { JobResponse, useGirderSlicerApi } from '../api/girderSlicerApi';
+import type { XMLParameters, XMLSpecification } from '../parser/parserTypes';
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiClose } from '@mdi/js';
+export default defineComponent({
+  name:'GirderSlicerTaskCard',
+  compatConfig: { mode: 2 },
+  components: {
+    GirderControlsPanel,
+    SvgIcon
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: 'api/v1',
+    },
+    taskId: {
+      type: String as PropType<string | null>,
+      default: '64e8aff6072d5e5fbb8719aa'
+    },
+    defaults: {
+        type: Function as PropType<(item: XMLParameters) => undefined | null | XMLParameters>,
+        default: (_item: XMLParameters) => undefined,
+    }
+  },
+  setup(props, { emit }) {
+    const girderRest = new RestClient({apiRoot: props.apiUrl});
+    girderRest
+    const loggedIn = computed(() => girderRest?.token);
+    const result: Ref<XMLSpecification | null> = ref(null);
+    const jobData: Ref<null | JobResponse> = ref(null)
+    const slicerApi = useGirderSlicerApi(girderRest);
+    const getData = async () => {
+      if (props.taskId) {
+        const response = await slicerApi.getSlicerXML(props.taskId);
+        const parseParams = parse(response.data);
+        // We need to assign default values if they exists
+        const updateParams: {panelIndex: number, groupIndex: number, parameterIndex: number, value: XMLParameters}[] = [];
+        parseParams.panels.forEach((panel, panelIndex) => {
+          panel.groups.forEach((group, groupIndex) => {
+            group.parameters.forEach((parameter, parameterIndex) => {
+              const paramResult = props.defaults(parameter);
+              if (paramResult && parseParams) {
+                // Reset the parameter
+                updateParams.push({
+                  panelIndex,
+                  groupIndex,
+                  parameterIndex,
+                  value: paramResult,
+                });
+              }
+            });
+          });
+        });
+        updateParams.forEach((item) => {
+          if (parseParams) {
+            parseParams.panels[item.panelIndex].groups[item.groupIndex].parameters[item.parameterIndex] = item.value;
+          }
+        });
+        result.value = parseParams;
+      }
+    }
+    if (props.taskId) {
+      getData();
+    }
+    watch(() => props.taskId, () => {
+      getData();
+    })
+    const updateParameters = (e: XMLParameters[], index: number) => {
+      if (result.value) {
+        result.value.panels[index].groups[0].parameters = e;
+      }
+    }
+    const runTask = async () => {
+      // First we need to validate the task has all parameters required.
+      if (result.value && props.taskId) {
+        const resp = await slicerApi.runTask(result.value, props.taskId);
+        if (resp) {
+          console.log(resp);
+          jobData.value = resp;
+          emit('run-task', jobData.value);
+        }
+      }
+    }
+    const processInput = async (name: string) => {
+      if (result.value) {
+        await slicerApi.processInput(result.value, name);
+      }
+    }
+
+    const cancel = () => {
+      result.value = null;
+      emit('cancel')
+    }
+    return {
+      result,
+      runTask,
+      cancel,
+      updateParameters,
+      processInput,
+      jobData,
+      loggedIn,
+      mdiClose,
+    }
+  }
+});
+</script>
+<template>
+  <div
+    v-if="result"
+    class="gsu-card relative flex flex-col min-w-0 rounded break-words border pa-2"
+  >
+    <div class="flex-auto p-6">
+      <div class="grid grid-cols-12 gap-4 pb-2">
+        <span class="col-span-12">
+          <h5>
+            {{ result.title }}
+          </h5>
+        </span>
+      </div>
+      <div
+        v-if="jobData"
+        class="mb-3 flex flex-wrap justify-content-left g-0"
+      >
+        <div
+          class="relative px-3 py-3 mb-4 border rounded text-green-darker border-green-dark bg-green-lighter  opacity-0 opacity-100 block"
+          role="alert"
+        >
+          <span>{{ jobData.title }} running</span>
+          <svg-icon
+            type="mdi"
+            :path="mdiClose"
+            :size="30"
+            class="pb-2 gsu-icon gsu-clickable"
+            data-dismiss="modal"
+            aria-label="Close"
+            style="float:right"
+            @click="jobData = null"
+          >
+            <span aria-hidden="true">&times;</span>
+          </svg-icon>
+        </div>
+      </div>
+      <p class="mb-0">
+        {{ result.description }}
+      </p>
+      <GirderControlsPanel
+        v-for="(panel, index) in result.panels"
+        :key="`panel_${index}`"
+        :panel="panel"
+        :collapse-override="!!jobData"
+        @change="updateParameters($event, index)"
+        @input-selected="processInput($event)"
+      />
+    </div>
+    <div class="flex-auto p-6">
+      <div class="grid gap-4 pb-2 justify-items-end">
+        <span>
+          <button
+            type="button"
+            class="bg-red-500 border-solid border-borderColor font-bold py-2 px-4 mx-2 rounded border-2"
+            @click="cancel()"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="gsu-btn-accept font-bold py-2 px-4 mx-2 rounded border-2"
+            @click="runTask()"
+          >
+            Run
+          </button>
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+</style>

package/src/components/GirderSlicerTaskMenu.tw.vue

@@ -0,0 +1,217 @@
+<script lang="ts">
+import { Ref, computed, defineComponent, onMounted, ref } from "vue";
+import { extractImageInfo } from "../utils";
+import RestClient from "../api/girderRest";
+import { SlicerImage, useGirderSlicerApi } from "../api/girderSlicerApi";
+import { mdiAlert, mdiChevronDown, mdiChevronRight } from "@mdi/js";
+import SvgIcon from "@jamescoyle/vue-icon";
+import { cloneDeep } from 'lodash';
+import { PropType } from "vue/types/v3-component-props";
+
+interface TaskInfo {
+    tag: string;
+    tasks: {
+      imageBase: string;
+      imageTag: string;
+      _id: string;
+      name: string;
+      description: string;
+    }[];
+}
+
+type TaskHierarchy = Record<
+  string,
+  [TaskInfo]
+>;
+export default defineComponent({
+  components: {
+    SvgIcon,
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: "api/v1",
+    },
+    filter: {
+      type: Function as PropType<(task: SlicerImage) => boolean>,
+      default: (_task: SlicerImage) => true,
+    },
+  },
+  setup(props, { emit }) {
+    const girderRest = new RestClient({ apiRoot: props.apiUrl });
+    const loggedIn = computed(() => girderRest?.token);
+    const slicerApi = useGirderSlicerApi(girderRest);
+    const results: Ref<TaskHierarchy> = ref({});
+    const clicked: Ref<Record<string, boolean>> = ref({})
+    const selected: Ref<null | string> = ref(null);
+    const getData = async () => {
+      try {
+        const response = await slicerApi.getSlicerList();
+        const filtered = response.data.filter((task) => props.filter(task));
+        // ground items by their image
+        const taskHierarchy: TaskHierarchy = {};
+        filtered.forEach((task) => {
+          // Lets get the base image name
+          const imageInfo = extractImageInfo(task.image);
+          if (imageInfo) {
+            // We create a root for it
+            if (taskHierarchy[imageInfo.baseName] === undefined) {
+              clicked.value[imageInfo.baseName] = false;
+              taskHierarchy[imageInfo.baseName] = [
+                { tag: imageInfo.tag, tasks: [] },
+              ];
+            }
+            const foundIndex = taskHierarchy[imageInfo.baseName].findIndex(
+              (item) => item.tag === imageInfo.tag
+            );
+            if (foundIndex !== -1) {
+              clicked.value[`${imageInfo.baseName}.${imageInfo.tag}`] = false;
+              taskHierarchy[imageInfo.baseName][foundIndex].tasks.push({
+                imageBase: imageInfo.baseName,
+                imageTag: imageInfo.tag,
+                _id: task._id,
+                name: task.name,
+                description: task.description,
+              });
+            } else if (foundIndex === -1) {
+              taskHierarchy[imageInfo.baseName].push({
+                tag: imageInfo.tag,
+                tasks: [
+                  {
+                    imageBase: imageInfo.baseName,
+                    imageTag: imageInfo.tag,
+                    _id: task._id,
+                    name: task.name,
+                    description: task.description,
+                  },
+                ],
+              });
+            }
+          }
+        });
+        results.value = taskHierarchy;
+      } catch (err) {
+        console.error("Cannot communicate with server");
+      }
+    };
+    const select = (id: string, name: string) => {
+      emit("selected", {id, name});
+      selected.value = id;
+    };
+    onMounted(() => {
+      getData();
+    });
+    const selectItem = (item: string) => {
+        const tempClicked = cloneDeep(clicked.value);
+        if (tempClicked[item]) {
+            //Then we toggle it off and all children
+            tempClicked[item] = false;
+        } else {
+            Object.keys(tempClicked).forEach((key) => tempClicked[key] = false );
+            const splits = item.split('.');
+            const builtString: string[] = [];
+            splits.forEach((key) => {
+                builtString.push(key);
+                const testString = builtString.join('.');
+                if (tempClicked[testString] !== undefined) {
+                    tempClicked[testString] = true;
+                }
+            });
+        }
+        clicked.value = tempClicked;
+
+    }
+    return {
+      results,
+      mdiAlert,
+      mdiChevronDown,
+      mdiChevronRight,
+      loggedIn,
+      select,
+      clicked,
+      selectItem,
+      selected,
+    };
+  },
+});
+</script>
+<template>
+  <div>
+    <div v-if="loggedIn">
+      <ul
+        class="text-textColor"
+      >
+        <li
+          v-for="(item, key) in results"
+          :key="key"
+        >
+        <span class="gsu-menu-item rounded-t py-2 px-4 block whitespace-no-wrap" @click="selectItem(item.length === 1 ? `${key}.${item[0].tag}` : key )" >
+            <span class="pr-1 flex-1"
+              >{{ item.length === 1 ? `${key}:${item[0].tag}` : key }}
+            </span>
+            <span class="mr-auto">
+                <svg-icon type="mdi" :path="clicked[item.length === 1 ? `${key}.${item[0].tag}` : key] ? mdiChevronDown : mdiChevronRight" :size="30" class="pb-1" style="display:inline" />
+            </span>
+        </span>
+          <ul
+            v-if="item.length === 1 && clicked[`${key}.${item[0].tag}`]"
+            class="text-textColor"
+          >
+            <li
+              v-for="task in item[0].tasks"
+              :key="task._id"
+              class="gsu-menu-item py-2 px-4 block whitespace-no-wrap pl-8"
+              @click="select(task._id, `${key}:${item[0].tag} -> ${task.name}`)"
+              :class="`${task._id === selected ? 'bg-highlightedColor': ''}`"
+            >
+              {{ task.name }}
+            </li>
+          </ul>
+          <ul
+            v-else-if="clicked[key] && item.length > 1"
+            class="text-textColor"
+          >
+            <li
+              v-for="tag in item"
+              :key="tag.tag"
+            >
+            <span class="py-2 px-4 block whitespace-no-wrap pl-8" @click="selectItem(`${key}.${tag.tag}`)">
+                <span class="pr-1">{{ tag.tag }}</span>
+                <span class="mr-auto">
+                  <svg-icon type="mdi" :path="clicked[`${key}.${tag.tag}`] ? mdiChevronDown : mdiChevronRight" :size="30" class="pb-1" style="display:inline" />
+
+                </span>
+            </span>
+              <ul
+                v-if="clicked[`${key}.${tag.tag}`]"
+                class="text-textColor"
+              >
+                <li
+                  v-for="task in tag.tasks"
+                  :key="task._id"
+                  @click="select(task._id,`${key}:${tag.tag} -> ${task.name}` )"
+                  class="py-2 px-4 block whitespace-no-wrap pl-12"
+                  :class="`${task._id === selected ? 'bg-bgMutedColor': ''}`"
+                >
+                  <span class=" py-2 px-4 block whitespace-no-wrap" href="#">
+                  {{ task.name }}
+                  </span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div v-else class="mx-6">
+        <span>
+            Error
+            <svg-icon style="display:inline" type="mdi" color="orange" :path="mdiAlert" :size="30" class="pb-1" />
+        </span>
+        <div>The User is not logged in.</div>
+    </div>
+  </div>
+</template>
+<style scoped lang="scss">
+
+</style>

package/src/components/GlicerSlicerTaskMenuModal.tw.vue

@@ -0,0 +1,77 @@
+<script lang="ts">
+import { defineComponent,  ref } from "vue";
+import SvgIcon from "@jamescoyle/vue-icon";
+import Modal from './FileBrowser/Modal.tw.vue';
+import GirderSlicerTaskMenu from "./GirderSlicerTaskMenu.tw.vue";
+import { SlicerImage } from "../api/girderSlicerApi";
+import { PropType } from "vue/types/v3-component-props";
+
+export default defineComponent({
+  components: {
+    SvgIcon,
+    Modal,
+    GirderSlicerTaskMenu,
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: "api/v1",
+    },
+    filter: {
+      type: Function as PropType<(task: SlicerImage) => boolean>,
+      default: (_task: SlicerImage) => true,
+    },
+  },
+  setup(_props, { emit }) {
+    const accept = () => {
+        emit('selected', selectedId.value);
+    };
+    const selectedId = ref('');
+    const selectedName = ref('');
+    const processSelected = (data: { id: string, name: string }) => {
+        selectedId.value = data.id;
+        selectedName.value = data.name;
+    }
+    const selected = ref('');
+    return {
+        accept,
+        processSelected,
+        selected,
+        selectedId,
+        selectedName,
+    };
+  },
+});
+</script>
+<template>
+<span>
+    <Modal 
+    :disabled-confirm="!selectedName"
+    @cancel="$emit('cancel')"
+    @confirm="accept()"
+    >
+        <template slot="header">
+            <span>Task Selection</span>
+        </template>
+        <template slot="body">
+            <GirderSlicerTaskMenu
+            :api-url="apiUrl"
+            :filter="filter"
+            @selected="processSelected($event)"
+            />
+            <div v-if="selectedName" class="flex flex-row justify-items-center">
+                <div class="ma-auto">
+                    <span class="px-2">Selected:</span>
+                    <span class="px-2" > {{  selectedName }}</span>
+                </div>
+            </div>
+            </template> 
+    </Modal>
+</span>
+</template>
+<style scoped lang="scss">
+.dropdown:hover > .dropdown-content {
+	display: block;
+}
+
+</style>

package/src/components/GlicerSlicerTaskMenuModalButton.tw.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+import SvgIcon from "@jamescoyle/vue-icon";
+import Modal from './FileBrowser/Modal.tw.vue';
+import GirderSlicerTaskMenu from "./GirderSlicerTaskMenu.tw.vue";
+import RestClient from "../api/girderRest";
+import { mdiAlert } from "@mdi/js";
+import { PropType } from "vue/types/v3-component-props";
+import { SlicerImage } from "../api/girderSlicerApi";
+export default defineComponent({
+  components: {
+    SvgIcon,
+    Modal,
+    GirderSlicerTaskMenu,
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: "api/v1",
+    },
+    filter: {
+      type: Function as PropType<(task: SlicerImage) => boolean>,
+      default: (_task: SlicerImage) => true,
+    },
+  },
+  setup(props, { emit }) {
+    const modalOpen = ref(false);
+    const girderRest = new RestClient({ apiRoot: props.apiUrl });
+    const loggedIn = computed(() => girderRest?.token);
+
+    const accept = () => {
+        emit('selected', selectedId.value);
+        modalOpen.value = false;
+    };
+    const selectedId = ref('');
+    const selectedName = ref('');
+    const processSelected = (data: { id: string, name: string }) => {
+        selectedId.value = data.id;
+        selectedName.value = data.name;
+    }
+    const selected = ref('');
+
+    const clearSelection = () => {
+      selectedId.value = '';
+      selectedName.value = '';
+      selected.value = '';
+    }
+    return {
+        modalOpen,
+        accept,
+        processSelected,
+        clearSelection,
+        selected,
+        selectedId,
+        selectedName,
+        loggedIn,
+        mdiAlert,
+    };
+  },
+});
+</script>
+<template>
+<span>
+    <button
+        class="gsu-btn font-semibold py-2 px-4 rounded inline-flex items-center
+        rounded-sm flex items-center min-w-32 border-2 border-solid border-borderColor"
+        @click="modalOpen = true"
+      >
+      <span v-if="!loggedIn" class="pr-1 font-semibold flex-1">
+        Log In
+        <svg-icon style="display:inline" type="mdi" color="orange" :path="mdiAlert" :size="30" class="pb-1" />
+      </span>
+      <span v-else-if="!selectedName" class="pr-1 font-semibold flex-1">Choose Task</span>
+      <span v-else-if="selectedName" class="pr-1 text-xs font-semibold flex-1">{{ selectedName }}</span>
+    </button>
+    <Modal 
+    :isVisible="modalOpen"
+    :disabled-confirm="!selectedName"
+    @cancel="modalOpen =false; $emit('cancel')"
+    @confirm="accept()"
+    >
+        <template slot="header">
+            <span>Task Selection</span>
+        </template>
+        <template slot="body">
+            <GirderSlicerTaskMenu
+            :api-url="apiUrl"
+            :filter="filter"
+            @selected="processSelected($event)"
+            />
+            <div v-if="selectedName" class="flex flex-row justify-items-center">
+                <div class="ma-auto">
+                    <span class="px-2">Selected:</span>
+                    <span class="px-2" > {{  selectedName }}</span>
+                </div>
+            </div>
+            </template> 
+    </Modal>
+</span>
+</template>
+<style scoped lang="scss">
+.dropdown:hover > .dropdown-content {
+	display: block;
+}
+
+</style>

package/src/components/GriderSlicerTasksIntegrated.tw.vue

@@ -0,0 +1,73 @@
+<script lang="ts">
+import { Ref, defineComponent, ref, PropType } from 'vue';
+import GirderSlicerTaskMenuModalButton from './GlicerSlicerTaskMenuModalButton.tw.vue';
+import GirderSlicerTaskCard from './GirderSlicerTaskCard.tw.vue';
+import type { XMLParameters } from '../parser/parserTypes';
+import { SlicerImage } from '../api/girderSlicerApi';
+
+
+export default defineComponent({
+  name: 'GirderSlicerTasksIntegrated',
+  components: {
+    GirderSlicerTaskCard,
+    GirderSlicerTaskMenuModalButton,
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: 'api/v1',
+    },
+    filter: {
+      type: Function as PropType<(task: SlicerImage) => boolean>,
+      default: (_task: SlicerImage) => true,
+    },
+    defaults: {
+        type: Function as PropType<(item: XMLParameters) => undefined | null | XMLParameters>,
+        default: (_item: XMLParameters) => undefined,
+    }
+  },
+  setup() {
+    const selected: Ref<string | null> = ref(null);
+    const menuModelButton: Ref<typeof GirderSlicerTaskMenuModalButton | null> = ref(null);
+    const select = (id: string) => {
+      selected.value = id;
+    }
+    const cancel = () => {
+      if (menuModelButton.value) {
+        menuModelButton.value.clearSelection();
+      }
+      selected.value = null;
+    }
+    return {
+      selected,
+      select,
+      cancel,
+      menuModelButton,
+    };
+
+  },
+});
+</script>
+
+<template>
+    <div
+    class="card"
+    >
+        <div class="card-body">
+            <div class="card-title justify-content-center row g-20">
+                <div class="col">
+                    <girder-slicer-task-menu-modal-button
+                        ref="menuModelButton"
+                        :filter="filter"
+                        @selected="select($event)"
+                    />
+                    <girder-slicer-task-card :task-id="selected" :defaults="defaults" @cancel="cancel()" @run-task="$emit('run-task', $event)" />
+                </div>
+            </div>
+        </div>
+  </div>
+</template>
+
+<style>
+
+</style>