galaxy-charts 0.0.19 → 0.0.21

package/src/api/datasets.ts

@@ -0,0 +1,34 @@
+import { GalaxyApi } from "@/api/client";
+
+export async function datasetsGetColumns(datasetId: string, columnList: string[]): Promise<any[][] | undefined> {
+    try {
+        const params = new URLSearchParams({
+            data_type: "raw_data",
+            provider: "dataset-column",
+            indeces: columnList.toString(),
+        }).toString();
+
+        const { data } = await GalaxyApi().GET(`/api/datasets/${datasetId}?${params}`);
+        const columnLength = columnList.length;
+        const results: any[][] = new Array(columnLength).fill(null).map(() => []);
+
+        for (const row of data) {
+            for (const j in row) {
+                const index = Number(j);
+                const value = row[j];
+                if (value !== undefined && value != 2147483647 && index < columnLength) {
+                    results[index].push(value);
+                }
+            }
+        }
+
+        return results;
+    } catch (err) {
+        console.error(err);
+        return undefined;
+    }
+}
+
+export function datasetsGetUrl(datasetId: string): string {
+    return `/api/datasets/${datasetId}/display`;
+}

package/src/api/visualizations.ts

@@ -0,0 +1,33 @@
+import { rethrowSimple } from "@/utilities/simpleError";
+import { GalaxyApi } from "@/api/client";
+import { InputValuesType } from "@/types"
+
+interface VisualizationConfig {
+    dataset_id: string;
+    settings: InputValuesType;
+}
+
+export async function visualizationsCreate(type: string, title: string, config: VisualizationConfig): Promise<string | undefined> {
+    try {
+        const { data } = await GalaxyApi().POST("/api/visualizations", {
+            type,
+            title,
+            config,
+        });
+        return data.id;
+    } catch (err) {
+        rethrowSimple(err);
+    }
+}
+
+export async function visualizationsSave(id: string, title: string, config: VisualizationConfig): Promise<string | undefined> {
+    try {
+        const { data } = await GalaxyApi().PUT(`/api/visualizations/${id}`, {
+            title,
+            config,
+        });
+        return data.id;
+    } catch (err) {
+        rethrowSimple(err);
+    }
+}

package/src/components/AlertNotify.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { watch } from "vue";
+import { NAlert } from "naive-ui";
+import { MessageType } from "@/types";
+
+const MESSAGE_TIMEOUT = 2000;
+
+const props = withDefaults(
+    defineProps<{
+        message: string;
+        messageType?: MessageType;
+    }>(),
+    {
+        messageType: "info",
+    },
+);
+
+const emit = defineEmits(["timeout"]);
+
+// Watch and clear messages
+let timeoutMessage: ReturnType<typeof setTimeout> | null = null;
+watch(
+    () => props.message,
+    () => {
+        timeoutMessage && clearTimeout(timeoutMessage);
+        timeoutMessage = setTimeout(() => emit("timeout"), MESSAGE_TIMEOUT);
+    },
+);
+</script>
+
+<template>
+    <n-alert v-if="message" :type="messageType" class="m-4">
+        {{ message }}
+    </n-alert>
+</template>

package/src/components/ApiStatus.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/vue/24/outline";
+import { NIcon, NTooltip } from "naive-ui";
+import { GalaxyApi } from "@/api/client";
+
+const version = ref("...");
+
+async function checkVersion() {
+    try {
+        const { data } = await GalaxyApi().GET("/api/version");
+        version.value = data.version_major;
+    } catch (err) {
+        console.log(`Unable to connect to Galaxy. Verify Galaxy is running and refer to docs.`);
+        version.value = "";
+    }
+}
+
+checkVersion();
+</script>
+
+<template>
+    <n-tooltip v-if="version" class="mx-1" trigger="hover">
+        <template #trigger>
+            <n-icon class="mx-1">
+                <CheckCircleIcon class="text-green-600" />
+            </n-icon>
+        </template>
+        <span class="text-xs">Connected to Galaxy Version {{ version }}.</span>
+    </n-tooltip>
+    <n-tooltip v-else class="mx-1" trigger="hover">
+        <template #trigger>
+            <n-icon class="mx-1">
+                <ExclamationCircleIcon class="text-red-600" />
+            </n-icon>
+        </template>
+        <span class="text-xs">Galaxy is not accessible!</span>
+    </n-tooltip>
+</template>

package/src/components/GalaxyCharts.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, ref, nextTick, defineProps } from "vue";
+import { ArrowPathIcon, ChevronDoubleLeftIcon } from "@heroicons/vue/24/outline";
+import SidePanel from "@/components/SidePanel.vue";
+import { parsePlugin } from "@/utilities/parsePlugin";
+import { NAlert, NFloatButton, NIcon } from "naive-ui";
+import { datasetsGetUrl } from "@/api/datasets";
+import { parseIncoming } from "@/utilities/parseIncoming";
+import { useConfigStore } from "@/store/configStore";
+import { InputElementType, InputValuesType, PluginConfigType } from "@/types";
+
+const props = defineProps<{
+    credentials?: RequestCredentials;
+    xml: string;
+}>();
+
+// References with reactive types
+const collapsePanel = ref<boolean>(false);
+const datasetUrl = ref<string>("");
+const description = ref<string>("");
+const errorMessage = ref<string>("");
+const html = ref<string>("");
+const isLoading = ref<boolean>(true);
+const logo = ref<string>("");
+const name = ref<string>("");
+const settingInputs = ref<Array<InputElementType>>([]);
+const settingValues = ref<InputValuesType>({});
+const specValues = ref<InputValuesType>({});
+const trackInputs = ref<Array<InputElementType>>([]);
+const trackValues = ref<Array<InputValuesType>>([]);
+
+// Parse incoming visualization details
+const { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle } = parseIncoming();
+
+// Store values in config store
+const configStore = useConfigStore();
+configStore.setCredentials(props.credentials || "include");
+configStore.setRoot(root || "/");
+
+// Collect plugin details and parse incoming settings
+parsePlugin(props.xml, visualizationPlugin, visualizationConfig).then(({ plugin, settings, specs, tracks }) => {
+    description.value = plugin.description || "";
+    html.value = plugin.html || "";
+    isLoading.value = false;
+    logo.value = plugin.logo || "";
+    name.value = plugin.name;
+    settingInputs.value = plugin.settings || [];
+    settingValues.value = settings;
+    specValues.value = specs || {};
+    trackInputs.value = plugin.tracks || [];
+    trackValues.value = tracks;
+});
+
+// Get visualization dataset ID (required)
+const datasetId = visualizationConfig.dataset_id || "";
+if (visualizationConfig.dataset_url) {
+    datasetUrl.value = visualizationConfig.dataset_url;
+    console.debug(`GalaxyCharts: Evaluating dataset url: ${datasetUrl.value}.`);
+} else {
+    if (!datasetId) {
+        errorMessage.value = "Visualization requires `dataset_id` or `dataset_url`.";
+    } else {
+        datasetUrl.value = datasetsGetUrl(datasetId);
+        console.debug(`GalaxyCharts: Built dataset url from dataset id: ${datasetUrl.value}.`);
+    }
+}
+
+// Determine logo URL
+const logoUrl = computed(() => logo.value && `${root}${logo.value}`);
+
+// Hide panel condition
+const hidePanel = computed(() => settingInputs.value.length === 0 && trackInputs.value.length === 0);
+
+// Toggle side panel visibility
+async function onToggle(): Promise<void> {
+    collapsePanel.value = !collapsePanel.value;
+    await nextTick();
+    window.dispatchEvent(new Event("resize"));
+}
+
+// Event handler for updating settings
+function updateSettings(newSettings: InputValuesType): void {
+    settingValues.value = { ...newSettings };
+}
+
+// Event handler for updating tracks
+function updateTracks(newTracks: Array<InputValuesType>): void {
+    trackValues.value = [...newTracks];
+}
+</script>
+
+<template>
+    <n-alert v-if="errorMessage" title="Visualization Error!" type="error" class="m-2">
+        {{ errorMessage }}
+    </n-alert>
+    <div v-else-if="isLoading" class="m-2">
+        <span>
+            <ArrowPathIcon class="animate-spin size-4 inline mx-1" />
+        </span>
+        <span class="text-xs">Please wait...</span>
+    </div>
+    <div v-else class="grid h-screen" :class="{ 'grid-cols-[70%_30%]': !collapsePanel && !hidePanel }">
+        <slot
+            :dataset-id="datasetId"
+            :dataset-url="datasetUrl"
+            :root="root"
+            :settings="settingValues"
+            :specs="specValues"
+            :tracks="trackValues" />
+        <div v-if="collapsePanel && !hidePanel">
+            <n-float-button strong secondary circle class="bg-sky-100 m-2" :top="0" :right="0" @click="onToggle">
+                <n-icon><ChevronDoubleLeftIcon /></n-icon>
+            </n-float-button>
+        </div>
+        <SidePanel
+            v-else
+            :dataset-id="datasetId"
+            :description="description"
+            :html="html"
+            :logo-url="logoUrl"
+            :name="name"
+            :setting-inputs="settingInputs"
+            :setting-values="settingValues"
+            :track-inputs="trackInputs"
+            :track-values="trackValues"
+            :visualization-id="visualizationId"
+            :visualization-title="visualizationTitle"
+            @update:settings="updateSettings"
+            @update:tracks="updateTracks"
+            @toggle="onToggle" />
+    </div>
+</template>
+
+<style>
+@import "@/style.css";
+</style>

package/src/components/InputConditional.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { NSelect, NSwitch } from "naive-ui";
+import InputForm from "@/components/InputForm.vue";
+import { computed, ref, watch, defineProps, defineEmits, defineModel } from "vue";
+import { parseDefaults } from "@/utilities/parseDefaults";
+import { InputElementType, InputValuesType } from "@/types";
+
+// Define props with types
+const props = defineProps<{
+    datasetId: string;
+    input: InputElementType;
+}>();
+
+// Define emit with event typing
+const emit = defineEmits<{
+    (event: "update:value", updatedValues: InputValuesType): void;
+}>();
+
+if (!props.input.test_param) {
+    throw `The conditional '${props.input.name}' is missing a test parameter.`;
+}
+
+if (!props.input.cases || props.input.cases.length === 0) {
+    throw `The conditional '${props.input.name}' is missing a cases.`;
+}
+
+// Get test parameter
+const testParam = ref(props.input.test_param);
+
+// Get test parameter name and validate it
+const testName = testParam.value.name;
+if (!testName) {
+    console.error(`Test parameter has no name: ${props.input.name}.`);
+}
+
+// Reference the model value of the conditional component
+const currentValue = defineModel<InputValuesType>("value");
+if (!currentValue.value || !(testName in currentValue.value)) {
+    console.error(`Test parameter of conditional not available: ${props.input.name}.`, currentValue.value);
+}
+
+// Reference current test parameter value
+const currentTestValue = ref<string>(currentValue.value && currentValue.value[testName]);
+
+// Collect input cases and identify defaults
+const caseDefaults = computed(() => {
+    const result: Record<string, InputValuesType> = {};
+    if (props.input.cases && props.input.cases.length > 0) {
+        for (const inputCase of props.input.cases) {
+            result[inputCase.value] = parseDefaults(inputCase.inputs);
+            result[inputCase.value][testName] = inputCase.value;
+        }
+    }
+    return result;
+});
+
+// Collect all input cases
+const caseInputs = computed(() => {
+    const result: Record<string, Array<InputElementType>> = {};
+    if (props.input.cases && props.input.cases.length > 0) {
+        for (const inputCase of props.input.cases) {
+            result[inputCase.value] = inputCase.inputs;
+        }
+    }
+    return result;
+});
+
+// Current inputs based on selected test value
+const currentInputs = computed(() => caseInputs.value[currentTestValue.value]);
+
+// Handle conversion of boolean switch values to string for case evaluation
+const switchTestValue = computed({
+    get() {
+        return currentTestValue.value === "true";
+    },
+    set(newVal: boolean) {
+        currentTestValue.value = String(newVal);
+    },
+});
+
+// Update values if test value changes or conditional input elements are modified
+function onUpdate(newValues?: InputValuesType) {
+    let updatedValues = { ...caseDefaults.value[currentTestValue.value] };
+    if (newValues) {
+        const filteredValues: InputValuesType = {};
+        currentInputs.value.forEach((x) => {
+            filteredValues[x.name] = newValues[x.name];
+        });
+        updatedValues = { ...updatedValues, ...newValues };
+    }
+    emit("update:value", updatedValues);
+}
+
+// Load defaults if test value changes
+watch(
+    () => currentTestValue.value,
+    () => {
+        onUpdate();
+    },
+);
+</script>
+
+<template>
+    <n-switch v-if="testParam.type === 'boolean'" v-model:value="switchTestValue" />
+    <n-select v-else v-model:value="currentTestValue" :options="testParam.data" />
+    <div v-if="currentInputs" class="border border-dotted border-green-600 rounded mt-2 p-2">
+        <InputForm :dataset-id="datasetId" :inputs="currentInputs" :values="currentValue" @update:values="onUpdate" />
+    </div>
+</template>

package/src/components/InputData.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { ref, defineProps, defineModel } from "vue";
+import { NSelect, NIcon } from "naive-ui";
+import { GalaxyApi } from "@/api/client";
+import { CheckCircleIcon, ExclamationCircleIcon } from "@heroicons/vue/24/outline";
+
+const LIMIT = 100;
+
+// Define props with TypeScript
+const props = defineProps<{
+    extension?: string;
+    optional: boolean;
+}>();
+
+// Define the model
+const currentOptions = ref<Array<{ label: string; value: any; disabled?: boolean }>>([]);
+const currentValue = defineModel<{ name: string } | null>("value");
+const isLoading = ref(false);
+const selectValue = ref<any | null>(null);
+
+// Load datasets based on filters and query
+async function loadDatasets(query?: string): Promise<void> {
+    isLoading.value = true;
+    try {
+        const extensionFilter = props.extension ? `q=extension-eq&qv=${props.extension}` : "";
+        const nameFilter = query ? `q=name-contains&qv=${query}` : "";
+        const { data } = await GalaxyApi().GET(`/api/datasets?limit=${LIMIT}&${extensionFilter}&${nameFilter}`);
+
+        if (data && data.length > 0) {
+            const options = data.map((x: { name: string }) => ({
+                label: x.name,
+                value: x,
+            }));
+            options.push({ label: "...filter for more", value: null, disabled: true });
+            if (props.optional) {
+                options.unshift({ label: "-- Clear Selection --", value: null });
+            }
+            currentOptions.value = options;
+        }
+    } catch (err) {
+        console.log(err);
+    } finally {
+        isLoading.value = false;
+    }
+}
+
+// Update the current selection value
+function onUpdate(): void {
+    currentValue.value = selectValue.value;
+    selectValue.value = null;
+}
+
+// Load initial datasets when the component is mounted
+loadDatasets();
+</script>
+
+<template>
+    <div v-if="currentValue" class="mb-1">
+        <n-icon class="size-3 mr-1"><CheckCircleIcon /></n-icon>
+        <span>Selected: {{ currentValue.name }}</span>
+    </div>
+    <div v-else-if="!optional" class="text-red-600 mb-1">
+        <n-icon class="size-3 mr-1"><ExclamationCircleIcon /></n-icon>
+        <span>Please select a dataset.</span>
+    </div>
+    <n-select
+        v-model:value="selectValue"
+        filterable
+        placeholder="Select a Dataset"
+        :loading="isLoading"
+        :options="currentOptions"
+        @search="loadDatasets"
+        @update:value="onUpdate" />
+</template>

package/src/components/InputDataColumn.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { ref, watch, defineProps, defineModel } from "vue";
+import { NSelect } from "naive-ui";
+import { parseColumns } from "@/utilities/parseColumns";
+import { GalaxyApi } from "@/api/client";
+
+// Define props with TypeScript
+const props = defineProps<{
+    datasetId: string;
+    isAuto: boolean;
+    isText: boolean;
+    isNumber: boolean;
+}>();
+
+// Define refs with appropriate types
+const currentOptions = ref<Array<{ label: string; value: string }>>([]);
+const currentValue = defineModel<string | null>("value");
+
+// Load columns based on dataset and filters
+async function loadColumns(): Promise<void> {
+    if (props.datasetId) {
+        try {
+            const { data: dataset } = await GalaxyApi().GET(`/api/datasets/${props.datasetId}`);
+            const columns = parseColumns(dataset, props.isAuto, props.isText, props.isNumber);
+            currentOptions.value = columns;
+            initializeValue();
+        } catch (err) {
+            console.log(err);
+        }
+    } else {
+        console.log("Data column input disabled, since `datasetId` is unavailable.");
+    }
+}
+
+// Initialize current value based on options
+function initializeValue(): void {
+    if (currentOptions.value.length > 0 && currentValue.value === null) {
+        currentValue.value = currentOptions.value[0].value;
+    }
+}
+
+// Call loadColumns on component mount
+loadColumns();
+
+// Watch for changes in currentValue and re-initialize if needed
+watch(
+    () => currentValue.value,
+    () => initializeValue(),
+);
+</script>
+
+<template>
+    <n-select v-model:value="currentValue" :options="currentOptions" />
+</template>

package/src/components/InputForm.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from "vue";
+import { NColorPicker, NInput, NInputNumber, NSelect, NSlider, NSwitch } from "naive-ui";
+import InputConditional from "@/components/InputConditional.vue";
+import InputData from "@/components/InputData.vue";
+import InputDataColumn from "@/components/InputDataColumn.vue";
+import { toBoolean } from "@/utilities/toBoolean";
+import type { InputElementType, InputValuesType } from "@/types";
+
+const NUMBER_STEP_SIZE = 0.01;
+
+const props = defineProps<{
+    datasetId: string;
+    inputs: InputElementType[];
+    values?: InputValuesType;
+}>();
+
+// Define emit
+const emit = defineEmits<{
+    (event: "update:values", values: InputValuesType): void;
+}>();
+
+// Create a local copy of the values prop
+const currentValues = ref<InputValuesType>(initialValues());
+
+// Initialize all values to ensure reactivity
+function initialValues(): InputValuesType {
+    const values = { ...props.values };
+    props.inputs.forEach((input) => {
+        if (values[input.name] === undefined) {
+            values[input.name] = null;
+        }
+    });
+    return values;
+}
+
+// Trigger an update of values
+function onUpdate(): void {
+    emit("update:values", currentValues.value);
+}
+
+// Watch for changes in incoming values and reinitialize
+watch(
+    () => props.values,
+    () => {
+        currentValues.value = initialValues();
+    },
+);
+</script>
+
+<template>
+    <div class="overflow-auto select-none">
+        <div v-for="(input, inputIndex) in inputs" :key="inputIndex" class="pb-2">
+            <div class="font-bold pb-1">{{ input.label || input.name }}</div>
+            <div v-if="input.help" class="text-xs pb-1">{{ input.help }}</div>
+            <div>
+                <n-switch
+                    v-if="input.type === 'boolean'"
+                    v-model:value="currentValues[input.name]"
+                    @update:value="onUpdate()" />
+                <n-color-picker
+                    v-else-if="input.type === 'color'"
+                    v-model:value="currentValues[input.name]"
+                    :modes="['hex']"
+                    :show-alpha="false"
+                    @update:value="onUpdate()" />
+                <InputConditional
+                    v-else-if="input.type === 'conditional'"
+                    v-model:value="currentValues[input.name]"
+                    :dataset-id="datasetId"
+                    :input="input"
+                    @update:value="onUpdate()" />
+                <InputData
+                    v-else-if="input.type === 'data'"
+                    v-model:value="currentValues[input.name]"
+                    :extension="input.extension"
+                    :optional="toBoolean(input.optional)"
+                    @update:value="onUpdate()" />
+                <InputDataColumn
+                    v-else-if="input.type === 'data_column'"
+                    v-model:value="currentValues[input.name]"
+                    :dataset-id="datasetId"
+                    :is-auto="toBoolean(input.is_auto)"
+                    :is-text="toBoolean(input.is_text)"
+                    :is-number="toBoolean(input.is_number)"
+                    @update:value="onUpdate()" />
+                <div v-else-if="input.type === 'float'">
+                    <n-slider
+                        v-if="input.min !== undefined && input.max !== undefined"
+                        class="mb-2"
+                        v-model:value="currentValues[input.name]"
+                        :min="Number(input.min)"
+                        :max="Number(input.max)"
+                        :step="NUMBER_STEP_SIZE"
+                        @update:value="onUpdate()" />
+                    <n-input-number
+                        v-model:value="currentValues[input.name]"
+                        size="small"
+                        :min="Number(input.min)"
+                        :max="Number(input.max)"
+                        :step="NUMBER_STEP_SIZE"
+                        @update:value="onUpdate()" />
+                </div>
+                <n-select
+                    v-else-if="input.type === 'select'"
+                    v-model:value="currentValues[input.name]"
+                    :options="input.data"
+                    @update:value="onUpdate()" />
+                <n-input
+                    v-else-if="input.type === 'textarea'"
+                    v-model:value="currentValues[input.name]"
+                    :rows="Number(input.rows)"
+                    type="textarea"
+                    @update:value="onUpdate()" />
+                <n-input v-else v-model:value="currentValues[input.name]" @update:value="onUpdate()" />
+            </div>
+        </div>
+    </div>
+</template>