vue-girder-slicer-cli-ui 0.0.8

package/src/components/FileBrowser/Modal.tw.vue

@@ -0,0 +1,82 @@
+<script lang='ts'>
+  import {defineComponent} from 'vue';
+  import { mdiClose } from '@mdi/js';
+  import SvgIcon from '@jamescoyle/vue-icon';
+
+export default defineComponent({
+    components: {
+      SvgIcon
+    },
+    props: {
+        isVisible: {
+            type: Boolean,
+            default: false,
+        },
+        disabledConfirm: {
+          type: Boolean,
+          default: true,
+        }
+    },
+    setup(_, { emit}) {
+        const cancel = () => {
+            emit('cancel')
+        }
+        const confirm = () => {
+            emit('confirm')
+        }
+        return {
+            cancel,
+            confirm,
+            mdiClose,
+
+        }
+    }
+})
+</script>
+
+<template>
+<div v-if="isVisible">
+    <div class="fixed inset-0 z-50 flex justify-center items-center ">
+      <div class="gsu-card flex flex-col max-w-5xl rounded-lg shadow-lg">
+        <!-- Header -->
+        <div class="p-5">
+          <div class="grid grid-cols-12">
+            <span class="col-span-10 text-xl my-2 ml-5">
+              <slot name="header">
+              <h3 class="text-2xl font-semibold">Modal Header</h3>
+            </slot>
+            </span>
+            <span class="col-start-12 col-span-1 justify-self-end mr-5 my-2	" @click="$emit('cancel')">
+            <svg-icon
+              type="mdi"
+              :path="mdiClose"
+              :size="30"
+              class="gsu-icon gsu-clickable"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </svg-icon>
+          </span>
+          </div>
+        </div>
+        
+        <slot name="body">
+          <div class="p-6">
+            <p>This is a modal body content. Let's make this line a bit longer to see the width.</p>
+          </div>
+        </slot>
+        
+        <div class="p-6 flex justify-end items-center">
+          <button class="bg-red-500 border-solid border-2 border-borderColor font-bold py-2 px-4 rounded" @click="cancel">Cancel</button>
+          <button 
+            class=" btn ml-2 font-bold py-2 px-4 rounded"
+            :class="{ 'gsu-disabled-button': disabledConfirm, 'gsu-btn-accept': !disabledConfirm }"
+            @click="!disabledConfirm && confirm()"
+          >Confirm</button>
+        </div>
+      </div>
+    </div>
+    <div class="opacity-25 fixed inset-0 z-40 bg-black"></div>
+  </div>
+</template>

package/src/components/FileBrowser/RootSelection.tw.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+import { PropType, computed, defineComponent } from 'vue'
+import { GirderModel, GirderModelType} from '../../girderTypes';
+export default defineComponent({
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+    home: {
+      type: String,
+      required: true,
+    },
+    users: {
+      type: Array as PropType<GirderModel[]>,
+      required: true,
+    },
+    collections: {
+      type: Array as PropType<GirderModel[]>,
+      required: true,
+    }
+  },
+  setup(props, { emit }) {
+    const filteredUsers = computed(() => props.users?.filter((item) => item._id !== props.home));
+    const update = (e: Event) => {
+        let type: GirderModelType = 'user';
+        const val = (e.target as HTMLSelectElement).value;
+        let name = '';
+        if (props.collections && props.users) {
+            const findType = props.collections.concat(props.users)
+            const found = findType.find((item) => item._id === val);
+            if (found) {
+                type = found._modelType;
+                if (type === 'user') {
+                    name = `${found.firstName} ${found.lastName}`
+                } else {
+                    name = found.name;
+                }
+            }
+        }
+        emit('change', {val, type, name});
+    }
+    return {
+      filteredUsers,
+      update,
+    }
+  }
+});
+</script>
+<template>
+  <select
+    :value="value"
+    class="root-select bg-backgroundColor border-solid border-2 border-bgMutedColor"
+    @change="update($event)"
+  >
+    <option :value="home">
+      Home
+    </option>
+    <optgroup label="Collections">
+      <option
+        v-for="item in collections"
+        :key="item._id"
+        :value="item._id"
+      >
+        {{ item.name }}
+      </option>
+    </optgroup>
+    <optgroup label="Users">
+      <option
+        v-for="item in filteredUsers"
+        :key="item._id"
+        :value="item._id"
+      >
+        {{ item.login }}
+      </option>
+    </optgroup>
+  </select>
+</template>
+<style scoped>
+.root-select {
+  height: 34px;
+}
+</style>

package/src/components/FileBrowser/utils.ts

@@ -0,0 +1,48 @@
+const sizeFormatter =(size: number, { base = 1024, unit = 'B' } = {})  =>{
+    if (size < base) {
+    return `${size} ${unit}`;
+    }
+
+    let i;
+    let val = size;
+    for (i = 0; val >= base && i < 4; i += 1) {
+    val /= base;
+    }
+
+    return `${val.toFixed(2)}  ${['', 'K', 'M', 'G', 'T'][i]}${unit}`;
+};
+
+const countFormatter = (count: number | null) => {
+  if (count && count > 1000) {
+    return `${(count / 1000).toFixed(2)}k`;
+  }
+  return count ? count : 0;
+}
+
+const convertInputNumber = (e: Event) => {
+    const val = (e.target as HTMLInputElement).value;
+    return parseInt(val);
+  }
+
+const convertInputString= (e: Event) => {
+  const val = (e.target as HTMLInputElement).value;
+  return val as string;
+}
+
+function isValidRegex(pattern: string) {
+  try {
+    new RegExp(pattern);
+    return true;
+  } catch (error) {
+    // The RegExp constructor throws a SyntaxError if the pattern is invalid.
+    return false;
+  }
+}
+
+export {
+    sizeFormatter,
+    isValidRegex,
+    countFormatter,
+    convertInputNumber,
+    convertInputString,
+}

package/src/components/GirderControlsPanel.tw.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { PropType, defineComponent, ref } from 'vue'
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js' ;
+import SvgIcon from '@jamescoyle/vue-icon';
+import type { XMLPanel, XMLParameters } from '../parser/parserTypes';
+import GirderSlicerParameter from './GirderSlicerParameter.tw.vue';
+export default defineComponent({
+  components: {
+    GirderSlicerParameter,
+    SvgIcon,
+  },
+  props: {
+    panel: {
+    type: Object as PropType<XMLPanel>,
+    required: true,
+    },
+    collapseOverride: {
+      type: Boolean,
+      required: false,
+    }
+  },
+  setup(props, { emit }) {
+  const collapsed = ref(!props.panel.advanced)
+  const updateParams = (e: XMLParameters[]) =>{
+    emit('change', e);
+  };
+  return {
+    collapsed,
+    updateParams,
+    mdiChevronDown,
+    mdiChevronUp,
+  }
+}
+});
+</script>
+<template>
+  <div class="gsu-card relative flex flex-col min-w-0 rounded break-words">
+    <div
+      v-if="panel.groups.length === 1"
+      class="mb-3 mb-0"
+    >
+      <div
+        class="flex flex-wrap justify-content-left g-0"
+        @click="collapsed = !collapsed"
+      >
+        <div class=":flex-growauto">
+          <svg-icon
+            type="mdi"
+            :path="collapsed ? mdiChevronUp : mdiChevronDown"
+            :size="30"
+            class="pb-2 icon"
+          />
+        </div>
+        <div class=":flex-growauto">
+          <h5>
+            {{ panel.groups[0].label }}
+          </h5>
+        </div>
+      </div>
+      <div
+        v-if="!collapsed"
+        class="flex flex-wrap pad-left"
+      >
+        <girder-slicer-parameter
+          :parameters="panel.groups[0].parameters"
+          @change="updateParams($event)"
+          @input-selected="$emit('input-selected', $event)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.icon:hover {
+  cursor: pointer;
+}
+.collapse-enter-active {
+  animation: collapsing reverse 500ms ease;
+}
+.collapse-leave-active {
+  animation: collapsing 500ms ease;
+}
+.pad-left {
+  padding-left: 15px;
+}
+@keyframes collapsing {
+  from {
+    max-height: 1000px;
+  }
+  to {
+    max-height: 0px;
+  }
+}
+</style>

package/src/components/GirderSlicerParameter.tw.vue

@@ -0,0 +1,84 @@
+<script lang="ts">
+import { PropType, defineComponent, onMounted, ref, } from 'vue';
+import type { XMLParameters } from '../parser/parserTypes';
+import BaseParameter from './Parameters/BaseParameter.tw.vue';
+import BooleanParameter from './Parameters/BooleanParameter.tw.vue';
+import EnumerationParameters from './Parameters/EnumerationParameters.tw.vue';
+import FileParmaeter from './Parameters/FileParameter.tw.vue';
+import ColorParameter from './Parameters/ColorParameter.tw.vue';
+export default defineComponent({
+  components: {
+    BaseParameter,
+    BooleanParameter,
+    EnumerationParameters,
+    FileParmaeter,
+    ColorParameter
+  },
+  props: {
+    parameters: {
+      type: Array as PropType<XMLParameters[]>,
+      required: true
+    }
+  },
+  setup(props, { emit }) {
+    const baseParmaeters = ['string', 'number', 'vector', 'string-vector', 'number-vector']
+    const paramCopy = ref(props.parameters);
+    onMounted(() => {
+      paramCopy.value = props.parameters;
+    })
+    const updateParameter = (data: XMLParameters, index: number) => {
+      paramCopy.value.splice(index, 1, data);
+      emit('change', paramCopy.value);
+    }
+    return {
+      baseParmaeters,
+      paramCopy,
+      updateParameter,
+    }
+  }
+});
+</script>
+<template>
+  <span>
+    <div
+      v-for="(parameter, index) in paramCopy"
+      :key="`${parameter.title}_${index}`"
+    >
+      <div class="flex flex-wrap">
+        <div class="flex-growauto">
+          <base-parameter 
+            v-if="baseParmaeters.includes(parameter.type)"
+            :data="parameter"
+            @change="updateParameter($event, index)"
+          />
+          <boolean-parameter
+            v-else-if="parameter.slicerType === 'boolean'"
+            :data="parameter"
+            @change="updateParameter($event, index)"
+          />
+          <enumeration-parameters
+            v-else-if="parameter.slicerType === 'number-enumeration' || parameter.slicerType === 'string-enumeration'"
+            :data="parameter"
+            @change="updateParameter($event, index)"
+          />
+          <file-parmaeter
+            v-else-if="['file', 'item', 'directory', 'image', 'multi'].includes(parameter.slicerType)"
+            :data="parameter"
+            @change="updateParameter($event, index)"
+            @input-selected="$emit('input-selected', $event)"
+          />
+          <color-parameter
+            v-else-if="parameter.slicerType === 'color'"
+            :data="parameter"
+            @change="updateParameter($event, index)"
+          />
+        </div>
+      </div>
+    </div>
+  </span>
+</template>
+<style scoped>
+a {
+  color: #42b983;
+}
+</style>

package/src/components/GirderSlicerTaskButton.tw.vue

@@ -0,0 +1,208 @@
+<script lang="ts">
+import { Ref, computed, defineComponent, onMounted, ref } from "vue";
+import { extractImageInfo } from "../utils";
+import RestClient from "../api/girderRest";
+import { useGirderSlicerApi } from "../api/girderSlicerApi";
+import { mdiAlert, mdiChevronDown, mdiChevronRight } from "@mdi/js";
+import SvgIcon from "@jamescoyle/vue-icon";
+import { OnClickOutside } from '@vueuse/components'
+
+type TaskHierarchy = Record<
+  string,
+  {
+    tag: string;
+    tasks: {
+      imageBase: string;
+      imageTag: string;
+      _id: string;
+      name: string;
+      description: string;
+    }[];
+  }[]
+>;
+export default defineComponent({
+  components: {
+    SvgIcon,
+    OnClickOutside,
+  },
+  props: {
+    apiUrl: {
+      type: String,
+      default: "api/v1",
+    },
+    filter: {
+      type: String,
+      default: "",
+    },
+  },
+  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(false);
+    const getData = async () => {
+      try {
+        const response = await slicerApi.getSlicerList();
+        // ground items by their image
+        const taskHierarchy: TaskHierarchy = {};
+        response.data.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) {
+              taskHierarchy[imageInfo.baseName] = [
+                { tag: imageInfo.tag, tasks: [] },
+              ];
+            }
+            const foundIndex = taskHierarchy[imageInfo.baseName].findIndex(
+              (item) => item.tag === imageInfo.tag
+            );
+            if (foundIndex !== -1) {
+              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) => {
+      emit("selected", id);
+    };
+    onMounted(() => {
+      getData();
+    });
+    return {
+      results,
+      mdiAlert,
+      mdiChevronDown,
+      mdiChevronRight,
+      loggedIn,
+      select,
+      clicked,
+    };
+  },
+});
+</script>
+<template>
+  <div>
+    <on-click-outside @trigger="clicked = false">
+    <div v-if="loggedIn" class="dropdown inline-block relative w-56">
+      <button
+        class="bg-backgroundColor text-textColor font-semibold py-2 px-4 rounded inline-flex items-center
+        rounded-sm flex items-center min-w-32"
+        @click="clicked = true"
+      >
+        <span class="pr-1 font-semibold flex-1">Tasks</span>
+        <span>
+          <svg-icon type="mdi" :path="mdiChevronDown" :size="30" class="pb-1" />
+
+        </span>
+      </button>
+      <ul
+        v-if="clicked"
+        class="absolute text-textColor"
+      >
+        <li
+          class="dropdown w-56"
+          v-for="(item, key) in results"
+          :key="key"
+        >
+        <a class="rounded-t bg-backgroundColor hover:bg-bgMutedColor py-2 px-4 block whitespace-no-wrap" href="#">
+            <span class="pr-1 flex-1"
+              >{{ item.length === 1 ? `${key}:${item[0].tag}` : key }}
+            </span>
+            <span class="mr-auto">
+            </span>
+          </a>
+          <ul
+            v-if="item.length === 1"
+            class="dropdown-content absolute hidden text-textColor left-44 top-0"
+          >
+            <li
+              v-for="task in item[0].tasks"
+              :key="task._id"
+              class="bg-backgroundColor hover:bg-bgMutedColor py-2 px-4 block whitespace-no-wrap"
+              @click="select(task._id)"
+            >
+              {{ task.name }}
+            </li>
+          </ul>
+          <ul
+            v-else
+            class="dropdown-content absolute hidden text-textColor left-44 top-0"
+          >
+            <li
+              v-for="tag in item"
+              :key="tag.tag"
+              class="dropdown w-56"
+            >
+            <a class="bg-backgroundColor hover:bg-bgMutedColor py-2 px-4 block whitespace-no-wrap" href="#">
+                <span class="pr-1">{{ tag.tag }}</span>
+                <span class="mr-auto">
+                  <svg-icon type="mdi" :path="mdiChevronRight" :size="30" class="pb-1" style="display:inline" />
+
+                </span>
+              </a>
+              <ul
+                class="dropdown-content absolute hidden text-textColor left-44 top-0"
+              >
+                <li
+                  v-for="task in tag.tasks"
+                  :key="task._id"
+                  @click="select(task._id)"
+                  class="bg-backgroundColor hover:bg-bgMutedColor py-2 px-4 block whitespace-no-wrap"
+                >
+                  <a class="bg-backgroundColor hover:bg-bgMutedColor py-2 px-4 block whitespace-no-wrap" href="#">
+                  {{ task.name }}
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+    <div v-else>
+      <button
+        type="button"
+        class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap py-2 px-4 rounded text-base leading-normal no-underline text-yellow-dark border-yellow bg-white hover:bg-yellow-light hover:text-yellow-darker"
+        data-toggle=""
+        data-placement="top"
+        title="Not Logged In"
+      >
+        Error
+        <svg-icon type="mdi" :path="mdiAlert" :size="30" class="pb-1" />
+      </button>
+    </div>
+    </on-click-outside>
+  </div>
+</template>
+<style scoped lang="scss">
+.dropdown:hover > .dropdown-content {
+	display: block;
+}
+
+</style>