Chore/kill yalc with fire (#629)

* init * more shifting * Move @babel dependencies up to workspace root * Begin updating dependent libraries to use sync'd webpack builds w/ watches * Commit changes before a long weekend * Split packages into platform and extensions * Consolidate how/where we specify file/module type entrypoints * Make it possible to pass in extensions as App props * Resolve viewer's modules * Target for UMD bundle * Add Webpack Stylus loader * Provide WebPack build options for microscopy, vtk, and ui * Better entrypoint for extensions * Push changes up to switch PCs * Fix ESM symlink build for Viewers * Shift docs to root * Specify additional lerna config props * Begin providing basic readme info * Rename example extension folder * Shift links to bottom of doc * First attempt at a netlify deploy preview * Attempt to fix deploy preview build * push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands * Try to use global gitbook-cli * Export node_modules path * More agressive with modifying PATH * Follow deploy log output advice * try again to set bin path * Try swapping bash with a new shell * Try bash -l instead of exec bash * Annd let's try again * and again * We may have figured it out johnny, boy * We need to pull cornerstone-wado-image-loader files from hoisted node_modules * Attempt to fix ticks/escapes * Change copy syntax; try running tests on viewers from root for circleci * Lower version to match circleci image * Try alternative jest-canvas-mock location and version file syntax * Run version command instead of calling node directly * Try alternative jest transform * Set path and enable workspaces * Add codecov flags * Use cpx so our copying finishes? * Get all platform unit tests to run * Run and report individually and in parallel * Try once relying on codecov yaml to split w/ flags * Add projects to split by flags * Generate separate reports * Trigger codecov after everything has finished running; these may not support flags * Use recommended flags from issue comments for codecov * Fix typo * Remove clear flag * Shift back to calling codecov from root * Generate example for codecov issue * Try fixing paths * Simplify * Try using codecov orb * Bump circleci version * Upload core and viewer * Use full string paths * Remove individual codecov calls * Fix dir * Combine files before upload * Escape anchors * tryfix syntax * Escape string literal * Combine lines to reduce path * long paths * Use home alias * Fix filename * Try to see the contents of our cat'd file * Also upload `core` * Try running with aliased folder * Fix path; split PR and Merge unit tests into separate jobs * Set default threshold * Fix typo * Changing to scoped package names * Adding note * Catch more updates * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.0 - @ohif/extension-dicom-html@0.0.4-alpha.0 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0 - @ohif/extension-dicom-pdf@0.0.8-alpha.0 - @ohif/extension-vtk@0.1.4-alpha.0 - @ohif/core@0.11.1-alpha.0 - @ohif/i18n@0.2.3-alpha.0 - @ohif/ui@0.2.18-alpha.0 - @ohif/viewer@0.0.22-alpha.0 * Clean up primary readme * Support for dev and dev:* commands * Shift build command; satisfy default PWA build * Remove old scripts * Clean up UI to set webpack scripts * Tidy up project links * Clean duplicate code in UI project * Update UI project's docs * Clean up ui and i18n config * Reduce duplicate code in `@ohif/core` * Fix @ohif/ui versions * bump @ohif/core versions * Redux testkit dep * Remove unused/duplicate config files for projects/packages * ohif-core --> @ohif/core * Safer publish command * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.1 - @ohif/extension-dicom-html@0.0.4-alpha.1 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1 - @ohif/extension-dicom-pdf@0.0.8-alpha.1 - @ohif/extension-vtk@0.1.4-alpha.1 - @ohif/core@0.11.1-alpha.1 - @ohif/i18n@0.2.3-alpha.1 - @ohif/ui@0.2.18-alpha.1 - @ohif/viewer@0.0.22-alpha.1 * test version bump * Add global prettier config * chore(release): publish %s [skip ci] - @ohif/viewer@0.0.22-alpha.2 * test lerna publish * Update package.jsons * Fix build scripts * catch changes * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.2 - @ohif/extension-dicom-html@0.0.4-alpha.2 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2 - @ohif/extension-dicom-pdf@0.0.8-alpha.2 - @ohif/extension-vtk@0.1.4-alpha.2 - @ohif/core@0.11.1-alpha.2 - @ohif/i18n@0.2.3-alpha.2 - @ohif/ui@0.2.18-alpha.2 - @ohif/viewer@0.0.22-alpha.3 * fix eslint issues caused by eslint 6 and our react-app config * Publish with canary tag * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.3 - @ohif/extension-dicom-html@0.0.4-alpha.3 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3 - @ohif/extension-dicom-pdf@0.0.8-alpha.3 - @ohif/extension-vtk@0.1.4-alpha.3 - @ohif/core@0.11.1-alpha.3 - @ohif/i18n@0.2.3-alpha.3 - @ohif/ui@0.2.18-alpha.3 - @ohif/viewer@0.0.22-alpha.4 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.4 - @ohif/extension-dicom-html@0.0.4-alpha.4 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4 - @ohif/extension-dicom-pdf@0.0.8-alpha.4 - @ohif/extension-vtk@0.1.4-alpha.4 - @ohif/core@0.11.1-alpha.4 - @ohif/i18n@0.2.3-alpha.4 - @ohif/ui@0.2.18-alpha.4 - @ohif/viewer@0.0.22-alpha.5 * Simplify build * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.5 - @ohif/extension-dicom-html@0.0.4-alpha.5 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5 - @ohif/extension-dicom-pdf@0.0.8-alpha.5 - @ohif/extension-vtk@0.1.4-alpha.5 - @ohif/core@0.11.1-alpha.5 - @ohif/i18n@0.2.3-alpha.5 - @ohif/ui@0.2.18-alpha.5 - @ohif/viewer@0.0.22-alpha.6 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.6 - @ohif/extension-dicom-html@0.0.4-alpha.6 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6 - @ohif/extension-dicom-pdf@0.0.8-alpha.6 - @ohif/extension-vtk@0.1.4-alpha.6 - @ohif/core@0.11.1-alpha.6 - @ohif/i18n@0.2.3-alpha.6 - @ohif/ui@0.2.18-alpha.6 - @ohif/viewer@0.0.22-alpha.7 * Split version and publish * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.7 - @ohif/extension-dicom-html@0.0.4-alpha.7 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7 - @ohif/extension-dicom-pdf@0.0.8-alpha.7 - @ohif/extension-vtk@0.1.4-alpha.7 - @ohif/core@0.11.1-alpha.7 - @ohif/i18n@0.2.3-alpha.7 - @ohif/ui@0.2.18-alpha.7 - @ohif/viewer@0.0.22-alpha.8 * Try simplify netlify build * react-viewerbase --> @ohif/ui * add test for stylus loader * Try new way to specify publish path * Use an output folder that won't be ignored * Try move command * fiddle with paths * Dig for some information * Make sure we're in root for our commands * Remove discovery * Setup script-tag example * Fix typo * Move config folder * Update cornerstone extension to use shared/root webpack configs * capture changes * Update extension webpack configs * Don't check in docz output * Fix babel runtime resolution issue * Simplify ui build steps * Push in progress * Shift directories * Get viewer dev path to work * Fix viewer commonjs build * Fix build pwa config for viewers * Make sure our package specific command can be called from root * Update notes * Fix imports and misc. merge notes * Bump wado-image-loader version * Switch up commands to remove webworkers copy * Fix CI config * Fix more broken package references * Add react-dropzone * Persist so e2e test can use * Fix lockfile * Use cypress orb to simplify CI * Fix config * Try again * Install yarn latest for orb * Install yarn a different way * Wait on correct port * Run tests in viewer project * Fix cypress config * Make Cypress happier - use default location * Simplify e2e testing * Capture UI changes since fork * Catch core up * Grab latest deps after merge * Fix broken import * Make sure cornerstone-wado-image-loader resolves to 3+ * Note regarding orbs * Fix refresh on 404 routes * Fix odd error for cornerstone-wado-image-loader * Different target for UMD * Simplify dev script * Try to get fancy with netlify output * Let's do it again * Try to fix measurementTools issue * See if we can get our lerna magic to work on merge to monorepo branch
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,16 @@
+const path = require('path');
+const merge = require('webpack-merge');
+const webpackCommon = require('./../../../.webpack/webpack.common.js');
+
+//
+const SRC_DIR = path.join(__dirname, '../src');
+const DIST_DIR = path.join(__dirname, '../dist');
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+
+  return merge(commonConfig, {
+    // https://webpack.js.org/configuration/mode/#mode-development
+    mode: 'development',
+  });
+};
@@ -0,0 +1,39 @@
+const merge = require('webpack-merge');
+const path = require('path');
+const webpackCommon = require('./../../../.webpack/webpack.common.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');
+
+module.exports = (env, argv) => {
+  const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR });
+
+  return merge(commonConfig, {
+    // https://webpack.js.org/configuration/mode/#mode-production
+    mode: 'production',
+    devtool: 'source-map',
+    stats: {
+      colors: true,
+      hash: true,
+      timings: true,
+      assets: true,
+      chunks: false,
+      chunkModules: false,
+      modules: false,
+      children: false,
+      warnings: true,
+    },
+    optimization: {
+      minimize: true,
+      sideEffects: true,
+    },
+    output: {
+      path: ROOT_DIR,
+      library: 'ohifExtensionDicomHtml',
+      libraryTarget: 'umd',
+      filename: pkg.main,
+    },
+  });
+};
@@ -0,0 +1,61 @@
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.7](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.6...@ohif/extension-dicom-html@0.0.4-alpha.7) (2019-08-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.6](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.5...@ohif/extension-dicom-html@0.0.4-alpha.6) (2019-08-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.5](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.4...@ohif/extension-dicom-html@0.0.4-alpha.5) (2019-08-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.4](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.3...@ohif/extension-dicom-html@0.0.4-alpha.4) (2019-08-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.3](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.2...@ohif/extension-dicom-html@0.0.4-alpha.3) (2019-08-08)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.0.4-alpha.2](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.1...@ohif/extension-dicom-html@0.0.4-alpha.2) (2019-08-07)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+## [0.0.4-alpha.1](https://github.com/OHIF/Viewers/compare/@ohif/extension-dicom-html@0.0.4-alpha.0...@ohif/extension-dicom-html@0.0.4-alpha.1) (2019-08-07)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
+
+## 0.0.4-alpha.0 (2019-08-05)
+
+**Note:** Version bump only for package @ohif/extension-dicom-html
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Open Health Imaging Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1 @@
+# @ohif/extension-dicom-html
@@ -0,0 +1 @@
+:root{--text-color-primary:#fff}.DicomHtmlViewport{padding:20px;overflow-y:scroll;width:100%;height:100%;color:#fff;color:var(--text-color-primary)}
@@ -0,0 +1,39 @@
+{
+  "name": "@ohif/extension-dicom-html",
+  "version": "0.0.4-alpha.7",
+  "description": "OHIF extension for rendering structured reports to HTML",
+  "author": "OHIF",
+  "license": "MIT",
+  "repository": "OHIF/Viewers",
+  "main": "dist/index.umd.js",
+  "module": "src/index.js",
+  "engines": {
+    "node": ">=8",
+    "npm": ">=5"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "webpack --config .webpack/webpack.dev.js --watch --debug --output-pathinfo",
+    "dev:dicom-html": "yarn run dev",
+    "build": "webpack --config .webpack/webpack.prod.js",
+    "build:package": "yarn run build",
+    "prepublishOnly": "yarn run build",
+    "start": "yarn run dev"
+  },
+  "peerDependencies": {
+    "@ohif/core": "^0.11.1-alpha.0",
+    "dcmjs": "^0.3.3",
+    "prop-types": "^15.6.2",
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.5.5"
+  }
+}
@@ -0,0 +1,11 @@
+:root {
+  --text-color-primary: white;
+}
+
+.DicomHtmlViewport {
+  padding: 20px;
+  overflow-y: scroll;
+  width: 100%;
+  height: 100%;
+  color: var(--text-color-primary);
+}
@@ -0,0 +1,242 @@
+import React, { Component } from 'react';
+import * as dcmjs from 'dcmjs';
+import TypedArrayProp from './TypedArrayProp';
+import './DicomHtmlViewport.css';
+
+function getRelationshipString(data) {
+  switch (data.RelationshipType) {
+    case 'HAS CONCEPT MOD':
+      return 'Concept modifier: ';
+    case 'HAS OBS CONTEXT':
+      return 'Observation context: ';
+    default:
+      return '';
+  }
+}
+
+const getMeaningString = data => {
+  if (data.ConceptNameCodeSequence) {
+    const { CodeMeaning } = data.ConceptNameCodeSequence;
+
+    return `${CodeMeaning} = `;
+  }
+
+  return '';
+};
+
+function getValueString(data) {
+  switch (data.ValueType) {
+    case 'CODE':
+      const {
+        CodeMeaning,
+        CodeValue,
+        CodingSchemeDesignator
+      } = data.ConceptNameCodeSequence;
+
+      return `${CodeMeaning} (${CodeValue}, ${CodingSchemeDesignator})`;
+
+    case 'PNAME':
+      return data.PersonName;
+
+    case 'TEXT':
+      return data.TextValue;
+
+    case 'UIDREF':
+      return data.UID;
+
+    case 'NUM':
+      const { MeasuredValueSequence } = data;
+      const numValue = MeasuredValueSequence.NumericValue;
+      const codeValue =
+        MeasuredValueSequence.MeasurementUnitsCodeSequence.CodeValue;
+      return `${numValue} ${codeValue}`;
+  }
+}
+
+function constructPlainValue(data) {
+  const value = getValueString(data);
+
+  if (value) {
+    return getRelationshipString(data) + getMeaningString(data) + value;
+  }
+}
+
+function constructContentSequence(data, header) {
+  if (!data.ContentSequence) {
+    return;
+  }
+
+  const items = data.ContentSequence.map(item => parseContent(item)).filter(
+    item => item
+  );
+
+  if (!items.length) {
+    return;
+  }
+
+  const result = {
+    items
+  };
+
+  if (header) {
+    result.header = header;
+  }
+
+  return result;
+}
+
+function parseContent(data) {
+  if (data.ValueType) {
+    if (data.ValueType === 'CONTAINER') {
+      const header = data.ConceptNameCodeSequence.CodeMeaning;
+
+      return constructContentSequence(data, header);
+    }
+
+    return constructPlainValue(data);
+  }
+
+  if (data.ContentSequence) {
+    return constructContentSequence(data);
+  }
+}
+
+const { DicomMetaDictionary, DicomMessage } = dcmjs.data;
+
+function getMainData(data) {
+  const root = [];
+
+  const patientValue = `${data.PatientName} (${data.PatientSex}, #${
+    data.PatientID
+  })`;
+  root.push(getMainDataItem('Patient', patientValue));
+
+  const studyValue = data.StudyDescription;
+  root.push(getMainDataItem('Study', studyValue));
+
+  const seriesValue = `${data.SeriesDescription} (#${data.SeriesNumber})`;
+  root.push(getMainDataItem('Series', seriesValue));
+
+  const manufacturerValue = `${data.Manufacturer} (${
+    data.ManufacturerModelName
+  }, #${data.DeviceSerialNumber})`;
+
+  root.push(getMainDataItem('Manufacturer', manufacturerValue));
+
+  const mainDataObjects = {
+    CompletionFlag: 'Completion flag',
+    VerificationFlag: 'Verification flag'
+  };
+
+  Object.keys(mainDataObjects).forEach(key => {
+    if (!data[key]) {
+      return;
+    }
+
+    const item = getMainDataItem(mainDataObjects[key], data[key]);
+
+    root.push(item);
+  });
+
+  // TODO: Format these dates
+  const contentDateTimeValue = `${data.ContentDate} ${data.ContentTime}`;
+  root.push(getMainDataItem('Content Date/Time', contentDateTimeValue));
+
+  root.push();
+
+  return <div>{root}</div>;
+}
+
+const getContentSequence = (data, level = 1) => {
+  let header;
+
+  if (data.ConceptNameCodeSequence) {
+    const {
+      CodeMeaning,
+      CodeValue,
+      CodingSchemeDesignator
+    } = data.ConceptNameCodeSequence;
+
+    header = `${CodeMeaning} (${CodeValue} - ${CodingSchemeDesignator})`;
+  }
+
+  const root = [];
+  if (header) {
+    const HeaderDynamicLevel = `h${level}`;
+
+    root.push(<HeaderDynamicLevel key={header}>{header}</HeaderDynamicLevel>);
+  }
+
+  Object.keys(data).forEach(key => {
+    const value = data[key];
+
+    let content;
+    if (value instanceof Object) {
+      content = getContentSequence(value, level + 1);
+    } else {
+      content = (
+        <div key={key}>
+          {key} - {data[key]}
+        </div>
+      );
+    }
+
+    root.push(content);
+  });
+
+  return <div>{root}</div>;
+};
+
+function getMainDataItem(key, value) {
+  return (
+    <div key={key}>
+      <b>{key}</b>: {value}
+    </div>
+  );
+}
+
+class DicomHtmlViewport extends Component {
+  state = {
+    content: null,
+    error: null
+  };
+
+  static propTypes = {
+    byteArray: TypedArrayProp.uint8
+  };
+
+  componentDidMount() {
+    const dataSet = this.setContentFromByteArray(this.props.byteArray);
+  }
+
+  setContentFromByteArray(byteArray) {
+    const arrayBuffer = byteArray.buffer;
+    const dicomData = DicomMessage.readFile(arrayBuffer);
+    const dataset = DicomMetaDictionary.naturalizeDataset(dicomData.dict);
+    dataset._meta = DicomMetaDictionary.namifyDataset(dicomData.meta);
+
+    const mainData = getMainData(dataset);
+    const contentSequence = getContentSequence(dataset);
+    const content = (
+      <>
+        {mainData}
+        {contentSequence}
+      </>
+    );
+
+    this.setState({
+      content
+    });
+  }
+
+  render() {
+    return (
+      <div className={'DicomHtmlViewport'}>
+        {this.state.content}
+        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+      </div>
+    );
+  }
+}
+
+export default DicomHtmlViewport;
@@ -0,0 +1,39 @@
+import { MODULE_TYPES, utils } from '@ohif/core';
+
+// TODO: Should probably use dcmjs for this
+const SOP_CLASS_UIDS = {
+  BASIC_TEXT_SR: '1.2.840.10008.5.1.4.1.1.88.11',
+  ENHANCED_SR: '1.2.840.10008.5.1.4.1.1.88.22',
+  COMPREHENSIVE_SR: '1.2.840.10008.5.1.4.1.1.88.33',
+  PROCEDURE_LOG_STORAGE: '1.2.840.10008.5.1.4.1.1.88.40',
+  MAMMOGRAPHY_CAD_SR: '1.2.840.10008.5.1.4.1.1.88.50',
+  CHEST_CAD_SR: '1.2.840.10008.5.1.4.1.1.88.65',
+  X_RAY_RADIATION_DOSE_SR: '1.2.840.10008.5.1.4.1.1.88.67',
+};
+
+const sopClassUids = Object.values(SOP_CLASS_UIDS);
+
+// TODO: Handle the case where there is more than one SOP Class Handler for the
+// same SOP Class
+const OHIFDicomHtmlSopClassHandler = {
+  id: 'OHIFDicomHtmlSopClassHandler',
+  type: MODULE_TYPES.SOP_CLASS_HANDLER,
+  sopClassUids,
+  getDisplaySetFromSeries(series, study, dicomWebClient, authorizationHeaders) {
+    const instance = series.getFirstInstance();
+
+    return {
+      plugin: 'html',
+      modality: 'SR',
+      displaySetInstanceUid: utils.guid(),
+      wadoRoot: study.getData().wadoRoot,
+      wadoUri: instance.getData().wadouri,
+      sopInstanceUid: instance.getSOPInstanceUID(),
+      seriesInstanceUid: series.getSeriesInstanceUID(),
+      studyInstanceUid: study.getStudyInstanceUID(),
+      authorizationHeaders,
+    };
+  },
+};
+
+export default OHIFDicomHtmlSopClassHandler;
@@ -0,0 +1,84 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import DicomHtmlViewport from './DicomHtmlViewport';
+
+class OHIFDicomHtmlViewport extends Component {
+  static propTypes = {
+    studies: PropTypes.object,
+    displaySet: PropTypes.object,
+    viewportIndex: PropTypes.number
+  };
+
+  state = {
+    byteArray: null,
+    error: null
+  };
+
+  componentDidMount() {
+    const { displaySet } = this.props.viewportData;
+    const {
+      studyInstanceUid,
+      seriesInstanceUid,
+      sopInstanceUid,
+      wadoRoot,
+      wadoUri,
+      authorizationHeaders
+    } = displaySet;
+
+    this.retrieveDicomData(
+      studyInstanceUid,
+      seriesInstanceUid,
+      sopInstanceUid,
+      wadoRoot,
+      wadoUri,
+      authorizationHeaders
+    ).then(
+      byteArray => {
+        this.setState({
+          byteArray
+        });
+      },
+      error => {
+        this.setState({
+          error
+        });
+
+        throw new Error(error);
+      }
+    );
+  }
+
+  retrieveDicomData(
+    studyInstanceUid,
+    seriesInstanceUid,
+    sopInstanceUid,
+    wadoRoot,
+    wadoUri,
+    authorizationHeaders
+  ) {
+    // TODO: Passing in a lot of data we aren't using
+
+    // TODO: Authorization header depends on the server. If we ever have multiple servers
+    // we will need to figure out how / when to pass this information in.
+    return fetch(wadoUri, {
+      headers: authorizationHeaders
+    })
+      .then(response => response.arrayBuffer())
+      .then(arraybuffer => {
+        return new Uint8Array(arraybuffer);
+      });
+  }
+
+  render() {
+    return (
+      <>
+        {this.state.byteArray && (
+          <DicomHtmlViewport byteArray={this.state.byteArray} />
+        )}
+        {this.state.error && <h2>{JSON.stringify(this.state.error)}</h2>}
+      </>
+    );
+  }
+}
+
+export default OHIFDicomHtmlViewport;
@@ -0,0 +1,205 @@
+// https://github.com/facebook/prop-types/issues/69
+
+export const TypedArrayProp = {
+  any: (props, propName, componentName) => {
+    let obj = props[propName];
+    if (
+      !(
+        obj instanceof Float64Array ||
+        obj instanceof Float32Array ||
+        obj instanceof Int32Array ||
+        obj instanceof Int16Array ||
+        obj instanceof Int8Array ||
+        obj instanceof Uint32Array ||
+        obj instanceof Uint16Array ||
+        obj instanceof Uint8Array ||
+        obj instanceof Uint8ClampedArray
+      )
+    ) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a typed array.'
+      );
+    }
+  },
+
+  float64: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Float64Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Float64Array.'
+      );
+    }
+  },
+
+  float32: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Float32Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Float32Array.'
+      );
+    }
+  },
+
+  float: (props, propName, componentName) => {
+    if (
+      !(
+        props[propName] instanceof Float64Array ||
+        props[propName] instanceof Float32Array
+      )
+    ) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Float32Array or Float64Array.'
+      );
+    }
+  },
+
+  int32: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Int32Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected an Int32Array.'
+      );
+    }
+  },
+
+  int16: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Int16Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected an In16Array.'
+      );
+    }
+  },
+
+  int8: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Int8Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected an Int8Array.'
+      );
+    }
+  },
+
+  int: (props, propName, componentName) => {
+    if (
+      !(
+        props[propName] instanceof Int32Array ||
+        props[propName] instanceof Int16Array ||
+        props[propName] instanceof Int8Array
+      )
+    ) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected an Int32Array, In16Array, or Int8Array.'
+      );
+    }
+  },
+
+  uint32: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Uint32Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Uint32Array.'
+      );
+    }
+  },
+
+  uint16: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Uint16Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Uint16Array.'
+      );
+    }
+  },
+
+  uint8: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Uint8Array)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Uint8Array.'
+      );
+    }
+  },
+
+  uint8clamped: (props, propName, componentName) => {
+    if (!(props[propName] instanceof Uint8ClampedArray)) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Uint8ClampedArray.'
+      );
+    }
+  },
+
+  uint: (props, propName, componentName) => {
+    if (
+      !(
+        props[propName] instanceof Uint32Array ||
+        props[propName] instanceof Uint16Array ||
+        props[propName] instanceof Uint8Array ||
+        props[propName] instanceof Uint8ClampedArray
+      )
+    ) {
+      return new Error(
+        'Invalid prop `' +
+          propName +
+          '` supplied to' +
+          ' `' +
+          componentName +
+          '`. Expected a Uint32Array, Uint16Array, Uint8Array, or Uint8ClampedArray.'
+      );
+    }
+  }
+};
+
+export { TypedArrayProp as default };
@@ -0,0 +1,16 @@
+import OHIFDicomHtmlSopClassHandler from './OHIFDicomHtmlSopClassHandler.js';
+import OHIFDicomHtmlViewport from './OHIFDicomHtmlViewport.js';
+
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'html',
+
+  getViewportModule() {
+    return OHIFDicomHtmlViewport;
+  },
+  getSopClassHandlerModule() {
+    return OHIFDicomHtmlSopClassHandler;
+  }
+};
				`@@ -0,0 +1 @@`
				`:root{--text-color-primary:#fff}.DicomHtmlViewport{padding:20px;overflow-y:scroll;width:100%;height:100%;color:#fff;color:var(--text-color-primary)}`