brainsmatics 1.1.77 → 1.1.78

package/.opencode/skills/three/SKILL.md

@@ -1,82 +0,0 @@
----
-description: 专注于在 React 架构下通过原生 Three.js 进行分布式场景管理和对象生命周期控制
-tags: [threejs, webgl, react-integration, scene-management]
----
-
-# Three.js Distributed Architecture Skill
-
-## 角色定位
-你是一个精通 Three.js 架构的专家。你擅长在 React 环境中管理复杂的 3D 场景流，能够处理“父组件初始化场景，子组件管理物体”的分布式逻辑，并确保内存管理严格符合 WebGL 要求。
-
-## 核心准则 (分布式开发)
-1.  **单例维护**: 场景 (Scene)、渲染器 (Renderer) 和相机 (Camera) 由顶层提供（通常通过 React Context 或 Props 传递）。
-2.  **子组件职责**: 
-    - 子组件不应创建渲染器，只负责创建、添加和删除其管辖内的 `Object3D`。
-    - 在 `useEffect` 的挂载阶段将物体 `scene.add(object)`。
-    - 在卸载阶段必须执行 `scene.remove(object)` 并调用 `geometry.dispose()` 和 `material.dispose()`。
-3.  **引用一致性**: 使用 `useRef` 持有 Three.js 原生对象，确保在 React 重绘时对象不被重新创建。
-4.  **数据同步**: 监听 Props 变化，在 `useEffect` 中手动更新 Three.js 对象的属性（如 `position.set()`, `material.color.set()`）。
-
-## 推荐架构模式
-
-### 1. 顶层共享模式 (Context)
-建议使用 React Context 共享底层的 Three.js 实例，以便深层子组件访问。
-
-### 2. 子组件示例 (Logic Fragment)
-当需要编写一个负责渲染特定物体的子组件时，遵循以下结构：
-
-```typescript
-import React, { useEffect, useRef } from 'react';
-import * as THREE from 'three';
-
-interface BoxProps {
-  scene: THREE.Scene; // 从父组件或 Context 传入
-  position: [number, number, number];
-  color: string;
-}
-
-export const BoxElement: React.FC<BoxProps> = ({ scene, position, color }) => {
-  const meshRef = useRef<THREE.Mesh>();
-
-  useEffect(() => {
-    // 初始化物体
-    const geo = new THREE.BoxGeometry(1, 1, 1);
-    const mat = new THREE.MeshStandardMaterial({ color });
-    const mesh = new THREE.Mesh(geo, mat);
-    mesh.position.set(...position);
-    
-    // 挂载到全局场景
-    scene.add(mesh);
-    meshRef.current = mesh;
-
-    // 销毁逻辑：必须彻底释放显存
-    return () => {
-      scene.remove(mesh);
-      geo.dispose();
-      mat.dispose();
-    };
-  }, [scene]); // 仅在场景对象变更时重新初始化
-
-  // 监听属性变化并同步到 Three.js 对象
-  useEffect(() => {
-    if (meshRef.current) {
-      meshRef.current.position.set(...position);
-      (meshRef.current.material as THREE.MeshStandardMaterial).color.set(color);
-    }
-  }, [position, color]);
-
-  return null; // 这是一个逻辑组件，不渲染任何 DOM
-};
-```
-## 调试与诊断
-1. **物体未显示**: 
-  - 确认子组件是否正确执行了 scene.add()。
-  - 确认 mesh.frustumCulled 是否导致物体在相机视野外被剔除。
-  - **检查父组件的渲染循环 (requestAnimationFrame) 是否正在运行。
-2. **内存持续增长**: 检查子组件卸载时是否遗漏了 geometry.dispose()。使用 renderer.info.memory 监控资源。
-3. **重复添加**: 确保 scene.add 逻辑在 useEffect 中有正确的清理机制，防止 React StrictMode 下重复挂载。
-
-## 注意事项
-1. **计算逻辑**: 复杂的几何计算应放在 useMemo 中或单独的 worker 中，避免阻塞 React 主线程。
-2. **渲染频率**: 不要将 Three.js 的每一帧状态同步回 React 的 State，这会导致严重的性能瓶颈。
-3. **坐标系一致性**: 在分布式开发中，所有子组件应约定使用统一的比例尺和坐标基准。

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-    "typescript.tsdk": "node_modules/typescript/lib"
-}

package/AGENTS.md

@@ -1,406 +0,0 @@
-# AGENTS.md
-
-This file defines how agentic coding assistants should operate in this repository.
-It is consumed by tools such as OpenCode, Cursor, Claude Code, etc.
-
-======================================================================
-Project Overview
-======================================================================
-
-Project name: brain-ui (brainsmatics)
-
-This is a **React component library** for neuroscience data visualization, built with:
-
-- React 18
-- TypeScript 4.9.5
-- Vite 4.2.0
-- Ant Design (antd) 5.24.6 + Ant Design X (@ant-design/x) 1.1.0
-- Three.js 0.157.0
-- Storybook 7.0.6
-
-The project provides reusable UI components for:
-- **3D brain visualization** (neurons, brain atlases, regions, SWC files)
-- **2D data viewers** (grids, thumbnails, navigation trees)
-- **AI chat integration** (LLM-powered neuroscience assistant)
-- **Medical imaging** (NIfTI, TIFF, GeoTIFF support)
-
-======================================================================
-Package Management
-======================================================================
-
-Preferred package manager:
-- **pnpm** (preferred if lockfile exists - `pnpm-lock.yaml`)
-- **npm** (if `package-lock.json` exists)
-- **yarn** (if `yarn.lock` exists)
-
-Do NOT introduce new dependencies unless explicitly requested.
-
-======================================================================
-Development / Build Commands
-======================================================================
-
-Install dependencies:
-```bash
-pnpm install
-# or
-npm install
-# or
-yarn install
-```
-
-Start development server:
-```bash
-pnpm dev
-# or
-npm run dev
-```
-
-Production build (library):
-```bash
-pnpm build
-# or
-npm run build
-```
-
-Preview production build:
-```bash
-pnpm preview
-# or
-npm run preview
-```
-
-======================================================================
-Storybook
-======================================================================
-
-Run Storybook locally:
-```bash
-pnpm storybook
-# or
-npm run storybook
-```
-
-Build Storybook:
-```bash
-pnpm build-storybook
-# or
-npm run build-storybook
-```
-
-Story files should be colocated with components and named:
-- `*.stories.tsx`
-- `*.stories.ts`
-
-Storybook configuration:
-- Main config: `.storybook/main.js`
-- Preview config: `.storybook/preview.js`
-- Custom middleware: `.storybook/middleware.js` (for API proxying)
-
-======================================================================
-Project Structure
-======================================================================
-
-```
-src/
-├── component/
-│   ├── 2d/           # 2D visualization components
-│   │   ├── gridviewer/      # Grid-based data viewer
-│   │   ├── navtree/         # Navigation tree component
-│   │   ├── navigation/      # Navigation controls
-│   │   ├── thumbnail/       # Thumbnail viewer
-│   │   ├── distribution/    # Data distribution charts
-│   │   ├── mulifiveiewer/   # Multi-view layout
-│   │   ├── twoviewer/       # Dual view comparison
-│   │   └── ...
-│   ├── 3d/           # 3D visualization components
-│   │   ├── functionLoop/    # AI-powered functional circuit analysis
-│   │   ├── aichat/          # AI chat interface (@ant-design/x)
-│   │   ├── swctree/         # SWC neuron file viewer
-│   │   ├── modalLoader/     # 3D model loader (FBX/OBJ)
-│   │   ├── stlLoader/       # STL file loader
-│   │   ├── atlas/           # Brain atlas viewer
-│   │   ├── sideBar/         # 3D viewer sidebar
-│   │   ├── volumeAnalysis/  # Volume data analysis
-│   │   ├── registration/    # Image registration
-│   │   └── ...
-│   ├── common/       # Shared UI components
-│   │   ├── Button/
-│   │   └── Header/
-│   ├── types/        # TypeScript type definitions
-│   └── util/         # Utility functions
-│       ├── i18n.ts          # Internationalization (i18next)
-│       ├── global.ts        # Global state/variables
-│       ├── swc.ts           # SWC file utilities
-│       └── ...
-├── stories/          # Storybook stories
-└── assets/           # Static assets (fonts, icons)
-```
-
-======================================================================
-TypeScript Rules
-======================================================================
-
-- Always use TypeScript (.ts / .tsx)
-- Avoid `any` unless absolutely unavoidable
-- Prefer explicit types for:
-  - component props
-  - public functions
-- Use `interface` for component props and public APIs
-- Use `type` for unions, utility types, and internal helpers
-
-Example:
-
-```typescript
-interface ComponentProps {
-  value: number;
-  onChange?: (value: number) => void;
-}
-```
-
-Compiler options (from tsconfig.json):
-- Strict mode enabled (`strict: true`)
-- Declaration files generated (`declaration: true`)
-- Path mapping: `"brainsmatics/STAM"` → `dist/component/STAM.d.ts`
-
-======================================================================
-React Rules
-======================================================================
-
-- Use **function components only**
-- Do NOT use class components
-- Follow the Rules of Hooks
-- Prefer composition over inheritance
-- Extract reusable logic into custom hooks
-- Avoid deeply nested JSX structures
-
-State management:
-- Prefer local state (`useState` / `useReducer`)
-- Use global state sparingly (see `src/component/util/global.ts`)
-- Use refs for mutable values that should not trigger re-render
-
-Performance:
-- Use `useMemo` / `useCallback` for expensive computations
-- Avoid creating new objects/functions inside render unless required
-
-======================================================================
-Component Structure
-======================================================================
-
-Recommended component structure:
-
-```
-ComponentName/
-  ├─ index.tsx              # Main component export
-  ├─ index.css              # Component styles
-  ├─ ComponentName.stories.tsx   # Storybook stories
-  ├─ types.ts               # Component-specific types (optional)
-  └─ SubComponent.tsx       # Child components (optional)
-```
-
-Rules:
-- `index.tsx` exports the component
-- Styles are colocated with the component
-- Stories demonstrate common usage and edge cases
-- Use CSS Modules for complex styling (e.g., `index.module.css`)
-
-======================================================================
-Ant Design (antd) Usage
-======================================================================
-
-- Use antd components as the primary UI building blocks
-- Also available: **Ant Design X** (`@ant-design/x`) for AI chat interfaces
-  - `Bubble` - Chat message bubbles
-  - `Sender` - Message input
-  - `Prompts` - Prompt suggestions
-- Avoid copying or modifying antd internal styles
-- Prefer composition instead of overriding antd components
-- Use `className` or `style` props for customization
-- Avoid deep CSS selectors targeting antd internals
-
-======================================================================
-Three.js Usage
-======================================================================
-
-- Keep Three.js logic isolated from UI logic when possible
-- Use shared global scene/camera from `src/component/util/global.ts`
-- Avoid heavy allocations inside render loops
-- Be mindful of GPU memory usage
-- Always clean up resources when no longer needed:
-  ```typescript
-  geometry.dispose()
-  material.dispose()
-  texture.dispose()
-  ```
-- Avoid unnecessary re-creation of:
-  - geometries
-  - materials
-  - textures
-- Prefer memoization for expensive objects
-
-Common Three.js imports:
-```typescript
-import * as THREE from "three";
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
-import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
-import { Line2 } from "three/examples/jsm/lines/Line2";
-import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
-import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
-```
-
-======================================================================
-Internationalization (i18n)
-======================================================================
-
-The project uses **i18next** with react-i18next for internationalization.
-
-Supported languages:
-- English (`en_us`)
-- Chinese (`zh_cn`)
-
-Translation files:
-- `src/component/util/en_us.json`
-- `src/component/util/zh_cn.json`
-
-Usage in components:
-```typescript
-import { change_language } from '../util/i18n';
-
-// Component receives `t` function via props
-interface Props {
-  t: (key: string) => string;
-}
-```
-
-======================================================================
-Key Dependencies
-======================================================================
-
-Core:
-- `react` / `react-dom` (peer dependencies, >=18.0.0)
-- `typescript` 4.9.5
-
-UI Framework:
-- `antd` 5.24.6
-- `@ant-design/x` 1.1.0 (AI chat components)
-- `@ant-design/x-markdown` 2.0.0-alpha.5
-
-3D Visualization:
-- `three` 0.157.0
-- `@types/three` 0.157.2
-
-Medical Imaging:
-- `@itk-wasm/image-io` 1.6.0
-- `nifti-reader-js` 0.8.0
-- `geotiff` 2.1.3
-- `tiff` 6.0.0
-
-Charts & Data:
-- `echarts` 5.5.1
-- `react-window` 1.8.9 (virtualization)
-
-Maps:
-- `leaflet` 1.9.4
-- `react-leaflet` 4.2.1
-
-Utilities:
-- `i18next` / `react-i18next` (internationalization)
-- `socket.io-client` 4.8.1
-- `markdown-it` 14.1.0
-- `react-markdown` 10.1.0
-- `dompurify` 3.2.5
-
-======================================================================
-Performance Guidelines
-======================================================================
-
-- Avoid unnecessary re-renders
-- Use `useMemo` / `useCallback` for expensive computations
-- Do not create new objects/functions inside render unless required
-- Be careful with `requestAnimationFrame` loops
-- Pay attention to performance in Three.js related code
-- Use `react-window` for long lists
-- Dispose Three.js resources properly
-
-======================================================================
-Error Handling
-======================================================================
-
-- Do not silently swallow errors
-- Log meaningful error messages
-- Validate external or dynamic data before usage
-- Prefer early returns over deeply nested conditionals
-- Use antd's `message` API for user-facing errors
-
-======================================================================
-Imports & Naming
-======================================================================
-
-Imports order:
-1. React and external libraries
-2. UI components (antd, @ant-design/x)
-3. Three.js and visualization libraries
-4. Internal hooks / utils
-5. Styles
-
-Naming conventions:
-- Components: PascalCase (e.g., `FunctionLoop`, `SwcTree`)
-- Hooks: camelCase with `use` prefix (e.g., `useSomething`)
-- Files: follow existing project convention
-- Variables: camelCase
-- Constants: UPPER_SNAKE_CASE
-
-======================================================================
-Build Configuration
-======================================================================
-
-Vite configuration (`vite.config.js`):
-- Library mode build (outputs ES and CJS formats)
-- Entry point: `src/index.ts`
-- External dependencies: `react`, `react-dom`
-- TypeScript declaration files generated
-- Proxy configured for `/api` → `http://192.168.50.54:8080`
-
-Output:
-- Main: `dist/index.mjs`
-- Types: `dist/index.d.ts`
-- CSS: `dist/style.css`
-
-======================================================================
-Testing (If Present)
-======================================================================
-
-- Prefer testing public behavior over implementation details
-- Avoid excessive snapshot testing
-- Keep tests focused and readable
-- Use Storybook for component testing and documentation
-
-======================================================================
-Agent Behavior Rules (IMPORTANT)
-======================================================================
-
-When modifying code, agents MUST:
-
-1. Read existing code before making changes
-2. Follow existing patterns and conventions
-3. Keep changes minimal and scoped
-4. Do NOT refactor unrelated code
-5. Do NOT introduce new dependencies unless requested
-6. Ensure TypeScript types remain correct
-7. Ensure Storybook stories still work if affected
-8. Respect the existing component architecture (2d vs 3d separation)
-
-If a change is non-trivial, explain WHY the change is needed.
-
-======================================================================
-Out of Scope
-======================================================================
-
-- Backend logic
-- API implementations
-- CI/CD configuration unless explicitly requested
-- Database schema changes
-
-======================================================================
-End of AGENTS.md
-======================================================================

package/Dockerfile

@@ -1,18 +0,0 @@
-# 使用 Node.js 18 的 Alpine 版本作为基础镜像
-FROM node:19-alpine
-
-# 设置工作目录
-WORKDIR /app
-
-# 复制 package.json 和 yarn.lock
-COPY package.json .
-
-# 安装项目依赖
-RUN yarn install --frozen-lockfile --ignore-scripts
-# 复制项目文件
-
-# 暴露应用运行的端口
-EXPOSE 6006
-
-# 启动应用
-# CMD ["yarn", "run", "storybook"]

package/REAMED2.md

@@ -1,157 +0,0 @@
-### 创建`recat`项目
-
-```
-npm install -g create-react-app 
-```
-
-判断是否安装成功
-
-```
-create-react-app -V
-```
-
-创建项目
-
-```bash
-npx create-react-app <项目名称>
-```
-
-进入项目路径
-
-```
-cd 项目名称
-```
-
-### 安装组件
-
-```
-npm install brainsmatics
-```
-
-### 使用组件
-
-```tsx
-import {Atlas} from "brainsmatics/STAM";
-import {fetchDatas} from "brainsmatics/STAM";
-const AtlasViewer=()=>{
-    const [treeDatas, setTreeData] = useState([]); // 处理完成的 fbx树结构数据
-    const [swctreeDatas, setswcTreeData] = useState([]); // swc树结构数据
-    const [pointDatas, setPointData] = useState([]);// 模型里面的基准点（红点）数据
-    const [axon_check,setAxon_check] = useState([]);
-    const [soma_check,setSoma_check] = useState([]);
-    const [fbxTreeDatas,setFBXTreeData] = useState([]); // fbx树结构数据
-    const gray_value = useRef<any>({}); //2d切片的灰度图对应的核团
-    useEffect(()=>{
-        fetchData('/staticresource/data/TreeData/nucleusColour.json',setFBXTreeData)
-        fetchData('/staticresource/data/TreeData/vesseltree.json', setTreeData);
-    
-        fetchData('/staticresource/data/json/output.json', setPointData);
-        
-        fetchData('/staticresource/data/TreeData/swctree.json', setswcTreeData);
-        
-        fetchData('/staticresource/data/json/axon_check.json', setAxon_check);
-        
-        fetchData('/staticresource/data/json/soma_check.json', setSoma_check);
-        
-        fetchData('/staticresource/data/json/rgb_value.json', gray_value);
-    },[])
-return(
-<Atlas
-        treeDatas={treeDatas}
-        pointDatas={pointDatas}
-        axon_check={axon_check}
-        soma_check={soma_check}
-        fbxTreeDatas={fbxTreeDatas}
-        gray_value={gray_value}
-        swctreeDatas={swctreeDatas}
-        ScaleNum={0.01}
-        lefttab={["label","neurons"]}// label vessel neurons
-        righttab={["neurons"]}// label neurons mapping download registration reslicing virtual
-	regionData={"/staticresource/data/FBX"}
-	lang={"en_us"}
-        />
-        )
-export default AtlasViewer
-```
-
-> `regionData` `fbx`模型地址文件以`FBX`后缀
->
-> `treeDatas` 左侧血管结构数据
->
-> `pointDatas` 基准点数据
->
-> `axon_chec` 神经元末梢点数据
->
-> `soma_check` 神经元胞体点数据
->
-> `fbxTreeDatas` `fbx`树结构数据
->
-> `gray_value` 图谱切面灰度值对应核团
->
-> `swctreeDatas` `swc`树结构
->
-> `lefttab` 选择展示的左侧`tab`栏
->
-> `righttab` 选择展示的右侧`tab`栏
->
-> `lang` 选择语言
-
-### 创建接口代理
-
-```
-npm install http-proxy-middleware
-```
-
-使用它可以指定接口访问哪个服务器
-
-> 在src目录下创建一个`setupProxy.js`
-
-```js
-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-module.exports = function(app) {
-	// 配准服务
-    app.use(
-    '/app-api/up-api',
-    createProxyMiddleware({
-        target:"http://atlas.brainsmatics.org/app-api/up-api",
-        changeOrigin: true,
-    }));
-    // 图谱切片 病毒注射
-    app.use(
-    '/app-api/c-api',
-    createProxyMiddleware({
-        target:"http://atlas.brainsmatics.org/app-api/c-api",
-        changeOrigin: true,
-    }));
-    // 数据下载
-    app.use(
-    '/app-api/test-api',
-    createProxyMiddleware({
-        target:"http://atlas.brainsmatics.org/app-api/test-api",
-        changeOrigin: true,
-    }));
-    // 图谱转换
-    app.use(
-        '/app-api/d-api',
-        createProxyMiddleware({
-            target:"http://atlas.brainsmatics.org/app-api/d-api",
-            changeOrigin: true,
-        }));
-};
-```
-
-> 使用默认`brainsmatics`接口配置为研究院公网地址
-
-启动项目
-
-```
-npm start
-```
-
-打包项目
-
-```
-npm build
-```
-

package/STAM.d.ts

@@ -1 +0,0 @@
-export * from "./dist/component/STAM";

package/addPublishRules.js

@@ -1,22 +0,0 @@
-const fs = require('fs');
-const os = require('os');
-// 读取文件的路径
-const filePath = '.gitignore'; // 替换为你的文件路径
-const newLine = os.EOL; // 获取当前操作系统的换行符
-fs.readFile(filePath, 'utf8', (err, data) => {
-  if (err) {
-    console.error('读取文件时出错:', err);
-    return;
-  }
-  data+=newLine;
-  data+='/src';
-
-  // 写入替换后的内容回文件
-  fs.writeFile(filePath, data, 'utf8', (err) => {
-    if (err) {
-      console.error('写入文件时出错:', err);
-    } else {
-      console.log('添加完成！');
-    }
-  });
-});