Skip to content

Commit 8ceba66

Browse files
alizaib1217alizaib1217
authored
Documentation V1 (#3)
* feat: comprehensive SmartAdd feature implementation This commit encompasses major improvements and new features: 🎯 Core Features: - Complete documentation system with interactive pages and JSON data - Advanced inspector sidebar with complex metadata handling - Ontology tree selection with CHMO and RXNO chemical ontologies - Enhanced date/time input with DD/MM/YYYY HH:mm:ss format - File upload functionality with MOL file support - Quantity input fields with unit management - Improved reaction scheme dropdown with dynamic options 🔧 Technical Improvements: - Solvent complex array handling - Extended metadata schema optimization - Enhanced drag-drop system with better notifications - ZIP download and export functionality improvements - Better error handling and form validation - Responsive UI components and layouts 🎨 UI/UX Enhancements: - Updated workspace header with logo and navigation - Improved file tree icons and rendering - Enhanced toolbar and button components - Better visual feedback and user interactions - Clean documentation interface without animations/shadows 📦 Infrastructure: - Package dependencies updates - Lint fixes and code quality improvements - Type safety enhancements - Component refactoring and code organization This represents a major milestone in SmartAdd development with comprehensive features for chemical data management and analysis. * video added, doc button,
1 parent 662d1a2 commit 8ceba66

3 files changed

Lines changed: 676 additions & 7 deletions

File tree

‎public/data/documentation.json‎

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
{
2+
"title": "SmartAdd User Training Guide",
3+
"description": "Simplify your chemical data for Chemotion",
4+
"mainVideo": {
5+
"url": "https://www.youtube.com/embed/9E6r9Txje2U",
6+
"title": "Complete SmartAdd Tutorial - From Upload to Export",
7+
"description": "Watch this comprehensive tutorial to learn how to use SmartAdd effectively for organizing your chemistry data."
8+
},
9+
"sections": [
10+
{
11+
"id": "what-is-smartadd",
12+
"title": "What is SmartAdd?",
13+
"description": "Introduction to SmartAdd and its benefits",
14+
"content": [
15+
{
16+
"type": "text",
17+
"content": "SmartAdd is a web-based companion for Chemotion that helps researchers import, organize, and prepare chemical data before sending it into Chemotion. Instead of wrestling with complex file structures or scattered files, SmartAdd gives you a clear, visual tree view to curate your collection."
18+
},
19+
{
20+
"type": "text",
21+
"content": "Before SmartAdd: Hours spent organizing scattered files, manual entry of sample/reaction information, steep learning curve for new users, higher risk of errors during import."
22+
},
23+
{
24+
"type": "text",
25+
"content": "With SmartAdd: Drag & drop your files, organized in minutes, tree view clearly shows collection structure, inline editing of samples, reactions, and analyses, export-ready data for Chemotion."
26+
}
27+
]
28+
},
29+
{
30+
"id": "getting-started",
31+
"title": "Getting Started",
32+
"description": "Requirements and first upload steps",
33+
"content": [
34+
{
35+
"type": "text",
36+
"content": "Requirements: A modern browser (Chrome, Firefox, Safari, Edge), analytical data files or ZIP archives of your datasets. No installation required."
37+
},
38+
{
39+
"type": "text",
40+
"content": "First Upload: Open SmartAdd in your browser, drag & drop analytical files or a ZIP into the upload area, SmartAdd processes the files and shows them as a tree in the right-side workspace."
41+
}
42+
]
43+
},
44+
{
45+
"id": "interface-overview",
46+
"title": "Understanding the Interface",
47+
"description": "Left panel and right workspace overview",
48+
"content": [
49+
{
50+
"type": "text",
51+
"content": "📥 Left Panel — Import & Actions:"
52+
},
53+
{
54+
"type": "list",
55+
"items": [
56+
"\"Drag files here\" upload area",
57+
"Upload progress and status",
58+
"Action buttons (e.g., Add Sample, Add Reaction, Clear)",
59+
"Drag analytical files or ZIP archives",
60+
"Use action buttons to add entities",
61+
"Click Clear to reset"
62+
]
63+
},
64+
{
65+
"type": "text",
66+
"content": "🌳 Right Workspace — Tree View & Editor (Data Preparation):"
67+
},
68+
{
69+
"type": "list",
70+
"items": [
71+
"Tree view of collections (samples, reactions, analyses)",
72+
"Clickable nodes to select items",
73+
"Properties editor for the selected item",
74+
"Expand/collapse nodes to explore the hierarchy",
75+
"Select a node to edit its properties",
76+
"Changes save instantly"
77+
]
78+
}
79+
]
80+
},
81+
{
82+
"id": "step-by-step-workflow",
83+
"title": "Step-by-Step Workflow",
84+
"description": "Complete workflow from upload to export",
85+
"content": [
86+
{
87+
"type": "text",
88+
"content": "Step 1: Upload Data - Prepare a ZIP (recommended) or drag individual analytical files, include related spectra/logs/metadata."
89+
},
90+
{
91+
"type": "text",
92+
"content": "Step 2: Explore & Prepare (Right-Side Tree View) - Review how SmartAdd structured your collection. Typical hierarchy: Samples → Reactions → Analyses / Files. Select a node to edit properties in the editor."
93+
},
94+
{
95+
"type": "text",
96+
"content": "Common fields to edit:"
97+
},
98+
{
99+
"type": "list",
100+
"items": [
101+
"Sample: name, amount + units (mg, g, mol), purity, location, description",
102+
"Reaction: roles (reactant/product/solvent), RF value, Roles",
103+
"Analysis: Type Ontology, file attachments, status, description"
104+
]
105+
},
106+
{
107+
"type": "text",
108+
"content": "Step 3: Organize Reactions - Click Add Reaction to create a reaction node, link samples and set roles (reactant/product/solvent)."
109+
},
110+
{
111+
"type": "text",
112+
"content": "Step 4: Export for Chemotion - Review: ensure you haven't missed anything you need and relationships correct. Export: click Download as ZIP (ready for Chemotion import). Direct export to Chemotion is planned in a future release."
113+
},
114+
{
115+
"type": "text",
116+
"content": "Step 5: Import the ZIP into Chemotion - Open Chemotion, go to Import, select the ZIP file exported from SmartAdd, follow prompts to complete the import."
117+
}
118+
]
119+
},
120+
{
121+
"id": "tips-best-practices",
122+
"title": "Tips & Best Practices",
123+
"description": "Guidelines for optimal use",
124+
"content": [
125+
{
126+
"type": "text",
127+
"content": "Before you start:"
128+
},
129+
{
130+
"type": "list",
131+
"items": [
132+
"Keep folders logical before zipping",
133+
"Use clear filenames (avoid special characters)",
134+
"Include all related data (spectra/logs/metadata)"
135+
]
136+
},
137+
{
138+
"type": "text",
139+
"content": "While using SmartAdd:"
140+
},
141+
{
142+
"type": "list",
143+
"items": [
144+
"Work sample-by-sample",
145+
"Use consistent naming conventions",
146+
"Periodically export a ZIP (checkpoint)",
147+
"Validate fields before final export"
148+
]
149+
},
150+
{
151+
"type": "text",
152+
"content": "Quality tips:"
153+
},
154+
{
155+
"type": "list",
156+
"items": [
157+
"Be descriptive (use full names)",
158+
"Always include units",
159+
"Add context in description fields",
160+
"Group related items together"
161+
]
162+
}
163+
]
164+
},
165+
{
166+
"id": "troubleshooting",
167+
"title": "Troubleshooting",
168+
"description": "Common issues and solutions",
169+
"content": [
170+
{
171+
"type": "text",
172+
"content": "Upload issues:"
173+
},
174+
{
175+
"type": "list",
176+
"items": [
177+
"ZIP won't upload → check size limit, re-zip, refresh page",
178+
"Tree looks wrong → verify original structure, Clear and re-upload"
179+
]
180+
},
181+
{
182+
"type": "text",
183+
"content": "Editing issues:"
184+
},
185+
{
186+
"type": "list",
187+
"items": [
188+
"Can't edit → ensure a node, not a folder, is selected",
189+
"Changes not visible → click outside field, re-select the node"
190+
]
191+
},
192+
{
193+
"type": "text",
194+
"content": "Export issues:"
195+
},
196+
{
197+
"type": "list",
198+
"items": [
199+
"Download blocked → check browser download settings / pop-up blocker",
200+
"Try another browser if needed"
201+
]
202+
}
203+
]
204+
}
205+
],
206+
"faq": [
207+
{
208+
"question": "What browsers are supported?",
209+
"answer": "SmartAdd works on all modern browsers including Chrome, Firefox, Safari, and Edge. No installation is required."
210+
},
211+
{
212+
"question": "What file formats can I upload?",
213+
"answer": "You can upload analytical data files, ZIP archives containing your datasets, and MOL files. ZIP format is recommended for organized collections."
214+
},
215+
{
216+
"question": "How do I organize my data before uploading?",
217+
"answer": "Keep folders logical before zipping, use clear filenames (avoid special characters), and include all related data like spectra, logs, and metadata."
218+
},
219+
{
220+
"question": "Can I edit sample and reaction properties?",
221+
"answer": "Yes! Select any node in the tree view to edit its properties. Common fields include sample names, amounts with units, purity, reaction roles, and analysis techniques."
222+
},
223+
{
224+
"question": "How do I export my data for Chemotion?",
225+
"answer": "Click the Download as ZIP button after preparing your data. The exported ZIP is ready for Chemotion import. Direct export to Chemotion is planned for future releases."
226+
},
227+
{
228+
"question": "What keyboard shortcuts are available?",
229+
"answer": "Arrow keys: Navigate the tree, Enter: Expand/collapse, Tab: Move between editor fields, Ctrl/⌘+S: Export, Esc: Clear selection."
230+
},
231+
{
232+
"question": "Where can I get help?",
233+
"answer": "Use the built-in FAQ, contact support, submit feedback and feature requests, or check out our tutorials and documentation."
234+
},
235+
{
236+
"question": "What's coming next for SmartAdd?",
237+
"answer": "Upcoming features include tree view enhancements (filters/search), direct import to Chemotion (no manual download), import from other ELNs, and extensions beyond chemistry to other research domains."
238+
}
239+
]
240+
}

‎src/app/components/workspace/Header.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,16 @@ const Header = () => {
3030
<Popover
3131
content={
3232
<div className="flex flex-col gap-2 w-48">
33-
<button
34-
className="rounded bg-gray-300 px-3 py-2 text-sm text-gray-800 duration-150 hover:bg-gray-400 text-left"
33+
<Link
34+
href="/docs"
35+
target="_blank"
36+
className="rounded !bg-gray-600 px-3 py-2 text-sm !text-white duration-150 hover:!bg-gray-800 text-left block"
3537
onClick={() => {
36-
window.open(
37-
'https://docs.google.com/document/d/1g48--Au2t0pluTcMe-tDJuY7bH4ceruJ5fPOCKQP-bw/edit?usp=sharing',
38-
'_blank',
39-
)
4038
hide()
4139
}}
4240
>
4341
Documentation
44-
</button>
42+
</Link>
4543
<button
4644
className="rounded bg-kit-primary-full px-3 py-2 text-sm text-white duration-150 hover:bg-kit-primary-full/90 text-left"
4745
onClick={() => {

0 commit comments

Comments
 (0)