galaxy/client/src/components/Collections/ListWizard/WhichBuilder.vue at def5ad10beca2c3f958be1d4ebf1ff1b34fab2a6 · ahmedhamidawan/galaxy · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script setup lang="ts">
import { BButton, BCard, BCardGroup, BCardTitle } from "bootstrap-vue";
import { ref } from "vue";

import { borderVariant } from "@/components/Common/Wizard/utils";

import type { WhichListBuilder } from "./types";

interface Props {
    value: WhichListBuilder;
    initialAdvanced: boolean;
}

const emit = defineEmits(["onChange"]);

const props = defineProps<Props>();

const advanced = ref(props.initialAdvanced);

function toggleAdvanced() {
    advanced.value = !advanced.value;
}
</script>

<template>
    <div>
        <BCardGroup deck>
            <BCard
                data-which-builder="list"
                class="wizard-selection-card"
                :border-variant="borderVariant(value === 'list')"
                @click="emit('onChange', 'list')">
                <BCardTitle>
                    <b>Flat List</b>
                </BCardTitle>
                <div>
                    This option creates a simple flat list of files. If your data isn't nested and does not contained
                    paired datasets, this is the the option to choose.
                </div>
            </BCard>
            <BCard
                data-which-builder="list:paired"
                class="wizard-selection-card"
                :border-variant="borderVariant(value === 'list:paired')"
                @click="emit('onChange', 'list:paired')">
                <BCardTitle>
                    <b>List of Paired Datasets</b>
                </BCardTitle>
                <div>
                    This option creates a uniform list of paired datasets, use this option if all of your data should be
                    paired off.
                </div>
            </BCard>
            <BCard
                data-which-builder="rules"
                class="wizard-selection-card"
                :border-variant="borderVariant(value === 'rules')"
                @click="emit('onChange', 'rules')">
                <BCardTitle>
                    <b>Rule Builder</b>
                </BCardTitle>
                <div>
                    The rule builder allows building arbitrarily nested collections of data with reproducible metadata
                    parsing and other advanced features.
                </div>
            </BCard>
        </BCardGroup>
        <span>
            <div v-if="!advanced" class="m-3">
                <BButton variant="primary" @click="toggleAdvanced">Advanced Options</BButton>
            </div>
            <BCardGroup v-else deck class="mt-3">
                <BCard
                    data-which-builder="list:paired_or_unpaired"
                    class="wizard-selection-card"
                    :border-variant="borderVariant(value === 'list:paired_or_unpaired')"
                    @click="emit('onChange', 'list:paired_or_unpaired')">
                    <BCardTitle>
                        <b>Mixed List of Paired and Unpaired Datasets</b>
                    </BCardTitle>
                    <div>
                        For studies that have a mix of paired and unpaired data, this may be the right choice. Existing
                        tools and workflows may have to be updated to allow this modality though.
                    </div>
                </BCard>
                <BCard
                    data-which-builder="list:list"
                    class="wizard-selection-card"
                    :border-variant="borderVariant(value === 'list:list')"
                    @click="emit('onChange', 'list:list')">
                    <BCardTitle>
                        <b>Nested List of Datasets</b>
                    </BCardTitle>
                    <div>
                        A nested list of datasets. This type of collection is a list where each element is in turn a
                        list of datasets. The outer list identifier might group samples together by condition, sample
                        type, etc..
                    </div>
                </BCard>
                <BCard
                    data-which-builder="list:list:paired"
                    class="wizard-selection-card"
                    :border-variant="borderVariant(value === 'list:list:paired')"
                    @click="emit('onChange', 'list:list:paired')">
                    <BCardTitle>
                        <b>Nested List of Dataset Pairs</b>
                    </BCardTitle>
                    <div>
                        A nested list of datasets. This type of collection is a list where each element is in turn a
                        list of pairs of datasets.
                    </div>
                </BCard>
            </BCardGroup>
        </span>
    </div>
</template>