Feature/default step

swanlab/server/controller/utils/charts.py

@@ -32,7 +32,7 @@ def get_exp_charts(id: int):
                 error[source["tag_id"]["name"]] = Chart.json2dict(source["error"])
         chart_list[index]["error"] = error
         chart_list[index]["source"] = sources
-        chart_list[index]["mutli"] = False
+        chart_list[index]["multi"] = False
     # 当前实验下的命名空间
     namespaces = Namespace.filter(Namespace.experiment_id == id)
     namespace_list = Namespace.search2list(namespaces)
@@ -57,7 +57,7 @@ def get_proj_charts(id: int):
     """
     # 获取当前项目下所有的多实验对比表
     # 暂时只请求chart.type为default或者line的图表
-    allow_types = ["default", "line","image", "audio"]
+    allow_types = ["default", "line", "image", "audio"]
     multi_charts = Chart.filter(Chart.project_id == id, Chart.type.in_(allow_types))
     # 获取图表配置
     charts = []
@@ -72,7 +72,7 @@ def get_proj_charts(id: int):
             if source.error:
                 error[source.tag_id.experiment_id.name] = Chart.json2dict(source.error)
         t = _chart.__dict__()
-        charts.append({**t, "error": error, "source": sources, "mutli": True})
+        charts.append({**t, "error": error, "source": sources, "multi": True})
     # 获取命名空间配置
     namespaces = Namespace.filter(Namespace.project_id == id)
     namespace_list = Namespace.search2list(namespaces)

vue/src/charts/components/LineChartLegend.vue

@@ -5,9 +5,9 @@
       :style="{ color: item.color }"
       v-for="item in items"
       :key="item.name"
-      @mouseenter="handelMouseenter(item)"
-      @mouseleave="handelMouseleave(item)"
-      @click="handelClick(item)"
+      @mouseenter="handleMouseenter(item)"
+      @mouseleave="handleMouseleave(item)"
+      @click="handleClick(item)"
     >
       <RouterLink :to="'/experiment/' + item.experiment_id">
         {{ item.name }}
@@ -34,15 +34,15 @@ defineProps({
 const emit = defineEmits(['hoverin', 'hoverout'])
 
 // ---------------------------------- 悬浮事件 ----------------------------------
-const handelMouseenter = (item) => {
+const handleMouseenter = (item) => {
   emit('hoverin', item)
 }
-const handelMouseleave = (item) => {
+const handleMouseleave = (item) => {
   emit('hoverout', item)
 }
 
 // ---------------------------------- 点击事件 ----------------------------------
-const handelClick = (item) => {
+const handleClick = (item) => {
   emit('click', item)
 }
 </script>

vue/src/charts/components/PlayButton.vue

@@ -1,5 +1,5 @@
 <template>
-  <SLButton class="p-1 rounded border flex items-center justify-center" :style="{ color }" @click="handelPlay">
+  <SLButton class="p-1 rounded border flex items-center justify-center" :style="{ color }" @click="handlePlay">
     <SLIcon class="h-5 w-5" icon="pause" v-if="modelValue" />
     <SLIcon class="h-5 w-5" icon="play" v-else />
   </SLButton>
@@ -26,7 +26,7 @@ const props = defineProps({
 
 const emit = defineEmits(['play', 'pause', 'update:modelValue'])
 
-const handelPlay = () => {
+const handlePlay = () => {
   if (!props.modelValue) {
     emit('play')
     emit('update:modelValue', true)

vue/src/charts/components/SlideBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="chart-slide">
-    <p>{{ reference }}</p>
+    <p class="w-9">{{ reference }}</p>
     <!-- <p>{{ min }}</p> -->
     <div class="slide">
       <SLSlideBar is-int :max="max" :min="min" v-model="_modelValue" :bar-color="barColor" />
@@ -130,7 +130,7 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 .chart-slide {
-  @apply flex items-center justify-center flex-wrap w-full gap-2 text-dimmer select-none;
+  @apply flex items-center justify-center w-full gap-2 text-dimmer select-none flex-nowrap;
   .slide {
     @apply max-w-[230px] w-full;
   }

vue/src/charts/modules/AudioModule.vue

@@ -13,7 +13,7 @@
             v-model="playingList[index]"
             :color="colors[0]"
             @play="handlePlay(index)"
-            @pause="handelPause(index)"
+            @pause="handlePause(index)"
           />
           <!-- 当前时间 -->
           <p class="text-sm ml-1" v-if="audioRef[index]">{{ formatTime(index) }}</p>
@@ -156,7 +156,7 @@ const draw = (index, r = 2, a = 2 / 3) => {
     ctx = canvas.getContext('2d')
     // 为每个canvas添加一个点击事件，用于控制播放
     canvas.addEventListener('click', (event) => {
-      handelClickCanvas(event, index)
+      handleClickCanvas(event, index)
     })
     // 挂载 canvas
     canvas.style.width = '100%'
@@ -301,8 +301,8 @@ const handlePlay = (index) => {
   audioRef[index].updator.start()
 }
 
-const handelPause = (index) => {
-  // console.log('handelPause')
+const handlePause = (index) => {
+  // console.log('handlePause')
   // console.log(audioRef)
   if (!audioRef[index].source) {
     // console.log('audiosRef.value[tag].source', audiosRef.value[tag].source)
@@ -316,7 +316,7 @@ const handelPause = (index) => {
 }
 
 // ---------------------------------- 点击播放处理 ----------------------------------
-const handelClickCanvas = (event, index) => {
+const handleClickCanvas = (event, index) => {
   // 更新当前点击水平位置的百分比，重新绘制波形图
   audioRef[index].offset = event.offsetX / event.target.offsetWidth
   draw(index)

vue/src/charts/modules/TextModule.vue

@@ -140,6 +140,12 @@ const indexes = computed(() => {
 const currentPage = ref(pages.value.minIndex)
 const currentIndex = ref(0)
 
+onMounted(() => {
+  currentIndex.value = indexes.value.length - 1
+  currentPage.value = indexes.value[currentIndex.value]
+  emits('getText', props.tag, currentIndex.value)
+})
+
 /**
  * 在翻页时找到有效页码和页码索引
  * @param {int} targetNumber 翻页页码

vue/src/charts/package/AudioChart.vue

@@ -32,7 +32,7 @@
         :min="minIndex"
         :bar-color="barColor"
         :key="slideKey"
-        @turn="handelTurn"
+        @turn="handleTurn"
         v-if="maxIndex !== minIndex"
       />
       <SlideBar
@@ -70,7 +70,7 @@
           :min="minIndex"
           :bar-color="barColor"
           :key="slideKey"
-          @turn="handelTurn"
+          @turn="handleTurn"
           v-if="maxIndex !== minIndex"
           :turn-by-arrow="isZoom"
         />
@@ -104,14 +104,12 @@ import AudioModule from '../modules/AudioModule.vue'
 import { ref, inject } from 'vue'
 import * as UTILS from './utils'
 import { useExperimentStore, useProjectStore } from '@swanlab-vue/store'
-import { useRoute } from 'vue-router'
 import { debounce } from '@swanlab-vue/utils/common'
 
 // ---------------------------------- 配置 ----------------------------------
 
 const experimentStore = useExperimentStore()
 const projectStore = useProjectStore()
-const route = useRoute()
 
 const props = defineProps({
   title: {
@@ -139,7 +137,7 @@ const sources = computed(() => {
 
 // 是否为多实验的图表，根据路由名称判断
 const isMulti = computed(() => {
-  return route.name === 'charts'
+  return props.chart.multi
 })
 
 /**
@@ -249,7 +247,7 @@ const currentIndex = computed({
 /**
  * step 滑块，点击上下按钮翻页
  */
-const handelTurn = (direction, value) => {
+const handleTurn = (direction, value) => {
   const keys = Array.from(Object.keys(stepsData))
   const index = keys.findIndex((item) => item > value)
   if (direction === 'forward') {
@@ -372,7 +370,7 @@ const handleTurnIndex = (direction, value) => {
 // 渲染
 const render = (data) => {
   changeData2Audio(data)
-  currentIndex.value = minIndex.value
+  currentIndex.value = maxIndex.value
 }
 // 重渲染
 const change = (data) => {

vue/src/charts/package/ImageChart.vue

@@ -28,7 +28,7 @@
       >
         <div class="image-detail" v-for="(s, index) in stepsData[currentIndex][source[0]]" :key="index">
           <div class="image-container">
-            <img :src="imagesData[s.filename].url" @click="handelClickZoom(s.filename, index)" />
+            <img :src="imagesData[s.filename].url" @click="handleClickZoom(s.filename, index)" />
             <DownloadButton class="download-button" @click.stop="download(s.filename)" />
           </div>
           <p class="text-xs">{{ s.caption }}</p>
@@ -44,7 +44,7 @@
           <div class="image-container">
             <img
               :src="imagesData[s[currentInnerIndex].filename].url"
-              @click="handelClickZoom(s[currentInnerIndex].filename, name)"
+              @click="handleClickZoom(s[currentInnerIndex].filename, name)"
             />
             <DownloadButton class="download-button" @click.stop="download(s[currentInnerIndex].filename)" />
           </div>
@@ -94,7 +94,7 @@
             :key="index"
           >
             <div class="image-container">
-              <img :src="imagesData[s.filename].url" @click="handelClickZoom(s.filename, index)" />
+              <img :src="imagesData[s.filename].url" @click="handleClickZoom(s.filename, index)" />
               <DownloadButton class="download-button" @click.stop="download(s.filename)" />
             </div>
             <p class="text-xs mt-2">{{ s.caption }}</p>
@@ -110,7 +110,7 @@
             <div class="image-container">
               <img
                 :src="imagesData[s[currentInnerIndex].filename].url"
-                @click="handelClickZoom(s[currentInnerIndex].filename, name)"
+                @click="handleClickZoom(s[currentInnerIndex].filename, name)"
               />
               <DownloadButton class="download-button" @click.stop="download(s[currentInnerIndex].filename)" />
             </div>
@@ -195,11 +195,9 @@ import SlideBar from '../components/SlideBar.vue'
 import * as UTILS from './utils'
 import { debounce } from '@swanlab-vue/utils/common'
 import DownloadButton from '../components/DownloadButton.vue'
-import { useRoute } from 'vue-router'
 
 const experimentStore = useExperimentStore()
 const projectStore = useProjectStore()
-const route = useRoute()
 
 // ---------------------------------- 配置 ----------------------------------
 
@@ -227,7 +225,7 @@ const source = computed(() => {
 })
 // 是否为多实验的图表，根据路由名称判断
 const isMulti = computed(() => {
-  return route.name === 'charts'
+  return props.chart.multi
 })
 /**
  * 实验名对应的run_id
@@ -473,7 +471,7 @@ const render = (data) => {
   // 数据格式化
   changeData2Image(data)
   // console.log('图像数据：', stepsData)
-  currentIndex.value = minIndex.value
+  currentIndex.value = maxIndex.value
 }
 // 重渲染
 const change = (data) => {
@@ -496,7 +494,7 @@ const signleZoomFilename = ref()
 // 当前单个图像的索引
 const currentSingleImageIndex = ref(0)
 // 点击某个图像，放大
-const handelClickZoom = (filename, index) => {
+const handleClickZoom = (filename, index) => {
   signleZoomFilename.value = filename
   isSingleZoom.value = true
   currentSingleImageIndex.value = isMulti.value ? visiableSources.value.indexOf(index) : index

vue/src/charts/package/LineChart.vue

@@ -16,7 +16,7 @@
       :key="legend.length"
       @hoverin="(item) => legendHoverin(item, false)"
       @hoverout="(item) => legendHoverout(item, false)"
-      v-if="legend && mutli"
+      v-if="legend && multi"
     />
     <div class="relative">
       <LineChartTooltip ref="tooltipRef" />
@@ -29,7 +29,7 @@
         :items="legend"
         @hoverin="(item) => legendHoverin(item, true)"
         @hoverout="(item) => legendHoverout(item, true)"
-        v-if="legend && mutli"
+        v-if="legend && multi"
       />
       <div class="relative" ref="g2ZoomRef">
         <LineChartTooltip detail ref="tooltipZoomRef" />
@@ -82,8 +82,8 @@ const props = defineProps({
 const source = props.chart.source
 // source的长度如果等于error的长度，说明所有数据都有问题,取第一个的error即可
 const error = ref(source.length === Object.keys(props.chart.error).length ? props.chart.error[source[0]] : null)
-// 图表模式，mutli或者single
-const mutli = props.chart.mutli
+// 图表模式，multi或者single
+const multi = props.chart.multi
 // 当前命名空间下除了自己的所有chartRef
 const chartRefList = inject('chartRefList')
 const chartRefListExceptSelf = computed(() => {
@@ -374,7 +374,7 @@ const format = (data) => {
   }
   legend.value = items
   console.log('legend', legend.value)
-  return { d, config: mutli || smoothMethod ? { seriesField } : { color: colors[0] } }
+  return { d, config: multi || smoothMethod ? { seriesField } : { color: colors[0] } }
 }
 
 const formatTime = (time) => {
@@ -512,7 +512,7 @@ const registerTooltipEvent = (dom, zoom) => {
 // 当前tooltip的数据,用于copy
 let nowData = null
 // 全局注册keydown事件，当mac端触发command+c，windows端触发ctrl+c时，且nowData不为null，执行copy操作
-const handelCopy = (e) => {
+const handleCopy = (e) => {
   if (error.value) return
   if (nowData === null) {
     return
@@ -539,15 +539,15 @@ const handelCopy = (e) => {
     copyTextToClipboard(content, () => message.success(t('common.chart.charts.line.copy.success')))
   }
 }
-window.addEventListener('keydown', handelCopy)
+window.addEventListener('keydown', handleCopy)
 onUnmounted(() => {
-  window.removeEventListener('keydown', handelCopy)
+  window.removeEventListener('keydown', handleCopy)
 })
 
 // ---------------------------------- 控制线段加粗 ----------------------------------
 /**
  * 当前加粗的tag,需要注意的是当前加粗的tag可能不存在于当前图表的数据中
- * mutli为true时，按照tag加粗，否则按照color加粗
+ * multi为true时，按照tag加粗，否则按照color加粗
  */
 let nowThickenTag = null
 /**
@@ -570,7 +570,7 @@ const thickenByTag = (plot, zoom, tag, color) => {
   const els = plot.chart.getElements()
   for (const e of els) {
     // 多数据模式下，依据tag加粗
-    if (mutli) {
+    if (multi) {
       // 如果是array，取[0],如果是object，取series
       const series = e.model.data[0]?.series || e.model.data.series
       // console.log('series', series)
@@ -608,7 +608,7 @@ const restoreByTag = (plot, zoom, tag, color) => {
   const els = plot.chart.getElements()
   for (const e of els) {
     // 多数据模式下，依据tag恢复
-    if (mutli) {
+    if (multi) {
       const series = e.model.data[0]?.series || e.model.data.series
       if (series === tag) {
         e.update({ ...e.model, style: { lineWidth: lineWidth } })