hpo-react-visualizer 0.0.1
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/README.md +59 -0
- package/dist/index.cjs +1483 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +244 -0
- package/dist/index.d.ts +244 -0
- package/dist/index.js +1473 -0
- package/dist/index.js.map +1 -0
- package/package.json +60 -0
- package/src/HpoVisualizer.tsx +210 -0
- package/src/OrganSvg.tsx +141 -0
- package/src/__tests__/colorScheme.test.tsx +146 -0
- package/src/__tests__/createStrictColorPalette.test.ts +135 -0
- package/src/__tests__/renderOrder.test.tsx +146 -0
- package/src/__tests__/setup.ts +1 -0
- package/src/constants.ts +158 -0
- package/src/index.ts +34 -0
- package/src/lib/createStrictColorPalette.ts +57 -0
- package/src/lib/index.ts +1 -0
- package/src/svg/Blood.tsx +23 -0
- package/src/svg/Body.tsx +24 -0
- package/src/svg/Breast.tsx +42 -0
- package/src/svg/Cell.tsx +79 -0
- package/src/svg/Constitutional.tsx +29 -0
- package/src/svg/Digestive.tsx +28 -0
- package/src/svg/Ear.tsx +23 -0
- package/src/svg/Endocrine.tsx +32 -0
- package/src/svg/Eye.tsx +23 -0
- package/src/svg/Growth.tsx +23 -0
- package/src/svg/Head.tsx +51 -0
- package/src/svg/Heart.tsx +23 -0
- package/src/svg/Immune.tsx +32 -0
- package/src/svg/Integument.tsx +58 -0
- package/src/svg/Kidney.tsx +41 -0
- package/src/svg/Limbs.tsx +46 -0
- package/src/svg/Lung.tsx +23 -0
- package/src/svg/Metabolism.tsx +41 -0
- package/src/svg/Muscle.tsx +225 -0
- package/src/svg/Neoplasm.tsx +23 -0
- package/src/svg/Nervous.tsx +49 -0
- package/src/svg/Prenatal.tsx +23 -0
- package/src/svg/ThoracicCavity.tsx +28 -0
- package/src/svg/Voice.tsx +23 -0
- package/src/svg/index.ts +54 -0
- package/src/types.ts +162 -0
- package/src/useOrganInteraction.ts +130 -0
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function Muscle({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale[100];
|
|
6
|
+
const activeColor = colorScale[300];
|
|
7
|
+
const color = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="muscle">
|
|
11
|
+
{/* Invisible outline for interaction */}
|
|
12
|
+
<path d={OUTLINE_ARM_PATH} fill="transparent" />
|
|
13
|
+
<path d={OUTLINE_LEG_PATH} fill="transparent" />
|
|
14
|
+
{/* Muscle */}
|
|
15
|
+
<path
|
|
16
|
+
d={MUSCLE_A_PATH}
|
|
17
|
+
fill="url(#paint0_radial_898_163643)"
|
|
18
|
+
stroke={style?.stroke}
|
|
19
|
+
strokeWidth={style?.strokeWidth}
|
|
20
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d={MUSCLE_B_PATH}
|
|
24
|
+
fill="url(#paint1_radial_898_163643)"
|
|
25
|
+
stroke={style?.stroke}
|
|
26
|
+
strokeWidth={style?.strokeWidth}
|
|
27
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
28
|
+
/>
|
|
29
|
+
<path
|
|
30
|
+
d={MUSCLE_C_PATH}
|
|
31
|
+
fill="url(#paint2_radial_898_163643)"
|
|
32
|
+
stroke={style?.stroke}
|
|
33
|
+
strokeWidth={style?.strokeWidth}
|
|
34
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
35
|
+
/>
|
|
36
|
+
<path
|
|
37
|
+
d={MUSCLE_D_PATH}
|
|
38
|
+
fill="url(#paint3_radial_898_163643)"
|
|
39
|
+
stroke={style?.stroke}
|
|
40
|
+
strokeWidth={style?.strokeWidth}
|
|
41
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
42
|
+
/>
|
|
43
|
+
<path
|
|
44
|
+
d={MUSCLE_E_PATH}
|
|
45
|
+
fill="url(#paint4_radial_898_163643)"
|
|
46
|
+
stroke={style?.stroke}
|
|
47
|
+
strokeWidth={style?.strokeWidth}
|
|
48
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
49
|
+
/>
|
|
50
|
+
<path
|
|
51
|
+
d={MUSCLE_F_PATH}
|
|
52
|
+
fill="url(#paint5_radial_898_163643)"
|
|
53
|
+
stroke={style?.stroke}
|
|
54
|
+
strokeWidth={style?.strokeWidth}
|
|
55
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
56
|
+
/>
|
|
57
|
+
<path
|
|
58
|
+
d={MUSCLE_G_PATH}
|
|
59
|
+
fill="url(#paint6_radial_898_163643)"
|
|
60
|
+
stroke={style?.stroke}
|
|
61
|
+
strokeWidth={style?.strokeWidth}
|
|
62
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
63
|
+
/>
|
|
64
|
+
<path
|
|
65
|
+
d={MUSCLE_H_PATH}
|
|
66
|
+
fill="url(#paint7_radial_898_163643)"
|
|
67
|
+
stroke={style?.stroke}
|
|
68
|
+
strokeWidth={style?.strokeWidth}
|
|
69
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
70
|
+
/>
|
|
71
|
+
<path
|
|
72
|
+
d={MUSCLE_I_PATH}
|
|
73
|
+
fill="url(#paint8_radial_898_163643)"
|
|
74
|
+
stroke={style?.stroke}
|
|
75
|
+
strokeWidth={style?.strokeWidth}
|
|
76
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
77
|
+
/>
|
|
78
|
+
<path
|
|
79
|
+
d={MUSCLE_J_PATH}
|
|
80
|
+
fill="url(#paint9_radial_898_163643)"
|
|
81
|
+
stroke={style?.stroke}
|
|
82
|
+
strokeWidth={style?.strokeWidth}
|
|
83
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
84
|
+
/>
|
|
85
|
+
|
|
86
|
+
<defs>
|
|
87
|
+
<radialGradient
|
|
88
|
+
id="paint0_radial_898_163643"
|
|
89
|
+
cx="0"
|
|
90
|
+
cy="0"
|
|
91
|
+
r="1"
|
|
92
|
+
gradientUnits="userSpaceOnUse"
|
|
93
|
+
gradientTransform="translate(71.1984 148.714) rotate(90) scale(58.5321 53.8452)"
|
|
94
|
+
>
|
|
95
|
+
<stop offset="0.191556" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
96
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
97
|
+
</radialGradient>
|
|
98
|
+
<radialGradient
|
|
99
|
+
id="paint1_radial_898_163643"
|
|
100
|
+
cx="0"
|
|
101
|
+
cy="0"
|
|
102
|
+
r="1"
|
|
103
|
+
gradientUnits="userSpaceOnUse"
|
|
104
|
+
gradientTransform="translate(71.1984 148.714) rotate(90) scale(58.5321 53.8452)"
|
|
105
|
+
>
|
|
106
|
+
<stop offset="0.191556" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
107
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
108
|
+
</radialGradient>
|
|
109
|
+
<radialGradient
|
|
110
|
+
id="paint2_radial_898_163643"
|
|
111
|
+
cx="0"
|
|
112
|
+
cy="0"
|
|
113
|
+
r="1"
|
|
114
|
+
gradientUnits="userSpaceOnUse"
|
|
115
|
+
gradientTransform="translate(71.1984 148.714) rotate(90) scale(58.5321 53.8452)"
|
|
116
|
+
>
|
|
117
|
+
<stop offset="0.191556" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
118
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
119
|
+
</radialGradient>
|
|
120
|
+
<radialGradient
|
|
121
|
+
id="paint3_radial_898_163643"
|
|
122
|
+
cx="0"
|
|
123
|
+
cy="0"
|
|
124
|
+
r="1"
|
|
125
|
+
gradientUnits="userSpaceOnUse"
|
|
126
|
+
gradientTransform="translate(71.1984 148.714) rotate(90) scale(58.5321 53.8452)"
|
|
127
|
+
>
|
|
128
|
+
<stop offset="0.191556" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
129
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
130
|
+
</radialGradient>
|
|
131
|
+
<radialGradient
|
|
132
|
+
id="paint4_radial_898_163643"
|
|
133
|
+
cx="0"
|
|
134
|
+
cy="0"
|
|
135
|
+
r="1"
|
|
136
|
+
gradientUnits="userSpaceOnUse"
|
|
137
|
+
gradientTransform="translate(71.1984 148.714) rotate(90) scale(58.5321 53.8452)"
|
|
138
|
+
>
|
|
139
|
+
<stop offset="0.191556" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
140
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
141
|
+
</radialGradient>
|
|
142
|
+
<radialGradient
|
|
143
|
+
id="paint5_radial_898_163643"
|
|
144
|
+
cx="0"
|
|
145
|
+
cy="0"
|
|
146
|
+
r="1"
|
|
147
|
+
gradientTransform="matrix(-11.9776 38.1917 -20.3672 -6.51529 12.8369 22.4744)"
|
|
148
|
+
gradientUnits="userSpaceOnUse"
|
|
149
|
+
>
|
|
150
|
+
<stop offset="0.19" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
151
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
152
|
+
</radialGradient>
|
|
153
|
+
<radialGradient
|
|
154
|
+
id="paint6_radial_898_163643"
|
|
155
|
+
cx="0"
|
|
156
|
+
cy="0"
|
|
157
|
+
r="1"
|
|
158
|
+
gradientTransform="matrix(-11.9776 38.1917 -20.3672 -6.51529 12.8369 22.4744)"
|
|
159
|
+
gradientUnits="userSpaceOnUse"
|
|
160
|
+
>
|
|
161
|
+
<stop offset="0.19" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
162
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
163
|
+
</radialGradient>
|
|
164
|
+
<radialGradient
|
|
165
|
+
id="paint7_radial_898_163643"
|
|
166
|
+
cx="0"
|
|
167
|
+
cy="0"
|
|
168
|
+
r="1"
|
|
169
|
+
gradientTransform="matrix(-11.9776 38.1917 -20.3672 -6.51529 12.8369 22.4744)"
|
|
170
|
+
gradientUnits="userSpaceOnUse"
|
|
171
|
+
>
|
|
172
|
+
<stop offset="0.19" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
173
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
174
|
+
</radialGradient>
|
|
175
|
+
<radialGradient
|
|
176
|
+
id="paint8_radial_898_163643"
|
|
177
|
+
cx="0"
|
|
178
|
+
cy="0"
|
|
179
|
+
r="1"
|
|
180
|
+
gradientTransform="matrix(-11.9776 38.1917 -20.3672 -6.51529 12.8369 22.4744)"
|
|
181
|
+
gradientUnits="userSpaceOnUse"
|
|
182
|
+
>
|
|
183
|
+
<stop offset="0.19" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
184
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
185
|
+
</radialGradient>
|
|
186
|
+
<radialGradient
|
|
187
|
+
id="paint9_radial_898_163643"
|
|
188
|
+
cx="0"
|
|
189
|
+
cy="0"
|
|
190
|
+
r="1"
|
|
191
|
+
gradientTransform="matrix(-11.9776 38.1917 -20.3672 -6.51529 12.8369 22.4744)"
|
|
192
|
+
gradientUnits="userSpaceOnUse"
|
|
193
|
+
>
|
|
194
|
+
<stop offset="0.19" stopColor={color} style={{ transition: TRANSITION_STYLE }} />
|
|
195
|
+
<stop offset="1" stopColor="white" stopOpacity="0" />
|
|
196
|
+
</radialGradient>
|
|
197
|
+
</defs>
|
|
198
|
+
</g>
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
const OUTLINE_LEG_PATH =
|
|
203
|
+
"M72.9604 109.81C74.894 109.646 76.2139 111.205 77.0609 112.72C77.9657 114.339 78.6776 116.507 79.2445 118.699C80.2217 122.477 80.8728 126.819 81.2338 128.847L81.3705 129.567L81.3803 129.614C81.584 130.801 81.8018 132.041 81.9994 133.263L82.1889 134.477C82.2795 135.086 82.3498 135.647 82.3861 136.102L82.392 136.321C82.38 136.864 82.1646 137.61 81.3773 137.908C81.1243 138.004 80.8877 138.025 80.6713 137.998C82.5377 143.389 83.1157 149.069 83.0141 154.752C82.9806 158.78 82.7449 163.23 81.9477 167.371C81.7168 168.626 81.432 169.863 81.1576 171.064C80.881 172.275 80.6149 173.455 80.4096 174.643V174.645C80.2847 175.359 80.1813 176.086 80.0893 176.82L80.0844 176.855L80.0775 176.89C80.0161 177.221 79.9673 177.719 79.9066 178.362C79.8486 178.978 79.7821 179.695 79.685 180.381C79.5892 181.056 79.4549 181.773 79.2377 182.375C79.1225 182.694 78.9325 183.127 78.6107 183.488L78.6381 184.119L77.3891 184.123C76.37 184.126 75.745 183.38 75.4262 182.856C75.0777 182.284 74.8358 181.572 74.6645 180.902C74.3245 179.574 74.178 178.055 74.2113 177.234L74.226 176.825C74.2297 176.744 74.234 176.663 74.2387 176.582C73.6919 177.813 72.7288 179.338 70.9916 179.615L70.9242 179.626L70.8559 179.63L70.8305 179.631L69.6313 179.683L69.6166 179.355C69.111 179.12 68.7092 178.76 68.393 178.365C68.3833 178.768 68.3592 179.153 68.3139 179.511C68.2354 180.128 68.0858 180.771 67.7807 181.302C67.4534 181.872 66.8927 182.387 66.06 182.461L65.8793 182.476L65.7025 182.438L65.684 182.434V182.432C65.1745 182.331 64.7741 182.032 64.4936 181.758C64.19 181.46 63.9187 181.088 63.6801 180.686C63.0862 179.691 62.6091 178.369 62.2953 177.28L62.2934 177.271C60.2355 169.913 60.5821 162.236 61.5502 154.873C60.9179 154.934 60.5013 154.537 60.3305 154.305C60.1514 154.062 60.0607 153.791 60.0092 153.592C59.9526 153.372 59.9175 153.129 59.8969 152.878C59.8555 152.373 59.8689 151.749 59.9486 151.026L60.0443 150.202C60.5432 146.076 61.3581 141.84 62.4975 137.123L62.4984 137.121C63.2049 134.216 63.9955 131.458 64.5385 128.655L64.5404 128.641C64.9418 126.691 65.1752 124.614 65.4242 122.47C65.6705 120.35 65.9322 118.166 66.3959 116.103L66.3988 116.094C66.5024 115.649 66.6174 115.243 66.7436 114.916C66.8059 114.754 66.8823 114.581 66.977 114.423C67.0514 114.298 67.2243 114.028 67.5355 113.844C67.7143 113.739 67.9748 113.642 68.2904 113.664C68.6113 113.686 68.866 113.822 69.0414 113.969C69.3406 114.221 69.4624 114.548 69.5121 114.695C69.5282 114.743 69.5431 114.793 69.557 114.844C69.5825 114.473 69.6255 114.098 69.6898 113.721L69.6947 113.695L69.7006 113.669C69.8503 112.981 70.1251 112.16 70.5854 111.45C71.0448 110.741 71.7728 110.023 72.8461 109.826L72.9027 109.815L72.9604 109.81Z";
|
|
204
|
+
const OUTLINE_ARM_PATH =
|
|
205
|
+
"M23.3953 2.03599e-05C24.2449 0.00166229 25.0165 0.413796 25.4881 1.03127C25.9739 1.66746 26.1689 2.57612 25.7176 3.44533C25.6131 3.64654 25.3992 4.00105 25.0037 4.19826C24.9955 4.20237 24.9867 4.2061 24.9784 4.20998C21.1687 5.97808 17.7654 10.0768 15.2694 13.7266C14.8489 14.3411 14.475 14.9948 14.0926 15.6836C14.5149 15.3102 15.065 14.9829 15.703 15.0733C16.505 15.187 16.8666 15.8585 17.0135 16.2383C17.1792 16.6667 17.2503 17.161 17.2821 17.5772C17.315 18.0079 17.311 18.4304 17.2938 18.7539C17.2406 20.767 17.1991 22.6997 17.2049 24.6348L17.202 25.3252C17.1776 26.9529 17.0045 28.6884 16.3416 30.3106L16.3387 30.3164C15.0775 33.3488 13.3427 36.4285 11.7694 39.293C11.7599 39.3103 11.7496 39.3271 11.7391 39.3438C11.5879 39.5839 11.4169 39.9178 11.2049 40.3399C11.0018 40.7443 10.7682 41.2157 10.5155 41.6641C10.264 42.1103 9.97121 42.5751 9.63363 42.9668C9.30428 43.349 8.86289 43.7431 8.29379 43.9248C8.28586 43.9274 8.27736 43.9284 8.26937 43.9307C8.21713 43.947 8.16316 43.9611 8.10726 43.9688C7.73446 44.0201 7.37554 43.9291 7.08285 43.7158C7.00277 44.2864 6.85295 44.8825 6.55746 45.4151L6.55551 45.4141C6.27643 45.944 5.83517 46.3866 5.32406 46.6572C4.81026 46.9293 4.12327 47.0759 3.44711 46.8037L3.41879 46.793C3.37355 46.7751 3.33044 46.7534 3.2889 46.7295C2.60391 46.387 2.20219 45.7812 1.96761 45.1846C1.72507 44.5676 1.6204 43.8661 1.57601 43.21C1.52906 42.5155 1.54838 41.7385 1.57504 41.0733C1.42461 41.0765 1.28063 41.0513 1.15316 41.0049C0.906421 40.9151 0.733692 40.7603 0.626794 40.6426C0.227714 40.203 0.0333357 39.492 0.0418335 38.7998C0.0580357 37.5799 -0.295141 33.4576 0.799646 29.001L1.0389 28.0674C1.59712 25.9816 2.15763 24.5206 2.82211 23.1299C2.82896 23.1156 2.83704 23.1009 2.84457 23.0869C2.91505 22.9559 3.01498 22.7942 3.15609 22.6533C3.28788 22.5218 3.57984 22.2871 4.01254 22.3008C4.01612 22.3009 4.01972 22.3016 4.02328 22.3018C4.04367 22.0337 4.06753 21.7721 4.09359 21.5225L4.09554 21.5049C4.22543 20.4471 4.43304 19.3918 4.70785 18.3506C4.51168 18.3613 4.31598 18.3155 4.14535 18.2149L4.13851 18.211C4.12014 18.2001 4.10422 18.1857 4.08676 18.1738C4.06472 18.159 4.04325 18.1446 4.02328 18.1289C4.00713 18.116 3.99161 18.1027 3.9764 18.0889C3.75849 17.8958 3.67591 17.6657 3.65316 17.6006C3.60576 17.4649 3.58289 17.3311 3.57015 17.2305C3.54377 17.022 3.53832 16.7739 3.54281 16.5186V16.5078C3.63091 13.4064 4.49506 10.2517 6.07113 7.69533C7.64993 5.13476 9.98138 3.12279 12.9989 2.46096L13.0106 2.45803C13.2591 2.40669 13.726 2.30261 14.1737 2.26467C14.3997 2.24553 14.6676 2.23855 14.9325 2.27834C15.1836 2.31611 15.5479 2.41234 15.8495 2.69631C15.882 2.72699 15.9111 2.76118 15.9393 2.79592C17.7995 1.54623 19.0771 0.667557 21.6141 0.154317C22.2076 0.0334562 22.84 -0.000976811 23.3953 2.03599e-05Z";
|
|
206
|
+
const MUSCLE_A_PATH =
|
|
207
|
+
"M77.2354 181.922C75.7739 181.927 75.1989 177.622 75.261 176.264C75.3668 172.141 76.8355 168.18 77.5127 164.099C79.5463 153.236 79.1584 142.442 76.4525 132.589C76.0042 130.738 76.1933 130.508 77.1089 132.211C80.7325 138.876 81.7984 146.246 81.6645 153.73C81.6317 157.734 81.3982 162.11 80.6186 166.154C80.168 168.604 79.5003 170.989 79.0774 173.438C78.9482 174.177 78.842 174.924 78.7484 175.67C78.4542 177.253 78.4725 181.449 77.2504 181.919L77.2353 181.92L77.2354 181.922Z";
|
|
208
|
+
const MUSCLE_B_PATH =
|
|
209
|
+
"M65.7844 180.26C65.4035 180.194 64.9715 179.762 64.5609 179.071C64.0445 178.206 63.6014 176.997 63.2988 175.947C61.0286 167.83 61.7652 159.254 63.0204 151.011C63.4869 148.521 63.7251 151.569 63.8288 152.45C64.3123 157.377 64.7985 161.843 65.717 166.92C65.9949 168.91 68.5163 180.026 65.8048 180.264L65.787 180.26L65.7844 180.26Z";
|
|
210
|
+
const MUSCLE_C_PATH =
|
|
211
|
+
"M60.9914 150.157C61.4716 145.833 62.3074 141.401 63.5144 136.404C64.2052 133.564 65.0168 130.721 65.5665 127.882C66.3948 123.857 66.5217 119.35 67.4174 115.365C67.8061 113.695 68.2494 113.167 68.3723 115.071C68.4527 122.263 67.0612 129.34 65.3362 136.455C64.094 141.453 62.5474 146.465 61.7695 151.536C61.4423 153.52 60.6966 152.829 60.9914 150.157Z";
|
|
212
|
+
const MUSCLE_D_PATH =
|
|
213
|
+
"M70.6277 177.428C68.9378 177.339 68.3194 175.052 67.9361 173.596C66.2923 166.672 65.2495 157.569 65.0221 149.137C64.9854 147.247 65.0213 145.461 65.2487 143.617C65.6376 140.441 66.6376 137.41 67.3771 134.473C68.308 130.896 68.8461 127.383 69.2098 123.628C69.3956 122.103 69.6474 118.73 71.1016 122.099C78.0249 138.827 78.2597 154.63 74.0822 171.548C73.6059 173.407 72.8455 177.08 70.6529 177.43L70.6278 177.431L70.6277 177.428Z";
|
|
214
|
+
const MUSCLE_E_PATH =
|
|
215
|
+
"M80.3076 135.51C80.1087 135.165 79.8722 134.711 79.6076 134.188C78.8731 132.711 78.0862 131.187 77.2372 129.743C74.3643 124.522 69.7024 118.899 70.7232 112.923C70.9838 111.725 71.65 110.237 72.9127 110.005C77.5052 109.615 79.3288 125.442 80.0473 128.816C80.3206 130.408 80.6143 132.067 80.8521 133.654C80.941 134.252 81.0069 134.783 81.0401 135.2C81.0935 135.85 80.5964 136.008 80.3075 135.508L80.3076 135.51Z";
|
|
216
|
+
const MUSCLE_F_PATH =
|
|
217
|
+
"M0.892519 37.8121C0.910234 36.4783 0.562419 32.5495 1.62117 28.2396C2.24625 25.6968 2.84908 24.0815 3.57558 22.561C4.36428 21.0944 4.26726 26.2694 4.16052 26.8675C3.99014 28.5531 3.26006 30.0482 2.80618 31.6484C2.13036 33.8982 1.78676 36.3094 1.60806 38.6896C1.53413 39.5264 0.879232 38.8944 0.892519 37.8121Z";
|
|
218
|
+
const MUSCLE_G_PATH =
|
|
219
|
+
"M3.6397 44.8612C1.96267 44.1065 2.46488 40.3894 2.47552 38.7877C2.83742 31.664 5.9489 24.9036 10.4202 19.615C10.8884 19.0998 11.3947 18.7335 10.8786 19.8775C10.3589 20.9982 9.72473 22.1811 9.25617 23.3457C7.46514 27.8373 6.82721 32.2352 6.23899 36.9814C6.09147 38.4059 6.0381 39.8164 6.03037 41.2496C6.0127 42.147 5.96344 43.1548 5.53351 43.9296C5.16384 44.6519 4.32072 45.1424 3.6658 44.8745L3.63772 44.8634L3.6397 44.8612Z";
|
|
220
|
+
const MUSCLE_H_PATH =
|
|
221
|
+
"M7.82159 41.9777C6.74133 42.1267 7.26011 38.7322 7.23779 37.9096C7.63578 32.1378 8.77581 26.535 11.1822 21.3002C12.1542 19.3182 13.0493 17.247 14.4589 15.5712C16.0753 13.9663 16.2075 16.541 16.1459 17.7006C16.0923 19.7264 16.0494 21.6812 16.0553 23.6417C16.0681 25.4293 15.9466 27.2674 15.2665 28.9321C14.031 31.9026 12.328 34.9264 10.7435 37.8111C10.0169 38.9654 9.10829 41.5675 7.84027 41.9724L7.82134 41.9735L7.82159 41.9777Z";
|
|
222
|
+
const MUSCLE_I_PATH =
|
|
223
|
+
"M4.49965 16.3498C4.41901 16.3056 4.38511 16.0117 4.39346 15.5364C4.56078 9.64404 7.68311 3.61758 13.0634 2.4375C13.6118 2.3242 14.6531 2.08386 15.0146 2.42443C15.1178 2.56524 14.9962 2.7981 14.6948 3.09693C10.5602 6.29199 6.89523 10.2726 5.14686 15.1363C4.97588 15.4999 4.75697 16.3112 4.5041 16.3538L4.49755 16.3499L4.49965 16.3498Z";
|
|
224
|
+
const MUSCLE_J_PATH =
|
|
225
|
+
"M5.19155 24.5363L5.18675 24.5341C5.00167 24.4654 4.89297 24.1364 4.84414 23.6191C4.7709 22.6824 4.83838 21.5884 4.93883 20.6265C5.38621 16.9829 6.78389 13.3513 8.79173 10.2712C9.70904 8.91192 10.8077 7.69523 11.987 6.52486C13.1112 5.42162 14.6806 3.67181 15.9907 2.86417C18.067 1.47688 19.1882 0.635379 21.6635 0.134675C22.1659 0.0322893 22.7244 -0.00091378 23.2439 1.90292e-05C24.3036 0.00192167 25.1732 1.03712 24.6809 1.9848C24.602 2.13663 24.5116 2.25177 24.4086 2.30312C20.3322 4.1949 16.7992 8.50076 14.295 12.1624C13.3067 13.6068 12.5832 15.2165 11.63 16.6843C10.44 18.5451 8.86012 20.1607 7.53194 21.9317C6.96116 22.5701 5.84354 24.6246 5.20563 24.5409L5.19735 24.5387C5.19534 24.5381 5.19339 24.5373 5.19155 24.5363Z";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function Neoplasm({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale[100];
|
|
6
|
+
const activeColor = colorScale[300];
|
|
7
|
+
const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="neoplasm">
|
|
11
|
+
<path
|
|
12
|
+
d={NEOPLASM_PATH}
|
|
13
|
+
fill={fill}
|
|
14
|
+
stroke={style?.stroke}
|
|
15
|
+
strokeWidth={style?.strokeWidth}
|
|
16
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
17
|
+
/>
|
|
18
|
+
</g>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const NEOPLASM_PATH =
|
|
23
|
+
"M2.7706 0.345092C3.77204 -0.328406 4.67398 0.0748652 5.51994 0.775559C5.66929 0.84341 5.84084 0.854726 6.00335 0.870091C6.75039 0.90371 7.23202 1.47634 7.71526 1.9904C7.9442 2.15206 8.23991 2.13397 8.49487 2.22712C9.42032 2.53001 9.97875 3.53109 9.82848 4.52946C9.80496 4.72076 9.82624 4.9113 9.95893 5.05368C10.8667 5.72367 11.227 6.90427 10.8552 8.00289C10.8197 8.17335 10.8234 8.33612 10.8552 8.50914C11.1667 9.57255 10.4627 10.7371 9.42026 10.9099C9.00986 10.9605 8.83573 11.0538 8.57313 11.3857C7.90654 12.1783 6.69443 12.1982 5.99107 11.4787C5.5305 10.923 5.59744 10.7815 4.83778 10.6419C4.274 10.5136 4.05225 9.90237 3.47347 9.82554C2.48067 9.75886 1.64607 8.89953 1.56283 7.86148C1.52718 7.50386 1.66051 7.13178 1.52369 6.78727C1.3217 6.37915 1.32115 5.92532 1.23057 5.49352C1.10172 5.15452 0.710231 4.98692 0.513122 4.69274C-0.603239 3.37518 0.214433 1.09705 1.8828 0.870872C2.29014 0.811338 2.46031 0.574268 2.7706 0.345092ZM8.66675 8.95211C9.38993 8.35162 8.63882 7.25972 7.84647 7.70601C7.45807 7.89616 7.2217 7.60732 6.78065 7.86148C5.19403 8.99021 7.21312 10.9585 8.28615 9.18961C8.40479 9.09758 8.54993 9.05178 8.66675 8.95211ZM4.7104 6.27711L4.27303 6.33727C4.12492 6.3579 3.97681 6.38207 3.83565 6.41852C2.87888 6.71014 2.93127 8.12397 3.79805 8.44664C4.34702 8.66977 4.91047 8.31107 5.14548 7.78492C5.25444 7.61852 5.42561 7.46995 5.49231 7.2693C5.67652 6.73389 5.241 6.21214 4.7104 6.27711ZM8.15954 5.40524C8.913 4.35054 7.9177 2.94878 6.76301 3.66071C6.55641 3.79164 6.34141 3.80113 6.11308 3.86227C5.20786 4.14228 5.25696 5.42232 6.06934 5.76071C6.24349 5.83273 6.44219 5.82242 6.57808 5.96071C6.82774 6.35991 7.1629 6.64138 7.63085 6.42633C8.04922 6.26821 8.02001 5.76856 8.15954 5.40524ZM4.52778 2.60368C4.44638 2.07782 3.90894 1.82777 3.46273 2.07087C3.13279 2.34905 2.82713 2.08984 2.46597 2.10681C1.16526 2.23008 1.24741 4.22477 2.54961 4.25133C2.72681 4.26447 2.8382 4.34664 2.91869 4.51149C3.71452 6.01766 5.6609 4.68642 4.53008 3.18805C4.47929 2.99637 4.57022 2.79792 4.52778 2.60368Z";
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function Nervous({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale[100];
|
|
6
|
+
const activeColor = colorScale[200];
|
|
7
|
+
const fillColor = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="nervous">
|
|
11
|
+
{/* Invisible outline for interaction */}
|
|
12
|
+
<path d={OUTLINE_ARM_PATH} fill="transparent" />
|
|
13
|
+
<path d={OUTLINE_LEG_PATH} fill="transparent" />
|
|
14
|
+
{/* Nervous system */}
|
|
15
|
+
<path
|
|
16
|
+
d={BRAIN_PATH}
|
|
17
|
+
fill={style?.fill ?? fillColor}
|
|
18
|
+
stroke={style?.stroke}
|
|
19
|
+
strokeWidth={style?.strokeWidth}
|
|
20
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d={ARM_PATH}
|
|
24
|
+
fill={style?.fill ?? fillColor}
|
|
25
|
+
stroke={style?.stroke}
|
|
26
|
+
strokeWidth={style?.strokeWidth}
|
|
27
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
28
|
+
/>
|
|
29
|
+
<path
|
|
30
|
+
d={LEG_PATH}
|
|
31
|
+
fill={style?.fill ?? fillColor}
|
|
32
|
+
stroke={style?.stroke}
|
|
33
|
+
strokeWidth={style?.strokeWidth}
|
|
34
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
35
|
+
/>
|
|
36
|
+
</g>
|
|
37
|
+
);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
const OUTLINE_ARM_PATH =
|
|
41
|
+
"M66.5328 85.769C67.2273 85.6336 67.9069 86.0377 68.1266 86.6977L68.1647 86.8334V86.8354C68.7242 89.3373 69.8595 91.3481 71.2555 93.1918C71.3204 93.2718 71.3809 93.3515 71.4371 93.4301L71.9117 94.0268C72.4012 94.6269 72.9139 95.2128 73.4391 95.8002C74.501 96.988 75.2623 97.7959 75.8844 98.6655C76.4547 99.4628 76.9034 100.299 77.4371 101.521L77.6715 102.07L77.6979 102.14L77.7164 102.196C77.724 102.218 77.731 102.242 77.7369 102.265C78.396 104.847 78.4561 107.107 78.5231 109.093C78.591 111.108 78.6691 112.796 79.2447 114.526L79.2828 114.664C79.437 115.357 79.0441 116.065 78.3629 116.296C77.9891 116.423 77.5974 116.381 77.2711 116.212C77.4809 116.812 77.6859 117.448 77.8727 118.063C78.3031 119.481 78.6915 120.959 78.8941 121.95L78.9693 122.343L78.9762 122.391L78.9791 122.414L78.9801 122.424C79.0534 123.064 79.0949 123.694 79.1197 124.31C79.1675 124.388 79.2086 124.472 79.2408 124.561L79.2818 124.698L79.3756 125.007C79.6273 125.729 80.118 126.456 80.7408 127.391C81.3659 128.329 82.212 129.596 82.3375 131.033C82.4012 131.762 81.892 132.413 81.1793 132.536C81.4325 133.086 81.7013 133.672 81.9508 134.231C82.4133 135.268 82.875 136.358 83.234 137.38C83.5413 138.255 83.8019 139.159 83.899 139.976L83.9303 140.321C83.9762 141.088 83.3946 141.753 82.6256 141.806C81.8491 141.859 81.1823 141.267 81.1354 140.496C81.1044 139.989 80.9212 139.248 80.5924 138.312C80.3489 137.619 80.0438 136.872 79.7135 136.109C79.9083 136.793 79.5586 137.505 78.9195 137.779L78.7857 137.829C78.0517 138.059 77.2611 137.654 77.0309 136.909C76.2592 134.405 76.2107 131.963 76.2623 129.639C76.3118 127.412 76.4464 125.352 76.2428 123.179L76.2018 122.784C76.0561 121.975 75.664 120.434 75.193 118.881C74.7016 117.262 74.1869 115.84 73.8492 115.246L73.0943 113.936C73.0923 113.932 73.0905 113.929 73.0885 113.925L72.4176 112.726C72.1947 112.324 71.9733 111.921 71.7525 111.517C68.7985 106.114 68.0453 104.539 67.2877 102.081C66.7468 100.327 66.5202 98.0727 66.3072 95.6362C66.0897 93.1464 65.881 90.365 65.4147 87.3617C65.2994 86.6191 65.7931 85.914 66.5328 85.769Z";
|
|
42
|
+
const OUTLINE_LEG_PATH =
|
|
43
|
+
"M14.575 197.37C14.8653 196.021 16.194 195.162 17.5437 195.452C18.8935 195.742 19.7527 197.071 19.4627 198.421C18.6261 202.312 17.2133 208.751 16.4148 214.453C15.8062 218.799 15.6552 222.508 15.8474 224.986C15.8481 224.995 15.8488 225.003 15.8494 225.012C16.4373 232.528 17.9807 241.524 16.9148 250.832C16.7188 252.544 16.567 254.508 16.4382 256.592C16.4879 256.692 16.5323 256.784 16.5701 256.867C16.747 257.256 16.9216 257.71 17.0877 258.2C17.4209 259.184 17.7552 260.415 18.0183 261.762C18.5313 264.388 18.8427 267.785 18.116 270.716C17.8199 271.909 16.7124 272.684 15.5271 272.606C15.4444 273.523 15.3534 274.371 15.2478 275.127C15.0566 276.494 13.7928 277.448 12.4256 277.257C11.6462 277.148 11.0019 276.69 10.6267 276.064C10.4871 278.161 10.2308 280.468 10.0388 282.938C9.74284 286.746 9.55501 291.377 10.0144 297.341C10.1205 298.718 9.09014 299.92 7.71364 300.027C6.33711 300.133 5.13431 299.102 5.02809 297.726C4.84475 295.346 4.76049 293.164 4.74196 291.156C4.30936 292.031 3.38315 292.607 2.3484 292.544C0.970622 292.46 -0.0788071 291.275 0.00465233 289.898L0.0056289 289.895L0.00465233 289.891C0.00484981 289.888 0.00626899 289.883 0.00660546 289.878C0.0072902 289.867 0.00729223 289.851 0.00855858 289.832C0.0110871 289.794 0.0151845 289.74 0.0202773 289.67C0.0305332 289.529 0.0462892 289.323 0.0691055 289.055C0.114813 288.518 0.188925 287.729 0.302504 286.705C0.529693 284.658 0.91544 281.669 1.55446 277.865C2.21728 273.921 3.12071 271.564 4.14625 269.941C4.66137 269.125 5.16764 268.559 5.56911 268.135C5.6689 268.029 5.75156 267.941 5.82106 267.868C5.92819 264.692 6.07978 260.971 6.07106 256.37C5.61919 257.019 4.86992 257.446 4.0193 257.445C2.63887 257.445 1.51989 256.325 1.52028 254.945C1.52252 249.773 1.25876 242.813 2.72047 234.112C3.34934 230.369 5.13404 226.037 6.9275 222.264C8.62049 218.702 10.465 215.351 11.5252 213.325C12.3631 207.519 13.77 201.115 14.575 197.37Z";
|
|
44
|
+
const BRAIN_PATH =
|
|
45
|
+
"M26.7823 1.20492C27.8315 0.567599 32.6087 -0.60506 33.3956 0.377768C33.562 0.58558 33.9784 1.1477 33.8536 1.35628C34.2872 1.7172 34.0372 2.82492 34.0372 3.61703C34.0372 4.40925 34.1239 5.6758 34.0372 6.58187C34.1495 6.97176 34.0913 7.46992 34.0372 8.03499C34.0619 8.16154 34.0616 8.30127 34.0616 8.45101V11.6864C34.0615 12.9326 33.7283 13.4368 32.9796 13.7039C32.2309 13.971 31.4404 13.8232 30.6085 13.5858C30.9463 14.9983 29.0578 15.6286 27.4894 15.0692C26.0204 15.2264 23.4282 15.0536 22.4142 14.1493C20.8843 13.938 19.7473 12.7366 19.461 11.7157C19.1675 10.6684 18.9001 9.67156 19.8634 8.68832C19.6651 7.32653 20.8109 4.84671 22.3985 4.05843C23.0308 2.99075 25.0923 1.07195 26.7823 1.20492ZM35.3214 0.377768C36.1084 -0.605048 40.8855 0.567602 41.9347 1.20492C43.6247 1.07195 45.6853 2.99075 46.3175 4.05843C47.9055 4.8464 49.0519 7.32636 48.8536 8.68832C49.8169 9.67156 49.5495 10.6684 49.256 11.7157C48.9697 12.7366 47.8327 13.938 46.3028 14.1493C45.2889 15.0536 42.6966 15.2264 41.2276 15.0692C39.6592 15.6287 37.7707 14.9983 38.1085 13.5858C37.2766 13.8232 36.4861 13.971 35.7374 13.7039C34.9888 13.4368 34.6555 12.9326 34.6554 11.6864V8.45101C34.6554 8.30127 34.6551 8.16154 34.6798 8.03499C34.6257 7.46992 34.5675 6.97176 34.6798 6.58187C34.5932 5.6758 34.6798 4.40925 34.6798 3.61703C34.6798 2.82491 34.4298 1.7172 34.8634 1.35628C34.7386 1.1477 35.155 0.58558 35.3214 0.377768Z";
|
|
46
|
+
const ARM_PATH =
|
|
47
|
+
"M66.7239 86.7507C66.9358 86.7094 67.1416 86.8436 67.1887 87.0535C67.7887 89.7366 69.0056 91.8762 70.4583 93.7947C70.5222 93.8719 70.583 93.9522 70.6409 94.0339L71.1379 94.658C71.6415 95.2755 72.1645 95.8747 72.6936 96.4666C73.7842 97.6864 74.4905 98.4356 75.0715 99.2478C75.6609 100.072 76.1194 100.956 76.7493 102.457L76.7688 102.512C77.3976 104.976 77.4574 107.133 77.5247 109.128C77.5922 111.13 77.6676 112.956 78.2952 114.842C78.3645 115.051 78.2508 115.277 78.0413 115.348C77.8317 115.419 77.6051 115.308 77.5354 115.099C76.8664 113.09 76.7911 111.152 76.7239 109.159C76.6566 107.166 76.5994 105.101 76.0022 102.746C75.3876 101.284 74.9561 100.466 74.4192 99.7156C74.3625 99.6363 74.3039 99.5578 74.2444 99.4792C74.2484 99.4912 74.2522 99.5034 74.2561 99.5154C74.4393 100.073 74.5834 100.644 74.7004 101.223C74.9036 102.228 75.0247 103.264 75.1194 104.306C75.1392 104.526 74.977 104.721 74.7571 104.743C74.5374 104.764 74.3437 104.604 74.3235 104.385C74.2301 103.357 74.1127 102.358 73.9192 101.398C73.7415 100.795 73.5935 100.235 73.4905 99.7517C73.1657 98.7675 72.7163 97.8401 72.0803 96.9841C71.3756 96.1955 70.6708 95.3846 70.0061 94.5261C69.9433 94.445 69.8807 94.363 69.8186 94.281C69.0205 93.227 68.2867 92.0963 67.677 90.8435C67.8516 92.4955 67.9755 94.0492 68.0999 95.4724C68.3164 97.9503 68.5335 100.008 69.0081 101.547C69.7063 103.811 70.3755 105.243 73.3313 110.649C73.7687 111.449 74.2125 112.249 74.6555 113.035L75.4124 114.348L75.4133 114.35C75.8648 115.144 76.4306 116.756 76.9153 118.353C77.4031 119.961 77.8274 121.613 77.9846 122.514L77.9875 122.539C78.071 123.268 78.1139 123.987 78.135 124.698C78.2204 124.751 78.2857 124.836 78.3118 124.94C78.57 125.974 79.2319 126.929 79.9084 127.945C80.5603 128.924 81.2415 129.98 81.3411 131.12C81.3601 131.34 81.1977 131.534 80.9778 131.555C80.7578 131.576 80.5636 131.415 80.5442 131.195C80.4653 130.292 79.9154 129.403 79.2415 128.391C79.0125 128.048 78.7714 127.69 78.5403 127.319C78.5543 127.473 78.5663 127.622 78.5803 127.765C78.6597 128.578 78.7425 129.213 78.8655 129.634C79.0091 130.124 79.3158 130.85 79.7122 131.73C80.1004 132.592 80.5826 133.619 81.0374 134.638C81.4962 135.667 81.9458 136.728 82.2913 137.712C82.6345 138.689 82.8855 139.62 82.9319 140.382C82.9451 140.602 82.7773 140.792 82.5569 140.807C82.3364 140.822 82.1465 140.656 82.1331 140.435C82.0935 139.787 81.8723 138.941 81.5354 137.981C81.2007 137.028 80.7619 135.991 80.3059 134.969C79.8457 133.936 79.3843 132.955 78.9827 132.063C78.5895 131.19 78.2594 130.414 78.0979 129.862C78.0853 129.819 78.0736 129.773 78.0618 129.727C78.0131 131.995 78.074 134.177 78.7512 136.374C78.8159 136.584 78.6975 136.808 78.4866 136.875C78.2754 136.941 78.0505 136.824 77.9856 136.613C77.2638 134.271 77.2118 131.965 77.2629 129.662C77.3112 127.489 77.4502 125.335 77.2395 123.086L77.1917 122.635C77.0395 121.776 76.6301 120.174 76.1497 118.591C75.6623 116.985 75.119 115.458 74.718 114.752L73.9612 113.437L73.9592 113.434C73.5139 112.644 73.0688 111.841 72.6292 111.037C69.6741 105.632 68.9679 104.137 68.2434 101.787C67.7395 100.152 67.5179 98.0081 67.303 95.5486C67.0867 93.0739 66.8753 90.2522 66.4026 87.2078C66.3698 86.9951 66.5121 86.7924 66.7239 86.7507Z";
|
|
48
|
+
const LEG_PATH =
|
|
49
|
+
"M17.1033 197.505C17.3188 197.552 17.4553 197.765 17.4089 197.981C16.5784 201.844 15.1495 208.35 14.3376 214.136C14.3372 214.142 14.3364 214.149 14.3357 214.155C14.3353 214.157 14.3351 214.16 14.3347 214.163C13.7125 218.606 13.5465 222.481 13.7556 225.161C14.3626 232.936 15.8638 241.546 14.8279 250.593C14.607 252.522 14.4427 254.755 14.3044 257.101C14.4226 257.262 14.543 257.484 14.658 257.737C14.7981 258.045 14.948 258.431 15.0984 258.874C15.3996 259.763 15.7105 260.905 15.9568 262.165C16.4473 264.676 16.6958 267.718 16.0779 270.21C16.0247 270.425 15.8077 270.555 15.5935 270.502C15.3793 270.449 15.2486 270.232 15.3015 270.018C15.878 267.692 15.6536 264.786 15.1716 262.319C14.9317 261.091 14.6306 259.984 14.3416 259.131C14.2988 259.005 14.2525 258.886 14.2107 258.772C14.1314 260.257 14.0594 261.768 13.988 263.26C13.7755 267.704 13.5669 271.985 13.1687 274.836C13.138 275.055 12.9352 275.208 12.7166 275.177C12.498 275.147 12.3454 274.945 12.3757 274.726C12.7677 271.919 12.9759 267.681 13.1892 263.222C13.4019 258.776 13.6191 254.117 14.033 250.502C14.9866 242.174 13.7654 234.265 13.0964 226.86C11.235 231.593 8.50792 240.793 8.82495 249.042C9.16249 257.826 8.84052 264.041 8.69019 268.834C8.64059 270.416 8.60977 271.839 8.62671 273.149C8.66142 275.833 8.24542 278.912 7.94507 282.776C7.64321 286.66 7.45075 291.403 7.92065 297.503C7.93734 297.723 7.77238 297.916 7.55249 297.933C7.33236 297.95 7.13997 297.785 7.1228 297.565C6.64891 291.413 6.84315 286.627 7.14722 282.714C7.45283 278.782 7.86098 275.796 7.8269 273.16C7.81389 272.153 7.82758 271.082 7.85718 269.934C7.79621 269.998 7.73715 270.063 7.67651 270.127C7.33729 270.486 6.97223 270.899 6.59839 271.491C5.84991 272.676 5.04046 274.623 4.41479 278.346C3.78524 282.093 3.40687 285.029 3.1853 287.026C3.07459 288.023 3.0024 288.787 2.95874 289.3C2.93694 289.556 2.92225 289.751 2.91284 289.88C2.90814 289.945 2.90425 289.994 2.9021 290.026C2.90103 290.042 2.90065 290.054 2.90015 290.062C2.89991 290.066 2.90026 290.069 2.90015 290.071L2.89917 290.073C2.88579 290.293 2.69671 290.462 2.47632 290.449C2.25589 290.435 2.08794 290.244 2.10132 290.024H2.10034C2.10038 290.023 2.10125 290.022 2.10132 290.021C2.10146 290.019 2.10203 290.015 2.10229 290.011C2.10284 290.003 2.10314 289.99 2.10425 289.973C2.1065 289.939 2.11018 289.889 2.11499 289.823C2.12464 289.69 2.14073 289.492 2.16284 289.232C2.20708 288.712 2.27788 287.941 2.3894 286.936C2.61253 284.926 2.99465 281.976 3.62671 278.214C4.26268 274.429 5.09762 272.369 5.92261 271.063C6.33546 270.409 6.73906 269.954 7.09546 269.578C7.42638 269.228 7.68276 268.971 7.89429 268.683C8.04651 263.898 8.35839 257.746 8.02515 249.074C7.66615 239.732 11.1249 229.257 12.9509 225.123C12.7818 222.834 12.8746 219.754 13.2673 216.237C12.2072 218.227 10.8454 220.777 9.54663 223.509C7.77038 227.246 6.13879 231.272 5.58081 234.593C4.16817 243.001 4.42293 249.683 4.42065 254.946C4.42045 255.167 4.24106 255.345 4.02026 255.345C3.79952 255.345 3.62075 255.166 3.62085 254.945C3.6231 249.707 3.36561 242.949 4.79175 234.46C5.36933 231.023 7.04398 226.912 8.82495 223.165C10.59 219.452 12.4849 216.045 13.5525 213.983C14.3703 208.172 15.801 201.657 16.6277 197.812C16.6743 197.596 16.8874 197.459 17.1033 197.505Z";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function Prenetal({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale[300];
|
|
6
|
+
const activeColor = colorScale[300];
|
|
7
|
+
const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="prenetal">
|
|
11
|
+
<path
|
|
12
|
+
d={PRENETAL_PATH}
|
|
13
|
+
fill={fill}
|
|
14
|
+
stroke={style?.stroke}
|
|
15
|
+
strokeWidth={style?.strokeWidth}
|
|
16
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
17
|
+
/>
|
|
18
|
+
</g>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const PRENETAL_PATH =
|
|
23
|
+
"M22.8833 11.3487C23.0591 10.2417 24.641 9.38036 25.7359 9.64162C27.9844 10.1639 29.9478 11.6287 31.2785 12.926C31.7732 13.4074 31.9913 13.5494 32.3096 13.3794C32.3096 13.3794 33.17 12.3268 33.6343 12.5277C34.0986 12.7286 34.0556 13.5158 33.8627 13.9158C33.3813 14.9053 31.3238 15.0517 29.8025 15.0418C29.1724 15.0403 29.1906 15.6672 29.431 16.2547C32.1927 22.984 25.6292 25.9865 19.5769 22.5988C17.0388 21.1748 15.2473 19.1104 13.325 17.2751C11.2889 15.3283 7.30778 17.3163 4.07086 14.9013C-1.81731 10.4858 -0.800527 4.3803 3.82488 1.3048C7.97048 -1.45449 11.5335 0.695054 13.2748 2.85125C13.9831 3.72545 14.3478 5.47286 15.1735 6.21835C16.1536 7.10024 17.5359 5.80462 17.9111 8.60047C18.1807 10.5961 17.2051 12.0128 15.5749 13.073C15.9938 13.8952 16.4086 13.5252 16.7977 13.4042C17.5039 13.1933 18.357 13.6686 19.1195 13.6176C19.6674 13.5799 19.9731 12.9759 19.697 12.4975L18.5429 10.8041C18.3882 10.5394 18.4151 10.2104 18.6105 9.97628L19.474 8.95069C19.8048 8.5627 20.4354 8.62309 20.6651 9.08139C20.9634 9.67929 20.3574 10.102 20.3914 10.6662C20.4254 11.2303 21.2529 12.8044 21.9626 13.4008C22.4081 13.7657 23.0765 13.4285 23.0646 12.8556L22.8841 11.3381L22.8833 11.3487Z";
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function ThoracicCavity({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale.alpha[100];
|
|
6
|
+
const activeColor = colorScale.alpha[200];
|
|
7
|
+
const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="thoracic-cavity">
|
|
11
|
+
{/* Invisible outline for interaction */}
|
|
12
|
+
<path d={OUTLINE_PATH} fill="transparent" />
|
|
13
|
+
{/* Thoracic cavity main shape */}
|
|
14
|
+
<path
|
|
15
|
+
d={THORACIC_CAVITY_PATH}
|
|
16
|
+
fill={fill}
|
|
17
|
+
stroke={style?.stroke}
|
|
18
|
+
strokeWidth={style?.strokeWidth}
|
|
19
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
20
|
+
/>
|
|
21
|
+
</g>
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const OUTLINE_PATH =
|
|
26
|
+
"M16.979 1.09281C18.2305 0.144621 22.3782 -0.556411 23.5717 0.609407C23.8146 1.99688 20.0653 1.01198 18.9624 1.91605C18.0816 2.31458 16.1224 3.5767 17.6987 4.25198C20.0899 5.23722 23.9339 6.53575 26.8354 6.32913C26.8354 6.32913 27.5467 5.65118 30.0004 5.65042V37.9278C29.9386 38.1891 29.761 37.9969 29.2797 36.9864C28.469 35.09 27.4485 38.1233 26.8764 38.7764C24.2547 43.0087 19.3369 45.7767 16.5424 49.7803C13.2032 54.4573 9.3354 55.5 7.3354 55.5C5.3354 55.5 1.48921 55.7735 0.952589 46.8946C0.187085 42.6326 -0.447585 42.8572 0.41255 38.2373C-0.476355 35.5105 1.01368 32.7392 0.655714 29.9717C0.688639 28.7097 1.39692 27.5582 1.51216 26.4512C1.60269 25.2484 1.02206 24.0897 1.38814 22.8721C3.40892 18.5695 3.23654 20.709 3.70161 15.6241C4.22857 14.1114 5.7966 13.1517 6.54146 11.7422C7.78017 9.72014 8.72286 7.48057 10.6489 5.84964C11.6654 4.93822 13.1427 4.37334 14.2622 3.66116C15.0935 2.83459 15.7649 1.84188 16.979 1.09281Z";
|
|
27
|
+
const THORACIC_CAVITY_PATH =
|
|
28
|
+
"M16.979 1.09281C18.2305 0.144621 22.3782 -0.556411 23.5717 0.609407C23.8146 1.99688 20.0653 1.01198 18.9624 1.91605C18.0816 2.31458 16.1224 3.5767 17.6987 4.25198C20.0899 5.23722 23.9339 6.53575 26.8354 6.32913C26.8354 6.32913 27.5467 5.65118 30.0004 5.65042V37.9278C29.9386 38.1891 29.761 37.9969 29.2797 36.9864C28.469 35.09 27.4485 38.1233 26.8764 38.7764C24.2547 43.0087 19.3369 45.7767 16.5424 49.7803C13.2032 54.4573 9.3354 55.5 7.3354 55.5C5.3354 55.5 1.48921 55.7735 0.952589 46.8946C0.187085 42.6326 -0.447585 42.8572 0.41255 38.2373C-0.476355 35.5105 1.01368 32.7392 0.655714 29.9717C0.688639 28.7097 1.39692 27.5582 1.51216 26.4512C1.60269 25.2484 1.02206 24.0897 1.38814 22.8721C3.40892 18.5695 3.23654 20.709 3.70161 15.6241C4.22857 14.1114 5.7966 13.1517 6.54146 11.7422C7.78017 9.72014 8.72286 7.48057 10.6489 5.84964C11.6654 4.93822 13.1427 4.37334 14.2622 3.66116C15.0935 2.83459 15.7649 1.84188 16.979 1.09281ZM4.31489 48.2295C1.788 46.4585 3.4792 53.4479 7.3354 52.7471C9.1751 52.6917 11.4307 51.8977 12.5708 50.6836H12.5747C14.2206 48.9421 8.13414 51.4251 4.31489 48.2295ZM3.08833 41.0899C1.3186 39.7319 1.82862 42.3447 2.32661 43.2598C3.68892 45.2782 6.42188 46.3887 8.6772 47.7207C10.4017 48.5215 14.3241 47.4916 15.5258 46.0635L15.5297 46.0674C16.5913 44.7688 14.4232 44.8095 13.4106 44.8575C9.53373 45.3408 6.05979 43.1673 3.08833 41.0899ZM3.43403 34.9424C3.13774 34.6841 2.58586 34.1891 2.2895 34.5616C1.17828 40.4657 15.1676 45.8126 19.3286 40.6133C21.122 38.0271 10.3563 41.9751 3.43403 34.9424ZM3.38814 28.5762C1.9271 31.5467 3.94836 34.4952 11.8667 36.5469V36.5508C21.9333 40.3257 29.6175 28.5922 25.4819 31.4366C20.7448 34.9163 14.5869 34.7871 9.52876 31.6358C7.67675 30.8607 5.1413 28.6389 3.38814 28.5762ZM28.0004 33.1153C26.988 33.1226 23.6336 36.6762 24.3168 37.2002C24.8148 37.3035 25.4816 36.7798 25.7944 36.4219C26.3788 35.6617 28.1074 33.8164 28.0004 33.1153ZM26.0366 25.2998C11.3851 31.484 5.38922 18.7505 3.87056 22.2744C2.80909 25.0308 7.4018 27.2885 9.36079 28.4951C11.3198 29.7018 14.3736 31.8538 18.769 31.4922C22.3043 31.1564 26.5634 29.3699 27.1108 26.001C27.3742 25.1043 26.9544 24.9788 26.0366 25.2998ZM10.184 16.8643C9.28682 16.4436 6.99836 14.9569 6.57857 15.4551C3.71419 18.85 10.4843 21.2154 12.645 22.2744C17.353 24.5769 21.1146 24.8492 25.7651 23.0264C27.1562 22.65 28.65 20.4328 26.3823 20.2188C20.1104 20.5324 16.6123 20.0338 10.184 16.8643ZM10.6567 10.5176C8.87062 9.46604 8.44673 11.7313 9.23677 12.7129C11.0394 16.2111 28.8563 22.1372 27.6586 15.377C25.9794 14.3697 22.5715 14.6684 20.4643 14.1924C16.9373 13.6942 13.5748 12.2371 10.6528 10.5176H10.6567ZM17.02 6.3887C15.6701 5.51422 13.5875 5.19637 12.7807 6.72366V6.72073C11.1066 10.3108 26.2407 13.5057 27.8022 12.4141C27.3618 7.90139 20.5925 8.20396 17.02 6.3887Z";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { TRANSITION_STYLE } from "../constants";
|
|
2
|
+
import type { OrganSvgProps } from "../types";
|
|
3
|
+
|
|
4
|
+
export function Voice({ style, colorScale, isActive = false, className }: OrganSvgProps) {
|
|
5
|
+
const defaultColor = colorScale[100];
|
|
6
|
+
const activeColor = colorScale[300];
|
|
7
|
+
const fill = style?.fill ?? (isActive ? activeColor : defaultColor);
|
|
8
|
+
|
|
9
|
+
return (
|
|
10
|
+
<g className={className} data-organ="voice">
|
|
11
|
+
<path
|
|
12
|
+
d={VOICE_PATH}
|
|
13
|
+
fill={fill}
|
|
14
|
+
stroke={style?.stroke}
|
|
15
|
+
strokeWidth={style?.strokeWidth}
|
|
16
|
+
style={{ transition: TRANSITION_STYLE }}
|
|
17
|
+
/>
|
|
18
|
+
</g>
|
|
19
|
+
);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const VOICE_PATH =
|
|
23
|
+
"M14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7Z";
|
package/src/svg/index.ts
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import type { ComponentType } from "react";
|
|
2
|
+
import type { OrganId, OrganSvgProps } from "../types";
|
|
3
|
+
import { Blood } from "./Blood";
|
|
4
|
+
import { Breast } from "./Breast";
|
|
5
|
+
import { Cell } from "./Cell";
|
|
6
|
+
import { Constitutional } from "./Constitutional";
|
|
7
|
+
import { Digestive } from "./Digestive";
|
|
8
|
+
import { Ear } from "./Ear";
|
|
9
|
+
import { Endocrine } from "./Endocrine";
|
|
10
|
+
import { Eye } from "./Eye";
|
|
11
|
+
import { Growth } from "./Growth";
|
|
12
|
+
import { Head } from "./Head";
|
|
13
|
+
import { Heart } from "./Heart";
|
|
14
|
+
import { Immune } from "./Immune";
|
|
15
|
+
import { Integuments } from "./Integument";
|
|
16
|
+
import { Kidney } from "./Kidney";
|
|
17
|
+
import { Limbs } from "./Limbs";
|
|
18
|
+
import { Lung } from "./Lung";
|
|
19
|
+
import { Metabolism } from "./Metabolism";
|
|
20
|
+
import { Muscle } from "./Muscle";
|
|
21
|
+
import { Neoplasm } from "./Neoplasm";
|
|
22
|
+
import { Nervous } from "./Nervous";
|
|
23
|
+
import { Prenetal } from "./Prenatal";
|
|
24
|
+
import { ThoracicCavity } from "./ThoracicCavity";
|
|
25
|
+
import { Voice } from "./Voice";
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* Map of organ IDs to their SVG components
|
|
29
|
+
*/
|
|
30
|
+
export const ORGAN_COMPONENTS: Record<OrganId, ComponentType<OrganSvgProps>> = {
|
|
31
|
+
head: Head,
|
|
32
|
+
eye: Eye,
|
|
33
|
+
ear: Ear,
|
|
34
|
+
thoracicCavity: ThoracicCavity,
|
|
35
|
+
heart: Heart,
|
|
36
|
+
lung: Lung,
|
|
37
|
+
digestive: Digestive,
|
|
38
|
+
kidney: Kidney,
|
|
39
|
+
integument: Integuments,
|
|
40
|
+
constitutional: Constitutional,
|
|
41
|
+
limbs: Limbs,
|
|
42
|
+
nervous: Nervous,
|
|
43
|
+
breast: Breast,
|
|
44
|
+
voice: Voice,
|
|
45
|
+
metabolism: Metabolism,
|
|
46
|
+
cell: Cell,
|
|
47
|
+
endocrine: Endocrine,
|
|
48
|
+
neoplasm: Neoplasm,
|
|
49
|
+
immune: Immune,
|
|
50
|
+
muscle: Muscle,
|
|
51
|
+
growth: Growth,
|
|
52
|
+
prenatal: Prenetal,
|
|
53
|
+
blood: Blood,
|
|
54
|
+
};
|
package/src/types.ts
ADDED
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
import type { CSSProperties } from "react";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Supported organ identifiers
|
|
5
|
+
*/
|
|
6
|
+
export type OrganId =
|
|
7
|
+
| "head"
|
|
8
|
+
| "eye"
|
|
9
|
+
| "ear"
|
|
10
|
+
| "heart"
|
|
11
|
+
| "lung"
|
|
12
|
+
| "digestive"
|
|
13
|
+
| "kidney"
|
|
14
|
+
| "integument"
|
|
15
|
+
| "constitutional"
|
|
16
|
+
| "limbs"
|
|
17
|
+
| "nervous"
|
|
18
|
+
| "breast"
|
|
19
|
+
| "thoracicCavity"
|
|
20
|
+
| "voice"
|
|
21
|
+
| "metabolism"
|
|
22
|
+
| "cell"
|
|
23
|
+
| "endocrine"
|
|
24
|
+
| "neoplasm"
|
|
25
|
+
| "immune"
|
|
26
|
+
| "muscle"
|
|
27
|
+
| "growth"
|
|
28
|
+
| "prenatal"
|
|
29
|
+
| "blood";
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Color scheme for each organ.
|
|
33
|
+
*/
|
|
34
|
+
export type ColorName = "blue" | "yellow" | "gray";
|
|
35
|
+
/**
|
|
36
|
+
* Color step
|
|
37
|
+
*/
|
|
38
|
+
export type ColorStep = 100 | 200 | 300;
|
|
39
|
+
/**
|
|
40
|
+
* Solid color scale (required colors)
|
|
41
|
+
*/
|
|
42
|
+
export type SolidColorScale = Record<ColorStep, string>;
|
|
43
|
+
/**
|
|
44
|
+
* Color scale for a color palette.
|
|
45
|
+
* Solid colors (100, 200, 300) are required.
|
|
46
|
+
* Alpha colors are all-or-nothing optional via the 'alpha' property.
|
|
47
|
+
*/
|
|
48
|
+
export type ColorScale = SolidColorScale & {
|
|
49
|
+
alpha?: SolidColorScale;
|
|
50
|
+
};
|
|
51
|
+
export type ColorPalette = Record<ColorName, ColorScale>;
|
|
52
|
+
export type StrictColorPalette = Record<ColorName, Required<ColorScale>>;
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Style properties for organ SVG elements
|
|
56
|
+
*/
|
|
57
|
+
export interface OrganStyle {
|
|
58
|
+
/** Fill color of the organ */
|
|
59
|
+
fill?: string;
|
|
60
|
+
/** Stroke (border) color */
|
|
61
|
+
stroke?: string;
|
|
62
|
+
/** Stroke width in pixels */
|
|
63
|
+
strokeWidth?: number;
|
|
64
|
+
/** Opacity (0-1) */
|
|
65
|
+
opacity?: number;
|
|
66
|
+
/** Whether the organ is visible */
|
|
67
|
+
visible?: boolean;
|
|
68
|
+
/** Blur effect in pixels (CSS filter blur) */
|
|
69
|
+
blur?: number;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* Configuration for individual organ
|
|
74
|
+
*/
|
|
75
|
+
export interface OrganConfig {
|
|
76
|
+
/** Organ identifier */
|
|
77
|
+
id: OrganId;
|
|
78
|
+
/** Associated HPO IDs for this organ (optional) */
|
|
79
|
+
hpoIds?: string[];
|
|
80
|
+
/** Default style */
|
|
81
|
+
style?: OrganStyle;
|
|
82
|
+
/** Style when hovered */
|
|
83
|
+
hoverStyle?: OrganStyle;
|
|
84
|
+
/** Style when selected/active */
|
|
85
|
+
activeStyle?: OrganStyle;
|
|
86
|
+
/** Color scheme to use for this organ */
|
|
87
|
+
colorName?: ColorName;
|
|
88
|
+
/** Show red outline around this organ */
|
|
89
|
+
showOutline?: boolean;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Props for individual organ SVG components
|
|
94
|
+
*/
|
|
95
|
+
export interface OrganSvgProps {
|
|
96
|
+
// TODO: remove style, transition
|
|
97
|
+
/** Current style to apply */
|
|
98
|
+
style?: OrganStyle;
|
|
99
|
+
/** CSS transition string for smooth style changes */
|
|
100
|
+
transition?: string;
|
|
101
|
+
/** Color scale to use for this organ (with guaranteed alpha values) */
|
|
102
|
+
colorScale: Required<ColorScale>;
|
|
103
|
+
/** Whether the organ is in active state (hovered or selected) */
|
|
104
|
+
isActive?: boolean;
|
|
105
|
+
/** Additional CSS class name */
|
|
106
|
+
className?: string;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Internal state for organ interaction
|
|
111
|
+
*/
|
|
112
|
+
export interface OrganInteractionState {
|
|
113
|
+
/** Currently hovered organ ID */
|
|
114
|
+
hoveredOrgan: OrganId | null;
|
|
115
|
+
/** Currently selected/clicked organ ID */
|
|
116
|
+
selectedOrgan: OrganId | null;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Handlers returned by useOrganInteraction hook
|
|
121
|
+
*/
|
|
122
|
+
export interface OrganInteractionHandlers {
|
|
123
|
+
/** Handle mouse enter on organ */
|
|
124
|
+
handleMouseEnter: (organId: OrganId) => void;
|
|
125
|
+
/** Handle mouse leave on organ */
|
|
126
|
+
handleMouseLeave: () => void;
|
|
127
|
+
/** Handle click on organ */
|
|
128
|
+
handleClick: (organId: OrganId) => void;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Props for the main HpoVisualizer component
|
|
133
|
+
*/
|
|
134
|
+
export interface HpoVisualizerProps {
|
|
135
|
+
/** Detailed organ configurations */
|
|
136
|
+
organs?: OrganConfig[];
|
|
137
|
+
/**
|
|
138
|
+
* List of organ IDs to display.
|
|
139
|
+
* - undefined: all organs are visible
|
|
140
|
+
* - OrganId[]: only the specified organs are visible
|
|
141
|
+
* - []: no organs are visible
|
|
142
|
+
*/
|
|
143
|
+
visibleOrgans?: OrganId[];
|
|
144
|
+
/** Controlled: currently hovered organ */
|
|
145
|
+
hoveredOrgan?: OrganId | null;
|
|
146
|
+
/** Controlled: currently selected organ */
|
|
147
|
+
selectedOrgan?: OrganId | null;
|
|
148
|
+
/** Callback when hover state changes */
|
|
149
|
+
onHover?: (organId: OrganId | null) => void;
|
|
150
|
+
/** Callback when selection state changes */
|
|
151
|
+
onSelect?: (organId: OrganId | null) => void;
|
|
152
|
+
/** Color palette to use for organs */
|
|
153
|
+
colorPalette?: Partial<ColorPalette>;
|
|
154
|
+
/** Width of the visualizer */
|
|
155
|
+
width?: number | string;
|
|
156
|
+
/** Height of the visualizer */
|
|
157
|
+
height?: number | string;
|
|
158
|
+
/** Additional CSS class name */
|
|
159
|
+
className?: string;
|
|
160
|
+
/** Additional inline styles */
|
|
161
|
+
style?: CSSProperties;
|
|
162
|
+
}
|