brainsmatics 1.1.76 → 1.1.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/AGENTS.md DELETED
@@ -1,406 +0,0 @@
1
- # AGENTS.md
2
-
3
- This file defines how agentic coding assistants should operate in this repository.
4
- It is consumed by tools such as OpenCode, Cursor, Claude Code, etc.
5
-
6
- ======================================================================
7
- Project Overview
8
- ======================================================================
9
-
10
- Project name: brain-ui (brainsmatics)
11
-
12
- This is a **React component library** for neuroscience data visualization, built with:
13
-
14
- - React 18
15
- - TypeScript 4.9.5
16
- - Vite 4.2.0
17
- - Ant Design (antd) 5.24.6 + Ant Design X (@ant-design/x) 1.1.0
18
- - Three.js 0.157.0
19
- - Storybook 7.0.6
20
-
21
- The project provides reusable UI components for:
22
- - **3D brain visualization** (neurons, brain atlases, regions, SWC files)
23
- - **2D data viewers** (grids, thumbnails, navigation trees)
24
- - **AI chat integration** (LLM-powered neuroscience assistant)
25
- - **Medical imaging** (NIfTI, TIFF, GeoTIFF support)
26
-
27
- ======================================================================
28
- Package Management
29
- ======================================================================
30
-
31
- Preferred package manager:
32
- - **pnpm** (preferred if lockfile exists - `pnpm-lock.yaml`)
33
- - **npm** (if `package-lock.json` exists)
34
- - **yarn** (if `yarn.lock` exists)
35
-
36
- Do NOT introduce new dependencies unless explicitly requested.
37
-
38
- ======================================================================
39
- Development / Build Commands
40
- ======================================================================
41
-
42
- Install dependencies:
43
- ```bash
44
- pnpm install
45
- # or
46
- npm install
47
- # or
48
- yarn install
49
- ```
50
-
51
- Start development server:
52
- ```bash
53
- pnpm dev
54
- # or
55
- npm run dev
56
- ```
57
-
58
- Production build (library):
59
- ```bash
60
- pnpm build
61
- # or
62
- npm run build
63
- ```
64
-
65
- Preview production build:
66
- ```bash
67
- pnpm preview
68
- # or
69
- npm run preview
70
- ```
71
-
72
- ======================================================================
73
- Storybook
74
- ======================================================================
75
-
76
- Run Storybook locally:
77
- ```bash
78
- pnpm storybook
79
- # or
80
- npm run storybook
81
- ```
82
-
83
- Build Storybook:
84
- ```bash
85
- pnpm build-storybook
86
- # or
87
- npm run build-storybook
88
- ```
89
-
90
- Story files should be colocated with components and named:
91
- - `*.stories.tsx`
92
- - `*.stories.ts`
93
-
94
- Storybook configuration:
95
- - Main config: `.storybook/main.js`
96
- - Preview config: `.storybook/preview.js`
97
- - Custom middleware: `.storybook/middleware.js` (for API proxying)
98
-
99
- ======================================================================
100
- Project Structure
101
- ======================================================================
102
-
103
- ```
104
- src/
105
- ├── component/
106
- │ ├── 2d/ # 2D visualization components
107
- │ │ ├── gridviewer/ # Grid-based data viewer
108
- │ │ ├── navtree/ # Navigation tree component
109
- │ │ ├── navigation/ # Navigation controls
110
- │ │ ├── thumbnail/ # Thumbnail viewer
111
- │ │ ├── distribution/ # Data distribution charts
112
- │ │ ├── mulifiveiewer/ # Multi-view layout
113
- │ │ ├── twoviewer/ # Dual view comparison
114
- │ │ └── ...
115
- │ ├── 3d/ # 3D visualization components
116
- │ │ ├── functionLoop/ # AI-powered functional circuit analysis
117
- │ │ ├── aichat/ # AI chat interface (@ant-design/x)
118
- │ │ ├── swctree/ # SWC neuron file viewer
119
- │ │ ├── modalLoader/ # 3D model loader (FBX/OBJ)
120
- │ │ ├── stlLoader/ # STL file loader
121
- │ │ ├── atlas/ # Brain atlas viewer
122
- │ │ ├── sideBar/ # 3D viewer sidebar
123
- │ │ ├── volumeAnalysis/ # Volume data analysis
124
- │ │ ├── registration/ # Image registration
125
- │ │ └── ...
126
- │ ├── common/ # Shared UI components
127
- │ │ ├── Button/
128
- │ │ └── Header/
129
- │ ├── types/ # TypeScript type definitions
130
- │ └── util/ # Utility functions
131
- │ ├── i18n.ts # Internationalization (i18next)
132
- │ ├── global.ts # Global state/variables
133
- │ ├── swc.ts # SWC file utilities
134
- │ └── ...
135
- ├── stories/ # Storybook stories
136
- └── assets/ # Static assets (fonts, icons)
137
- ```
138
-
139
- ======================================================================
140
- TypeScript Rules
141
- ======================================================================
142
-
143
- - Always use TypeScript (.ts / .tsx)
144
- - Avoid `any` unless absolutely unavoidable
145
- - Prefer explicit types for:
146
- - component props
147
- - public functions
148
- - Use `interface` for component props and public APIs
149
- - Use `type` for unions, utility types, and internal helpers
150
-
151
- Example:
152
-
153
- ```typescript
154
- interface ComponentProps {
155
- value: number;
156
- onChange?: (value: number) => void;
157
- }
158
- ```
159
-
160
- Compiler options (from tsconfig.json):
161
- - Strict mode enabled (`strict: true`)
162
- - Declaration files generated (`declaration: true`)
163
- - Path mapping: `"brainsmatics/STAM"` → `dist/component/STAM.d.ts`
164
-
165
- ======================================================================
166
- React Rules
167
- ======================================================================
168
-
169
- - Use **function components only**
170
- - Do NOT use class components
171
- - Follow the Rules of Hooks
172
- - Prefer composition over inheritance
173
- - Extract reusable logic into custom hooks
174
- - Avoid deeply nested JSX structures
175
-
176
- State management:
177
- - Prefer local state (`useState` / `useReducer`)
178
- - Use global state sparingly (see `src/component/util/global.ts`)
179
- - Use refs for mutable values that should not trigger re-render
180
-
181
- Performance:
182
- - Use `useMemo` / `useCallback` for expensive computations
183
- - Avoid creating new objects/functions inside render unless required
184
-
185
- ======================================================================
186
- Component Structure
187
- ======================================================================
188
-
189
- Recommended component structure:
190
-
191
- ```
192
- ComponentName/
193
- ├─ index.tsx # Main component export
194
- ├─ index.css # Component styles
195
- ├─ ComponentName.stories.tsx # Storybook stories
196
- ├─ types.ts # Component-specific types (optional)
197
- └─ SubComponent.tsx # Child components (optional)
198
- ```
199
-
200
- Rules:
201
- - `index.tsx` exports the component
202
- - Styles are colocated with the component
203
- - Stories demonstrate common usage and edge cases
204
- - Use CSS Modules for complex styling (e.g., `index.module.css`)
205
-
206
- ======================================================================
207
- Ant Design (antd) Usage
208
- ======================================================================
209
-
210
- - Use antd components as the primary UI building blocks
211
- - Also available: **Ant Design X** (`@ant-design/x`) for AI chat interfaces
212
- - `Bubble` - Chat message bubbles
213
- - `Sender` - Message input
214
- - `Prompts` - Prompt suggestions
215
- - Avoid copying or modifying antd internal styles
216
- - Prefer composition instead of overriding antd components
217
- - Use `className` or `style` props for customization
218
- - Avoid deep CSS selectors targeting antd internals
219
-
220
- ======================================================================
221
- Three.js Usage
222
- ======================================================================
223
-
224
- - Keep Three.js logic isolated from UI logic when possible
225
- - Use shared global scene/camera from `src/component/util/global.ts`
226
- - Avoid heavy allocations inside render loops
227
- - Be mindful of GPU memory usage
228
- - Always clean up resources when no longer needed:
229
- ```typescript
230
- geometry.dispose()
231
- material.dispose()
232
- texture.dispose()
233
- ```
234
- - Avoid unnecessary re-creation of:
235
- - geometries
236
- - materials
237
- - textures
238
- - Prefer memoization for expensive objects
239
-
240
- Common Three.js imports:
241
- ```typescript
242
- import * as THREE from "three";
243
- import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
244
- import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
245
- import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
246
- import { Line2 } from "three/examples/jsm/lines/Line2";
247
- import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
248
- import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
249
- ```
250
-
251
- ======================================================================
252
- Internationalization (i18n)
253
- ======================================================================
254
-
255
- The project uses **i18next** with react-i18next for internationalization.
256
-
257
- Supported languages:
258
- - English (`en_us`)
259
- - Chinese (`zh_cn`)
260
-
261
- Translation files:
262
- - `src/component/util/en_us.json`
263
- - `src/component/util/zh_cn.json`
264
-
265
- Usage in components:
266
- ```typescript
267
- import { change_language } from '../util/i18n';
268
-
269
- // Component receives `t` function via props
270
- interface Props {
271
- t: (key: string) => string;
272
- }
273
- ```
274
-
275
- ======================================================================
276
- Key Dependencies
277
- ======================================================================
278
-
279
- Core:
280
- - `react` / `react-dom` (peer dependencies, >=18.0.0)
281
- - `typescript` 4.9.5
282
-
283
- UI Framework:
284
- - `antd` 5.24.6
285
- - `@ant-design/x` 1.1.0 (AI chat components)
286
- - `@ant-design/x-markdown` 2.0.0-alpha.5
287
-
288
- 3D Visualization:
289
- - `three` 0.157.0
290
- - `@types/three` 0.157.2
291
-
292
- Medical Imaging:
293
- - `@itk-wasm/image-io` 1.6.0
294
- - `nifti-reader-js` 0.8.0
295
- - `geotiff` 2.1.3
296
- - `tiff` 6.0.0
297
-
298
- Charts & Data:
299
- - `echarts` 5.5.1
300
- - `react-window` 1.8.9 (virtualization)
301
-
302
- Maps:
303
- - `leaflet` 1.9.4
304
- - `react-leaflet` 4.2.1
305
-
306
- Utilities:
307
- - `i18next` / `react-i18next` (internationalization)
308
- - `socket.io-client` 4.8.1
309
- - `markdown-it` 14.1.0
310
- - `react-markdown` 10.1.0
311
- - `dompurify` 3.2.5
312
-
313
- ======================================================================
314
- Performance Guidelines
315
- ======================================================================
316
-
317
- - Avoid unnecessary re-renders
318
- - Use `useMemo` / `useCallback` for expensive computations
319
- - Do not create new objects/functions inside render unless required
320
- - Be careful with `requestAnimationFrame` loops
321
- - Pay attention to performance in Three.js related code
322
- - Use `react-window` for long lists
323
- - Dispose Three.js resources properly
324
-
325
- ======================================================================
326
- Error Handling
327
- ======================================================================
328
-
329
- - Do not silently swallow errors
330
- - Log meaningful error messages
331
- - Validate external or dynamic data before usage
332
- - Prefer early returns over deeply nested conditionals
333
- - Use antd's `message` API for user-facing errors
334
-
335
- ======================================================================
336
- Imports & Naming
337
- ======================================================================
338
-
339
- Imports order:
340
- 1. React and external libraries
341
- 2. UI components (antd, @ant-design/x)
342
- 3. Three.js and visualization libraries
343
- 4. Internal hooks / utils
344
- 5. Styles
345
-
346
- Naming conventions:
347
- - Components: PascalCase (e.g., `FunctionLoop`, `SwcTree`)
348
- - Hooks: camelCase with `use` prefix (e.g., `useSomething`)
349
- - Files: follow existing project convention
350
- - Variables: camelCase
351
- - Constants: UPPER_SNAKE_CASE
352
-
353
- ======================================================================
354
- Build Configuration
355
- ======================================================================
356
-
357
- Vite configuration (`vite.config.js`):
358
- - Library mode build (outputs ES and CJS formats)
359
- - Entry point: `src/index.ts`
360
- - External dependencies: `react`, `react-dom`
361
- - TypeScript declaration files generated
362
- - Proxy configured for `/api` → `http://192.168.50.54:8080`
363
-
364
- Output:
365
- - Main: `dist/index.mjs`
366
- - Types: `dist/index.d.ts`
367
- - CSS: `dist/style.css`
368
-
369
- ======================================================================
370
- Testing (If Present)
371
- ======================================================================
372
-
373
- - Prefer testing public behavior over implementation details
374
- - Avoid excessive snapshot testing
375
- - Keep tests focused and readable
376
- - Use Storybook for component testing and documentation
377
-
378
- ======================================================================
379
- Agent Behavior Rules (IMPORTANT)
380
- ======================================================================
381
-
382
- When modifying code, agents MUST:
383
-
384
- 1. Read existing code before making changes
385
- 2. Follow existing patterns and conventions
386
- 3. Keep changes minimal and scoped
387
- 4. Do NOT refactor unrelated code
388
- 5. Do NOT introduce new dependencies unless requested
389
- 6. Ensure TypeScript types remain correct
390
- 7. Ensure Storybook stories still work if affected
391
- 8. Respect the existing component architecture (2d vs 3d separation)
392
-
393
- If a change is non-trivial, explain WHY the change is needed.
394
-
395
- ======================================================================
396
- Out of Scope
397
- ======================================================================
398
-
399
- - Backend logic
400
- - API implementations
401
- - CI/CD configuration unless explicitly requested
402
- - Database schema changes
403
-
404
- ======================================================================
405
- End of AGENTS.md
406
- ======================================================================
package/Dockerfile DELETED
@@ -1,18 +0,0 @@
1
- # 使用 Node.js 18 的 Alpine 版本作为基础镜像
2
- FROM node:19-alpine
3
-
4
- # 设置工作目录
5
- WORKDIR /app
6
-
7
- # 复制 package.json 和 yarn.lock
8
- COPY package.json .
9
-
10
- # 安装项目依赖
11
- RUN yarn install --frozen-lockfile --ignore-scripts
12
- # 复制项目文件
13
-
14
- # 暴露应用运行的端口
15
- EXPOSE 6006
16
-
17
- # 启动应用
18
- # CMD ["yarn", "run", "storybook"]
package/REAMED2.md DELETED
@@ -1,157 +0,0 @@
1
- ### 创建`recat`项目
2
-
3
- ```
4
- npm install -g create-react-app
5
- ```
6
-
7
- 判断是否安装成功
8
-
9
- ```
10
- create-react-app -V
11
- ```
12
-
13
- 创建项目
14
-
15
- ```bash
16
- npx create-react-app <项目名称>
17
- ```
18
-
19
- 进入项目路径
20
-
21
- ```
22
- cd 项目名称
23
- ```
24
-
25
- ### 安装组件
26
-
27
- ```
28
- npm install brainsmatics
29
- ```
30
-
31
- ### 使用组件
32
-
33
- ```tsx
34
- import {Atlas} from "brainsmatics/STAM";
35
- import {fetchDatas} from "brainsmatics/STAM";
36
- const AtlasViewer=()=>{
37
- const [treeDatas, setTreeData] = useState([]); // 处理完成的 fbx树结构数据
38
- const [swctreeDatas, setswcTreeData] = useState([]); // swc树结构数据
39
- const [pointDatas, setPointData] = useState([]);// 模型里面的基准点(红点)数据
40
- const [axon_check,setAxon_check] = useState([]);
41
- const [soma_check,setSoma_check] = useState([]);
42
- const [fbxTreeDatas,setFBXTreeData] = useState([]); // fbx树结构数据
43
- const gray_value = useRef<any>({}); //2d切片的灰度图对应的核团
44
- useEffect(()=>{
45
- fetchData('/staticresource/data/TreeData/nucleusColour.json',setFBXTreeData)
46
- fetchData('/staticresource/data/TreeData/vesseltree.json', setTreeData);
47
-
48
- fetchData('/staticresource/data/json/output.json', setPointData);
49
-
50
- fetchData('/staticresource/data/TreeData/swctree.json', setswcTreeData);
51
-
52
- fetchData('/staticresource/data/json/axon_check.json', setAxon_check);
53
-
54
- fetchData('/staticresource/data/json/soma_check.json', setSoma_check);
55
-
56
- fetchData('/staticresource/data/json/rgb_value.json', gray_value);
57
- },[])
58
- return(
59
- <Atlas
60
- treeDatas={treeDatas}
61
- pointDatas={pointDatas}
62
- axon_check={axon_check}
63
- soma_check={soma_check}
64
- fbxTreeDatas={fbxTreeDatas}
65
- gray_value={gray_value}
66
- swctreeDatas={swctreeDatas}
67
- ScaleNum={0.01}
68
- lefttab={["label","neurons"]}// label vessel neurons
69
- righttab={["neurons"]}// label neurons mapping download registration reslicing virtual
70
- regionData={"/staticresource/data/FBX"}
71
- lang={"en_us"}
72
- />
73
- )
74
- export default AtlasViewer
75
- ```
76
-
77
- > `regionData` `fbx`模型地址文件以`FBX`后缀
78
- >
79
- > `treeDatas` 左侧血管结构数据
80
- >
81
- > `pointDatas` 基准点数据
82
- >
83
- > `axon_chec` 神经元末梢点数据
84
- >
85
- > `soma_check` 神经元胞体点数据
86
- >
87
- > `fbxTreeDatas` `fbx`树结构数据
88
- >
89
- > `gray_value` 图谱切面灰度值对应核团
90
- >
91
- > `swctreeDatas` `swc`树结构
92
- >
93
- > `lefttab` 选择展示的左侧`tab`栏
94
- >
95
- > `righttab` 选择展示的右侧`tab`栏
96
- >
97
- > `lang` 选择语言
98
-
99
- ### 创建接口代理
100
-
101
- ```
102
- npm install http-proxy-middleware
103
- ```
104
-
105
- 使用它可以指定接口访问哪个服务器
106
-
107
- > 在src目录下创建一个`setupProxy.js`
108
-
109
- ```js
110
- const { createProxyMiddleware } = require('http-proxy-middleware');
111
-
112
- module.exports = function(app) {
113
- // 配准服务
114
- app.use(
115
- '/app-api/up-api',
116
- createProxyMiddleware({
117
- target:"http://atlas.brainsmatics.org/app-api/up-api",
118
- changeOrigin: true,
119
- }));
120
- // 图谱切片 病毒注射
121
- app.use(
122
- '/app-api/c-api',
123
- createProxyMiddleware({
124
- target:"http://atlas.brainsmatics.org/app-api/c-api",
125
- changeOrigin: true,
126
- }));
127
- // 数据下载
128
- app.use(
129
- '/app-api/test-api',
130
- createProxyMiddleware({
131
- target:"http://atlas.brainsmatics.org/app-api/test-api",
132
- changeOrigin: true,
133
- }));
134
- // 图谱转换
135
- app.use(
136
- '/app-api/d-api',
137
- createProxyMiddleware({
138
- target:"http://atlas.brainsmatics.org/app-api/d-api",
139
- changeOrigin: true,
140
- }));
141
- };
142
- ```
143
-
144
- > 使用默认`brainsmatics`接口配置为研究院公网地址
145
-
146
- 启动项目
147
-
148
- ```
149
- npm start
150
- ```
151
-
152
- 打包项目
153
-
154
- ```
155
- npm build
156
- ```
157
-
package/STAM.d.ts DELETED
@@ -1 +0,0 @@
1
- export * from "./dist/component/STAM";
@@ -1,22 +0,0 @@
1
- const fs = require('fs');
2
- const os = require('os');
3
- // 读取文件的路径
4
- const filePath = '.gitignore'; // 替换为你的文件路径
5
- const newLine = os.EOL; // 获取当前操作系统的换行符
6
- fs.readFile(filePath, 'utf8', (err, data) => {
7
- if (err) {
8
- console.error('读取文件时出错:', err);
9
- return;
10
- }
11
- data+=newLine;
12
- data+='/src';
13
-
14
- // 写入替换后的内容回文件
15
- fs.writeFile(filePath, data, 'utf8', (err) => {
16
- if (err) {
17
- console.error('写入文件时出错:', err);
18
- } else {
19
- console.log('添加完成!');
20
- }
21
- });
22
- });