made layout prettier

UniStuttgart-VISUS · Dec 7, 2023 · 51167ba · 51167ba
1 parent c167c29
commit 51167ba
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 59 deletions.
diff --git a/src/components/ExportSettings.vue b/src/components/ExportSettings.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="d-flex flex-column">
+    <div>
         <v-text-field v-model="filename"
             label="filename"
             density="compact"

diff --git a/src/components/OperationTree.vue b/src/components/OperationTree.vue
@@ -103,6 +103,7 @@
     })
 
     let dragOffsetX = 0, dragOffsetY = 0;
+    let labels, rects;
 
     function operatorToIcon(name) {
         switch (name) {
@@ -193,7 +194,7 @@
 
         gs.filter(d => d.index !== undefined).call(drag)
 
-        gs.filter(d => d.index !== undefined)
+        rects = gs.filter(d => d.index !== undefined)
             .classed("dragable", true)
             .on("mouseenter", function(_, d) {
                 d3.select(this).selectChild(".bg").attr("fill", app.getColor(d.color))
@@ -254,7 +255,7 @@
         const lines = gs.filter(d => line[d.id] !== undefined)
             .append("g")
             .attr("fill", "none")
-            .attr("stroke-width", 2)
+            .attr("stroke-width", x.bandwidth() < 150 ? 1 : 2)
             .selectAll("path")
             .data(d => {
                 return Array.isArray(d.values) ?
@@ -349,18 +350,35 @@
             .attr("stroke", "white")
             .attr("stroke-width", 2)
 
-        gs.filter(d => d.index !== undefined)
+        labels = gs.filter(d => d.index !== undefined)
             .append("text")
             .attr("transform", `translate(${x.bandwidth()*0.5}, -10)`)
             .attr("text-anchor", "middle")
             .attr("font-size", 12)
-            .text(d => d.data)
+            .text(d => {
+                if (d.data.length * 7 > x.bandwidth()) {
+                    return d.data.slice(0, Math.floor(d.data.length / (d.data.length * 7 / x.bandwidth()))) + ".."
+                }
+                return d.data
+            })
 
+        highlight();
+    }
+
+    function highlight() {
+        if (app.selectedComps.size === 0) {
+            labels.attr("font-weight", "normal");
+            rects.attr("fill", "none")
+        } else {
+            labels.attr("font-weight", d => app.isSelectedComponent(d.id) ? "bold" : "normal")
+            rects.attr("fill", d => app.isSelectedComponent(d.id) ? "black" : "none")
+        }
     }
 
     onMounted(draw);
 
     watch(props, draw, { deep: true })
+    watch(() => app.selectedComps, highlight, { deep: true });
 </script>
 
 <style scoped>

diff --git a/src/components/TimeSeriesCollectionViewer.vue b/src/components/TimeSeriesCollectionViewer.vue
@@ -8,7 +8,7 @@
 
         <div>
             <v-text-field v-model.number="tsOpacity"
-                label="opacity"
+                label="line opacity"
                 class="mb-2"
                 type="number"
                 :min="0.01"

diff --git a/src/components/TimeSeriesComponentTitle.vue b/src/components/TimeSeriesComponentTitle.vue
@@ -8,21 +8,38 @@
                 type="text"
                 :readonly="!editName"
                 @keyup="editKeyUp">
-            <v-icon :icon="editName ? 'mdi-check' : 'mdi-pencil'" @click.stop="toggleEdit()"/>
+
+            <v-tooltip text="edit component name" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <v-icon v-bind="props" :icon="editName ? 'mdi-check' : 'mdi-pencil'" @click.stop="toggleEdit()"/>
+                </template>
+            </v-tooltip>
         </v-sheet>
-        <v-btn class="ml-1 mr-1"
-            :icon="component.visible ? 'mdi-eye' : 'mdi-eye-off'"
-            rounded="sm"
-            density="compact"
-            variant="text"
-            @click.stop="setVisible(!component.visible)"/>
-        <v-btn class="mr-1"
-            icon="mdi-delete"
-            color="error"
-            rounded="sm"
-            density="compact"
-            variant="text"
-            @click.stop="removeComponent()"/>
+
+        <v-tooltip text="hide/show this component in the line chart" open-delay="500" location="top">
+            <template v-slot:activator="{ props }">
+                <v-btn v-bind="props"
+                    class="ml-1 mr-1"
+                    :icon="component.visible ? 'mdi-eye' : 'mdi-eye-off'"
+                    rounded="sm"
+                    density="compact"
+                    variant="text"
+                    @click.stop="setVisible(!component.visible)"/>
+            </template>
+        </v-tooltip>
+
+        <v-tooltip text="delete this component" open-delay="500" location="top">
+            <template v-slot:activator="{ props }">
+                <v-btn v-bind="props"
+                    class="mr-1"
+                    icon="mdi-delete"
+                    color="error"
+                    rounded="sm"
+                    density="compact"
+                    variant="text"
+                    @click.stop="removeComponent()"/>
+            </template>
+        </v-tooltip>
     </div>
 </template>
 

diff --git a/src/components/TimeSeriesComponentViewer.vue b/src/components/TimeSeriesComponentViewer.vue
@@ -2,21 +2,26 @@
     <v-sheet>
         <div v-if="component.generator.seedRequired" class="d-flex align-center mb-2">
             <v-text-field v-model.number="seed"
-                label="generator seed"
+                label="random generator seed"
                 type="number"
                 hide-details
                 density="compact"
                 min="1"
                 max="2147483646"
                 @update:modelValue="setSeed"/>
-            <v-btn class="ml-2 mt-2"
-                icon="mdi-dice-6"
-                rounded="sm"
-                variant="outlined"
-                density="compact"
-                size="x-large"
-                color="primary"
-                @click="randomSeed"/>
+
+            <v-tooltip text="reroll random seed" open-delay="200">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props"
+                        class="ml-2 mt-2"
+                        icon="mdi-dice-6"
+                        rounded="sm"
+                        variant="text"
+                        density="compact"
+                        size="x-large"
+                        @click="randomSeed"/>
+                </template>
+            </v-tooltip>
         </div>
 
         <v-text-field v-for="(o, key) in options" :key="component.id + '_' + o"

diff --git a/src/components/TimeSeriesTitle.vue b/src/components/TimeSeriesTitle.vue
@@ -1,7 +1,11 @@
 <template>
     <div>
         <div class="text-caption mb-2">
-            <span class="mr-1">#instances:</span>
+            <v-tooltip text="number of copies with different random seeds" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <span class="mr-1" v-bind="props" style="cursor: help;">#instances:</span>
+                </template>
+            </v-tooltip>
             <v-sheet color="grey-lighten-4 d-inline pa-1" rounded="sm">
                 <input v-model.number="instances"
                     style="max-width: 50px;"
@@ -26,31 +30,51 @@
                 type="text"
                 :readonly="!editName"
                 @keyup="editKeyUp"/>
-            <v-icon :icon="editName ? 'mdi-check' : 'mdi-pencil'" @click.stop="toggleEdit()"/>
+
+            <v-tooltip text="edit time series name" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <v-icon v-bind="props" :icon="editName ? 'mdi-check' : 'mdi-pencil'" @click.stop="toggleEdit()"/>
+                </template>
+            </v-tooltip>
         </v-sheet>
 
         <div>
-            <v-btn class="mr-2"
-                icon="mdi-content-copy"
-                rounded="sm"
-                density="compact"
-                variant="text"
-                @click.stop="copy"/>
+            <v-tooltip text="duplicate time series" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props"
+                        class="mr-2"
+                        icon="mdi-content-copy"
+                        rounded="sm"
+                        density="compact"
+                        variant="text"
+                        @click.stop="copy"/>
+                </template>
+            </v-tooltip>
 
-            <v-btn class="mr-2"
-                icon="mdi-dice-6"
-                rounded="sm"
-                density="compact"
-                variant="text"
-                @click.stop="randomize"/>
+            <v-tooltip text="reroll random seeds" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props"
+                        class="mr-2"
+                        icon="mdi-dice-6"
+                        rounded="sm"
+                        density="compact"
+                        variant="text"
+                        @click.stop="randomize"/>
+                </template>
+            </v-tooltip>
 
-            <v-btn class="mr-2"
-                icon="mdi-delete"
-                color="error"
-                rounded="sm"
-                density="compact"
-                variant="text"
-                @click.stop="remove"/>
+            <v-tooltip text="delete time series" open-delay="500" location="top">
+                <template v-slot:activator="{ props }">
+                    <v-btn v-bind="props"
+                        class="mr-2"
+                        icon="mdi-delete"
+                        color="error"
+                        rounded="sm"
+                        density="compact"
+                        variant="text"
+                        @click.stop="remove"/>
+                </template>
+            </v-tooltip>
         </div>
         </div>
 

diff --git a/src/components/TimeSeriesViewer.vue b/src/components/TimeSeriesViewer.vue
@@ -3,7 +3,7 @@
     <div>
         <div class="d-flex">
             <v-text-field v-model.number="tscOpacity"
-                label="opacity"
+                label="line opacity"
                 class="mb-1 mt-1"
                 type="number"
                 :min="0.01"
@@ -13,14 +13,18 @@
                 hide-details
                 @update:model-value="timeseries.update()"/>
 
-            <v-btn class="ml-2 mt-2"
-                icon="mdi-dice-6"
-                rounded="sm"
-                variant="outlined"
-                density="compact"
-                size="x-large"
-                color="primary"
-                @click="randomSeed"/>
+            <v-tooltip text="reroll new seeds for all random components" open-delay="200">
+                <template v-slot:activator="{ props }">
+                <v-btn v-bind="props"
+                    class="ml-2 mt-2"
+                    icon="mdi-dice-6"
+                    rounded="sm"
+                    variant="text"
+                    density="compact"
+                    size="x-large"
+                    @click="randomSeed"/>
+                </template>
+            </v-tooltip>
         </div>
 
         <v-expansion-panels v-model="selectedComponents" class="mt-4 mb-4" rounded="sm" variant="accordion" multiple @update:model-value="setSelected">