Skip to content

Commit 7a2c9b0

Browse files
JunjiequanJunjiequan
authored
docs: dynamic dataset detail component configuration guide (#1718)
* docs(config): documentation for dynamic-dataset-detail-component configuration * minor * minor change * update doc * update doc * update doc
1 parent 17f54e5 commit 7a2c9b0

10 files changed

+307
-2
lines changed

‎docs/frontend-config-guide/dynamic-dataset-detail-component.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Dynamic Dataset Detail Component - Frontend Configuration Guide
2+
3+
## Overview
4+
5+
This guide provides details on configuring the **Dynamic Dataset Detail Component** on the frontend. This component can be customized to display dataset information in various templates and layouts based on your needs.
6+
The configuration needs to be provided or mounted in `/src/config/frontend.config.json`
7+
8+
## Configuration guide
9+
10+
The `datasetDetailComponent` field allows you to customize the display of dataset details using 4 template types. Each template type is rendered based on the order property, which determines the display priority. The available template types are listed in the Component Configuration Table.
11+
12+
You can define labels directly using the `label/source` property, or use them as keys for localization. If no localization configuration is provided, the template will fall back to using the `label/source` as the default value.
13+
14+
The `enableCustomizedComponent` flag enables or disables the dynamic component. If set to false, the default dataset detail component will be used. In the customization field, you can provide configuration for the components, including their types, labels, and other settings.
15+
16+
Below you can find the example configuration, but for more advanced customizations, refer to the Component Configuration Table for detailed options on each template type and field configuration.
17+
18+
```json
19+
"datasetDetailComponent": {
20+
"enableCustomizedComponent": true,
21+
"customization": [
22+
{
23+
"type": "regular",
24+
"label": "General Information",
25+
"order": 0,
26+
"fields": [
27+
{
28+
"element": "text",
29+
"source": "datasetName",
30+
"order": 0
31+
},
32+
{
33+
"element": "copy",
34+
"source": "pid",
35+
"order": 1
36+
},
37+
{
38+
"element": "text",
39+
"source": "description",
40+
"order": 2
41+
}
42+
]
43+
},
44+
{
45+
"type": "attachments",
46+
"label": "Scientific Metadata",
47+
"order": 1,
48+
"options": { "limit": 10, "size": "large" }
49+
},
50+
{
51+
"type": "scientificMetadata",
52+
"label": "Scientific Metadata",
53+
"viewMode": "table",
54+
"order": 2
55+
},
56+
{
57+
"type": "datasetJsonView",
58+
"label": "Metadata JSON view",
59+
"order": 3
60+
}
61+
]
62+
}
63+
```
64+
65+
## Component Configuration Table
66+
67+
| **Template Type** | **Configurable Fields** | **Field Description** | **Configurable Options** | **Example** |
68+
| ---------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
69+
| **regular** | **label** | Title for the section that can be customized. | - `label`: Custom label for the section (e.g., "General Information") | `"label": "General Information"` |
70+
| | **order** | Controls the display order of the Regular section in the UI | - `order`: Integer, determines position in the UI | `"order": 0` |
71+
| | **fields** | List of fields to display within the section. It should contain an array of objects, each with `element`, `source`, and `order` fields. | | `{"fields": [{"element": "text", "source": "datasetName", "order": 0}]}` |
72+
| | - **element** | Defines the type of data to display in the row (e.g., text, copy, tag, linky, date). | - `element`: Field type (e.g., `text`, `copy`, `tag`, `linky`, `date`) | `"element": "text" ` |
73+
| | - **source** | Specifies the dataset property to display, and it must match a field in the `OutputDatasetDto` . | - `source`: Dataset property name | `"source": "datasetName"` |
74+
| | - **order** | Controls the display order of the field in the fields. | - `order`: Integer, defines the sequence of fields in the UI. Lower values appear first. | `"order": 1` |
75+
| **attachments** | **label** | Custom label for the section that can be configured. | - `label`: Custom title for the attachments section (e.g., "Gallery") | `"label": "Scientific Metadata"` |
76+
| | **order** | Controls the display order of the attachments section in the UI. | - `order`: Integer, determines sequence within the template. | `"order": 1` |
77+
| | **options** | Allows configuration for the display of attachments. | | `{"options": {"limit": 10, "size": "large"}}` |
78+
| | **options.limit** | Limits the number of items to display in the attachment section. | - `limit`: Number of items to display (e.g., 10). | `"limit": 10` |
79+
| | **options.size** | Configures the display size of attachments (small, medium, or large). | - `size`: Display size (small, medium, large). | `"size": "small"` |
80+
| **scientificMetadata** | **label** | Customizable label for the scientific metadata section. | - `label`: Custom section title (e.g., "Scientific Metadata") | `"label": "Scientific Metadata"` |
81+
| | **viewMode** | Defines how the scientific metadata is rendered (as a table, JSON, or tree view). | - `viewMode`: `table`, `json`, or `tree` | `"viewMode": "table"` |
82+
| | **order** | Controls the display order of the scientific metadata section. | - `order`: Integer, determines position in the UI | `"order": 2` |
83+
| **datasetJsonView** | **label** | Label for the JSON view section. | - `label`: Custom section title (e.g., "Metadata JSON view") | `"label": "Metadata JSON view"` |
84+
| | **order** | Controls the display order of the dataset JSON view. | - `order`: Integer, determines position in the UI | `"order": 3` |
85+
86+
---
87+
88+
## Template Types Example Preview
89+
90+
- **regular:** Displays dataset properties in configurable rows.
91+
Can be customized with different elements.
92+
93+
- text: Displays a simple string
94+
95+
![alt text](./screenshots/regular-text.png)
96+
97+
- linky: Automatically transforms URLs or emails into clickable links.
98+
99+
![alt text](./screenshots/regular-linky.png)
100+
101+
- copy: Displays a copy-to-clipboard button
102+
103+
![alt text](./screenshots/regular-copy.png)
104+
105+
- date: Displays a formatted date based on the dateFormat value in the frontend config file
106+
107+
![alt text](./screenshots/regular-date.png)
108+
109+
- tag: Displays a list of items as tags
110+
111+
![alt text](./screenshots/regular-tag.png)
112+
113+
- **scientificMetadata:** Displays metadata in different views:
114+
115+
- table
116+
117+
![alt text](./screenshots/scientificMetadata-table.png)
118+
119+
- json
120+
121+
![alt text](./screenshots/scientificMetadata-json.png)
122+
123+
- tree
124+
125+
![alt text](./screenshots/scientificMetadata-tree.png)
126+
127+
- **datasetJsonView:** Displays the dataset as a JSON document as addition.
128+
- **attachments:** Displays the attachments associated with the dataset. You can configure options like display size and limit the number of items.

‎docs/frontend-config-guide/screenshots/regular-copy.png

19.4 KB
Loading

‎docs/frontend-config-guide/screenshots/regular-date.png

10.7 KB
Loading

‎docs/frontend-config-guide/screenshots/regular-linky.png

13.5 KB
Loading

‎docs/frontend-config-guide/screenshots/regular-tag.png

17.9 KB
Loading

‎docs/frontend-config-guide/screenshots/regular-text.png

11.8 KB
Loading

‎docs/frontend-config-guide/screenshots/scientificMetadata-json.png

52.6 KB
Loading

‎docs/frontend-config-guide/screenshots/scientificMetadata-table.png

36.1 KB
Loading

‎docs/frontend-config-guide/screenshots/scientificMetadata-tree.png

39.2 KB
Loading

‎src/config/frontend.config.json

Lines changed: 179 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,8 @@
215215
"keywords": "Keywords",
216216
"creationTime": "Creation Time",
217217
"scientificMetadata": "Scientific Metadata",
218-
"metadataJsonView": "Metadata JsonView"
218+
"metadataJsonView": "Metadata JsonView",
219+
"datasetName": "Dataset Name"
219220
},
220221
"proposalDefault": {
221222
"General Information": "Proposal Information",
@@ -232,5 +233,181 @@
232233
"Metadata": "Additional Information"
233234
}
234235
},
235-
"dateFormat": "yyyy-MM-dd HH:mm"
236+
"dateFormat": "yyyy-MM-dd HH:mm",
237+
238+
"datasetDetailComponent": {
239+
"enableCustomizedComponent": true,
240+
"customization": [
241+
{
242+
"type": "regular",
243+
"label": "General Information",
244+
"order": 0,
245+
"fields": [
246+
{
247+
"element": "text",
248+
"source": "scientificMetadata",
249+
"order": 0
250+
},
251+
{
252+
"element": "copy",
253+
"source": "scientificMetadata",
254+
"order": 1
255+
},
256+
{
257+
"element": "text",
258+
"source": "startTime",
259+
"order": 2
260+
},
261+
{
262+
"element": "text",
263+
"source": "principalInvestigator",
264+
"order": 3
265+
},
266+
{
267+
"element": "text",
268+
"source": "proposalId",
269+
"order": 4
270+
},
271+
{
272+
"element": "tag",
273+
"source": "keywords",
274+
"order": 5
275+
}
276+
]
277+
},
278+
{
279+
"type": "regular",
280+
"label": "Dataset Information",
281+
"order": 1,
282+
"fields": [
283+
{
284+
"element": "text",
285+
"source": "datasetName",
286+
"order": 0
287+
},
288+
{
289+
"element": "copy",
290+
"source": "pid",
291+
"order": 1
292+
},
293+
{
294+
"element": "text",
295+
"source": "type",
296+
"order": 2
297+
},
298+
{
299+
"element": "date",
300+
"source": "creationTime",
301+
"order": 3
302+
}
303+
]
304+
},
305+
{
306+
"type": "regular",
307+
"label": "Contact Information",
308+
"order": 2,
309+
"fields": [
310+
{
311+
"element": "text",
312+
"source": "principalInvestigator",
313+
"order": 0
314+
},
315+
{
316+
"element": "linky",
317+
"source": "contactEmail",
318+
"order": 1
319+
}
320+
]
321+
},
322+
{
323+
"type": "regular",
324+
"label": "Files Information",
325+
"order": 3,
326+
"fields": [
327+
{
328+
"element": "text",
329+
"source": "scientificMetadata.runnumber",
330+
"order": 0
331+
},
332+
{
333+
"element": "text",
334+
"source": "sourceFolderHost",
335+
"order": 1
336+
},
337+
{
338+
"element": "text",
339+
"source": "numberOfFiles",
340+
"order": 2
341+
},
342+
{
343+
"element": "text",
344+
"source": "size",
345+
"order": 3
346+
},
347+
{
348+
"element": "text",
349+
"source": "numberOfFilesArchived",
350+
"order": 4
351+
},
352+
{
353+
"element": "text",
354+
"source": "packedSize",
355+
"order": 5
356+
}
357+
]
358+
},
359+
{
360+
"type": "regular",
361+
"label": "Related Documents",
362+
"order": 4,
363+
"fields": [
364+
{
365+
"element": "tag",
366+
"source": "proposalIds",
367+
"order": 0
368+
},
369+
{
370+
"element": "tag",
371+
"source": "instrumentIds",
372+
"order": 1
373+
},
374+
{
375+
"element": "tag",
376+
"source": "sampleIds",
377+
"order": 2
378+
},
379+
{
380+
"element": "tag",
381+
"source": "inputDatasets",
382+
"order": 3
383+
},
384+
{
385+
"element": "text",
386+
"source": "creationLocation",
387+
"order": 4
388+
}
389+
]
390+
},
391+
{
392+
"type": "attachments",
393+
"label": "Gallery",
394+
"order": 5,
395+
"options": {
396+
"limit": 10,
397+
"size": "small"
398+
}
399+
},
400+
{
401+
"type": "scientificMetadata",
402+
"label": "Scientific Metadata Table",
403+
"viewMode": "table",
404+
"order": 6
405+
},
406+
{
407+
"type": "datasetJsonView",
408+
"label": "Dataset JsonView",
409+
"order": 7
410+
}
411+
]
412+
}
236413
}

0 commit comments

Comments
 (0)