galaxy-charts 0.0.20 → 0.0.21

package/src/components/SidePanel.vue

@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, defineProps, defineEmits } from "vue";
+import {
+    AdjustmentsHorizontalIcon,
+    ChevronDoubleRightIcon,
+    CloudArrowUpIcon,
+    Square3Stack3DIcon,
+} from "@heroicons/vue/24/outline";
+import { NButton, NIcon, NInput, NTabs, NTabPane } from "naive-ui";
+import { visualizationsCreate, visualizationsSave } from "@/api/visualizations";
+import { errorMessageAsString } from "@/utilities/simpleError";
+import InputForm from "@/components/InputForm.vue";
+import InputRepeats from "@/components/InputRepeats.vue";
+import AlertNotify from "@/components/AlertNotify.vue";
+import ApiStatus from "@/components/ApiStatus.vue";
+import type { InputElementType, InputValuesType, MessageType } from "@/types";
+
+const props = defineProps<{
+    datasetId: string;
+    description: string;
+    logoUrl: string;
+    html: string;
+    name: string;
+    settingInputs: InputElementType[];
+    settingValues: InputValuesType;
+    trackInputs: InputElementType[];
+    trackValues: InputValuesType[];
+    visualizationId: string | null | undefined;
+    visualizationTitle: string;
+}>();
+
+// Emit events with TypeScript
+const emit = defineEmits<{
+    (event: "update:tracks", newValues: InputValuesType[]): void;
+    (event: "update:settings", newValues: InputValuesType): void;
+    (event: "toggle"): void;
+}>();
+
+// Create local copies of props with reactivity
+const currentTitle = ref<string>(props.visualizationTitle);
+const currentVisualizationId = ref<string | null | undefined>(props.visualizationId);
+
+// Manage message and message type for notifications
+const message = ref<string>("");
+const messageType = ref<MessageType>("info");
+
+// Determine if tabs should be hidden based on input arrays
+const hideTabs = computed(() => props.settingInputs.length === 0 || props.trackInputs.length === 0);
+
+// Save or create the visualization
+async function onSave(): Promise<void> {
+    try {
+        if (currentVisualizationId.value) {
+            await visualizationsSave(currentVisualizationId.value, currentTitle.value, {
+                dataset_id: props.datasetId,
+                settings: props.settingValues,
+            });
+            message.value = "Successfully saved.";
+            messageType.value = "success";
+        } else {
+            currentVisualizationId.value = await visualizationsCreate(props.name, currentTitle.value, {
+                dataset_id: props.datasetId,
+                settings: props.settingValues,
+            });
+            message.value = "Successfully created.";
+            messageType.value = "success";
+        }
+    } catch (err) {
+        message.value = errorMessageAsString(err);
+        messageType.value = "error";
+    }
+}
+
+// Update settings handler
+function onUpdateSettings(newValues: InputValuesType): void {
+    emit("update:settings", newValues);
+}
+
+// Update tracks handler
+function onUpdateTracks(newValues: InputValuesType[]): void {
+    emit("update:tracks", newValues);
+}
+</script>
+
+<template>
+    <div class="overflow-auto select-none bg-white z-10">
+        <div class="flex p-2">
+            <div class="flex-1 font-thin text-lg p-1 p-2">
+                <span>Charts</span>
+                <ApiStatus />
+            </div>
+            <div>
+                <n-button strong secondary circle class="bg-sky-100 m-1" @click="onSave">
+                    <template #icon>
+                        <n-icon><CloudArrowUpIcon /></n-icon>
+                    </template>
+                </n-button>
+                <n-button strong secondary circle class="bg-sky-100 m-1" @click="emit('toggle')">
+                    <template #icon>
+                        <n-icon><ChevronDoubleRightIcon /></n-icon>
+                    </template>
+                </n-button>
+            </div>
+        </div>
+        <AlertNotify :message="message" :message-type="messageType" @timeout="message = ''" class="m-4" />
+        <div class="m-4 mt-0 p-2 bg-sky-50 text-sky-900 rounded">
+            <div class="md:flex">
+                <div class="flex justify-center center-items">
+                    <div class="m-2">
+                        <img v-if="props.logoUrl" :src="props.logoUrl" class="min-w-14 max-w-14 object-contain" />
+                        <svg
+                            v-else
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 100 100"
+                            class="size-14">
+                            <circle cx="50" cy="50" r="45" stroke="#E30A17" stroke-width="5" />
+                            <path d="M 50,5 A 45,45 0 0,1 95,50 L 50,50 Z" fill="#E30A17" />
+                        </svg>
+                    </div>
+                </div>
+                <div class="overflow-hidden break-words p-1">
+                    <span class="font-bold">{{ html }}</span>
+                    <div class="text-xs" v-html="description" />
+                </div>
+            </div>
+        </div>
+        <div class="px-4 pb-2">
+            <div class="font-bold">Title</div>
+            <div class="text-xs py-1">Specify a visualization title.</div>
+            <n-input v-model:value="currentTitle" />
+        </div>
+        <n-tabs type="line" animated class="px-4" :tab-class="hideTabs ? '!hidden' : ''">
+            <n-tab-pane v-if="trackInputs.length > 0" name="tracks">
+                <template #tab>
+                    <n-icon><Square3Stack3DIcon /></n-icon>
+                    <span class="mx-1">Tracks</span>
+                </template>
+                <InputRepeats
+                    :dataset-id="datasetId"
+                    :inputs="trackInputs"
+                    :values-array="trackValues"
+                    @update:values-array="onUpdateTracks" />
+            </n-tab-pane>
+            <n-tab-pane v-if="settingInputs.length > 0" name="settings">
+                <template #tab>
+                    <n-icon><AdjustmentsHorizontalIcon /></n-icon>
+                    <span class="mx-1">Settings</span>
+                </template>
+                <InputForm
+                    :dataset-id="datasetId"
+                    :inputs="settingInputs"
+                    :values="settingValues"
+                    @update:values="onUpdateSettings" />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>

package/src/main.js

@@ -0,0 +1,27 @@
+import { createApp, h } from "vue";
+import App from "./App.vue";
+
+const dataIncoming = {
+    visualization_config: {
+        dataset_url: null,
+        dataset_id: "12e4b4feedfe9f3f",
+        settings: {
+            setting_text: "My Test Setting",
+            setting_boolean: true,
+            setting_conditional: {
+                case_false: "something else",
+                test_condition: "false",
+            },
+        },
+    },
+};
+
+const xml = "galaxy-charts.xml";
+
+// Attach config to the data-incoming attribute
+const appElement = document.querySelector("#app");
+appElement.setAttribute("data-incoming", JSON.stringify(dataIncoming));
+
+createApp({
+    render: () => h(App, { credentials: process.env.credentials, xml: xml }),
+}).mount("#app");

package/src/store/columnsStore.ts

@@ -0,0 +1,59 @@
+import { ref } from "vue";
+import { datasetsGetColumns } from "@/api/datasets";
+
+const SPECIAL_KEYS = ["auto", undefined];
+
+// Define the structure for columns
+const columns = ref<Record<string, Record<string, any>>>({});
+
+interface Track {
+    [key: string]: string | undefined;
+}
+
+export function useColumnsStore() {
+    function getColumns(tracks: Track[], keys: string[]): string[] {
+        const columnsList: string[] = [];
+        for (const track of tracks) {
+            for (const key of keys) {
+                const column = track[key];
+                if (column && ![...columnsList, ...SPECIAL_KEYS].includes(column)) {
+                    columnsList.push(column);
+                }
+            }
+        }
+        return columnsList;
+    }
+
+    async function fetchColumns(datasetId: string, tracks: Track[], keys: string[]): Promise<Record<string, any>[]> {
+        columns.value[datasetId] = columns.value[datasetId] || {};
+        const columnsAvailable = Object.keys(columns.value[datasetId]);
+        const columnsList = getColumns(tracks, keys).filter((x) => !columnsAvailable.includes(x));
+
+        if (columnsList.length > 0) {
+            const columnsData = await datasetsGetColumns(datasetId, columnsList);
+            if (columnsData) {
+                for (const [index, column] of columnsList.entries()) {
+                    columns.value[datasetId][column] = columnsData[index];
+                }
+            }
+        }
+
+        const results: Record<string, any>[] = [];
+        tracks.forEach((track) => {
+            const trackEntry: Record<string, any> = {};
+            keys.forEach((key) => {
+                const column = track[key];
+                if (column && !SPECIAL_KEYS.includes(column)) {
+                    trackEntry[key] = columns.value[datasetId][column];
+                }
+            });
+            results.push(trackEntry);
+        });
+
+        return results;
+    }
+
+    return {
+        fetchColumns,
+    };
+}

package/src/store/configStore.ts

@@ -0,0 +1,29 @@
+import { ref, type Ref } from "vue";
+
+const root = ref("/");
+const credentials: Ref<RequestCredentials> = ref("include");
+
+export function useConfigStore() {
+    function getCredentials(): RequestCredentials {
+        return credentials.value;
+    }
+
+    function setCredentials(newCredentials: RequestCredentials) {
+        credentials.value = newCredentials;
+    }
+
+    function getRoot(): string {
+        return root.value;
+    }
+
+    function setRoot(newRoot: string) {
+        root.value = newRoot;
+    }
+
+    return {
+        getCredentials,
+        setCredentials,
+        getRoot,
+        setRoot,
+    };
+}

package/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/{dist/types.d.ts → src/types.ts}

@@ -11,18 +11,12 @@ export interface InputElementType {
     is_auto?: string;
     is_text?: string;
     is_number?: string;
-    data?: Array<{
-        label: string;
-        value: string;
-    }>;
+    data?: Array<{ label: string; value: string }>;
     value?: string;
     test_param?: {
         name: string;
         type: string;
-        data?: Array<{
-            label: string;
-            value: string;
-        }>;
+        data?: Array<{ label: string; value: string }>;
         value?: string;
     };
     cases?: Array<{
@@ -30,9 +24,13 @@ export interface InputElementType {
         inputs: Array<InputElementType>;
     }>;
 }
+
 export type InputAtomicType = boolean | string | number | null | undefined;
+
 export type InputValuesType = Record<string, any>;
+
 export type MessageType = "info" | "default" | "warning" | "error" | "success" | undefined;
+
 export interface PluginConfigType {
     credentials?: RequestCredentials;
     dataset_id?: string;
@@ -44,6 +42,7 @@ export interface PluginConfigType {
         settings?: any;
     };
 }
+
 export interface PluginType {
     name: string;
     html?: string | null;

package/src/utilities/getFileName.test.js

@@ -0,0 +1,8 @@
+import { getFileName } from "./getFileName.ts";
+
+test("identify name without extension", () => {
+    expect(getFileName("name.extension")).toEqual("name");
+    expect(getFileName("/sub/path/name.extension")).toEqual("name");
+    expect(getFileName("http://name.extension")).toEqual("name");
+    expect(getFileName("http://sub/path/name.extension")).toEqual("name");
+});

package/src/utilities/getFileName.ts

@@ -0,0 +1,4 @@
+export function getFileName(path: string) {
+    const extension = path.replace(/^.*[\\\/]/, "");
+    return extension.substring(0, extension.lastIndexOf("."));
+}

package/src/utilities/parseColumns.ts

@@ -0,0 +1,34 @@
+interface Dataset {
+    metadata_column_types: Record<string, string>;
+}
+
+interface Column {
+    label: string;
+    value: string;
+}
+
+export function parseColumns(
+    dataset: Dataset,
+    isAuto: boolean,
+    isText: boolean,
+    isNumber: boolean
+): Array<Column> {
+    const columns: Array<Column> = [];
+
+    if (isAuto) {
+        columns.push({ label: "Column: Default", value: "auto" });
+    }
+
+    const meta = dataset.metadata_column_types;
+    for (const key in meta) {
+        if (
+            (isNumber && ["int", "float"].includes(meta[key])) ||
+            (isText && meta[key] === "str") ||
+            (!isNumber && !isText)
+        ) {
+            columns.push({ label: "Column: " + (parseInt(key) + 1), value: key });
+        }
+    }
+
+    return columns;
+}

package/src/utilities/parseDefaults.test.js

@@ -0,0 +1,13 @@
+import { parseDefaults } from "./parseDefaults.ts";
+
+test("parse defaults", () => {
+    expect(
+        parseDefaults([
+            { name: "a", value: "b" },
+            { name: "c", value: "d" },
+            { name: "e", value: undefined },
+            { name: "f" },
+            { value: "g" },
+        ]),
+    ).toEqual({ a: "b", c: "d", e: null, f: null });
+});

package/src/utilities/parseDefaults.ts

@@ -0,0 +1,17 @@
+import type { InputElementType, InputValuesType } from "@/types";
+
+export function parseDefaults(inputs?: Array<InputElementType>): InputValuesType {
+    const dv: InputValuesType = {};
+
+    if (inputs) {
+        inputs.forEach((input) => {
+            if (input.name) {
+                dv[input.name] = input.value ?? null;
+            } else {
+                console.debug("Warning: Detected input element with no name.");
+            }
+        });
+    }
+
+    return dv;
+}

package/src/utilities/parseIncoming.ts

@@ -0,0 +1,32 @@
+import type { PluginType, PluginConfigType } from "@/types";
+
+interface ParsedIncoming {
+    root: string;
+    visualizationConfig: PluginConfigType;
+    visualizationId?: string;
+    visualizationPlugin?: PluginType;
+    visualizationTitle: string;
+}
+
+export function parseIncoming(): ParsedIncoming {
+    // Access attached data
+    const element = document.getElementById("app");
+    const incoming = JSON.parse(element?.getAttribute("data-incoming") || "{}") || {};
+
+    // Parse incoming data
+    const root = incoming.root || "/";
+    const visualizationId = incoming.visualization_id || null;
+    const visualizationPlugin = incoming.visualization_plugin;
+    const visualizationTitle = incoming.visualization_title || "Unnamed Visualization";
+
+    // Parse chart dict
+    let visualizationConfig = incoming.visualization_config;
+    if (incoming.visualization_config?.chart_dict) {
+        const chartDict = incoming.visualization_config.chart_dict;
+        visualizationConfig.groups = chartDict.groups;
+        visualizationConfig.settings = chartDict.settings;
+        delete visualizationConfig["chart_dict"];
+    }
+
+    return { root, visualizationConfig, visualizationId, visualizationPlugin, visualizationTitle };
+}

package/src/utilities/parsePlugin.ts

@@ -0,0 +1,95 @@
+import { rethrowSimple } from "@/utilities/simpleError";
+import { parseXML } from "@/utilities/parseXML";
+import type { InputAtomicType, InputElementType, InputValuesType, PluginConfigType, PluginType } from "@/types";
+
+interface ParsedPlugin {
+    plugin: PluginType;
+    settings: InputValuesType;
+    specs: Record<string, string> | undefined;
+    tracks: Array<InputValuesType>;
+}
+
+// Parse plugin either from incoming object or XML
+export async function parsePlugin(
+    xml: string,
+    plugin?: PluginType,
+    config: PluginConfigType = {}
+): Promise<ParsedPlugin> {
+    // Build plugin from XML if not provided through attached DOM data
+    if (!plugin) {
+        try {
+            plugin = await parseXML(xml);
+        } catch (err) {
+            console.error("Visualization requires configuration from XML or attached `visualization_plugin` details.");
+            rethrowSimple(err);
+        }
+    }
+
+    // Filter, format, and add defaults to incoming settings and track values
+    const settings = parseValues(plugin.settings, config.settings);
+    const specs = plugin.specs;
+    const tracks = parseTracks(plugin.tracks, config.tracks);
+
+    return { plugin, settings, specs, tracks };
+}
+
+// Format value according to input type
+function formatValue(input: InputElementType, inputValue: InputAtomicType): InputAtomicType {
+    let value = inputValue ?? input.value;
+    if (input.type === "float") {
+        value = Number(value);
+    }
+    return value;
+}
+
+// Format conditional values based on test cases
+function formatConditional(input: InputElementType, values: InputValuesType = {}): InputValuesType {
+    const result = values;
+    const testName = input.test_param?.name;
+
+    if (!testName) {
+        console.error(`Test parameter has no name: ${input.name}.`);
+    } else {
+        const testValue = result[testName] ?? input.test_param?.value;
+        for (const inputCase of input.cases || []) {
+            if (inputCase.value === testValue) {
+                result[testName] = testValue;
+                if (inputCase.inputs?.length) {
+                    for (const conditionalInput of inputCase.inputs) {
+                        result[conditionalInput.name] = formatValue(conditionalInput, result[conditionalInput.name]);
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}
+
+// Parse values with conditional handling
+function parseValues(inputs?: Array<InputElementType>, values?: InputValuesType): InputValuesType {
+    const result = values || {};
+
+    inputs?.forEach((input) => {
+        if (input.type === "conditional") {
+            result[input.name] = formatConditional(input, result[input.name]);
+        } else {
+            result[input.name] = formatValue(input, result[input.name]);
+        }
+    });
+
+    return result;
+}
+
+// Parse tracks with nested values
+function parseTracks(inputs?: Array<InputElementType>, tracks?: Array<InputValuesType>): Array<InputValuesType> {
+    const values = tracks || [];
+    if (inputs) {
+        if (values.length === 0) {
+            values.push({});
+        }
+        values.forEach((track, trackIndex) => {
+            values[trackIndex] = parseValues(inputs, track);
+        });
+    }
+    return values;
+}