diff --git a/data/1DTableDataWithRenderingComments.xml b/data/1DTableDataWithRenderingComments.xml
new file mode 100644
index 0000000000000000000000000000000000000000..09c2d626f2dd72e2608c2b61d982c974caba90c1
--- /dev/null
+++ b/data/1DTableDataWithRenderingComments.xml
@@ -0,0 +1,164 @@
+ <dcc:result refType="vibration_chargeTransferFunction">
+ <!-- PROMT: Display this structure in its own tab using a measurment result render -->
+ <dcc:name>
+ <!-- PROMT: Use this name in selected language for the Measurment Result Tab -->
+ <dcc:content lang="de">Ladungsübertragungskoeffizienten</dcc:content>
+ <dcc:content lang="en">Charge transfer coefficients</dcc:content>
+ </dcc:name>
+ <dcc:data>
+ <dcc:list refType="basic_1IndexTable">
+ <!-- PROMT: A dcc:list with refType="basic_\dIndexTable" marks an long N dimensional table basic_1IndexTable has one Index vector witch we use for plotting as X-Axis, if there are multiple index quantitys make them switchable -->
+ <dcc:name>
+ <dcc:content lang="en">Charge transfer coefficients</dcc:content>
+ <dcc:content lang="de">Ladungsübertragungskoeffizienten</dcc:content>
+ <!-- PROMT: This is the Name of The Measurmeantdata Table/Plot Element there can be multiple of this tables in one result -->
+ </dcc:name>
+ <!-- PROMT: The Table consist of multiple quantis witch all have same length or length one if data is same for all elements-->
+ <!-- PROMT: All Quantities in the structure also the ones in [dcc:measurementMetaData][dcc:metaData] Belong to the same table so just pars this to a flat list of tables seperating betwean index and non index quantites -->
+ <!-- PROMT: Qunatities contain rich amount of information we will convert the syntax of <si:unitXMLList>\hertz</si:unitXMLList> and other units to html later by an dsiUnit class with conversion options later on-->
+ <!-- PROMT: UI DESIGN: i want an interactive plotly plot at top and than an nice layouted table-->
+ <!-- PROMT: All qunatites share the same selectable X-Axis Quantity all Qunatitys with refTypes matching basic_tableIndex\d are selectable as X-Axis, the active X-Axis is not plotted but unselected are.-->
+ <!-- PROMT: All Plots share the same interactive X-Axis -->
+ <dcc:quantity refType="vibration_frequency basic_nominalValue basic_tableIndex0">
+ <dcc:name>
+ <dcc:content lang="en">Excitation frequency</dcc:content>
+ <dcc:content lang="de">Anregungsfrequenz</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:labelXMLList>f</si:labelXMLList>
+ <si:valueXMLList>10.0 12.5 16.0 20.0 25.0 31.5 40.0 50.0 63.0 80.0 1.0e+02
+ 1.25e+02 1.6e+02 2.0e+02 2.5e+02 3.15e+02 4.0e+02 5.0e+02 6.3e+02 8.0e+02
+ 1.0e+03 1.25e+03 1.6e+03 2.0e+03 2.5e+03 3.15e+03 4.0e+03 5.0e+03 6.3e+03
+ 8.0e+03 1.0e+04</si:valueXMLList>
+ <si:unitXMLList>\hertz</si:unitXMLList>
+ </si:realListXMLList>
+ </dcc:quantity>
+ <!-- ~~ -->
+ <dcc:quantity refType="vibration_magnitudeTransferCoefCharge vibration_magnitude">
+ <dcc:name>
+ <dcc:content lang="en">Charge transfer coefficient magnitude</dcc:content>
+ <dcc:content lang="de">Ladungsübertragungskoeffizent Betrag</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:labelXMLList>S_{\text{qa}}</si:labelXMLList>
+ <si:valueXMLList>0.13017 0.13017 0.13016 0.13016 0.13017 0.13017 0.13017 0.13016
+ 0.13013 0.13013 0.13012 0.13012 0.13012 0.13012 0.13014 0.13014 0.13015 0.13018
+ 0.13017 0.13027 0.13033 0.13044 0.13058 0.13085 0.13124 0.13188 0.13300 0.13467
+ 0.13753 0.14285 0.14968</si:valueXMLList>
+ <si:unitXMLList>\pico\coulomb\per\metre\second\tothe{-2}</si:unitXMLList>
+ <si:measurementUncertaintyUnivariateXMLList>
+ <si:expandedMUXMLList>
+ <si:valueExpandedMUXMLList>0.00026 0.00026 0.00026 0.00026 0.00026 0.00026
+ 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026
+ 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026 0.00026 0.00039 0.00039
+ 0.00039 0.00040 0.00040 0.00040 0.00055 0.00057 0.00060</si:valueExpandedMUXMLList>
+ <si:coverageFactorXMLList>2.0</si:coverageFactorXMLList>
+ <si:coverageProbabilityXMLList>0.95</si:coverageProbabilityXMLList>
+ <si:distributionXMLList>normal</si:distributionXMLList>
+ </si:expandedMUXMLList>
+ </si:measurementUncertaintyUnivariateXMLList>
+ </si:realListXMLList>
+ <dcc:relativeUncertainty>
+ <dcc:relativeUncertaintyXmlList>
+ <si:valueXMLList>0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2 0.2
+ 0.2 0.2 0.2 0.2 0.2 0.2 0.3 0.3 0.3 0.3 0.3 0.3 0.4 0.4 0.4</si:valueXMLList>
+ <si:unitXMLList>\percent</si:unitXMLList>
+ </dcc:relativeUncertaintyXmlList>
+ </dcc:relativeUncertainty>
+ <dcc:measurementMetaData>
+ <dcc:metaData refType="basic_conformity">
+ <!-- PROMT: This is an Confomety statment its true if conditions is matched and false if conditions are not mached we will use it later on for collor codeing the results and draw some lines -->
+ <dcc:convention>customer</dcc:convention>
+ <dcc:conformityXMLList>pass pass pass pass pass pass pass pass pass pass pass
+ pass pass pass pass pass pass pass pass pass pass pass fail fail fail fail
+ fail fail fail fail fail</dcc:conformityXMLList>
+ <dcc:data>
+ <dcc:quantity refType="basic_toleranceLimitLower">
+ <dcc:name>
+ <dcc:content lang="en">Untere Konformitäts-Grenze des Betrags des Ladungsübertragungskoeffizenten</dcc:content>
+ <dcc:content lang="de">Lower conformity limit for Charge transfer coefficient magnitude</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:valueXMLList>0.1236615</si:valueXMLList>
+ <si:unitXMLList>\pico\coulomb\per\metre\second\tothe{-2}</si:unitXMLList>
+ </si:realListXMLList>
+ </dcc:quantity>
+ <dcc:quantity refType="basic_toleranceLimitUpper">
+ <dcc:name>
+ <dcc:content lang="en">Obere Konformitäts-Grenze des Betrags des Ladungsübertragungskoeffizenten</dcc:content>
+ <dcc:content lang="de">Upper conformity limit for Charge transfer coefficient magnitude</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:valueXMLList>0.1366785</si:valueXMLList>
+ <si:unitXMLList>\pico\coulomb\per\metre\second\tothe{-2}</si:unitXMLList>
+ </si:realListXMLList>
+ </dcc:quantity>
+ </dcc:data>
+ </dcc:metaData>
+ </dcc:measurementMetaData>
+ </dcc:quantity>
+ <!-- ~~ -->
+ <dcc:quantity refType="vibration_phase">
+ <dcc:name>
+ <dcc:content lang="de">Ladungsübertragungskoeffizent Phasenverzögerung</dcc:content>
+ <dcc:content lang="en">Charge transfer coefficient phase delay</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:valueXMLList>-0.02 -0.03 -0.02 -0.02 -0.01 -0.01 -0.02 -0.01 0.00 0.01 -0.01
+ -0.01 -0.00 -0.00 0.00 0.00 0.00 0.01 0.03 0.02 0.01 -0.01 0.00 0.00 0.01 0.01
+ -0.00 -0.01 0.01 -1.97 -0.09</si:valueXMLList>
+ <si:unitXMLList>\degree</si:unitXMLList>
+ <si:measurementUncertaintyUnivariateXMLList>
+ <si:expandedMUXMLList>
+ <si:valueExpandedMUXMLList>0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20
+ 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.20 0.50 0.50 0.50 0.50
+ 0.50 0.50 0.50 0.50 0.50 0.50</si:valueExpandedMUXMLList>
+ <si:coverageFactorXMLList>2.0</si:coverageFactorXMLList>
+ <si:coverageProbabilityXMLList>0.95</si:coverageProbabilityXMLList>
+ <si:distributionXMLList>normal</si:distributionXMLList>
+ </si:expandedMUXMLList>
+ </si:measurementUncertaintyUnivariateXMLList>
+ </si:realListXMLList>
+ </dcc:quantity>
+ <!-- ~~~ -->
+ <dcc:measurementMetaData>
+ <dcc:metaData>
+ <dcc:name>
+ <dcc:content lang="en">Additional information</dcc:content>
+ <dcc:content lang="de">Zusätzliche Informationen</dcc:content>
+ </dcc:name>
+ <dcc:data>
+ <dcc:quantity
+ refType="vibration_accelerationAmplitude basic_nominalValue">
+ <dcc:name>
+ <dcc:content lang="en">Acceleration amplitude</dcc:content>
+ <dcc:content lang="de">Beschleunigungsamplitude</dcc:content>
+ </dcc:name>
+ <si:realListXMLList>
+ <si:labelXMLList>\hat{a}</si:labelXMLList>
+ <si:valueXMLList>5.0 5.0 5.0 10.0 10.0 10.0 10.0 50.0 50.0 50.0 50.0 50.0
+ 50.0 50.0 50.0 50.0 50.0 50.0 50.0 50.0 1.0e+02 1.0e+02 1.0e+02 1.0e+02
+ 1.0e+02 1.0e+02 1.0e+02 1.0e+02 1.0e+02 1.0e+02 1.0e+02</si:valueXMLList>
+ <si:unitXMLList>\metre\second\tothe{-2}</si:unitXMLList>
+ </si:realListXMLList>
+ </dcc:quantity>
+ </dcc:data>
+ </dcc:metaData>
+ <dcc:metaData refType="basic_tableRowComment">
+ <!-- PROMT: this is ac comment only valid at the index position where validXMLList is true-->
+ <dcc:name>
+ <dcc:content lang="en">Comment resonances</dcc:content>
+ <dcc:content lang="de">Kommentar Gehäuseresonanzen</dcc:content>
+ </dcc:name>
+ <dcc:description>
+ <dcc:content lang="en">Between 7.5 kHz and 8.5 kHz, the transducer exhibited a pronounced housing transverse resonance, which led to a systematic deviation in the calibration results. Even averaging over several measurement positions could not completely suppress this influence.</dcc:content>
+ <dcc:content lang="de">Der Aufnehmer zeigte zwischen 7,5 kHz und 8,5 kHz eine ausgeprägte Gehäusequerresonanz, die zu einer systematischen Abweichung der Kalibrierergebnisse führte. Auch eine Mittelung über mehrere Messpositionen konnte diesen Einfluss nicht vollständig unterdrücken.</dcc:content>
+ </dcc:description>
+ <dcc:validXMLList>false false false false false false false false false false
+ false false false false false false false false false false false false false
+ false false false false false false true false</dcc:validXMLList>
+ </dcc:metaData>
+ </dcc:measurementMetaData>
+ </dcc:list>
+ </dcc:data>
+ </dcc:result>
diff --git a/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml b/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml
index 56049bb98a60aea6155de8feb5dce7ffa143e208..922a0325049469b4513d4e6d0cd3890dfe23b711 100644
--- a/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml
+++ b/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml
@@ -603,7 +603,7 @@ Entsprechend ISO 2041 ist die Phasenverschiebung definiert zu Δφqa = φq - φa
<dcc:content lang="en">Charge transfer coefficients</dcc:content>
</dcc:name>
<dcc:data>
- <dcc:list refType="basic_0IndexTable">
+ <dcc:list refType="basic_1IndexTable">
<dcc:name>
<dcc:content lang="en">Charge transfer coefficients</dcc:content>
<dcc:content lang="de">Ladungsübertragungskoeffizienten</dcc:content>
@@ -753,4 +753,4 @@ Entsprechend ISO 2041 ist die Phasenverschiebung definiert zu Δφqa = φq - φa
</dcc:results>
</dcc:measurementResult>
</dcc:measurementResults>
-</dcc:digitalCalibrationCertificate>
\ No newline at end of file
+</dcc:digitalCalibrationCertificate>
diff --git a/dcc-viewer/.idea/workspace.xml b/dcc-viewer/.idea/workspace.xml
deleted file mode 100644
index 369cbba41df6e3dd14332c7fac18ceeafc0ee6ae..0000000000000000000000000000000000000000
--- a/dcc-viewer/.idea/workspace.xml
+++ /dev/null
@@ -1,105 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
- <component name="AutoImportSettings">
- <option name="autoReloadType" value="SELECTIVE" />
- </component>
- <component name="ChangeListManager">
- <list default="true" id="c3d759c9-e9f8-41d4-b9b5-ef12db68e70c" name="Changes" comment="">
- <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/public/index.html" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/public/styles.css" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/components/BaseViewer.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/components/JSONTreeViewer.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/components/accordionComponent.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/components/tabComponent.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/globalData.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/globalOptions.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/idRegistry.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/main.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/ui/adminRenderer.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/ui/jsonTreeViewer.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/ui/languageSelector.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/ui/measurementRenderer.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/ui/themeSwitcher.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/utils.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/viewerRegistry.js" beforeDir="false" />
- <change beforePath="$PROJECT_DIR$/src/xmlToJson.js" beforeDir="false" />
- </list>
- <option name="SHOW_DIALOG" value="false" />
- <option name="HIGHLIGHT_CONFLICTS" value="true" />
- <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
- <option name="LAST_RESOLUTION" value="IGNORE" />
- </component>
- <component name="FileTemplateManagerImpl">
- <option name="RECENT_TEMPLATES">
- <list>
- <option value="JavaScript File" />
- </list>
- </option>
- </component>
- <component name="Git.Settings">
- <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
- </component>
- <component name="ProjectColorInfo">{
- "associatedIndex": 6
-}</component>
- <component name="ProjectId" id="2tLWdqlIz5X4SCSwK5EjWvfiZtG" />
- <component name="ProjectViewState">
- <option name="hideEmptyMiddlePackages" value="true" />
- <option name="showLibraryContents" value="true" />
- </component>
- <component name="PropertiesComponent"><![CDATA[{
- "keyToString": {
- "JavaScript Debug.Debug Vite.executor": "Run",
- "JavaScript Debug.dccViewer.executor": "Debug",
- "JavaScript Debug.index.html.executor": "Run",
- "Node.js.vite.config.js.executor": "Run",
- "RunOnceActivity.ShowReadmeOnStart": "true",
- "RunOnceActivity.git.unshallow": "true",
- "git-widget-placeholder": "main",
- "last_opened_file_path": "/home/seeger01/Downloads/de-6.4.jar",
- "node.js.detected.package.eslint": "true",
- "node.js.detected.package.tslint": "true",
- "node.js.selected.package.eslint": "(autodetect)",
- "node.js.selected.package.tslint": "(autodetect)",
- "nodejs_package_manager_path": "npm",
- "settings.editor.selected.configurable": "http.proxy",
- "ts.external.directory.path": "/home/seeger01/Downloads/WebStorm-243.24978.60/plugins/javascript-plugin/jsLanguageServicesImpl/external",
- "vue.rearranger.settings.migration": "true"
- }
-}]]></component>
- <component name="RunManager">
- <configuration name="dccViewer" type="JavascriptDebugType" uri="http://localhost:5173/">
- <method v="2" />
- </configuration>
- </component>
- <component name="SharedIndexes">
- <attachedChunks>
- <set>
- <option value="bundled-js-predefined-d6986cc7102b-76f8388c3a79-JavaScript-WS-243.24978.60" />
- </set>
- </attachedChunks>
- </component>
- <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
- <component name="TaskManager">
- <task active="true" id="Default" summary="Default task">
- <changelist id="c3d759c9-e9f8-41d4-b9b5-ef12db68e70c" name="Changes" comment="" />
- <created>1740131925655</created>
- <option name="number" value="Default" />
- <option name="presentableId" value="Default" />
- <updated>1740131925655</updated>
- <workItem from="1740131927264" duration="102000" />
- <workItem from="1740132052064" duration="10000" />
- <workItem from="1740132146315" duration="24000" />
- <workItem from="1740132175271" duration="89000" />
- <workItem from="1740158794192" duration="1155000" />
- <workItem from="1740380748268" duration="5118000" />
- </task>
- <servers />
- </component>
- <component name="TypeScriptGeneratedFilesManager">
- <option name="version" value="3" />
- </component>
-</project>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 398aebb9a175d3145fc27e9cf3949e787a1b0458..d7d8d7b5cbf9ec37091a379ee42bcc56e9e04443 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "dcc-viewer",
"version": "1.0.0",
"dependencies": {
+ "events": "^3.3.0",
"jsoneditor": "^9.5.6",
"plotly.js-dist": "^2.18.2",
"xml2js": "^0.4.23"
@@ -456,6 +457,15 @@
"@esbuild/win32-x64": "0.18.20"
}
},
+ "node_modules/events": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+ "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.8.x"
+ }
+ },
"node_modules/fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
diff --git a/package.json b/package.json
index d6ed699bca64e60a1d97523126915a19fb3e35bc..b57ad8b1d13dd13ea6c9896216fcc54fa3e557ff 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
"dependencies": {
"xml2js": "^0.4.23",
"jsoneditor": "^9.5.6",
- "plotly.js-dist": "^2.18.2"
+ "plotly.js-dist": "^2.18.2",
+ "events": "^3.3.0"
},
"devDependencies": {
"vite": "^4.0.0"
diff --git a/project_structure.json b/project_structure.json
index 57a1f4edd0acd86b956f91b04b30497fd8abc897..746ffdf8c4de4c8cd9fc802f9084b114555813c2 100644
--- a/project_structure.json
+++ b/project_structure.json
@@ -1,15 +1,15 @@
{
"package.json": "{\n \"name\": \"dcc-viewer\",\n \"version\": \"1.0.0\",\n \"description\": \"Digital Calibration Certificate Viewer\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"xml2js\": \"^0.4.23\",\n \"jsoneditor\": \"^9.5.6\",\n \"plotly.js-dist\": \"^2.18.2\",\n \"events\": \"^3.3.0\"\n },\n \"devDependencies\": {\n \"vite\": \"^4.0.0\"\n }\n}\n",
- "vite.config.js": "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: {\n // Ensure that Node's events module is polyfilled\n events: 'events'\n }\n },\n optimizeDeps: {\n esbuildOptions: {\n // Define global as globalThis to help with some Node packages\n define: { global: 'globalThis' }\n }\n }\n});\n",
+ "vite.config.js": "import { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: {\n events: 'events'\n }\n },\n optimizeDeps: {\n esbuildOptions: {\n define: { global: 'globalThis' }\n }\n }\n});\n",
"index.html": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>DCC Viewer</title>\n <link rel=\"stylesheet\" href=\"/src/styles.css\">\n</head>\n<body>\n <div id=\"app\"></div>\n <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>\n",
"src": {
- "main.js": "import { initApp } from './app.js';\n\n// Wait for the DOM to be loaded before initializing\ndocument.addEventListener('DOMContentLoaded', () => {\n initApp();\n});\n",
- "app.js": "import { parseString } from 'xml2js';\nimport JSONEditor from 'jsoneditor';\n\n// Import renderer functions\nimport { renderAdminData } from './renderers/AdminRenderer.js';\nimport { renderMeasurementResults } from './renderers/MeasurementRenderer.js';\n\n// Global configuration\nconst selectableLanguages = ['en', 'de', 'fr', 'es'];\nlet selectedLanguage = 'en';\nlet dccData = null;\n\nexport function initApp() {\n const appContainer = document.getElementById('app');\n\n // Create language selection dropdown\n const langSelect = document.createElement('select');\n selectableLanguages.forEach(lang => {\n const option = document.createElement('option');\n option.value = lang;\n option.textContent = lang;\n if (lang === selectedLanguage) option.selected = true;\n langSelect.appendChild(option);\n });\n langSelect.addEventListener('change', (e) => {\n selectedLanguage = e.target.value;\n renderAll();\n });\n appContainer.appendChild(langSelect);\n\n // Create containers for administrative data and measurement results\n const adminContainer = document.createElement('div');\n adminContainer.id = 'adminData';\n appContainer.appendChild(adminContainer);\n\n const measContainer = document.createElement('div');\n measContainer.id = 'measurementResults';\n appContainer.appendChild(measContainer);\n\n // Load the embedded XML file (for testing) from the data folder\n fetch('/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml')\n .then(response => response.text())\n .then(xmlText => {\n // Convert XML to JSON using xml2js\n parseString(xmlText, { explicitArray: false }, (err, result) => {\n if (err) {\n console.error('Error parsing XML:', err);\n return;\n }\n dccData = result;\n renderAll();\n });\n })\n .catch(err => console.error('Error loading XML file:', err));\n}\n\nfunction renderAll() {\n // Clear containers\n const adminContainer = document.getElementById('adminData');\n adminContainer.innerHTML = '';\n const measContainer = document.getElementById('measurementResults');\n measContainer.innerHTML = '';\n\n // Render the content if XML has been loaded and converted\n if (dccData && dccData['dcc:digitalCalibrationCertificate']) {\n const cert = dccData['dcc:digitalCalibrationCertificate'];\n if (cert['dcc:administrativeData']) {\n renderAdminData(cert['dcc:administrativeData'], selectedLanguage);\n }\n if (cert['dcc:measurementResults']) {\n renderMeasurementResults(cert['dcc:measurementResults'], selectedLanguage);\n }\n }\n}\n",
- "styles.css": "body {\n font-family: Arial, sans-serif;\n margin: 20px;\n}\n\nh2, h3 {\n color: #333;\n}\n\n#adminData, #measurementResults {\n margin-top: 20px;\n border: 1px solid #ccc;\n padding: 10px;\n}\n\n.plot-table, .plot-and-table {\n margin: 10px 0;\n padding: 10px;\n border: 1px dashed #999;\n}\n",
+ "main.js": "import { initApp } from './app.js';\n\n// Initialize after DOM loads\ndocument.addEventListener('DOMContentLoaded', () => {\n initApp();\n});\n",
+ "app.js": "import { parseString } from 'xml2js';\n\n// Import our interactive measurement renderer\nimport { renderMeasurementResults } from './renderers/MeasurementRenderer.js';\nimport { renderAdminData } from './renderers/AdminRenderer.js';\n\n// Global configuration\nconst selectableLanguages = ['en', 'de', 'fr', 'es'];\nlet selectedLanguage = 'en';\nlet dccData = null;\n\nexport function initApp() {\n const appContainer = document.getElementById('app');\n\n // Create language selection dropdown\n const langSelect = document.createElement('select');\n selectableLanguages.forEach(lang => {\n const option = document.createElement('option');\n option.value = lang;\n option.textContent = lang;\n if (lang === selectedLanguage) option.selected = true;\n langSelect.appendChild(option);\n });\n langSelect.addEventListener('change', (e) => {\n selectedLanguage = e.target.value;\n renderAll();\n });\n appContainer.appendChild(langSelect);\n\n // Create containers for admin data and measurement results\n const adminContainer = document.createElement('div');\n adminContainer.id = 'adminData';\n appContainer.appendChild(adminContainer);\n\n const measContainer = document.createElement('div');\n measContainer.id = 'measurementResults';\n appContainer.appendChild(measContainer);\n\n // Load the XML file from the data folder\n fetch('/data/sin_acceleration_example_dcc_WithExampleConformatyStatment.xml')\n .then(response => response.text())\n .then(xmlText => {\n parseString(xmlText, { explicitArray: false }, (err, result) => {\n if (err) {\n console.error('Error parsing XML:', err);\n return;\n }\n dccData = result;\n renderAll();\n });\n })\n .catch(err => console.error('Error loading XML file:', err));\n}\n\nfunction renderAll() {\n // Clear containers\n document.getElementById('adminData').innerHTML = '';\n document.getElementById('measurementResults').innerHTML = '';\n\n if (dccData && dccData['dcc:digitalCalibrationCertificate']) {\n const cert = dccData['dcc:digitalCalibrationCertificate'];\n if (cert['dcc:administrativeData']) {\n renderAdminData(cert['dcc:administrativeData'], selectedLanguage);\n }\n if (cert['dcc:measurementResults']) {\n renderMeasurementResults(cert['dcc:measurementResults'], selectedLanguage);\n }\n }\n}\n",
+ "styles.css": "body {\n font-family: Arial, sans-serif;\n margin: 20px;\n}\n\nh2, h3 {\n color: #333;\n}\n\n#adminData, #measurementResults {\n margin-top: 20px;\n border: 1px solid #ccc;\n padding: 10px;\n}\n\ntable {\n width: 100%;\n border-collapse: collapse;\n}\n\ntable, th, td {\n border: 1px solid #ccc;\n}\n\nth, td {\n padding: 4px;\n text-align: center;\n}\n\n.plot-and-table, .plot-table {\n margin: 10px 0;\n padding: 10px;\n border: 1px dashed #999;\n}\n",
"renderers": {
- "SelectRenderer.js": "export function selectRenderer(json, language) {\n // If the JSON node has a refType matching basic_\\dIndexTable, render as plot and table\n if (json && json.$ && json.$.refType && /^basic_\\dIndexTable/.test(json.$.refType)) {\n return renderPlotAndTable(json, language);\n }\n // Fallback: render a simple JSON string\n const container = document.createElement('pre');\n container.textContent = JSON.stringify(json, null, 2);\n return container;\n}\n\nfunction renderPlotAndTable(json, language) {\n // Placeholder implementation for plot and table rendering\n const container = document.createElement('div');\n container.className = 'plot-and-table';\n container.textContent = 'Plot and Table renderer placeholder for language: ' + language;\n return container;\n}\n",
- "AdminRenderer.js": "import JSONEditor from 'jsoneditor';\nimport 'jsoneditor/dist/jsoneditor.css';\n\nexport function renderAdminData(adminData, language) {\n const container = document.getElementById('adminData');\n // Title for admin data\n const title = document.createElement('h2');\n title.textContent = 'Administrative Data (' + language + ')';\n container.appendChild(title);\n\n // JSONEditor options (read-only view)\n const options = {\n mode: 'view',\n mainMenuBar: false,\n navigationBar: false,\n statusBar: false\n };\n\n // Create a new JSONEditor instance to display the adminData\n const editor = new JSONEditor(container, options);\n editor.set(adminData);\n}\n",
- "MeasurementRenderer.js": "import { selectRenderer } from './SelectRenderer.js';\n\nexport function renderMeasurementResults(measurementResults, language) {\n const container = document.getElementById('measurementResults');\n const title = document.createElement('h2');\n title.textContent = 'Measurement Results (' + language + ')';\n container.appendChild(title);\n\n // measurementResult can be an object or an array\n let results = measurementResults['dcc:measurementResult'];\n if (!Array.isArray(results)) {\n results = [results];\n }\n\n results.forEach(result => {\n // Render the measurement result title\n const resultTitle = document.createElement('h3');\n if (result['dcc:name'] && result['dcc:name']['dcc:content']) {\n let nameContent = result['dcc:name']['dcc:content'];\n if (Array.isArray(nameContent)) {\n // Find the content matching the selected language or fallback\n const match = nameContent.find(item => item.$ && item.$.lang === language) || nameContent[0];\n resultTitle.textContent = match._ || match;\n } else {\n resultTitle.textContent = nameContent._ || nameContent;\n }\n } else {\n resultTitle.textContent = 'Measurement Result';\n }\n container.appendChild(resultTitle);\n\n // Render results using dcc:results -> dcc:result\n if (result['dcc:results'] && result['dcc:results']['dcc:result']) {\n let resItems = result['dcc:results']['dcc:result'];\n if (!Array.isArray(resItems)) {\n resItems = [resItems];\n }\n resItems.forEach(res => {\n // Check if the result contains a dcc:data with a dcc:list that should be rendered as plot/table\n if (res['dcc:data'] && res['dcc:data']['dcc:list']) {\n const dataContainer = document.createElement('div');\n dataContainer.className = 'plot-table';\n // Use the global selectRenderer to decide how to render this data\n const renderedContent = selectRenderer(res['dcc:data']['dcc:list'], language);\n dataContainer.appendChild(renderedContent);\n container.appendChild(dataContainer);\n } else {\n // Fallback: simple placeholder\n const defaultContainer = document.createElement('div');\n defaultContainer.className = 'default-render';\n defaultContainer.textContent = 'Default rendering for measurement result.';\n container.appendChild(defaultContainer);\n }\n });\n }\n });\n}\n"
+ "AdminRenderer.js": "import JSONEditor from 'jsoneditor';\nimport 'jsoneditor/dist/jsoneditor.css';\n\nexport function renderAdminData(adminData, language) {\n const container = document.getElementById('adminData');\n const title = document.createElement('h2');\n title.textContent = 'Administrative Data (' + language + ')';\n container.appendChild(title);\n\n const options = {\n mode: 'view',\n mainMenuBar: false,\n navigationBar: false,\n statusBar: false\n };\n const editor = new JSONEditor(container, options);\n editor.set(adminData);\n}\n",
+ "SelectRenderer.js": "export function selectRenderer(json, language) {\n // This function is not used in the interactive measurement renderer\n const container = document.createElement('div');\n container.textContent = 'Interactive Measurement Renderer in use.';\n return container;\n}\n",
+ "MeasurementRenderer.js": "import Plotly from 'plotly.js-dist';\n\nexport function renderMeasurementResults(measurementResults, language) {\n const container = document.getElementById('measurementResults');\n container.innerHTML = '';\n\n // Use the first measurementResult for this example\n let result = measurementResults['dcc:measurementResult'];\n if (!Array.isArray(result)) {\n result = [result];\n }\n result = result[0];\n\n // Use dcc:name content for the tab title\n let resultName = 'Measurement Result';\n if (result['dcc:name'] && result['dcc:name']['dcc:content']) {\n let content = result['dcc:name']['dcc:content'];\n if (Array.isArray(content)) {\n const match = content.find(item => item.$ && item.$.lang === language) || content[0];\n resultName = match._ || match;\n } else {\n resultName = content._ || content;\n }\n }\n const tabTitle = document.createElement('h2');\n tabTitle.textContent = resultName + ' (' + language + ')';\n container.appendChild(tabTitle);\n\n // Process the measurement data from dcc:data -> dcc:list\n if (!result['dcc:data'] || !result['dcc:data']['dcc:list']) return;\n const listData = result['dcc:data']['dcc:list'];\n\n // Flatten all quantities from the list\n let quantities = [];\n if (listData['dcc:quantity']) {\n quantities = Array.isArray(listData['dcc:quantity']) ? listData['dcc:quantity'] : [listData['dcc:quantity']];\n }\n // Also add quantities from measurementMetaData\n if (listData['dcc:measurementMetaData'] && listData['dcc:measurementMetaData']['dcc:metaData']) {\n let metaData = listData['dcc:measurementMetaData']['dcc:metaData'];\n if (!Array.isArray(metaData)) metaData = [metaData];\n metaData.forEach(md => {\n if (md['dcc:data'] && md['dcc:data']['dcc:quantity']) {\n let qs = md['dcc:data']['dcc:quantity'];\n if (!Array.isArray(qs)) qs = [qs];\n quantities = quantities.concat(qs);\n }\n });\n }\n\n // Separate index quantities and data quantities\n const indexQuantities = [];\n const dataQuantities = [];\n quantities.forEach(q => {\n if (q.$ && q.$.refType && q.$.refType.match(/basic_tableIndex/)) {\n indexQuantities.push(q);\n } else {\n dataQuantities.push(q);\n }\n });\n\n // Create radio buttons for X-axis selection (only from indexQuantities)\n const xAxisContainer = document.createElement('div');\n xAxisContainer.innerHTML = '<strong>Select X-Axis:</strong> ';\n indexQuantities.forEach((q, idx) => {\n let nameStr = 'Index ' + idx;\n if (q['dcc:name'] && q['dcc:name']['dcc:content']) {\n let content = q['dcc:name']['dcc:content'];\n if (Array.isArray(content)) {\n const match = content.find(item => item.$ && item.$.lang === language) || content[0];\n nameStr = match._ || match;\n } else {\n nameStr = content._ || content;\n }\n }\n const radio = document.createElement('input');\n radio.type = 'radio';\n radio.name = 'xAxisSelect';\n radio.value = idx;\n if (idx === 0) radio.checked = true;\n const label = document.createElement('label');\n label.textContent = nameStr;\n label.style.marginRight = '10px';\n xAxisContainer.appendChild(radio);\n xAxisContainer.appendChild(label);\n });\n container.appendChild(xAxisContainer);\n\n // Optional tolerance toggle (placeholder for future implementation)\n const toleranceToggle = document.createElement('input');\n toleranceToggle.type = 'checkbox';\n toleranceToggle.id = 'toleranceToggle';\n const tolLabel = document.createElement('label');\n tolLabel.htmlFor = 'toleranceToggle';\n tolLabel.textContent = ' Enable tolerance markings';\n const tolContainer = document.createElement('div');\n tolContainer.appendChild(toleranceToggle);\n tolContainer.appendChild(tolLabel);\n container.appendChild(tolContainer);\n\n // Create containers for plots and table\n const plotsContainer = document.createElement('div');\n plotsContainer.id = 'plotsContainer';\n container.appendChild(plotsContainer);\n const tableContainer = document.createElement('div');\n tableContainer.id = 'tableContainer';\n container.appendChild(tableContainer);\n\n // Function to update the visualization\n function updateVisualization() {\n // Determine selected X-axis (default index0)\n const selectedIndex = document.querySelector('input[name=\"xAxisSelect\"]:checked').value;\n const xQuantity = indexQuantities[selectedIndex];\n let xValues = [];\n if (xQuantity && xQuantity['si:realListXMLList'] && xQuantity['si:realListXMLList']['si:valueXMLList']) {\n xValues = xQuantity['si:realListXMLList']['si:valueXMLList'].trim().split(/\\s+/).map(v => parseFloat(v));\n }\n\n // Build table data\n const headers = [];\n // Header for X-axis\n let xHeader = 'X-Axis';\n if (xQuantity['dcc:name'] && xQuantity['dcc:name']['dcc:content']) {\n let content = xQuantity['dcc:name']['dcc:content'];\n if (Array.isArray(content)) {\n const match = content.find(item => item.$ && item.$.lang === language) || content[0];\n xHeader = match._ || match;\n } else {\n xHeader = content._ || content;\n }\n }\n headers.push(xHeader);\n\n const dataValues = [];\n dataQuantities.forEach(q => {\n let header = 'Data';\n if (q['dcc:name'] && q['dcc:name']['dcc:content']) {\n let content = q['dcc:name']['dcc:content'];\n if (Array.isArray(content)) {\n const match = content.find(item => item.$ && item.$.lang === language) || content[0];\n header = match._ || match;\n } else {\n header = content._ || content;\n }\n }\n headers.push(header);\n let values = [];\n if (q['si:realListXMLList'] && q['si:realListXMLList']['si:valueXMLList']) {\n values = q['si:realListXMLList']['si:valueXMLList'].trim().split(/\\s+/).map(v => parseFloat(v));\n }\n if (values.length === 1 && xValues.length > 1) {\n values = new Array(xValues.length).fill(values[0]);\n }\n dataValues.push(values);\n });\n\n // Build table rows\n const tableData = [headers];\n for (let i = 0; i < xValues.length; i++) {\n const row = [];\n row.push(xValues[i]);\n dataValues.forEach(values => {\n row.push(values[i] !== undefined ? values[i] : '');\n });\n tableData.push(row);\n }\n renderTable(tableData);\n\n // Group data quantities by unit for plotting\n const unitGroups = {};\n dataQuantities.forEach((q, idx) => {\n let unit = '';\n if (q['si:realListXMLList'] && q['si:realListXMLList']['si:unitXMLList']) {\n unit = q['si:realListXMLList']['si:unitXMLList'].trim();\n }\n if (!unitGroups[unit]) {\n unitGroups[unit] = [];\n }\n let header = headers[idx + 1];\n let values = [];\n if (q['si:realListXMLList'] && q['si:realListXMLList']['si:valueXMLList']) {\n values = q['si:realListXMLList']['si:valueXMLList'].trim().split(/\\s+/).map(v => parseFloat(v));\n }\n if (values.length === 1 && xValues.length > 1) {\n values = new Array(xValues.length).fill(values[0]);\n }\n unitGroups[unit].push({ name: header, y: values });\n });\n\n // Clear plots container\n plotsContainer.innerHTML = '';\n Object.keys(unitGroups).forEach(unit => {\n const graphDiv = document.createElement('div');\n graphDiv.style.width = '100%';\n graphDiv.style.height = '300px';\n plotsContainer.appendChild(graphDiv);\n\n const traces = unitGroups[unit].map(trace => {\n return {\n x: xValues,\n y: trace.y,\n type: 'scatter',\n mode: 'lines+markers',\n name: trace.name\n };\n });\n const layout = {\n title: 'Plot (' + unit + ')',\n xaxis: { title: xHeader },\n yaxis: { title: unit },\n hovermode: 'closest'\n };\n Plotly.newPlot(graphDiv, traces, layout);\n\n // Coupled mouseover events\n graphDiv.on('plotly_hover', function(data) {\n if (data.points && data.points.length > 0) {\n const pointIndex = data.points[0].pointIndex + 1; // offset for header row\n highlightTableRow(pointIndex);\n }\n });\n graphDiv.on('plotly_unhover', function() {\n clearTableRowHighlights();\n });\n });\n }\n\n // Render table from 2D array\n function renderTable(tableData) {\n tableContainer.innerHTML = '';\n const table = document.createElement('table');\n tableData.forEach((rowData, rowIndex) => {\n const tr = document.createElement('tr');\n rowData.forEach(cellData => {\n const cell = document.createElement(rowIndex === 0 ? 'th' : 'td');\n cell.textContent = cellData;\n cell.style.padding = '4px';\n cell.style.border = '1px solid #ccc';\n tr.appendChild(cell);\n });\n tr.addEventListener('mouseover', () => { tr.style.backgroundColor = '#eef'; });\n tr.addEventListener('mouseout', () => { tr.style.backgroundColor = ''; });\n table.appendChild(tr);\n });\n tableContainer.appendChild(table);\n }\n\n // Placeholder functions for coupled table row highlights\n function highlightTableRow(rowIndex) {\n const rows = tableContainer.querySelectorAll('tr');\n if (rows[rowIndex]) {\n rows[rowIndex].style.backgroundColor = '#fee';\n }\n }\n function clearTableRowHighlights() {\n const rows = tableContainer.querySelectorAll('tr');\n rows.forEach(row => row.style.backgroundColor = '');\n }\n\n // Initial update\n updateVisualization();\n\n // Update visualization on X-axis selection change\n const radios = document.querySelectorAll('input[name=\"xAxisSelect\"]');\n radios.forEach(radio => {\n radio.addEventListener('change', updateVisualization);\n });\n\n // Tolerance toggle event (placeholder)\n toleranceToggle.addEventListener('change', () => {\n console.log('Tolerance toggle:', toleranceToggle.checked);\n // Future implementation: update plot/table for tolerance markings and color coding\n });\n}\n"
}
}
}
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..be1e181c3f36f4881f907e27b3082bcc66db71ec
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+ resolve: {
+ alias: {
+ // Ensure that Node's events module is polyfilled
+ events: 'events'
+ }
+ },
+ optimizeDeps: {
+ esbuildOptions: {
+ // Define global as globalThis to help with some Node packages
+ define: { global: 'globalThis' }
+ }
+ }
+});