diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js
index e7ad8127b..10cca9597 100644
--- a/.webpack/webpack.base.js
+++ b/.webpack/webpack.base.js
@@ -22,7 +22,6 @@ const cssToJavaScript = require('./rules/cssToJavaScript.js');
// const stylusToJavaScript = require('./rules/stylusToJavaScript.js');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-
// ~~ ENV VARS
const NODE_ENV = process.env.NODE_ENV;
const QUICK_BUILD = process.env.QUICK_BUILD;
@@ -101,14 +100,18 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
module: {
noParse: [/(codec)/, /(dicomicc)/],
rules: [
- ...(isProdBuild ? [] : [{
- test: /\.[jt]sx?$/,
- exclude: /node_modules/,
- loader: 'babel-loader',
- options: {
- plugins: ['react-refresh/babel'],
- },
- }]),
+ ...(isProdBuild
+ ? []
+ : [
+ {
+ test: /\.[jt]sx?$/,
+ exclude: /node_modules/,
+ loader: 'babel-loader',
+ options: {
+ plugins: ['react-refresh/babel'],
+ },
+ },
+ ]),
{
test: /\.svg?$/,
oneOf: [
@@ -123,11 +126,11 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
name: 'preset-default',
params: {
overrides: {
- removeViewBox: false
+ removeViewBox: false,
},
},
},
- ]
+ ],
},
prettier: false,
svgo: true,
diff --git a/package.json b/package.json
index e0afa61ec..497cb13bb 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,7 @@
},
"optionalDependencies": {
"@percy/cypress": "^3.1.1",
- "@playwright/test": "^1.44.0",
+ "@playwright/test": "^1.48.0",
"cypress": "13.7.2",
"cypress-file-upload": "^3.5.3"
},
diff --git a/platform/docs/docs/configuration/dataSources/configuration-ui.md b/platform/docs/docs/configuration/dataSources/configuration-ui.md
index b4279a26a..1ff70f409 100644
--- a/platform/docs/docs/configuration/dataSources/configuration-ui.md
+++ b/platform/docs/docs/configuration/dataSources/configuration-ui.md
@@ -69,21 +69,21 @@ API, this would be `['Project', 'Location', 'Data set', 'DICOM store']`.
Besides the configurable item labels themselves, several other string look ups
are used base on EACH of the labels returned by this method.
-For instance, for the label `{itemLabel}``, the following strings are fetched for
+For instance, for the label `{itemLabel}`, the following strings are fetched for
translation...
-1. `No {itemLabel} available`
+1. No `{itemLabel}` available
- used to indicate no such items are available
- - for example, for Google, `No Project available` would be 'No projects available'
-2. `Select {itemLabel}`
+ - for example, for Google, No Project available would be 'No projects available'
+2. Select `{itemLabel}`
- used to direct selection of the item
- - for example, for Google, `Select Project` would be 'Select a project'
-3. `Error fetching {itemLabel} list`
+ - for example, for Google, Select Project would be 'Select a project'
+3. Error fetching `{itemLabel}` list
- used to indicate an error occurred fetching the list of items
- usually accompanied by the error itself
- - for example, for Google, `Error fetching Project list` would be 'Error fetching projects'
-4. `Search {itemLabel} list`
+ - for example, for Google, Error fetching Project list would be 'Error fetching projects'
+4. Search `{itemLabel}` list
- used as the placeholder text for filtering a list of items
- - for example, for Google, `Search Project list` would be 'Search projects'
+ - for example, for Google, Search Project list would be 'Search projects'
#### `initialize`
diff --git a/platform/docs/docs/deployment/docker.md b/platform/docs/docs/deployment/docker.md
index d79c3eb3d..1bc793867 100644
--- a/platform/docs/docs/deployment/docker.md
+++ b/platform/docs/docs/deployment/docker.md
@@ -36,7 +36,7 @@ Once the Docker image has been built, it can be run as a container from the comm
|Flag|Description|
|----|-----------|
|-d|Run the container in the background and print the container ID|
-|-p {host-port}:{nginx-port}/tcp|Publish the `nginx` listen port on the given host port|
+|-p `{host-port}:{nginx-port}/tcp`|Publish the `nginx` listen port on the given host port|
|--name|An arbitrary name for the container.|
@@ -58,7 +58,7 @@ Simply replace `latest` at the end of the command with any of the tags for a spe
### Configuring the `nginx` Listen Port
-The Dockerfile and entry point use the `${PORT}` environment variable as the port that the `nginx` server uses to serve the web server. The default value for `${PORT}` is `80`. One way to set this environment variable is to use the `-e` switch when running the container with `docker run`. The block below gives an example where the listen port is set to `8080` and published on the host as `3000`.
+The Dockerfile and entry point use the `{PORT}` environment variable as the port that the `nginx` server uses to serve the web server. The default value for `{PORT}` is `80`. One way to set this environment variable is to use the `-e` switch when running the container with `docker run`. The block below gives an example where the listen port is set to `8080` and published on the host as `3000`.
```sh
docker run -d -e PORT=8080 -p 3000:8080/tcp --name ohif-viewer-container ohif-viewer-image
@@ -83,13 +83,13 @@ docker run -d -p 3000:80/tcp -v /path/to/config/file.js:/usr/share/nginx/html/ap
:::
#### Environment Variable
-In certain scenarios, such as deploying the Docker container to Google Cloud, it might be convenient to specify the configuration file (contents) as an environment variable. That environment variable is `${APP_CONFIG}` and it can be set in the `docker run` command using the `-e` switch.
+In certain scenarios, such as deploying the Docker container to Google Cloud, it might be convenient to specify the configuration file (contents) as an environment variable. That environment variable is `{APP_CONFIG}` and it can be set in the `docker run` command using the `-e` switch.
:::tip
It is important to stress here that the environment variable is the contents of the configuration file and NOT the path to the config file as is [typically specified](https://docs.ohif.org/configuration/configurationFiles#configuration-files) for development and build environments or for the [volume mounting method](#volume-mounting).
:::
-Below the `cat` command is used to convert the configuration file to a string and its result set as the `${APP_CONFIG}` environment variable.
+Below the `cat` command is used to convert the configuration file to a string and its result set as the `{APP_CONFIG}` environment variable.
```sh
docker run -d -p 3000:80/tcp -e APP_CONFIG="$(cat /path/to/the/config/file)" --name ohif-viewer-container ohif-viewer-image
@@ -100,7 +100,7 @@ To be safe, remove single line comments (i.e. `//`) from the configuration file
:::
:::tip
-As an alternative to the `cat` command, convert the configuration file to a single line and copy and paste it as the value to the `${APP_CONFIG}` environment variable on the `docker run` line. Editors such as [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) have 'Join Lines' commands to facilitate this.
+As an alternative to the `cat` command, convert the configuration file to a single line and copy and paste it as the value to the `{APP_CONFIG}` environment variable on the `docker run` line. Editors such as [Visual Studio Code](https://stackoverflow.com/questions/46491061/shortcut-for-joining-two-lines) and [Notepad++](https://superuser.com/questions/518229/how-do-i-remove-linebreaks-in-notepad) have 'Join Lines' commands to facilitate this.
:::
:::tip
@@ -139,7 +139,7 @@ Consideration must be given as to whether OHIF should be deployed in a secure co
### Specifying the SSL Port, Certificate and Private Key
For convenience, the [built Docker image](#building-the-docker-image) can be run over SSL by
-- setting the `${SSL_PORT}` environment variable
+- setting the `{SSL_PORT}` environment variable
- volume mounting the SSL certificate
- volume mounting the SSL private key
@@ -147,7 +147,7 @@ For convenience, the [built Docker image](#building-the-docker-image) can be run
The volume mounted SSL certificate and private key are mapped to the [`ssl_certificate`](http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_certificate) and [`ssl_certificate_key`](http://nginx.org/en/docs/http/ngx_http_ssl_module.html#ssl_certificate_key) `nginx` directives respectively.
:::
-Similar to the [`nginx` listen port](#configuring-the-nginx-listen-port), the `${SSL_PORT}` environment variable is the internal port that `nginx` listens on to serve the OHIF web server over SSL and has to be likewise published via the `-p` switch.
+Similar to the [`nginx` listen port](#configuring-the-nginx-listen-port), the `{SSL_PORT}` environment variable is the internal port that `nginx` listens on to serve the OHIF web server over SSL and has to be likewise published via the `-p` switch.
The following is an example command running the Docker container over SSL. Note that depending on the version of Docker, an absolute path to the certificate and private key files might be required.
@@ -164,7 +164,7 @@ The private key is a secure entity and should have restricted access. Keep it sa
:::
:::caution
-The presence of the `${SSL_PORT}` environment variable is used to trigger to deploy over SSL as opposed to HTTP. If `${SSL_PORT}` is NOT defined, then HTTP is used even if the certificate and private key volumes are mounted.
+The presence of the `{SSL_PORT}` environment variable is used to trigger to deploy over SSL as opposed to HTTP. If `{SSL_PORT}` is NOT defined, then HTTP is used even if the certificate and private key volumes are mounted.
:::
:::tip
diff --git a/platform/docs/docs/faq/general.md b/platform/docs/docs/faq/general.md
index e2975a49b..2c01de7d1 100644
--- a/platform/docs/docs/faq/general.md
+++ b/platform/docs/docs/faq/general.md
@@ -67,14 +67,14 @@ You can check out the studies that we have put in this [Dropbox link](https://ww
-[general]: ../faq.md#general
-[technical]: ../faq.md#technical
-[report-bug]: ../faq.md#how-do-i-report-a-bug
-[new-feature]: ../faq.md#how-can-i-request-a-new-feature
-[commercial-support]: ../faq.md#does-ohif-offer-commercial-support
-[academic]: ../faq.md#who-should-i-contact-about-academic-collaborations
-[fda-clearance]: ../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
-[hipaa]: ../faq.md#is-the-ohif-viewer-hipaa-compliant
+[general]: general
+[technical]: technical
+[report-bug]: how-do-i-report-a-bug
+[new-feature]: how-can-i-request-a-new-feature
+[commercial-support]: does-ohif-offer-commercial-support
+[academic]: who-should-i-contact-about-academic-collaborations
+[fda-clearance]: does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
+[hipaa]: is-the-ohif-viewer-hipaa-compliant
[501k-clearance]: https://www.fda.gov/MedicalDevices/DeviceRegulationandGuidance/HowtoMarketYourDevice/PremarketSubmissions/PremarketNotification510k/
[ce-marking]: https://ec.europa.eu/growth/single-market/ce-marking_en
[hipaa-def]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act
diff --git a/platform/docs/docs/faq/index.md b/platform/docs/docs/faq/index.md
index e5e50578c..e44af0f30 100644
--- a/platform/docs/docs/faq/index.md
+++ b/platform/docs/docs/faq/index.md
@@ -3,17 +3,6 @@ id: index
---
-- [General FAQ](../faq.md#general-faq)
- - [How do I report a bug?](../faq.md#how-do-i-report-a-bug)
- - [How can I request a new feature?](../faq.md#how-can-i-request-a-new-feature)
- - [Who should I contact about Academic Collaborations?](../faq.md#who-should-i-contact-about-academic-collaborations)
- - [Does OHIF offer support?](../faq.md#does-ohif-offer-support)
- - [Does The OHIF Viewer have 510(k) Clearance from the U.S. F.D.A or CE Marking from the European Commission?](../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission)
- - [Is there a DICOM Conformance Statement for the OHIF Viewer?](../faq.md#is-there-a-dicom-conformance-statement-for-the-ohif-viewer)
- - [Is The OHIF Viewer HIPAA Compliant?](../faq.md#is-the-ohif-viewer-hipaa-compliant)
- - [Could you provide me with a particular study from the OHIF Viewer Demo?](../faq.md#could-you-provide-me-with-a-particular-study-from-the-ohif-viewer-demo)
-
-
# General FAQ
@@ -77,14 +66,14 @@ You can check out the studies that we have put in this [Dropbox link](https://ww
-[general]: ../faq.md#general
-[technical]: ../faq.md#technical
-[report-bug]: ../faq.md#how-do-i-report-a-bug
-[new-feature]: ../faq.md#how-can-i-request-a-new-feature
-[commercial-support]: ../faq.md#does-ohif-offer-commercial-support
-[academic]: ../faq.md#who-should-i-contact-about-academic-collaborations
-[fda-clearance]: ../faq.md#does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
-[hipaa]: ../faq.md#is-the-ohif-viewer-hipaa-compliant
+[general]: #general
+[technical]: #technicalß˚
+[report-bug]: #how-do-i-report-a-bug
+[new-feature]: #how-can-i-request-a-new-feature
+[commercial-support]: #does-ohif-offer-commercial-support
+[academic]: #who-should-i-contact-about-academic-collaborations
+[fda-clearance]: #does-the-ohif-viewer-have-510k-clearance-from-the-us-fda-or-ce-marking-from-the-european-commission
+[hipaa]: #is-the-ohif-viewer-hipaa-compliant
[501k-clearance]: https://www.fda.gov/MedicalDevices/DeviceRegulationandGuidance/HowtoMarketYourDevice/PremarketSubmissions/PremarketNotification510k/
[ce-marking]: https://ec.europa.eu/growth/single-market/ce-marking_en
[hipaa-def]: https://en.wikipedia.org/wiki/Health_Insurance_Portability_and_Accountability_Act
diff --git a/platform/docs/docs/migration-guide/from-v2.md b/platform/docs/docs/migration-guide/from-v2.md
index 285ba3551..ce953d993 100644
--- a/platform/docs/docs/migration-guide/from-v2.md
+++ b/platform/docs/docs/migration-guide/from-v2.md
@@ -209,8 +209,8 @@ Remember that there is no strict rule for deciding between modes and extensions.
In OHIF v2 a study was loaded and mounted on `/viewer/:studyInstanceUID` route. In OHIF v3
we have reworked the route registration to enable more sophisticated routing. Now, Modes are tied to specific routes in the viewer, and multiple modes/routes can be present within a single application, making "routes" configuration the most important part of mode configuration.
-- Routes with a dataSourceName: ${mode.id}/${dataSourceName}
-- Routes without a dataSourceName: ${mode.id} which uses the default dataSourceName
+- Routes with a dataSourceName: `{mode.id}/{dataSourceName}`
+- Routes without a dataSourceName: `{mode.id}` which uses the default dataSourceName
This makes a mode flexible enough to be able to connect to multiple datasources
without rebuild of the app for use cases such as reading from one PACS and
diff --git a/platform/docs/docs/platform/extensions/modules/hpModule.md b/platform/docs/docs/platform/extensions/modules/hpModule.md
index b7f0f15ed..e29f97609 100644
--- a/platform/docs/docs/platform/extensions/modules/hpModule.md
+++ b/platform/docs/docs/platform/extensions/modules/hpModule.md
@@ -249,22 +249,22 @@ A list of criteria for the protocol along with the provided points for ranking.
- `constraint`: the constraint that needs to be satisfied for the attribute. It accepts a `validator` which can be
[`equals`, `doesNotEqual`, `contains`, `doesNotContain`, `startsWith`, `endsWidth`]
- - | Rule | Single Value | Array Value | Example |
- |--- |--- |--- |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
- | equals | === | All members are === in same order | value = ['abc', 'def', 'GHI'] testValue = 'abc' (Fail)
value = ['Attenuation Corrected'] testValue = ['Attenuation Corrected'] (Valid) = 'Attenuation Corrected' (Valid) = 'Attenuation' (Fail) |
- | doesNotEqual | !== | Any member is !== for the array, either in value, order, or length | value = ['abc', 'def', 'GHI'] testValue = 'abc' (Valid) = ['abc'] (Valid) = ['abc', 'def', 'GHI'] (Fail) = ['abc', 'GHI', 'def'] (Valid) = ['abc', 'def'] (Valid)
value = 'Attenuation Corrected' testValue = 'Attenuation Corrected' (Fail)Valid
= 'Attenuation' (Valid)
value = ['Attenuation Corrected'] testValue = ['Attenuation Corrected'] (Fail) = 'Attenuation Corrected' (Fail) = 'Attenuation' (Fail) |
- | includes | Not allowed | Value is equal to one of the values of the array | value = ['abc', 'def', 'GHI'] testValue = ['abc'] (Valid)
value = ['Attenuation Corrected'] testValue = 'Attenuation Corrected' (Fail) = ['Attenuation Corrected', 'Corrected'] (Valid) = ['Attenuation', 'Corrected'] (Fail) |
- | doesNotInclude | Not allowed | Value is not in one of the values of the array | value = ['abc', 'def', 'GHI'] testValue = ‘Corr’ (Valid)
value = ['Attenuation Corrected'] testValue = 'Attenuation' (Fail) = ['Attenuation Corrected', 'Corrected'] (Fail) = ['Attenuation', 'Corrected'] (Valid) |
- | containsI | String containment (case insensitive) | String containment (case insensitive) is OK for one of the rule values | value = 'Attenuation Corrected' testValue = ‘Corr’ (Valid) = ‘corr’ (Valid)
= [‘att’, ‘cor’] (Valid)
= [‘Att’, ‘Wall’] (Valid)
= [‘cat’, ‘dog’] (Fail)
value = ['abc', 'def', 'GHI'] testValue = 'def' (Valid)
= 'dog' (Fail)
= ['gh', 'de'] (Valid)
= ['cat', 'dog'] (Fail) |
- | contains | String containment (case sensitive) | String containment (case sensitive) is OK for one of the rule values | value = 'Attenuation Corrected' testValue = ‘Corr’ (Valid) = ‘corr’ (Fail) = [‘att’, ‘cor’] (Fail) = [‘Att’, ‘Wall’] (Valid)
= [‘cat’, ‘dog’] (Fail)
value = ['abc', 'def', 'GHI']
testValue = 'def' (Valid) = 'dog' (Fail)
= ['cat', 'de'] (Valid)
= ['cat', 'dog'] (Fail) |
- | doesNotContain | String containment is false | String containment is false for all values of the array | value = 'Attenuation Corrected' testValue = ‘Corr’ (Fail)
= ‘corr’ (Valid)
= [‘att’, ‘cor’] (Valid)
= [‘Att’, ‘Wall’] (Fail)
= [‘cat’, ‘dog’] (Valid)
value = ['abc', 'def', 'GHI'] testValue = 'def' (Fail)
= 'dog' (Valid)
= ['cat', 'de'] (Fail)
= ['cat', 'dog'] (Valid) |
- | doesNotContainI | String containment is false (case insensitive) | String containment (case insensitive) is false for all values of the array | value = 'Attenuation Corrected' testValue = ‘Corr’ (Fail)
= ‘corr’ (Fail)
= [‘att’, ‘cor’] (Fail)
= [‘Att’, ‘Wall’] (Fail)
= [‘cat’, ‘dog’] (Valid)
value = ['abc', 'def', 'GHI'] testValue = 'DEF' (Fail)
= 'dog' (Valid)
= ['cat', 'gh'] (Fail)
= ['cat', 'dog'] (Valid) |
- | startsWith | Value begins with characters | Starts with one of the values of the array | value = 'Attenuation Corrected' testValue = ‘Corr’ (Fail)
= ‘Att’ (Fail)
= ['cat', 'dog', 'Att'] (Valid)
= [‘cat’, ‘dog’] (Fail)
value = ['abc', 'def', 'GHI'] testValue = 'deg' (Valid)
= ['cat', 'GH'] (Valid)
= ['cat', 'gh'] (Fail)
= ['cat', 'dog'] (Fail) |
- | endsWith | Value ends with characters | ends with one of the value of the array | value = 'Attenuation Corrected' testValue = ‘TED’ (Fail)
= ‘ted’ (Valid)
= ['cat', 'dog', 'ted'] (Valid)
= [‘cat’, ‘dog’] (Fail)
value = ['abc', 'def', 'GHI'] testValue = 'deg' (Valid)
= ['cat', 'HI'] (Valid)
= ['cat', 'hi'] (Fail)
= ['cat', 'dog'] (Fail) |
- | greaterThan | value is => to rule | Not applicable | value = 30
testValue = 20 (Valid) = 40 (Fail)
|
- | lessThan | value is <= to rule | Not applicable | value = 30
testValue = 40 (Valid) = 20 (Fail) |
- | range | Not applicable | 2 value requested (min and max) | value = 50
testValue = [10,60] (Valid) = [60, 10] (Valid)
= [0, 10] (Fail)
= [70, 80] (Fail)
= 45 (Fail)
= [45] (Fail) |
- | notNull | Not Applicable | Not Applicable | No value |
+ | Rule | Single Value | Array Value | Example |
+|------|--------------|-------------|---------|
+| equals | === | All members are === in same order | value = ['abc', 'def', 'GHI'] testValue = 'abc' (Fail) = ['abc'] (Fail) = ['abc', 'def', 'GHI'] (Valid) = ['abc', 'GHI', 'def'] (Fail) = ['abc', 'def'] (Fail)
value = ['Attenuation Corrected'] testValue = 'Attenuation Corrected' (Fail) = ['Attenuation Corrected', 'Corrected'] (Valid) = ['Attenuation', 'Corrected'] (Fail) |
+| doesNotInclude | Not allowed | Value is not in one of the values of the array | value = ['abc', 'def', 'GHI'] testValue = 'Corr' (Valid) = 'abc' (Fail) = ['att', 'cor'] (Valid) = ['abc', 'def', 'dog'] (Fail)
+
+
+
+
+
+ Item 1
+ Item 2
+ Long name Item 3
+
+
+
+
+
+
+
+ Item 1
+ Item 2
+ Long name Item 3
+
+
+
+
+
+
+
+ Item 1
+ Item 2
+ Long name Item 3
+
+
+
+
+
+
+
+ console.debug('Item 1')}>Item 1
+ console.debug('Item 2')}>Item 2
+ console.debug('Item 3')}>
+ Long name Item 3
+
+
+
+
+
+
+
+ `}
+ >
+
+
+
+
+
+
+
+
+
+ `}
+ >
+
+
+
+
+
+
+
+
+ Hello
+ `}
+ >
+ Hello
+
+
+
+
+
+ `}
+ >
+
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+ laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+ non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+ magna aliqua.
+
+ `}
+ >
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+ incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+ exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+ dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+ Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+ do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
- incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
- exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
- dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
- mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
- do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-
-
- {/* "Add this item" Button */}
- onAddItem(selectedItem.id)}
- className="mb-4 mt-2"
- variant="default"
- >
- Add this item
-
-
- {/* Divider */}
-
-
- {/* Series Name */}
-
- Series: {selectedItem.series}
-
-
- );
- }
-
- if (selectedItem.availability === 'loaded') {
- /**
- * Handles changes to a property's value.
- *
- * @param property - The property being updated.
- * @param newValue - The new value for the property.
- */
- const handleChange = (property: Property, newValue: any) => {
- console.log(`Updating property '${property.key}' to`, newValue); // Debug log
- onUpdateProperty(selectedItem.id, property.key, newValue);
- };
-
- // Determine if the selected item is the master
- const isMaster = selectedItem.controlsAll;
-
- /**
- * Handles changes to the display mode via Tabs.
- *
- * @param newDisplayMode - The new display mode selected.
- */
- const handleDisplayModeChange = (newDisplayMode: DisplayMode) => {
- console.log(`Display mode changed to`, newDisplayMode); // Debug log
- onUpdateProperty(selectedItem.id, 'displayMode', newDisplayMode);
- };
-
- return (
-
-
-
- Properties
- {selectedItem.name}
-
-
- {/* Tabs component for Outline and Fill control */}
-
-
-
- {/* SVG Icon for Fill & Outline */}
-
-
-
- {/* SVG Icon for Outline Only */}
-
-
-
- {/* SVG Icon for Fill Only */}
-
-
-
-
- {/* Display dynamic text under the tabs */}
-
-
-
Fill & Outline
-
-
-
Outline Only
-
-
-
Fill Only
-
-
-
-
-
- {/* Properties List */}
-
- {selectedItem.properties.map(prop => (
-
- {/* Label takes up space and doesn't wrap */}
-
-
- {/* Flex container for input elements, with spacing */}
-
- {renderPropertyInput(prop, handleChange)}
-
-
- ))}
-
-
- {/* Conditionally render the details section for non-master items */}
- {!isMaster && (
-
-
- Series: {selectedItem.series}
-
- )}
-
- );
- }
-
- // For other availability states, you can add additional conditions if needed
- return (
-
-
No properties available for the selected item.
-
- );
-};
-
-/**
- * Renders the appropriate input component based on the property's type.
- *
- * @param prop - The property to render.
- * @param handleChange - Function to handle value changes.
- * @returns JSX Element corresponding to the property type.
- */
-const renderPropertyInput = (
- prop: Property,
- handleChange: (prop: Property, value: any) => void
-) => {
- switch (prop.type) {
- case 'slider':
- return (
- <>
- {
- console.log(`Slider '${prop.key}' changed to`, values[0]); // Debug log
- handleChange(prop, values[0]);
- }}
- className="w-28"
- />
- {
- const newVal = Number(e.target.value);
- console.log(`Input '${prop.key}' changed to`, newVal); // Debug log
- handleChange(prop, newVal);
- }}
- className="w-14"
- />
- >
- );
-
- case 'boolean':
- return (
- {
- console.log(`Switch '${prop.key}' toggled to`, checked); // Debug log
- handleChange(prop, checked);
- }}
- />
- );
-
- // Add more cases if you have other property types
- default:
- return null;
- }
-};
-
-export default PropertiesPanel;
diff --git a/platform/ui-next/src/_prototypes/PanelSplit/index.ts b/platform/ui-next/src/_prototypes/PanelSplit/index.ts
deleted file mode 100644
index 7d211b0a0..000000000
--- a/platform/ui-next/src/_prototypes/PanelSplit/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import PanelSplit from './PanelSplit';
-import ItemList from './ItemList';
-import PropertiesPanel from './PropertiesPanel';
-
-export { default as PanelSplit } from './PanelSplit';
-export { default as PropertiesPanel } from './PropertiesPanel';
-export { default as ItemList } from './ItemList';
diff --git a/platform/ui-next/src/_prototypes/PanelSplit/types.ts b/platform/ui-next/src/_prototypes/PanelSplit/types.ts
deleted file mode 100644
index 1d2cee57b..000000000
--- a/platform/ui-next/src/_prototypes/PanelSplit/types.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-export interface Property {
- key: string;
- label: string;
- type: 'slider' | 'boolean' | string; // Extend types as needed
- value: any;
- min?: number;
- max?: number;
- step?: number;
-}
-
-export type DisplayMode = 'Fill & Outline' | 'Outline Only' | 'Fill Only';
-export type VisibilityState = 'Visible' | 'Hidden';
-export type AvailabilityState = 'loaded' | 'available' | 'not available';
-
-export interface Item {
- id: number;
- name: string;
- controlsAll?: boolean; // Indicates if the item is the master
- series?: string; // Optional, only for non-master items
- displayMode: DisplayMode; // Existing property for display mode
- visibility: VisibilityState; // Existing property for visibility
- availability: AvailabilityState; // New property for availability
- properties: Property[];
-}
diff --git a/platform/ui-next/src/components/BackgroundColorSelect/index.tsx b/platform/ui-next/src/components/BackgroundColorSelect/index.tsx
index a7cebade8..0d3a1f421 100644
--- a/platform/ui-next/src/components/BackgroundColorSelect/index.tsx
+++ b/platform/ui-next/src/components/BackgroundColorSelect/index.tsx
@@ -1,2 +1 @@
-// src/components/BackgroundColorSelect/index.ts
export { default as BackgroundColorSelect } from './BackgroundColorSelect';
diff --git a/platform/ui-next/src/_prototypes/DataRow/DataRow.tsx b/platform/ui-next/src/components/DataRow/DataRow.tsx
similarity index 100%
rename from platform/ui-next/src/_prototypes/DataRow/DataRow.tsx
rename to platform/ui-next/src/components/DataRow/DataRow.tsx
diff --git a/platform/ui-next/src/components/DataRow/index.ts b/platform/ui-next/src/components/DataRow/index.ts
new file mode 100644
index 000000000..76a817a81
--- /dev/null
+++ b/platform/ui-next/src/components/DataRow/index.ts
@@ -0,0 +1 @@
+export { default as DataRow } from './DataRow';
diff --git a/platform/ui-next/src/components/Icons/Icons.tsx b/platform/ui-next/src/components/Icons/Icons.tsx
index 67d09af39..02222c53e 100644
--- a/platform/ui-next/src/components/Icons/Icons.tsx
+++ b/platform/ui-next/src/components/Icons/Icons.tsx
@@ -1,10 +1,11 @@
import React from 'react';
+import { Code } from 'lucide-react';
type IconProps = React.HTMLAttributes;
export const Icons = {
// Usage example:
-
+ Code: Code,
Add: (props: IconProps) => (