init

platform/ui/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+storybook-static

platform/ui/.storybook/OHIFTheme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'OHIF',
+  brandUrl: 'https://ohif.org',
+  brandImage: 'ohif-logo-light.svg',
+});

platform/ui/.storybook/custom.css

@@ -0,0 +1,3 @@
+#storybook-explorer-menu svg {
+  color: #5034ff;
+}

platform/ui/.storybook/main.ts

@@ -0,0 +1,105 @@
+import path, { dirname, join } from 'path';
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(mdx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    // Other addons go here
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  core: {},
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  docs: {
+    autodocs: true, // see below for alternatives
+    defaultName: 'Docs', // set to change the name of generated docs entries
+  },
+  staticDirs: ['../static'],
+  webpackFinal: async (config: any, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // config.module.rules[0].use[0].options.plugins[1] = [
+    //   '@babel/plugin-proposal-class-properties',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[3] = [
+    //   '@babel/plugin-proposal-private-methods',
+    //   { loose: true },
+    // ];
+
+    // config.module.rules[0].use[0].options.plugins[4] = [
+    //   '@babel/plugin-proposal-private-property-in-object',
+    //   { loose: true },
+    // ];
+
+    // Make whatever fine-grained changes you need
+    config.module.rules.push({
+      test: /\.m?js/,
+      resolve: {
+        fullySpecified: false,
+      },
+    });
+
+    // Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
+    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
+    fileLoaderRule.exclude = /\.svg$/;
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        { loader: require.resolve('babel-loader') },
+        //        { loader: 'svg-inline-loader' },
+      ],
+    });
+
+    config.module.rules.push({
+      test: /\.css$/,
+      use: [
+        {
+          loader: 'postcss-loader',
+          options: {
+            // HERE: OPTIONS
+            postcssOptions: {
+              plugins: [require('tailwindcss'), require('autoprefixer')],
+            },
+          },
+        },
+      ],
+      include: path.resolve(__dirname, '../'),
+    });
+
+    // ignore the file @icr/polyseg-wasm during the build as it is a wasm file and
+    // we don't need that for ui
+    config.module.rules.push({
+      test: /@icr\/polyseg-wasm/,
+      type: 'javascript/auto',
+      loader: 'file-loader',
+    });
+
+    // Return the altered config
+    return config;
+  },
+};
+
+export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

platform/ui/.storybook/manager-head.html

@@ -0,0 +1,30 @@
+<link
+  href="https://fonts.googleapis.com/css?family=Lato:100,300,400,500,700&display=swap"
+  rel="stylesheet"
+/>
+<title>OHIF UI Component</title>
+<style>
+  body {
+    font-family: 'Inter', sans-serif;
+    background: #f0f3ff !important;
+    font-size: 14px;
+  }
+
+  #storybook-explorer-menu svg {
+    color: #2b5282;
+  }
+</style>
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script
+  async
+  src="https://www.googletagmanager.com/gtag/js?id=G-3S63CTHNP6"
+></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+
+  gtag('config', 'G-3S63CTHNP6');
+</script>

platform/ui/.storybook/manager.js

@@ -0,0 +1,15 @@
+// .storybook/manager.js
+
+import { addons } from '@storybook/addons';
+import ohifTheme from './OHIFTheme';
+
+const link = document.createElement('link');
+link.setAttribute('rel', 'shortcut icon');
+document.head.appendChild(link);
+
+addons.setConfig({
+  theme: ohifTheme,
+});
+
+window.STORYBOOK_GA_ID = 'G-3S63CTHNP6';
+window.STORYBOOK_REACT_GA_OPTIONS = {};

platform/ui/.storybook/preview.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';
+import {
+  Heading,
+  SectionName,
+  Footer,
+  AnchorListItem,
+  LinkComponent,
+} from '../src/storybook/components';
+
+import '../src/tailwind.css';
+import './custom.css';
+
+// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
+
+export const parameters = {
+  docs: {
+    inlineStories: true,
+    container: ({ children, context }) => (
+      <DocsContainer context={context}>{children}</DocsContainer>
+    ),
+    page: DocsPage,
+    components: {
+      Heading,
+      Footer,
+      h2: SectionName,
+      h3: ({ children }) => <h3 className="my-2 to-blue-900 text-xl">{children}</h3>,
+      li: AnchorListItem,
+      a: LinkComponent,
+      p: ({ children }) => <p className="font-inter my-2 text-gray-800">{children}</p>,
+      // todo: add pre and code
+    },
+  },
+  viewMode: 'docs',
+  previewTabs: {
+    'storybook/docs/panel': {
+      index: -1,
+    },
+    canvas: { title: 'Sandbox' },
+  },
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: {
+    disable: true,
+  },
+  backgrounds: {
+    default: 'OHIF-v3',
+    values: [
+      {
+        name: 'White',
+        value: '#FFFFFF',
+      },
+      {
+        name: 'OHIF-v3',
+        value: '#090C29',
+      },
+      {
+        name: 'Light',
+        value: '#F8F8F8',
+      },
+      {
+        name: 'Dark',
+        value: '#333333',
+      },
+    ],
+  },
+  options: {
+    storySort: {
+      order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
+    },
+  },
+};
+
+export const decorators = [];

platform/ui/.webpack/webpack.dev.js

@@ -0,0 +1,11 @@
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+const ENTRY = {
+  app: `${SRC_DIR}/index.tsx`,
+};
+
+module.exports = (env, argv) => {
+  return webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+};

platform/ui/.webpack/webpack.prod.js

@@ -0,0 +1,60 @@
+const { merge } = require('webpack-merge');
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+const webpackCommon = require('./../../../.webpack/webpack.base.js');
+const pkg = require('./../package.json');
+
+const ROOT_DIR = path.join(__dirname, './..');
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+const ENTRY = {
+  app: `${SRC_DIR}/index.js`,
+};
+
+const outputName = `ohif-${pkg.name.split('/').pop()}`;
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR, ENTRY });
+
+  return merge(commonConfig, {
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: false,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohif-ui',
+      libraryTarget: 'umd',
+      filename: pkg.main,
+    },
+    externals: [
+      /\b(dcmjs)/,
+      /\b(gl-matrix)/,
+      {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+      },
+    ],
+    plugins: [
+      new MiniCssExtractPlugin({
+        filename: `./dist/${outputName}.css`,
+        chunkFilename: `./dist/${outputName}.css`,
+      }),
+      // new BundleAnalyzerPlugin({}),
+    ],
+  });
+};

platform/ui/README.md

@@ -0,0 +1,14 @@
+# @ohif/ui
+
+## For Running Storybook
+
+```
+cd platform/ui
+
+yarn install
+
+yarn storybook
+
+```
+
+Stories are available default at `http://localhost:6006/`

platform/ui/assets/images/action-new-dialog.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>action-new-dialog</title>
+    <g id="*****Volume-Render-Dialog" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="volume-rendering-dialog" transform="translate(-696, -178)">
+            <g id="action-new-dialog" transform="translate(696, 178.5)">
+                <rect id="Rectangle" x="0" y="0" width="18" height="18"></rect>
+                <path d="M6.73167982,5 L6.73167982,6 L3.23167982,6 C2.40325269,6 1.73167982,6.67157288 1.73167982,7.5 L1.73167982,14.5 C1.73167982,15.3284271 2.40325269,16 3.23167982,16 L10.2316798,16 C11.0601069,16 11.7316798,15.3284271 11.7316798,14.5 L11.7316798,11.5 L12.7316798,11.5 L12.7316798,14.5 C12.7316798,15.8807119 11.6123917,17 10.2316798,17 L3.23167982,17 C1.85096795,17 0.73167982,15.8807119 0.73167982,14.5 L0.73167982,7.5 C0.73167982,6.11928813 1.85096795,5 3.23167982,5 L6.73167982,5 Z" id="Path" fill="currentColor" fill-rule="nonzero"></path>
+                <line x1="8.23167982" y1="9.5" x2="16.2316798" y2="1.5" id="Path" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></line>
+                <polyline id="Path" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" points="11.2316798 1.5 16.2316798 1.5 16.2316798 6.5"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/arrow-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 4" width="10.48" height="4">
+	<g fill="currentColor" fill-rule="evenodd">
+		<path d="M7.86 2L10.48 0L5.24 0L0 0L2.62 2L5.24 4L7.86 2Z" fill="currentColor"></path>
+	</g>
+</svg>

platform/ui/assets/images/arrow-left-small.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h7v12H0z"/>
+        <path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M5.757 1.757 1.515 6l4.242 4.243"/>
+    </g>
+</svg>

platform/ui/assets/images/arrow-left.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
+    </g>
+</svg>

platform/ui/assets/images/arrow-right-small.svg

@@ -0,0 +1,6 @@
+<svg width="7" height="12" viewBox="0 0 7 12" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M7 0H0v12h7z"/>
+        <path stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M1.243 1.757 5.485 6l-4.242 4.243"/>
+    </g>
+</svg>

platform/ui/assets/images/arrow-right.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
+    </g>
+</svg>

platform/ui/assets/images/calendar.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g fill="currentColor" fill-rule="evenodd">
+    <path d="M20 20h-4v-4h4v4zm-6-10h-4v4h4v-4zm6 0h-4v4h4v-4zm-12 6h-4v4h4v-4zm6 0h-4v4h4v-4zm-6-6h-4v4h4v-4zm16-8v22h-24v-22h3v1c0 1.103.897 2 2 2s2-.897 2-2v-1h10v1c0 1.103.897 2 2 2s2-.897 2-2v-1h3zm-2 6h-20v14h20v-14zm-2-7c0-.552-.447-1-1-1s-1 .448-1 1v2c0 .552.447 1 1 1s1-.448 1-1v-2zm-14 2c0 .552-.447 1-1 1s-1-.448-1-1v-2c0-.552.447-1 1-1s1 .448 1 1v2z"/>
+  </g>
+</svg>

platform/ui/assets/images/cancel.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
+    <g fill="currentColor" fill-rule="evenodd">
+        <circle cx="9.5" cy="9.5" r="9.5" fill="currentColor"/>
+        <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/checkbox-active.svg

@@ -0,0 +1,9 @@
+<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="bf9k9cj5la" d="m3 7.463.994-.982 2.131 2.113L10.756 4l.994.987-5.625 5.575z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <rect stroke="#5ACCE6" fill="#5ACCE6" x=".5" y=".5" width="14" height="14" rx="3"/>
+        <use fill="#000" xlink:href="#bf9k9cj5la"/>
+    </g>
+</svg>

platform/ui/assets/images/checkbox-checked.svg

@@ -0,0 +1,9 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path id="3nvolf8jsa" d="M4.9 8.45 2.4 5.97l.795-.785L4.9 6.875 8.605 3.2l.795.79z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <rect stroke="#348CFD" fill="#348CFD" x=".5" y=".5" width="11" height="11" rx="3"/>
+        <use fill="#000" xlink:href="#3nvolf8jsa"/>
+    </g>
+</svg>

platform/ui/assets/images/checkbox-default.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
+    <rect x="807.5" y="496.5" width="14" height="14" rx="3" transform="translate(-807 -496)" fill="#000" stroke="#5ACCE6" fill-rule="evenodd"/>
+</svg>

platform/ui/assets/images/checkbox-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <rect x=".5" y=".5" width="11" height="11" rx="3" stroke="#348CFD" fill="none" fill-rule="evenodd"/>
+</svg>

platform/ui/assets/images/chevron-down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="currentColor" fill-rule="evenodd" stroke="currentColor" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z"/>
+</svg>

platform/ui/assets/images/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="currentColor" fill-rule="evenodd" stroke="currentColor" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z" transform="rotate(90 10 10)"/>
+</svg>

platform/ui/assets/images/chevron-menu.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8px" height="13px" viewBox="0 0 8 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-menu</title>
+    <g id="Form-fields" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Artboard" transform="translate(-454.000000, -76.000000)" stroke="#348CFD" stroke-width="1.25">
+            <g id="chevron-menu" transform="translate(455.000000, 77.000000)">
+                <line x1="0.5" y1="0.5" x2="5.5" y2="5.5" id="Line"></line>
+                <line x1="0.5" y1="5.5" x2="5.5" y2="10.5" id="Line" transform="translate(3.000000, 8.000000) scale(1, -1) translate(-3.000000, -8.000000) "></line>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/chevron-next.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="currentColor" fill-rule="nonzero" d="M6.41 2 5 3.41 9.58 8 5 12.59 6.41 14l6-6z"/>
+        <path d="M0 0h16v16H0z"/>
+    </g>
+</svg>

platform/ui/assets/images/chevron-prev.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="currentColor" fill-rule="nonzero" d="M9.59 2 11 3.41 6.42 8 11 12.59 9.59 14l-6-6z"/>
+        <path d="M16 0H0v16h16z"/>
+    </g>
+</svg>

platform/ui/assets/images/chevron-right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path fill="currentColor" fill-rule="evenodd" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z" transform="rotate(-90 10 10)"/>
+</svg>

platform/ui/assets/images/circled-checkmark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <g fill="none" fill-rule="evenodd">
+        <circle cx="8" cy="8" r="8" fill="currentColor"/>
+        <path stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.556 5.333L7.824 11.11c-.168.259-.424.42-.703.444-.278.023-.552-.095-.75-.324L4.444 8.993"/>
+    </g>
+</svg>

platform/ui/assets/images/clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="M6 22v-16h16v7.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-7.362zm18-7.614v-10.386h-20v20h10.189c3.163 0 9.811-7.223 9.811-9.614zm-10 1.614h-5v-1h5v1zm5-4h-10v1h10v-1zm0-3h-10v1h10v-1zm2-7h-19v19h-2v-21h21v2z"/></svg>

platform/ui/assets/images/closeIcon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12 1.05 10.95 0 6 4.95 1.05 0 0 1.05 4.95 6 0 10.95 1.05 12 6 7.05 10.95 12 12 10.95 7.05 6z" fill="currentColor" fill-rule="evenodd"/>
+</svg>

platform/ui/assets/images/content-next.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-next</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-460, -343)" fill="#FFFFFF">
+            <polygon id="chevron-next" transform="translate(463, 348) scale(-1, 1) rotate(90) translate(-463, -348)" points="463 351 458 345.736842 458.7 345 463 349.526316 467.3 345 468 345.736842"></polygon>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/content-prev.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-prev</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-435, -343)" fill="#FFFFFF">
+            <polygon id="chevron-prev" transform="translate(438, 348) rotate(90) translate(-438, -348)" points="438 351 433 345.736842 433.7 345 438 349.526316 442.3 345 443 345.736842"></polygon>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/database.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19" height="19" viewBox="0 0 19 19" version="1.1"  xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0.84873874,0,0,0.84873874,0.13586772,0.14249413)">
+    <ellipse cx="11" cy="4" rx="9" ry="3"/>
+    <path d="m 2,4 v 14 a 9,3 0 0 0 18,0 V 4" />
+    <path d="m 2,11 a 9,3 0 0 0 18,0" />
+  </g>
+</svg>

platform/ui/assets/images/dotted-circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path fill="none" fill-rule="evenodd" stroke="currentColor" stroke-dasharray="1.5 3.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 15c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/>
+</svg>

platform/ui/assets/images/edit-patient.svg

@@ -0,0 +1,15 @@
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="edit-patient" stroke="currentColor" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group-23" transform="translate(1.000000, 1.000000)" stroke="currentColor">
+            <g id="Group-21" stroke-width="1.5">
+                <path d="M2.459,13.4115596 C3.78406799,12.6432192 5.19358453,12.0307708 6.65943386,11.5864311 C7.30893749,11.3458742 7.37955258,9.85674938 6.91395858,9.34381999 C6.24195124,8.60507751 5.67237458,7.73829669 5.67237458,5.64622765 C5.59319579,4.80314387 5.87912888,3.96655091 6.45776749,3.3482978 C7.03640611,2.7300447 7.85226135,2.3894192 8.69873558,2.41267733 C9.5452098,2.3894192 10.361065,2.7300447 10.9397037,3.3482978 C11.5183423,3.96655091 11.8042754,4.80314387 11.7250966,5.64622765 C11.7250966,7.74140065 11.1555199,8.60507751 10.4835126,9.34381999 C10.0179186,9.85674938 10.0885337,11.3458742 10.7380373,11.5864311 C12.2038866,12.0307708 13.6134032,12.6432192 14.9384712,13.4115596" id="Path"></path>
+                <path d="M18,11 L18,1 C18,0.44771525 17.5522847,0 17,0 L1,0 C0.44771525,0 0,0.44771525 0,1 L0,17 C0,17.5522847 0.44771525,18 1,18 L11,18" id="Path"></path>
+            </g>
+            <g id="Group-22" transform="translate(13.000000, 13.020297)" stroke-width="1.25">
+                <path d="M3.5,8.97970257 L0,9.97970257 L1,6.47970257 L6.982,0.497702567 C7.67552478,-0.173658884 8.77933392,-0.164697523 9.46186701,0.517835561 C10.1444001,1.20036865 10.1533615,2.30417778 9.482,2.99770257 L3.5,8.97970257 Z" id="Path"></path>
+                <line x1="6.232" y1="1.24770257" x2="8.732" y2="3.74770257" id="Path"></line>
+                <line x1="1" y1="6.47970257" x2="3.5" y2="8.97970257" id="Path"></line>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/exclamation.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="currentColor">
+            <path stroke-width="1.5" d="M0.5 3L0.5 0" transform="translate(0 1) translate(6 3)"/>
+            <path d="M0.5 4.5L0.5 4.5" transform="translate(0 1) translate(6 3)"/>
+            <path stroke-width="1.5" d="M.489 5.25c-.065.002-.127.03-.172.078-.044.048-.068.112-.065.177.005.135.115.243.25.245h.009c.065-.002.127-.03.171-.078.045-.048.068-.112.066-.177-.004-.134-.112-.241-.246-.245" transform="translate(0 1) translate(6 3)"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/external-link.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+  <polyline points="15 3 21 3 21 9"></polyline>
+  <line x1="10" y1="14" x2="21" y2="3"></line>
+</svg>

platform/ui/assets/images/eye-hidden.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 20">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+        <g opacity=".5">
+            <path d="M17.433 2.556c1.352.98 2.578 2.122 3.65 3.402 0 0-4.719 5.959-10.541 5.959-.933-.006-1.86-.149-2.75-.426M3.637 9.35C2.29 8.373 1.07 7.234 0 5.958 0 5.958 4.719 0 10.542 0c.773.003 1.543.103 2.291.298M6.875 5.958c0-2.025 1.642-3.666 3.667-3.666M14.208 5.958c0 2.025-1.641 3.667-3.666 3.667" transform="translate(1 1) translate(.458 3.208)"/>
+        </g>
+        <path d="M19.938 0.229L2.063 18.104" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/assets/images/eye-visible.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 13">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(0 1)">
+        <circle cx="10" cy="5.833" r="2.917"/>
+        <path d="M19.48 5.56C18.51 4.46 14.635.417 10 .417 5.365.417 1.49 4.46.52 5.56c-.136.157-.136.39 0 .547.97 1.1 4.845 5.143 9.48 5.143 4.635 0 8.51-4.043 9.48-5.143.136-.157.136-.39 0-.547z"/>
+    </g>
+</svg>

platform/ui/assets/images/focus-frame-target.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>focus-frame-target</title>
+    <g id="focus-frame-target" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+        <line x1="14" y1="4" x2="14" y2="7.33333333" id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="14" y1="20.6666667" x2="14" y2="24" id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="4" y1="14" x2="7.33333333" y2="14" id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></line>
+        <line x1="20.6666667" y1="14" x2="24" y2="14" id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></line>
+        <circle id="Oval" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" cx="14" cy="14" r="6.66666667"></circle>
+        <path d="M14,13.5833333 C14.2301186,13.5833333 14.4166667,13.7698814 14.4166667,14 C14.4166667,14.2301186 14.2301186,14.4166667 14,14.4166667 C13.7698814,14.4166667 13.5833333,14.2301186 13.5833333,14 C13.5833333,13.7698814 13.7698814,13.5833333 14,13.5833333" id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+    </g>
+</svg>

platform/ui/assets/images/group-layers.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
+        <path d="M6 17H1c-.552 0-1-.448-1-1V1c0-.552.448-1 1-1h15c.552 0 1 .448 1 1v5"/>
+        <rect width="17" height="17" x="6" y="6" rx="1"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-add.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12.0833333px" height="12.0833333px" viewBox="0 0 12.0833333 12.0833333" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-add</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-78.875, -64.375)">
+            <g id="icon-add" transform="translate(75, 60)">
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+                <g id="Group-18" transform="translate(4.5, 5)" stroke="#348CFD" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25">
+                    <line x1="5.41666667" y1="0" x2="5.41666667" y2="10.8333333" id="Path"></line>
+                    <line x1="10.8333333" y1="5.41666667" x2="0" y2="5.41666667" id="Path"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-alert-small.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M16 7.863a8.117 8.117 0 0 1-8 8.136 7.882 7.882 0 0 1-8-7.86A8.117 8.117 0 0 1 8 .002a7.883 7.883 0 0 1 8 7.862z" fill="#B70D11"/>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M7.827 12.439a.313.313 0 0 0-.174.05c-.045.033-.07.076-.067.12.005.09.117.163.253.163h0c.066 0 .129-.02.174-.051.046-.032.07-.075.067-.12-.004-.088-.11-.16-.244-.162h-.005M7.836 8.667V4"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-chevron-patient.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="29px" viewBox="0 0 28 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-chevron-patient</title>
+    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-154, -234)">
+            <g id="icon-chevron-patient" transform="translate(168, 248.5) scale(-1, -1) translate(-168, -248.5)translate(154, 234.5)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <polyline id="Path" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(14.5, 14) scale(-1, 1) translate(-14.5, -14)" points="16.5 10 12.5 14 16.5 18"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-clear-field.svg

@@ -0,0 +1,8 @@
+<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <circle fill="#0944B3" cx="9.5" cy="9.5" r="9.5"/>
+        <g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="m5.188 5.187 8.625 8.625M13.813 5.187l-8.625 8.625"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-close.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M15.656 8 8 15.656M15.656 15.656 8 8"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-color-lut.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-color-lut</title>
+    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-58, -175)">
+            <g id="icon-color-lut" transform="translate(58, 175)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <g id="Group-3" transform="translate(7, 6)">
+                    <polygon id="Path-4" fill="#3378C8" points="5.3653608 15.2885085 12.1735461 7.20931345 13.2130397 11.248911 11.2982009 14.5315772 7.60883934 15.7670603"></polygon>
+                    <polygon id="Path-3" fill="#21DC55" points="2.90861351 14.1910201 10.8161464 4.93194681 12.0148357 7.26808935 5.07756073 15.5719157"></polygon>
+                    <polygon id="Path-2" fill="#E6FF00" points="1.11114723 11.6564599 8.96449984 2.52781588 9.14436752 2.35441261 10.65568 4.86937719 2.6199892 14.3240977"></polygon>
+                    <path d="M0.654581374,10.5573035 L1.07159836,7.1163035 L3.45887024,3.82405096 L6.90861351,0 L8.67637665,2.14325052 C3.73187398,8.46470975 1.14061179,11.7502697 0.902590102,11.9999304 C0.664568411,12.2495912 0.581898835,11.7687155 0.654581374,10.5573035 Z" id="Path-5" fill="#E60000"></path>
+                    <g id="Group" transform="translate(6.6939, 9.3583) rotate(40) translate(-6.6939, -9.3583)translate(3.4103, 2.8577)" stroke="#041C4A" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25">
+                        <line x1="0.5" y1="11.5" x2="0.5" y2="2.19671376e-13" id="Path"></line>
+                        <line x1="3.420153" y1="0.250185845" x2="3.420153" y2="13.0011428" id="Path"></line>
+                        <line x1="6.06728889" y1="0.867657175" x2="6.06728889" y2="11.7034832" id="Path"></line>
+                    </g>
+                    <path d="M7.52683573,0.255234787 C7.36570938,0.0922486197 7.14226748,0 6.90861351,0 C6.67495954,0 6.45151764,0.0922486197 6.29039129,0.255234787 C5.12761351,1.43158261 0.408613509,6.42775653 0.408613509,10.086887 C0.408613509,13.5449739 3.31844684,15.9999304 6.90861351,15.9999304 C10.4987802,15.9999304 13.4086135,13.5449739 13.4086135,10.086887 C13.4086135,6.42775653 8.68961351,1.43158261 7.52683573,0.255234787 Z" id="Path" stroke="#E1E1E1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-delete.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10.25px" height="10.25px" viewBox="0 0 10.25 10.25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-delete</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-254.875, -64.875)">
+            <g id="icon-delete" transform="translate(250, 60)">
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+                <g id="Group-31" transform="translate(5, 5)" stroke="#348CFD" stroke-linecap="round" stroke-width="1.25">
+                    <g id="Group-30">
+                        <line x1="0.5" y1="0.5" x2="9.5" y2="9.5" id="Line-4"></line>
+                        <line x1="0.5" y1="0.5" x2="9.5" y2="9.5" id="Line-4" transform="translate(5, 5) scale(-1, 1) translate(-5, -5)"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-disclosure-close.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="8.88756485px" height="5.15088921px" viewBox="0 0 8.88756485 5.15088921" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-disclosure-close</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-115.6464, -67.6464)">
+            <g id="icon-disclosure-close" transform="translate(110, 60)">
+                <polyline id="Path-2" stroke="#348CFD" points="6 8 10.090229 12.090229 14.1804581 8"></polyline>
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-disclosure-open.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="5.15088921px" height="8.88756485px" viewBox="0 0 5.15088921 8.88756485" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-disclosure-open</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-152.338, -65.6013)">
+            <g id="icon-disclosure-open" transform="translate(145, 60)">
+                <polyline id="Path-2" stroke="#348CFD" transform="translate(10.0902, 10.0451) rotate(90) translate(-10.0902, -10.0451)" points="6 8 10.090229 12.090229 14.1804581 8"></polyline>
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-display-settings.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="15.7826087px" height="15.7826087px" viewBox="0 0 15.7826087 15.7826087" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-display-settings</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Segmentation---assets" transform="translate(-42.127, -62.1087)" stroke="#348CFD">
+            <g id="icon-display-settings" transform="translate(40, 60)">
+                <circle id="Oval" cx="10" cy="4.34782609" r="1.73913043"></circle>
+                <line x1="11.7373913" y1="4.34782609" x2="17.4095652" y2="4.34782609" id="Path"></line>
+                <line x1="2.62695652" y1="4.34782609" x2="8.2573913" y2="4.34782609" id="Path"></line>
+                <g id="Group-26" transform="translate(10.0183, 10) scale(-1, 1) translate(-10.0183, -10)translate(2.627, 8.2609)">
+                    <circle id="Oval" transform="translate(3.8948, 1.7391) scale(-1, 1) translate(-3.8948, -1.7391)" cx="3.89478261" cy="1.73913043" r="1.73913043"></circle>
+                    <line x1="5.63043478" y1="1.73913043" x2="14.7826087" y2="1.73913043" id="Path" transform="translate(10.2065, 1.7391) scale(-1, 1) translate(-10.2065, -1.7391)"></line>
+                    <line x1="0" y1="1.73913043" x2="2.15217391" y2="1.73913043" id="Path" transform="translate(1.0761, 1.7391) scale(-1, 1) translate(-1.0761, -1.7391)"></line>
+                </g>
+                <circle id="Oval" cx="8.26086957" cy="15.6521739" r="1.73913043"></circle>
+                <line x1="9.99652174" y1="15.6521739" x2="17.4095652" y2="15.6521739" id="Path"></line>
+                <line x1="2.62695652" y1="15.6521739" x2="6.52173913" y2="15.6521739" id="Path"></line>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-more-menu.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-more-menu</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-286, -61)">
+            <g id="icon-more-menu" transform="translate(285, 60)">
+                <g id="Group-28" transform="translate(1, 1)">
+                    <circle id="Oval" fill="#348CFD" cx="5.625" cy="9" r="1.125"></circle>
+                    <circle id="Oval" fill="#348CFD" cx="9" cy="9" r="1.125"></circle>
+                    <circle id="Oval" fill="#348CFD" cx="12.375" cy="9" r="1.125"></circle>
+                    <circle id="Oval" stroke="#348CFD" cx="9" cy="9" r="8.5"></circle>
+                </g>
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-mpr-alt.svg

@@ -0,0 +1,9 @@
+<svg width="19" height="19" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" stroke="currentColor" fill-rule="evenodd">
+        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m9.75.5-8.5 3.719 8.5 3.718 8.5-3.718z"/>
+            <path d="M1.25 4.219v10.093l8.5 3.72 8.5-3.72V4.22M9.75 7.938v10.093"/>
+        </g>
+        <path fill="currentColor" d="M1.25 4.576v9.736l8.05 3.72.45-10.095z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-multiple-patients.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-multiple-patients</title>
+    <g id="4D-assets---final" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-171, -280)">
+            <g id="icon-multiple-patients" transform="translate(171, 280)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <g id="Group-3" transform="translate(2, 1.5)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
+                    <g id="patient-icon" transform="translate(9, 10)">
+                        <circle id="Oval" cx="7.5" cy="7.5" r="7.5"></circle>
+                        <path d="M2.331,12.935 C3.39163827,12.4490078 4.47638164,12.0174468 5.581,11.642 C6.189,11.416 6.09,9.827 5.82,9.531 C4.95198021,8.59033128 4.52668888,7.3239163 4.651,6.05 C4.5727272,5.23902161 4.83519788,4.43201369 5.37555564,3.82223826 C5.9159134,3.21246283 6.68549454,2.85483523 7.5,2.835 C8.31450546,2.85483523 9.0840866,3.21246283 9.62444436,3.82223826 C10.1648021,4.43201369 10.4272728,5.23902161 10.349,6.05 C10.4733111,7.3239163 10.0480198,8.59033128 9.18,9.531 C8.91,9.831 8.811,11.416 9.419,11.642 C10.5236184,12.0174468 11.6083617,12.4490078 12.669,12.935" id="Path"></path>
+                    </g>
+                    <g id="patient-icon">
+                        <path d="M7.5,0 C11.6421356,0 15,3.35786438 15,7.5 C15,8.48189915 14.8113103,9.41972745 14.4682129,10.2792028 C12.213795,10.9117859 10.3898771,12.5712406 9.53178711,14.7207972 C8.88630634,14.9028658 8.20449663,15 7.5,15 C3.35786438,15 0,11.6421356 0,7.5 C0,3.35786438 3.35786438,0 7.5,0 Z" id="Combined-Shape"></path>
+                        <path d="M2.331,12.935 C3.39163827,12.4490078 4.47638164,12.0174468 5.581,11.642 C6.189,11.416 6.09,9.827 5.82,9.531 C4.95198021,8.59033128 4.52668888,7.3239163 4.651,6.05 C4.5727272,5.23902161 4.83519788,4.43201369 5.37555564,3.82223826 C5.9159134,3.21246283 6.68549454,2.85483523 7.5,2.835 C8.31450546,2.85483523 9.0840866,3.21246283 9.62444436,3.82223826 C10.1648021,4.43201369 10.4272728,5.23902161 10.349,6.05 C10.4733111,7.3239163 10.0480198,8.59033128 9.18,9.531 C8.91,9.831 8.811,11.416 9.419,11.642 C10.5236184,12.0174468 10.5236184,12.0174468 10.9701462,12.2764988" id="Path"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-next-inactive.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
+        <circle stroke="#1C498E" stroke-width=".5" cx="7.5" cy="7.5" r="7.5"/>
+        <path fill="#1C498E" fill-rule="nonzero" d="M6.504 3 5.5 4.004l3.259 3.259L5.5 10.52l1.004 1.004 4.263-4.262z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-next.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
+        <circle stroke="#348CFD" stroke-width=".5" cx="7.5" cy="7.5" r="7.5"/>
+        <path fill="#348CFD" fill-rule="nonzero" d="M6.504 3 5.5 4.004l3.259 3.259L5.5 10.52l1.004 1.004 4.263-4.262z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-patient.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-patient</title>
+    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-104, -235)">
+            <g id="icon-patient" transform="translate(104, 235)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <circle id="Oval" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" cx="14" cy="14" r="9"></circle>
+                <path d="M7.7972,20.522 C9.06996592,19.9388093 10.371658,19.4209361 11.6972,18.9704 C12.4268,18.6992 12.308,16.7924 11.984,16.4372 C10.9423763,15.3083975 10.4320267,13.7886996 10.5812,12.26 C10.4872726,11.2868259 10.8022375,10.3184164 11.4506668,9.58668591 C12.0990961,8.8549554 13.0225934,8.42580227 14,8.402 C14.9774066,8.42580227 15.9009039,8.8549554 16.5493332,9.58668591 C17.1977625,10.3184164 17.5127274,11.2868259 17.4188,12.26 C17.5679733,13.7886996 17.0576237,15.3083975 16.016,16.4372 C15.692,16.7972 15.5732,18.6992 16.3028,18.9704 C17.628342,19.4209361 18.9300341,19.9388093 20.2028,20.522" id="Path" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-pause.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" fill="currentColor" fill-rule="nonzero"/>
+        <path d="M0 0h24v24H0z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-play.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h24v24H0z"/>
+        <path d="M6 6.597a.597.597 0 0 1 .864-.534l11.806 5.903a.597.597 0 0 1 0 1.068L6.864 18.937A.597.597 0 0 1 6 18.403V6.597z" fill="currentColor"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-prev-inactive.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(-1 0 0 1 16 1)" fill="none" fill-rule="evenodd">
+        <circle stroke="#1C498E" stroke-width=".5" cx="7.5" cy="7.5" r="7.5"/>
+        <path fill="#1C498E" fill-rule="nonzero" d="M6.504 3 5.5 4.004l3.259 3.259L5.5 10.52l1.004 1.004 4.263-4.262z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-prev.svg

@@ -0,0 +1,6 @@
+<svg width="17" height="17" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
+    <g transform="matrix(-1 0 0 1 16 1)" fill="none" fill-rule="evenodd">
+        <circle stroke="#348CFD" stroke-width=".5" cx="7.5" cy="7.5" r="7.5"/>
+        <path fill="#348CFD" fill-rule="nonzero" d="M6.504 3 5.5 4.004l3.259 3.259L5.5 10.52l1.004 1.004 4.263-4.262z"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-rename.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12.8339446px" height="12.73108px" viewBox="0 0 12.8339446 12.73108" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-rename</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-218.9974, -64)">
+            <g id="icon-rename" transform="translate(215, 60)">
+                <rect id="Rectangle" x="0" y="0" width="20" height="20"></rect>
+                <g id="Group-29" transform="translate(5, 5)" stroke="#348CFD" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M7.62511295,0.871568536 L9.85691246,3.10336805 L2.82291656,10.1381292 L-0.897323283,11.6258043 L0.590351811,7.90556444 L7.62511295,0.871568536 Z" id="Path"></path>
+                    <path d="M9.75273119,-0.5 C10.1567445,-0.5 10.5607578,-0.345874112 10.8690096,-0.0376223372 C11.1772614,0.270629438 11.3313873,0.674642763 11.3313873,1.07865609 C11.3313873,1.48266941 11.1772614,1.88668274 10.8688429,2.19510116 L9.75256454,3.31032741 L7.52105985,1.07882272 L8.63645277,-0.0376223372 C8.94470454,-0.345874112 9.34871787,-0.5 9.75273119,-0.5 Z" id="Path"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-search.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M0 0h18v18H0z"/>
+        <g transform="translate(1 1)" stroke="#348CFD" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <circle cx="5.565" cy="5.565" r="5.565"/>
+            <path d="M9.5 9.5 16 16"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-settings.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-settings</title>
+    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-211, -235)">
+            <g id="icon-settings" transform="translate(211, 235)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <path d="M20.2015688,10.2525279 C20.0232123,10.6274217 20.0120959,11.0603422 20.1709774,11.4438954 C20.3298588,11.8274487 20.6438515,12.1256974 21.0350638,12.2646554 L22.0250838,12.6168364 C22.6105106,12.8246232 23.00167,13.3785255 23.00167,13.9997339 C23.00167,14.6209423 22.6105106,15.1748446 22.0250838,15.3826314 L21.0350638,15.7348124 C20.6438515,15.8737704 20.3298588,16.1720191 20.1709774,16.5555724 C20.0120959,16.9391256 20.0232123,17.3720461 20.2015688,17.7469399 L20.6539257,18.6946982 C20.9219287,19.2558525 20.8071211,19.9250005 20.367394,20.3647276 C19.9276669,20.8044547 19.2585189,20.9192624 18.6973645,20.6512594 L17.748041,20.2004677 C17.3731472,20.0221111 16.9402267,20.0109948 16.5566735,20.1698763 C16.1731202,20.3287577 15.8748715,20.6427504 15.7359135,21.0339627 L15.3837325,22.0239827 C15.1756233,22.6088399 14.6220059,22.9994678 14.0012263,22.9994678 C13.3804467,22.9994678 12.8268293,22.6088399 12.6187202,22.0239827 L12.2665391,21.0339627 C12.127404,20.6426994 11.8290064,20.3287067 11.4453321,20.1698369 C11.0616578,20.0109671 10.6286351,20.0220972 10.253629,20.2004677 L9.30587073,20.6512594 C8.7446872,20.9203194 8.07479926,20.8059063 7.63473092,20.365838 C7.19466259,19.9257696 7.08024945,19.2558817 7.34930952,18.6946982 L7.80010123,17.7453747 C7.97845774,17.3704809 7.98957409,16.9375604 7.83069263,16.5540071 C7.67181118,16.1704539 7.35781846,15.8722052 6.96660615,15.7332471 L5.97658618,15.3810661 C5.39115942,15.1732793 5,14.619377 5,13.9981686 C5,13.3769603 5.39115942,12.8230579 5.97658618,12.6152712 L6.96660615,12.2630902 C7.35740035,12.124078 7.67105878,11.8260915 7.82990186,11.4429292 C7.98874494,11.0597669 7.97791757,10.6272622 7.80010123,10.2525279 L7.34930952,9.30320437 C7.08024945,8.74202085 7.19466259,8.0721329 7.63473092,7.63206456 C8.07479926,7.19199623 8.7446872,7.07758309 9.30587073,7.34664317 L10.2551942,7.79743487 C10.6298363,7.97533367 11.0622628,7.98639209 11.445508,7.82787471 C11.8287532,7.66935733 12.1270239,7.35606892 12.2665391,6.96550504 L12.6187202,5.97548507 C12.8268293,5.39062793 13.3804467,5 14.0012263,5 C14.6220059,5 15.1756233,5.39062793 15.3837325,5.97548507 L15.7359135,6.96550504 C15.8748715,7.35671735 16.1731202,7.67071008 16.5566735,7.82959153 C16.9402267,7.98847298 17.3731472,7.97735664 17.748041,7.79900012 L18.6973645,7.34664317 C19.2585189,7.07864018 19.9276669,7.19344783 20.367394,7.63317492 C20.8071211,8.07290202 20.9219287,8.74204999 20.6539257,9.30320437 L20.2015688,10.2525279 Z" id="Path" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
+                <circle id="Oval" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" cx="14.000835" cy="13.9997339" r="3.52181017"></circle>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-status-alert.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="evenodd">
+        <path d="M24 11.794c.017 6.667-5.333 12.108-12 12.205a11.823 11.823 0 0 1-12-11.79C-.019 5.541 5.331.1 12 .001a11.824 11.824 0 0 1 12 11.793z" fill="#B70D11"/>
+        <g stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+            <path d="M11.494 17.158a.245.245 0 0 0-.241.255.254.254 0 0 0 .253.245h0a.246.246 0 0 0 .241-.255.253.253 0 0 0-.244-.245h-.005M11.503 13V6"/>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-tool-scissor.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24.2500949px" height="20.25px" viewBox="0 0 24.2500949 20.25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-tool-scissor</title>
+    <g id="Artboards" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Segmentation---assets" transform="translate(-126.375, -107.375)">
+            <g id="icon-tool-scissor" transform="translate(126, 105)">
+                <rect id="Rectangle" x="0" y="0" width="25" height="25"></rect>
+                <g id="scissors-2" transform="translate(1, 3)" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25">
+                    <circle id="Oval" cx="3.5" cy="3.5" r="3.5"></circle>
+                    <path d="M10.648,8.232 L23,15.587 C22.3744808,16.5550109 21.1109418,16.8812258 20.095,16.337 L4.154,6.939" id="Path"></path>
+                    <circle id="Oval" cx="3.5" cy="15.5" r="3.5"></circle>
+                    <path d="M12.779,9.501 L23,3.414 C22.3747822,2.44557124 21.1108803,2.11926264 20.095,2.664 L4.154,12.061" id="Path"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-toolbar-back.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="28px" height="29px" viewBox="0 0 28 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon-toolbar-back</title>
+    <g id="Production" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Artboard" transform="translate(-56, -234)">
+            <g id="icon-toolbar-back" transform="translate(56, 234.5)">
+                <rect id="Rectangle" x="0" y="0" width="28" height="28"></rect>
+                <path d="M15.7247114,7.29289322 C16.1152357,6.90236893 16.7484007,6.90236893 17.138925,7.29289322 C17.4994089,7.65337718 17.5271385,8.22060824 17.2221136,8.61289944 L17.138925,8.70710678 L11.9132727,13.9312727 L17.138925,19.1565296 C17.4994089,19.5170135 17.5271385,20.0842446 17.2221136,20.4765358 L17.138925,20.5707431 C16.778441,20.9312271 16.2112099,20.9589566 15.8189187,20.6539318 L15.7247114,20.5707431 L9.79289322,14.638925 C9.43240926,14.278441 9.40467972,13.7112099 9.70970461,13.3189187 L9.79289322,13.2247114 L15.7247114,7.29289322 Z" id="back" fill="currentColor"></path>
+            </g>
+        </g>
+    </g>
+</svg>

platform/ui/assets/images/icon-transferring.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="16" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="#5ACCE6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <path d="m1 6.467 2.222 3.31 2.556-3.06M19 9.898l-2.22-3.311-2.558 3.061"/>
+        <path d="M16.75 6.617a6.876 6.876 0 0 1-5.192 7.758A6.773 6.773 0 0 1 5.234 12.6M3.226 9.758a7.06 7.06 0 0 1 5.213-8.575 6.773 6.773 0 0 1 6.638 2.107"/>
+    </g>
+</svg>

platform/ui/assets/images/icon-upload.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(1 1)" stroke="#348CFD" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="8" cy="8" r="8"/>
+        <path d="M8 3.273v9.454M4 7.273l4-4 4 4"/>
+    </g>
+</svg>

platform/ui/assets/images/icons-alert-outline.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+    <g stroke="#5ACCE6" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M16 7.863a8.117 8.117 0 0 1-8 8.136 7.882 7.882 0 0 1-8-7.86A8.117 8.117 0 0 1 8 .002a7.883 7.883 0 0 1 8 7.862z" stroke-width="1.5"/>
+        <g stroke-width="2">
+            <path d="M7.827 12.439a.313.313 0 0 0-.174.05c-.045.033-.07.076-.067.12.005.09.117.163.253.163h0c.066 0 .129-.02.174-.051.046-.032.07-.075.067-.12-.004-.088-.11-.16-.244-.162h-.005M7.836 8.667V4"/>
+        </g>
+    </g>
+</svg>