Feat/group folding

swanlab/db/db_connect.py

@@ -10,7 +10,7 @@
 from ..env import get_db_path
 import os
 from peewee import SqliteDatabase
-from .table_config import tables, Tag, Experiment
+from .table_config import tables, Tag, Experiment, Namespace
 from .migrate import *
 
 # 判断是否已经binded了
@@ -57,6 +57,10 @@ def connect(autocreate=False) -> SqliteDatabase:
         swandb.bind(tables)
         swandb.create_tables(tables)
         swandb.close()
+        # 完成数据迁移，如果namespace表中没有opened字段，则添加
+        if not Namespace.field_exists("opened"):
+            # 不启用外键约束
+            add_opened(SqliteDatabase(path))
         # 完成数据迁移，如果experiment表中没有finish_time字段，则添加
         if not Experiment.field_exists("finish_time"):
             # 不启用外键约束

swanlab/db/migrate/__init__.py

@@ -9,3 +9,4 @@
 """
 from .tag_sort import add_sort
 from .exp_finish_time import add_finish_time
+from .namespace_opened import add_opened

swanlab/db/migrate/namespace_opened.py

@@ -0,0 +1,21 @@
+#!/usr/bin/env python
+# -*- coding: utf-8 -*-
+r"""
+@DATE: 2024-03-05 19:42:52
+@File: swanlab/db/migrate/namespace_opened.py
+@IDE: vscode
+@Description:
+    为namespace增加opened字段
+"""
+from peewee import SqliteDatabase, IntegerField
+from playhouse.migrate import migrate, SqliteMigrator
+
+
+def add_opened(db):
+    """
+    为数据库的namespace表添加opened字段,用于记录命名空间是否已经被打开
+    默认值为False
+    """
+    migrator = SqliteMigrator(db)
+    opened = IntegerField(default=1)
+    migrate(migrator.add_column("namespace", "opened", opened))

swanlab/db/models/namespaces.py

@@ -58,6 +58,8 @@ class Meta:
     """命名空间描述，可为空"""
     sort = IntegerField()
     """命名空间索引，用于排序，同一个项目/实验下，命名空间索引不能重复，索引越小，排序越靠前，索引>=0"""
+    opened = IntegerField(default=1)
+    """命名空间是否已经被打开，默认为1，表示已经被打开，0表示未被打开"""
     more = TextField(default=None, null=True)
     """更多信息配置，json格式，将在表函数中检查并解析"""
     create_time = CharField(max_length=30, null=False)
@@ -68,7 +70,7 @@ class Meta:
     def __dict__(self):
         return {
             "id": self.id,
-            "experiment_id": self.experiment_id,
+            "experiment_id": self.experiment_id.__dict__(),
             "project_id": self.project_id,
             "name": self.name,
             "description": self.description,

swanlab/server/app.py

@@ -85,6 +85,7 @@ async def _(*args, **kwargs):
 # 导入数据相关的路由
 from .router.experiment import router as experiment
 from .router.project import router as project
+from .router.namespace import router as namespace
 
 # 媒体文件路由，允许前端获取其他产生的媒体文件
 from .router.media import router as media
@@ -94,3 +95,4 @@ async def _(*args, **kwargs):
 app.include_router(project, prefix=prefix + "/project")
 app.include_router(experiment, prefix=prefix + "/experiment")
 app.include_router(media, prefix=prefix + "/media")
+app.include_router(namespace, prefix=prefix + "/namespace")

swanlab/server/controller/namespace.py

@@ -0,0 +1,46 @@
+import os
+import ujson
+import shutil
+from ..module.resp import SUCCESS_200, DATA_ERROR_500, CONFLICT_409, NOT_FOUND_404
+from fastapi import Request
+
+import yaml
+from typing import List, Dict
+
+from ...db import connect, NotExistedError
+
+from ...db import (
+    Namespace,
+)
+
+
+__to_list = Namespace.search2list
+
+
+# 修改namespace可见性
+def change_namespace_visibility(namespace_id: int, opened: int):
+    """修改namespace可见性
+
+    Parameters
+    ----------
+    namespace_id : int
+        _description_
+    opened : int
+        在一个实验下，该namespace是否可见，true -> 1 , false -> 0
+
+    Returns
+    -------
+    _type_:dict
+        当前namespace信息
+    """
+    try:
+        namespace = Namespace.get_by_id(namespace_id)
+    except NotExistedError:
+        return NOT_FOUND_404("Namespace with id {} does not exist.".format(namespace_id))
+    if opened:
+        namespace.opened = 1
+    else:
+        namespace.opened = 0
+    namespace.save()
+    print(namespace_id, namespace.opened, opened)
+    return SUCCESS_200({"namespace": namespace.__dict__()})

swanlab/server/router/namespace.py

@@ -0,0 +1,34 @@
+from fastapi import APIRouter
+from ..module.resp import PARAMS_ERROR_422
+
+from ..controller.namespace import (
+    # 修改namespace可见性
+    change_namespace_visibility,
+)
+from fastapi import Request
+from urllib.parse import quote
+
+router = APIRouter()
+
+
+# 修改namespace可见性
+@router.patch("/{namespace_id}/opened")
+async def _(namespace_id: int, request: Request):
+    """修改namespace可见性
+
+    Parameters
+    ----------
+    experiment_id : int
+        实验id
+    request : Request
+        请求体，包含 opened 字段
+    Returns
+    -------
+    experiment : dict
+        当前实验信息
+    """
+
+    opened = (await request.json()).get("opened")
+    if opened is None:
+        return PARAMS_ERROR_422("Request parameter 'show'")
+    return change_namespace_visibility(namespace_id, opened)

vue/src/charts/ChartsDashboard.vue

@@ -10,6 +10,8 @@
     :key="group.name"
     :label="getNamespaces(group.name)"
     :charts="getCharts(group)"
+    :opened="!!group.opened"
+    @switch="(opened) => debouncedHandleSwitch(group.id, opened)"
   />
 </template>
 
@@ -22,6 +24,8 @@
 import ChartsContainer from './components/ChartsContainer.vue'
 import { t } from '@swanlab-vue/i18n'
 import SmoothButton from './components/SmoothButton.vue'
+import { debounce } from '@swanlab-vue/utils/common'
+import http from '@swanlab-vue/api/http'
 const props = defineProps({
   // 整个图表列表集合
   groups: {
@@ -66,6 +70,17 @@ const handleSmooth = (method) => {
     })
   })
 }
+
+// ---------------------------------- 在此处处理命名空间打开和关闭 ----------------------------------
+const handleSwitch = (id, opened) => {
+  console.log('namespace click', id, opened)
+  // 向后端更新展开状态
+  http.patch('/namespace/' + id + '/opened', {
+    opened
+  })
+}
+
+const debouncedHandleSwitch = debounce(handleSwitch, 300)
 </script>
 
 <style lang="scss" scoped>

vue/src/charts/components/ChartsContainer.vue

@@ -4,7 +4,7 @@
     <!-- 控制栏 -->
     <div class="flex items-center">
       <!-- 关闭、展开按钮 -->
-      <button class="flex items-center gap-1 relative" @click="handleExpand">
+      <button class="flex items-center gap-1 relative" @click="handleNamespaceClick">
         <SLIcon icon="down" class="w-6 h-6 absolute -left-6" :class="{ '-rotate-90': !isExpand }" />
         {{ label }}
         <span class="px-3 bg-highest text-sm rounded-full ml-2 text-difault">{{ charts.length || 0 }}</span>
@@ -43,15 +43,19 @@ const props = defineProps({
   charts: {
     type: Array,
     required: true
+  },
+  opened: {
+    type: Boolean,
+    required: true
   }
 })
-
+const emit = defineEmits(['switch'])
 // ---------------------------------- 控制展开和关闭的状态 ----------------------------------
+const isExpand = ref(props.opened)
 
-const isExpand = ref(true)
-
-const handleExpand = () => {
+const handleNamespaceClick = () => {
   isExpand.value = !isExpand.value
+  emit('switch', isExpand.value)
 }
 
 // ---------------------------------- charts组件列表 ----------------------------------

vue/src/views/charts/ChartsView.vue

@@ -40,7 +40,7 @@ const generateGroups = () => {
   const groups = []
   namespaces.value.forEach((namespace) => {
     const group = {
-      name: namespace.name,
+      ...namespace,
       charts: []
     }
     namespace.charts.forEach((chart_id) => {

vue/src/views/charts/components/ChartsPage.vue

@@ -10,7 +10,7 @@
  * @since: 2024-02-06 17:17:55
  **/
 import { useProjectStore } from '@swanlab-vue/store'
-import { provide, onUnmounted } from 'vue'
+import { provide, onUnmounted, onMounted } from 'vue'
 import http from '@swanlab-vue/api/http'
 import ChartsDashboard from '@swanlab-vue/charts/ChartsDashboard.vue'
 const props = defineProps({
@@ -25,6 +25,7 @@ const props = defineProps({
     required: true
   }
 })
+
 const projectStore = useProjectStore()
 
 // ---------------------------------- 轮询器 ----------------------------------