diff --git a/README.md b/README.md
index ff6573cfc..1ef308f95 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ You can use MapillaryJS as a `<script>` tag from a [CDN](https://unpkg.com/brows
         var mly = new Mapillary.Viewer({
             apiClient: '<your client id>',
             container: 'mly',
-            imageKey: '<your image key for initializing the viewer>',
+            imageId: '<your image id for initializing the viewer>',
         });
     </script>
 </body>
@@ -48,9 +48,9 @@ Refer to the [Examples](https://github.com/mapillary/mapillary-js#examples) and
 - [Dynamic size](https://bl.ocks.org/oscarlorentzon/5af00c5c07448233bcb62f5e2124ab39)
 - [Load immediately](https://bl.ocks.org/oscarlorentzon/530cf3b89b8f5d1ecfdf4b79946caade)
 - [No cover](https://bl.ocks.org/oscarlorentzon/4f6f7ae5e86db7446f78ccea1eb6c2a7)
-- [Initialize with or without a key](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
+- [Initialize with or without an id](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
 - [Determine if viewer is navigable](https://bl.ocks.org/oscarlorentzon/898c55ef06917b07f165b7707d9f3a9e)
-- [Move to key](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
+- [Move to image](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
 - [Move in direction](https://bl.ocks.org/oscarlorentzon/63ac2aa3f0998f0c2d2b01a42c8babe4)
 - [Viewer options](https://bl.ocks.org/oscarlorentzon/08613728a283d1306b2848533852d22a)
 - [Subscribe to node changed](https://bl.ocks.org/oscarlorentzon/c5380e11fb3e84b8096f16737eb44820)
@@ -83,10 +83,10 @@ Refer to the [Examples](https://github.com/mapillary/mapillary-js#examples) and
 - [Add one million interactive markers](https://bl.ocks.org/oscarlorentzon/999db12bc87c92d5c547b1e582989fc1)
 
 #### Mouse
-- [Enable and disable mouse and touch handlers](https://bl.ocks.org/oscarlorentzon/37d28603212de2b8326bb65e49418368)
+- [Activate and deactivate mouse and touch handlers](https://bl.ocks.org/oscarlorentzon/37d28603212de2b8326bb65e49418368)
 
 #### Keyboard
-- [Enable and disable keyboard handlers](https://bl.ocks.org/oscarlorentzon/c92bbefbd4c74d4a490a8b37c85a1a7b)
+- [Activate and deactivate keyboard handlers](https://bl.ocks.org/oscarlorentzon/c92bbefbd4c74d4a490a8b37c85a1a7b)
 
 #### Popup
 - [Display a popup](https://bl.ocks.org/oscarlorentzon/54182e3f3624cdeb7ca960d96ebfa5fb)
diff --git a/debug/index.html b/debug/index.html
index 04f3a72c6..2ec71205f 100644
--- a/debug/index.html
+++ b/debug/index.html
@@ -51,7 +51,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
             renderMode: Mapillary.RenderMode.Letterbox,
         });
 
@@ -70,9 +70,9 @@
         let filterIndex = 0;
         const filters = [
             [],
-            ["==", "cameraType", "equirectangular"],
-            ["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
-            ["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
+            ["==", "cameraType", "spherical"],
+            ["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
+            ["in", "sequenceId", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
             [
                 "all",
                 [">=", "capturedAt", 1370509079741 - 24 * 60 * 60 * 1000],
diff --git a/debug/leaflet.html b/debug/leaflet.html
index 51106c520..c0eb764c9 100644
--- a/debug/leaflet.html
+++ b/debug/leaflet.html
@@ -59,7 +59,7 @@
             container: "mly",
         });
 
-        mly.moveToKey("6Zhtztzt67fWmdd4OYH44w").then(
+        mly.moveTo("6Zhtztzt67fWmdd4OYH44w").then(
             () => { /* noop */ },
             (e) => { console.error(e); });
 
diff --git a/debug/markers.html b/debug/markers.html
index af889ee88..bd09b4025 100644
--- a/debug/markers.html
+++ b/debug/markers.html
@@ -101,7 +101,7 @@
         };
 
         // Start creating and adding markers when node has been set
-        mly.moveToKey("6Zhtztzt67fWmdd4OYH44w")
+        mly.moveTo("6Zhtztzt67fWmdd4OYH44w")
             .then(
                 function (n) {
                     let intervalId = window.setInterval(function () {
diff --git a/debug/module.html b/debug/module.html
index a0ebbd34f..4baf5c9e4 100644
--- a/debug/module.html
+++ b/debug/module.html
@@ -40,7 +40,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false },
             container: container,
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
         });
 
         window.addEventListener("resize", function () { viewer.resize(); });
diff --git a/debug/popup.html b/debug/popup.html
new file mode 100644
index 000000000..2949eb7c4
--- /dev/null
+++ b/debug/popup.html
@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MapillaryJS Popup</title>
+    <link rel="icon" href="data:,">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../dist/mapillary.css" />
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        .mly-viewer-container {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="module">
+        import {
+            Alignment,
+            PopupComponent as PopupComp,
+            TagComponent as TagComp,
+            Viewer,
+        } from '../dist/mapillary.module.js';
+
+        // Change popup point or rect based on tag geometry
+        function onGeometryChanged(tag) {
+            const popup = tagPopups[tag.id].popup;
+            popup.setBasicRect(tag.geometry.rect);
+        }
+
+        function createPopup(label) {
+            const popupOptions = {
+                float: Alignment.Top,
+                position: Alignment.Top,
+            };
+            const popup = new PopupComp.Popup(popupOptions);
+            const span = document.createElement('span');
+            span.innerHTML = label;
+            popup.setDOMContent(span);
+            return popup;
+        }
+
+        async function createTagPopups(id) {
+            return new Promise((resolve) => {
+                const amount = 1000;
+                const rows = Math.floor(Math.sqrt(amount));
+                const cols = rows;
+                const itemWidth = 1 / cols;
+                const itemHeight = 1 / rows;
+                const paddingX = itemWidth / 10;
+                const paddingY = itemHeight / 10;
+                const tagPopups = {};
+                for (let col = 0; col < cols; ++col) {
+                    for (let row = 0; row < rows; ++row) {
+                        const x0 = col / cols + paddingX;
+                        const x1 = x0 + itemWidth - 2 * paddingX;
+                        const y0 = row / rows + paddingY;
+                        const y1 = y0 + itemHeight - 2 * paddingY;
+                        const rect = [x0, y0, x1, y1];
+                        const geometry = new TagComp.RectGeometry(rect);
+                        const id = `tag-id-${row}-${col}`;
+                        const options = { editable: false };
+                        const tag = new TagComp.OutlineTag(id, geometry, options);
+                        tag.on('geometrychanged', onGeometryChanged);
+                        const popup = createPopup(id);
+                        popup.setBasicRect(rect);
+                        tagPopups[id] = { popup, tag };
+                    }
+                }
+                resolve(tagPopups);
+            })
+        }
+
+        function initViewer() {
+            const container = document.createElement('div');
+            container.className = 'mly-viewer-container';
+            document.body.appendChild(container);
+            const viewerOptions = {
+                apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
+                component: {
+                    cover: false,
+                    popup: true,
+                    tag: true,
+                },
+                container,
+            };
+            const viewer = new Viewer(viewerOptions);
+            window.addEventListener("resize", () => { viewer.resize(); });
+            viewer.moveTo("FnqSkFAZXjv4Uqmqd4X_NA")
+                .catch(error => console.error(error));
+            return viewer;
+        }
+
+        const viewer = initViewer();
+
+        const tagPopups = await createTagPopups();
+        const popups = Object
+            .keys(tagPopups)
+            .map(id => tagPopups[id].popup);
+        const tags = Object
+            .keys(tagPopups)
+            .map(id => tagPopups[id].tag);
+
+        const popupComp = viewer.getComponent('popup');
+        const tagComp = viewer.getComponent('tag');
+
+        const onNodeChanged = () => {
+            tagComp.removeAll();
+            tagComp.add(tags);
+            popupComp.removeAll();
+            popupComp.add(popups);
+        }
+        viewer.on('nodechanged', onNodeChanged);
+    </script>
+</body>
+
+</html>
diff --git a/debug/provider.html b/debug/provider.html
index f06b43b8e..116d51e9c 100644
--- a/debug/provider.html
+++ b/debug/provider.html
@@ -43,7 +43,7 @@
       apiClient: new MyDataProvder({ clientToken: clientId }),
       component: { cover: false },
       container: "mly",
-      imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+      imageId: "zarcRdNFZwg3FkXNcsFeGw",
     });
 
     window.addEventListener("resize", function () { viewer.resize(); });
diff --git a/debug/spatial.html b/debug/spatial.html
index e093b23cc..9f340f844 100644
--- a/debug/spatial.html
+++ b/debug/spatial.html
@@ -33,7 +33,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false, stats: false, spatialData: true },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
         });
 
         window.addEventListener("resize", function () { viewer.resize(); });
@@ -103,9 +103,9 @@
         var filterIndex = 0;
         var filters = [
             [],
-            ["==", "cameraType", "equirectangular"],
-            ["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
-            ["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
+            ["==", "cameraType", "spherical"],
+            ["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
+            ["in", "sequenceId", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
         ];
         function setFilter() {
             filterIndex = (filterIndex + 1) % filters.length;
diff --git a/debug/tags.html b/debug/tags.html
index 31bb43c5e..640261960 100644
--- a/debug/tags.html
+++ b/debug/tags.html
@@ -44,7 +44,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false, tag: true },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
             renderMode: Mapillary.RenderMode.Letterbox,
         });
 
diff --git a/docs/landing.md b/docs/landing.md
index 07064fe80..cb21f8115 100644
--- a/docs/landing.md
+++ b/docs/landing.md
@@ -23,7 +23,7 @@ You can use MapillaryJS as a `<script>` tag from a [CDN](https://unpkg.com/brows
         var mly = new Mapillary.Viewer({
             apiClient: '<your client id>',
             container: 'mly',
-            imageKey: '<your image key for initializing the viewer>',
+            imageId: '<your image id for initializing the viewer>',
         });
     </script>
 </body>
@@ -44,9 +44,9 @@ Refer to the [Examples](#examples) section below and the [Index](./modules.html)
 - [Dynamic size](https://bl.ocks.org/oscarlorentzon/5af00c5c07448233bcb62f5e2124ab39)
 - [Load immediately](https://bl.ocks.org/oscarlorentzon/530cf3b89b8f5d1ecfdf4b79946caade)
 - [No cover](https://bl.ocks.org/oscarlorentzon/4f6f7ae5e86db7446f78ccea1eb6c2a7)
-- [Initialize with or without a key](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
+- [Initialize with or without an image id](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
 - [Determine if viewer is navigable](https://bl.ocks.org/oscarlorentzon/898c55ef06917b07f165b7707d9f3a9e)
-- [Move to key](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
+- [Move to image id](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
 - [Move in direction](https://bl.ocks.org/oscarlorentzon/63ac2aa3f0998f0c2d2b01a42c8babe4)
 - [Viewer options](https://bl.ocks.org/oscarlorentzon/08613728a283d1306b2848533852d22a)
 - [Subscribe to node changed](https://bl.ocks.org/oscarlorentzon/c5380e11fb3e84b8096f16737eb44820)
diff --git a/jest.config.js b/jest.config.js
index 44d30e731..3322604f6 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -4,8 +4,13 @@ export default {
         "<rootDir>/src/**/*",
     ],
     coveragePathIgnorePatterns: [
-        "<rootDir>/src/Mapillary.js",
+        "<rootDir>/src/api/contracts/",
+        "<rootDir>/src/api/ents/",
         "<rootDir>/src/export/",
+        "<rootDir>/src/component/shaders/",
+        "<rootDir>/src/Mapillary.js",
+        "<rootDir>/src/viewer/events/",
+        "<rootDir>/src/viewer/options/",
         "interfaces"
     ],
     coverageProvider: "v8",
diff --git a/package.json b/package.json
index 62ffd8e99..fae030868 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "A WebGL interactive street imagery library",
   "main": "dist/mapillary.js",
   "module": "dist/mapillary.module.js",
-  "style": "dist/mapillary.min.css",
+  "style": "dist/mapillary.css",
   "types": "dist/mapillary.d.ts",
   "type": "module",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "imagery",
     "mapillary",
     "spatial-visualization",
+    "renderer",
     "street-imagery",
     "typescript",
     "viewer",
@@ -99,7 +100,7 @@
     "serve": "node server.js",
     "serve-docs": "python3 -m http.server",
     "start": "yarn start-init && concurrently --kill-others-on-fail -n 'compile,bundle,serve' 'yarn compile-watch' 'yarn bundle-watch' 'yarn serve'",
-    "start-init": "yarn clean-dist && yarn build-styles && yarn compile-incremental",
+    "start-init": "yarn clean-build && yarn clean-dist && yarn build-styles && yarn compile-incremental",
     "test": "yarn clean-build && yarn compile-test && jest"
   }
 }
diff --git a/spec/Bootstrap.ts b/spec/Bootstrap.ts
index c87ebe300..b4dc7cc8e 100644
--- a/spec/Bootstrap.ts
+++ b/spec/Bootstrap.ts
@@ -2,7 +2,7 @@ import { ComponentService } from "../src/component/ComponentService";
 import { MarkerSet } from "../src/component/marker/MarkerSet";
 import { Graph } from "../src/graph/Graph";
 import { TraversingState } from "../src/state/states/TraversingState";
-import { IInterpolator } from "../src/utils/interfaces/IInterpolator";
+import { Interpolator } from "../src/state/interfaces/IInterpolator";
 
 type Item = {
     lat: number;
@@ -39,7 +39,7 @@ class SpatialIndexMock<T extends Item> {
 
 class CoverMock { public activate(): void { /* noop */ } }
 
-class InterpolatorMock implements IInterpolator {
+class InterpolatorMock implements Interpolator {
     public solve(x: number): number { return x; }
 }
 
diff --git a/spec/api/APIWrapper.spec.ts b/spec/api/APIWrapper.spec.ts
index faebacf0d..d98938f8a 100644
--- a/spec/api/APIWrapper.spec.ts
+++ b/spec/api/APIWrapper.spec.ts
@@ -2,10 +2,10 @@ import { empty as observableEmpty, Observable } from "rxjs";
 
 import { catchError } from "rxjs/operators";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { ISequence } from "../../src/api/interfaces/ISequence";
 import { DataProvider } from "../helper/ProviderHelper";
+import { ImagesContract } from "../../src/api/contracts/ImagesContract";
+import { SpatialImagesContract } from "../../src/api/contracts/SpatialImagesContract";
+import { CoreImagesContract } from "../../src/api/contracts/CoreImagesContract";
 
 describe("APIWrapperctor", () => {
     test("should create an APIWrapper instance", () => {
@@ -23,16 +23,16 @@ describe("APIWrapperimageByKeyFill$", () => {
         };
 
         const provider = new DataProvider();
-        const providerSpy: jasmine.Spy = spyOn(provider, "getFillImages");
+        const providerSpy: jasmine.Spy = spyOn(provider, "getSpatialImages");
         providerSpy.and.returnValue(promise);
 
         const api: APIWrapper = new APIWrapper(provider);
 
         const key: string = "key";
 
-        api.imageByKeyFill$([key])
+        api.getSpatialImages$([key])
             .subscribe(
-                (result: { [key: string]: IFillNode }): void => {
+                (result: SpatialImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(providerSpy.calls.count()).toBe(1);
@@ -51,14 +51,14 @@ describe("APIWrapperimageByKeyFill$", () => {
         };
 
         const provider = new DataProvider();
-        const providerSpy: jasmine.Spy = spyOn(provider, "getFillImages");
+        const providerSpy: jasmine.Spy = spyOn(provider, "getSpatialImages");
         providerSpy.and.returnValue(promise);
 
         const api: APIWrapper = new APIWrapper(provider);
 
         const key: string = "key";
 
-        api.imageByKeyFill$([key]).pipe(
+        api.getSpatialImages$([key]).pipe(
             catchError(
                 (err: Error): Observable<{}> => {
                     expect(err).toBeDefined();
@@ -82,16 +82,16 @@ describe("APIWrapperimageByKeyFull$", () => {
         };
 
         const provider = new DataProvider();
-        const providerSpy: jasmine.Spy = spyOn(provider, "getFullImages");
+        const providerSpy: jasmine.Spy = spyOn(provider, "getImages");
         providerSpy.and.returnValue(promise);
 
         const api: APIWrapper = new APIWrapper(provider);
 
         const key: string = "key";
 
-        api.imageByKeyFull$([key])
+        api.getImages$([key])
             .subscribe(
-                (result: { [key: string]: IFillNode }): void => {
+                (result: ImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(providerSpy.calls.count()).toBe(1);
@@ -110,14 +110,14 @@ describe("APIWrapperimageByKeyFull$", () => {
         };
 
         const provider = new DataProvider();
-        const providerSpy: jasmine.Spy = spyOn(provider, "getFullImages");
+        const providerSpy: jasmine.Spy = spyOn(provider, "getImages");
         providerSpy.and.returnValue(promise);
 
         const api: APIWrapper = new APIWrapper(provider);
 
         const key: string = "key";
 
-        api.imageByKeyFull$([key]).pipe(
+        api.getImages$([key]).pipe(
             catchError(
                 (err: Error): Observable<{}> => {
                     expect(err).toBeDefined();
@@ -148,9 +148,9 @@ describe("APIWrapperimagesByH$", () => {
 
         const h: string = "h";
 
-        api.imagesByH$(h)
+        api.getCoreImages$(h)
             .subscribe(
-                (result: { [key: string]: { [index: string]: ICoreNode } }): void => {
+                (result: CoreImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(providerSpy.calls.count()).toBe(1);
@@ -163,7 +163,7 @@ describe("APIWrapperimagesByH$", () => {
 
     test("should pass on error", (done: Function) => {
         const promise: any = {
-            then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
+            then: (_: (result: any) => void, reject: (error: Error) => void): void => {
                 reject(new Error());
             },
         };
@@ -176,7 +176,7 @@ describe("APIWrapperimagesByH$", () => {
 
         const h: string = "h";
 
-        api.imagesByH$(h).pipe(
+        api.getCoreImages$(h).pipe(
             catchError(
                 (err: Error): Observable<{}> => {
                     expect(err).toBeDefined();
@@ -207,9 +207,9 @@ describe("APIWrappersequenceByKey$", () => {
 
         const skey: string = "skey";
 
-        api.sequenceByKey$([skey])
+        api.getSequences$([skey])
             .subscribe(
-                (result: { [key: string]: ISequence }): void => {
+                (result): void => {
                     expect(result).toBeDefined();
 
                     expect(providerSpy.calls.count()).toBe(1);
@@ -235,7 +235,7 @@ describe("APIWrappersequenceByKey$", () => {
 
         const skey: string = "skey";
 
-        api.sequenceByKey$([skey]).pipe(
+        api.getSequences$([skey]).pipe(
             catchError(
                 (err: Error): Observable<{}> => {
                     expect(err).toBeDefined();
diff --git a/spec/api/DataProviderBase.spec.ts b/spec/api/DataProviderBase.spec.ts
index b29b77ed8..d405a4672 100644
--- a/spec/api/DataProviderBase.spec.ts
+++ b/spec/api/DataProviderBase.spec.ts
@@ -1,4 +1,4 @@
-import { BufferFetcher } from "../../src/api/BufferFetcher";
+import { fetchArrayBuffer } from "../../src/api/Common";
 import { DataProviderBase } from "../../src/api/DataProviderBase";
 import { MapillaryError } from "../../src/error/MapillaryError";
 import { GeometryProvider } from "../helper/ProviderHelper";
@@ -22,7 +22,7 @@ class XMLHTTPRequestMock {
 export class DataProvider extends DataProviderBase {
     constructor() { super(new GeometryProvider()); }
     public getArrayBuffer(abort?: Promise<void>): Promise<ArrayBuffer> {
-        return BufferFetcher.getArrayBuffer("", abort);
+        return fetchArrayBuffer("", abort);
     }
 }
 
diff --git a/spec/api/S2GeometryProvider.spec.ts b/spec/api/S2GeometryProvider.spec.ts
index 634973b0d..c5110e642 100644
--- a/spec/api/S2GeometryProvider.spec.ts
+++ b/spec/api/S2GeometryProvider.spec.ts
@@ -1,6 +1,6 @@
 import { S2 } from "s2-geometry";
-import { ICellCorners } from "../../src/api/interfaces/ICellCorners";
-import { ILatLon } from "../../src/api/interfaces/ILatLon";
+import { CellCorners } from "../../src/api/interfaces/CellCorners";
+import { LatLon } from "../../src/api/interfaces/LatLon";
 import { S2GeometryProvider } from "../../src/api/S2GeometryProvider";
 import { MapillaryError } from "../../src/error/MapillaryError";
 import { GeoCoords } from "../../src/geo/GeoCoords";
@@ -217,7 +217,7 @@ describe("S2GeometryProvider.getCorners", () => {
     it("should be correctly placed relative to each other", () => {
         const geometry: S2GeometryProvider = new S2GeometryProvider();
 
-        const latLons: ILatLon[] = [
+        const latLons: LatLon[] = [
             { lat: 0, lon: 0 },
             { lat: 45, lon: 0 },
             { lat: 0, lon: 45 },
@@ -232,7 +232,7 @@ describe("S2GeometryProvider.getCorners", () => {
 
         for (let latLon of latLons) {
             const cellId: string = geometry.latLonToCellId(latLon);
-            const corners: ICellCorners = geometry.getCorners(cellId);
+            const corners: CellCorners = geometry.getCorners(cellId);
 
             expect(corners.se.lat).toBeLessThan(corners.ne.lat);
             expect(corners.se.lat).toBeLessThan(corners.nw.lat);
diff --git a/spec/api/FalcorDataProvider.spec.ts b/spec/api/falcor/FalcorDataProvider.spec.ts
similarity index 80%
rename from spec/api/FalcorDataProvider.spec.ts
rename to spec/api/falcor/FalcorDataProvider.spec.ts
index ff818fe04..d56ba2761 100644
--- a/spec/api/FalcorDataProvider.spec.ts
+++ b/spec/api/falcor/FalcorDataProvider.spec.ts
@@ -1,12 +1,13 @@
 import * as pako from "pako";
 import * as falcor from "falcor";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
-import { IClusterReconstruction } from "../../src/api/interfaces/IClusterReconstruction";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { ISequence } from "../../src/api/interfaces/ISequence";
-import { ModelCreator } from "../../src/api/ModelCreator";
-import { MapillaryError } from "../../src/error/MapillaryError";
+import { FalcorDataProvider } from "../../../src/api/falcor/FalcorDataProvider";
+import { ClusterReconstructionContract } from "../../../src/api/contracts/ClusterReconstructionContract";
+import { FalcorModelCreator } from "../../../src/api/falcor/FalcorModelCreator";
+import { MapillaryError } from "../../../src/error/MapillaryError";
+import { SpatialImagesContract } from "../../../src/api/contracts/SpatialImagesContract";
+import { ImagesContract } from "../../../src/api/contracts/ImagesContract";
+import { CoreImagesContract } from "../../../src/api/contracts/CoreImagesContract";
+
 
 describe("FalcorDataProvider.ctor", () => {
     it("should create a data provider", () => {
@@ -24,11 +25,11 @@ describe("FalcorDataProvider.getFillImages", () => {
             },
         };
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
         const modelSpy: jasmine.Spy = spyOn(model, "get");
         modelSpy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -37,11 +38,11 @@ describe("FalcorDataProvider.getFillImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFillImages([key])
+        provider.getSpatialImages([key])
             .then(
-                (result: { [key: string]: IFillNode }): void => {
+                (result: SpatialImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(modelSpy.calls.count()).toBe(1);
@@ -61,11 +62,11 @@ describe("FalcorDataProvider.getFillImages", () => {
             },
         };
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
         const modelSpy: jasmine.Spy = spyOn(model, "get");
         modelSpy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -74,9 +75,9 @@ describe("FalcorDataProvider.getFillImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFillImages([key])
+        provider.getSpatialImages([key])
             .catch(
                 (err: Error): void => {
                     expect(err).toBeDefined();
@@ -87,7 +88,7 @@ describe("FalcorDataProvider.getFillImages", () => {
     });
 
     it("should invalidate model correctly when error is thrown", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -100,7 +101,7 @@ describe("FalcorDataProvider.getFillImages", () => {
 
         spyOn(model, "get").and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -109,9 +110,9 @@ describe("FalcorDataProvider.getFillImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFillImages([key])
+        provider.getSpatialImages([key])
             .then(
                 (): void => { return; },
                 (): void => {
@@ -127,7 +128,7 @@ describe("FalcorDataProvider.getFillImages", () => {
     });
 
     it("should invalidate model for every error on retry", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -140,7 +141,7 @@ describe("FalcorDataProvider.getFillImages", () => {
 
         spyOn(model, "get").and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -149,13 +150,13 @@ describe("FalcorDataProvider.getFillImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
         Promise
             .all([
-                provider.getFillImages([key]),
-                provider.getFillImages([key]),
-                provider.getFillImages([key])])
+                provider.getSpatialImages([key]),
+                provider.getSpatialImages([key]),
+                provider.getSpatialImages([key])])
             .then(
                 (): void => { return; },
                 (): void => {
@@ -172,7 +173,7 @@ describe("FalcorDataProvider.getFillImages", () => {
 
 describe("FalcorDataProvider.getFullImages", () => {
     it("should call model correctly", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -183,7 +184,7 @@ describe("FalcorDataProvider.getFullImages", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -192,11 +193,11 @@ describe("FalcorDataProvider.getFullImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFullImages([key])
+        provider.getImages([key])
             .then(
-                (result: { [key: string]: IFillNode }): void => {
+                (result: ImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(spy.calls.count()).toBe(1);
@@ -211,16 +212,16 @@ describe("FalcorDataProvider.getFullImages", () => {
 
     it("should throw when result is undefined", (done: Function) => {
         const promise: any = {
-            then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
+            then: (resolve: (result: any) => void): void => {
                 resolve(undefined);
             },
         };
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
         const modelSpy: jasmine.Spy = spyOn(model, "get");
         modelSpy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -229,9 +230,9 @@ describe("FalcorDataProvider.getFullImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFullImages([key])
+        provider.getImages([key])
             .catch(
                 (err: Error): void => {
                     expect(err).toBeDefined();
@@ -242,7 +243,7 @@ describe("FalcorDataProvider.getFullImages", () => {
     });
 
     it("should invalidate model correctly when error is thrown", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -255,7 +256,7 @@ describe("FalcorDataProvider.getFullImages", () => {
 
         spyOn(model, "get").and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -264,12 +265,12 @@ describe("FalcorDataProvider.getFullImages", () => {
             creator: creator,
         });
 
-        const key: string = "key";
+        const key = "key";
 
-        provider.getFullImages([key])
+        provider.getImages([key])
             .then(
-                (result: { [key: string]: IFillNode }): void => { return; },
-                (error: Error): void => {
+                (): void => { return; },
+                (): void => {
                     expect(invalidateSpy.calls.count()).toBe(1);
                     expect(invalidateSpy.calls.first().args.length).toBe(1);
                     expect(invalidateSpy.calls.first().args[0][0]).toBe("imageByKey");
@@ -284,7 +285,7 @@ describe("FalcorDataProvider.getFullImages", () => {
 
 describe("FalcorDataProvider.getCoreImages", () => {
     it("should call model correctly", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -295,7 +296,7 @@ describe("FalcorDataProvider.getCoreImages", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -304,25 +305,25 @@ describe("FalcorDataProvider.getCoreImages", () => {
             creator: creator,
         });
 
-        const h: string = "h";
+        const cellId = "h";
 
-        provider.getCoreImages(h)
+        provider.getCoreImages(cellId)
             .then(
-                (result: { [key: string]: { [index: string]: ICoreNode } }): void => {
+                (result: CoreImagesContract): void => {
                     expect(result).toBeDefined();
 
                     expect(spy.calls.count()).toBe(1);
                     expect(spy.calls.first().args.length).toBe(1);
                     expect(spy.calls.first().args[0][0]).toBe("imagesByH");
                     expect(spy.calls.first().args[0][1].length).toBe(1);
-                    expect(spy.calls.first().args[0][1][0]).toBe(h);
+                    expect(spy.calls.first().args[0][1][0]).toBe(cellId);
 
                     done();
                 });
     });
 
     it("should invalidate model correctly when error is thrown", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -335,7 +336,7 @@ describe("FalcorDataProvider.getCoreImages", () => {
 
         spyOn(model, "get").and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -344,17 +345,17 @@ describe("FalcorDataProvider.getCoreImages", () => {
             creator: creator,
         });
 
-        const h: string = "h";
+        const cellId = "h";
 
-        provider.getCoreImages(h)
+        provider.getCoreImages(cellId)
             .then(
-                (result: { [key: string]: { [index: string]: ICoreNode } }): void => { return; },
-                (error: Error): void => {
+                (): void => { return; },
+                (): void => {
                     expect(invalidateSpy.calls.count()).toBe(1);
                     expect(invalidateSpy.calls.first().args.length).toBe(1);
                     expect(invalidateSpy.calls.first().args[0][0]).toBe("imagesByH");
                     expect(invalidateSpy.calls.first().args[0][1].length).toBe(1);
-                    expect(invalidateSpy.calls.first().args[0][1][0]).toBe(h);
+                    expect(invalidateSpy.calls.first().args[0][1][0]).toBe(cellId);
 
                     done();
                 },
@@ -362,7 +363,7 @@ describe("FalcorDataProvider.getCoreImages", () => {
     });
 
     it("should handle undefined response", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -373,7 +374,7 @@ describe("FalcorDataProvider.getCoreImages", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -382,13 +383,13 @@ describe("FalcorDataProvider.getCoreImages", () => {
             creator: creator,
         });
 
-        const h: string = "h";
+        const cellId = "h";
 
-        provider.getCoreImages(h)
+        provider.getCoreImages(cellId)
             .then(
-                (result: { [key: string]: { [index: string]: ICoreNode } }): void => {
+                (result: CoreImagesContract): void => {
                     expect(result).toBeDefined();
-                    expect(result[h]).toBeDefined();
+                    expect(result.images).toBeDefined();
 
                     done();
                 });
@@ -399,7 +400,7 @@ describe("FalcorDataProvider.getSequences", () => {
     it("should call model correctly", (done: Function) => {
         spyOn(console, "warn").and.stub();
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -410,7 +411,7 @@ describe("FalcorDataProvider.getSequences", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -419,11 +420,11 @@ describe("FalcorDataProvider.getSequences", () => {
             creator: creator,
         });
 
-        const skey: string = "skey";
+        const skey = "skey";
 
         provider.getSequences([skey])
             .then(
-                (result: { [key: string]: ISequence }): void => {
+                (result): void => {
                     expect(result).toBeDefined();
 
                     expect(spy.calls.count()).toBe(1);
@@ -437,7 +438,7 @@ describe("FalcorDataProvider.getSequences", () => {
     });
 
     it("should invalidate model correctly when error is thrown", (done: Function) => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -450,7 +451,7 @@ describe("FalcorDataProvider.getSequences", () => {
 
         spyOn(model, "get").and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -459,12 +460,12 @@ describe("FalcorDataProvider.getSequences", () => {
             creator: creator,
         });
 
-        const skey: string = "skey";
+        const skey = "skey";
 
         provider.getSequences([skey])
             .then(
-                (result: { [key: string]: ISequence }): void => { return; },
-                (error: Error): void => {
+                (): void => { return; },
+                (): void => {
                     expect(invalidateSpy.calls.count()).toBe(1);
                     expect(invalidateSpy.calls.first().args.length).toBe(1);
                     expect(invalidateSpy.calls.first().args[0][0]).toBe("sequenceByKey");
@@ -479,10 +480,10 @@ describe("FalcorDataProvider.getSequences", () => {
     it("should call model correctly", (done: Function) => {
         spyOn(console, "warn").and.stub();
 
-        const skey: string = "skey";
-        const nkey: string = "nkey";
+        const skey = "skey";
+        const nkey = "nkey";
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -493,7 +494,7 @@ describe("FalcorDataProvider.getSequences", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -504,12 +505,12 @@ describe("FalcorDataProvider.getSequences", () => {
 
         provider.getSequences([skey])
             .then(
-                (result: { [key: string]: ISequence }): void => {
+                (result): void => {
                     expect(result).toBeDefined();
-                    expect(result[skey]).toBeDefined();
-                    expect(result[skey].key).toBe(skey);
-                    expect(result[skey].keys.length).toBe(1);
-                    expect(result[skey].keys[0]).toBe(nkey);
+                    expect(result[0]).toBeDefined();
+                    expect(result[0].node_id).toBe(skey);
+                    expect(result[0].node.image_ids.length).toBe(1);
+                    expect(result[0].node.image_ids[0]).toBe(nkey);
 
                     done();
                 });
@@ -518,7 +519,7 @@ describe("FalcorDataProvider.getSequences", () => {
     it("should create empty sequence if return value is not defined", (done: Function) => {
         spyOn(console, "warn").and.stub();
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -529,7 +530,7 @@ describe("FalcorDataProvider.getSequences", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -538,15 +539,16 @@ describe("FalcorDataProvider.getSequences", () => {
             creator: creator,
         });
 
-        const skey: string = "skey";
+        const skey = "skey";
 
         provider.getSequences([skey])
             .then(
-                (result: { [key: string]: ISequence }): void => {
+                (result): void => {
                     expect(result).toBeDefined();
-                    expect(result[skey]).toBeDefined();
-                    expect(result[skey].key).toBe(skey);
-                    expect(result[skey].keys.length).toBe(0);
+                    expect(result[0]).toBeDefined();
+                    expect(result[0].node_id).toBe(skey);
+                    expect(result[0].node.id).toBe(skey);
+                    expect(result[0].node.image_ids.length).toBe(0);
 
                     done();
                 });
@@ -555,7 +557,7 @@ describe("FalcorDataProvider.getSequences", () => {
     it("should populate empty sequence if missing", (done: Function) => {
         spyOn(console, "warn").and.stub();
 
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const promise: any = {
             then: (resolve: (result: any) => void, reject: (error: Error) => void): void => {
@@ -566,7 +568,7 @@ describe("FalcorDataProvider.getSequences", () => {
         const spy: jasmine.Spy = spyOn(model, "get");
         spy.and.returnValue(promise);
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -575,15 +577,16 @@ describe("FalcorDataProvider.getSequences", () => {
             creator: creator,
         });
 
-        const skey: string = "skey";
+        const skey = "skey";
 
         provider.getSequences([skey])
             .then(
-                (result: { [key: string]: ISequence }): void => {
+                (result): void => {
                     expect(result).toBeDefined();
-                    expect(result[skey]).toBeDefined();
-                    expect(result[skey].key).toBe(skey);
-                    expect(result[skey].keys.length).toBe(0);
+                    expect(result[0]).toBeDefined();
+                    expect(result[0].node_id).toBe(skey);
+                    expect(result[0].node.id).toBe(skey);
+                    expect(result[0].node.image_ids.length).toBe(0);
 
                     done();
                 });
@@ -592,11 +595,11 @@ describe("FalcorDataProvider.getSequences", () => {
 
 describe("FalcorDataProvider.setToken", () => {
     it("should invalidate old model and create a new with token", () => {
-        const model: falcor.Model = new falcor.Model();
+        const model = new falcor.Model();
 
         const modelSpy: jasmine.Spy = spyOn(model, "invalidate");
 
-        const creator: ModelCreator = new ModelCreator();
+        const creator: FalcorModelCreator = new FalcorModelCreator();
         const creatorSpy: jasmine.Spy = spyOn(creator, "createModel");
         creatorSpy.and.returnValue(model);
 
@@ -645,7 +648,7 @@ describe("FalcorDataProvider.getImage", () => {
 
         const response: ArrayBuffer = new ArrayBuffer(1024);
 
-        provider.getImage("url", abort)
+        provider.getImageBuffer("url", abort)
             .then(
                 (buffer: ArrayBuffer): void => {
                     expect(buffer instanceof ArrayBuffer).toBe(true);
@@ -670,7 +673,7 @@ describe("FalcorDataProvider.getImage", () => {
 
         const provider: FalcorDataProvider = new FalcorDataProvider({ clientToken: "cid" });
 
-        provider.getImage("url", abort)
+        provider.getImageBuffer("url", abort)
             .then(
                 undefined,
                 (reason: Error): void => {
@@ -692,7 +695,7 @@ describe("FalcorDataProvider.getImage", () => {
 
         const response: ArrayBuffer = new ArrayBuffer(1024);
 
-        provider.getImage("url", abort)
+        provider.getImageBuffer("url", abort)
             .then(
                 undefined,
                 (reason: Error): void => {
@@ -716,7 +719,7 @@ describe("FalcorDataProvider.getImage", () => {
 
         const response: ArrayBuffer = new ArrayBuffer(1024);
 
-        provider.getImage("url", abort)
+        provider.getImageBuffer("url", abort)
             .then(
                 undefined,
                 (reason: Error): void => {
@@ -740,7 +743,7 @@ describe("FalcorDataProvider.getImage", () => {
 
         const response: ArrayBuffer = new ArrayBuffer(1024);
 
-        provider.getImage("url", abort)
+        provider.getImageBuffer("url", abort)
             .then(
                 undefined,
                 (reason: Error): void => {
@@ -763,11 +766,11 @@ describe("FalcorDataProvider.getClusterReconstruction", () => {
 
         provider.getClusterReconstruction("url")
             .then(
-                (r: IClusterReconstruction): void => {
+                (r: ClusterReconstructionContract): void => {
                     expect(r.points).toEqual({});
-                    expect(r.reference_lla.altitude).toBe(1);
-                    expect(r.reference_lla.latitude).toBe(2);
-                    expect(r.reference_lla.longitude).toBe(3);
+                    expect(r.reference.alt).toBe(1);
+                    expect(r.reference.lat).toBe(2);
+                    expect(r.reference.lon).toBe(3);
 
                     done();
                 });
diff --git a/spec/api/FalcorDataProviderUrls.spec.ts b/spec/api/falcor/FalcorDataProviderUrls.spec.ts
similarity index 68%
rename from spec/api/FalcorDataProviderUrls.spec.ts
rename to spec/api/falcor/FalcorDataProviderUrls.spec.ts
index ab1e2207a..76d6245d6 100644
--- a/spec/api/FalcorDataProviderUrls.spec.ts
+++ b/spec/api/falcor/FalcorDataProviderUrls.spec.ts
@@ -1,19 +1,19 @@
-import { FalcorDataProviderUrls } from "../../src/api/FalcorDataProvider";
-import { IFalcorDataProviderOptions } from "../../src/api/interfaces/IFalcorDataProviderOptions";
+import { FalcorDataProviderOptions } from "../../../src/api/falcor/FalcorDataProviderOptions";
+import { FalcorDataProviderUrls } from "../../../src/api/falcor/FalcorDataProviderUrls";
 
 describe("DataProviderUrls.ctor", () => {
     it("should set all option properties", () => {
-        const options: IFalcorDataProviderOptions = {
+        const options: FalcorDataProviderOptions = {
             apiHost: "test-api",
             clientToken: "ct",
-            clusterReconstructionHost: "test-cluster",
+            reconstructionHost: "test-cluster",
             imageHost: "test-image",
             imageTileHost: "test-image-tile",
             meshHost: "test-mesh",
             scheme: "test-scheme",
         };
 
-        const urls: FalcorDataProviderUrls = new FalcorDataProviderUrls(options);
+        const urls = new FalcorDataProviderUrls(options);
 
         expect(urls.falcorModel).toContain(options.apiHost);
         expect(urls.falcorModel).toContain(options.scheme);
diff --git a/spec/component/Component.spec.ts b/spec/component/Component.spec.ts
index 35fee1588..a127d51e0 100644
--- a/spec/component/Component.spec.ts
+++ b/spec/component/Component.spec.ts
@@ -1,16 +1,16 @@
 import { skip } from "rxjs/operators";
 import { Component } from "../../src/component/Component";
-import { IComponentConfiguration } from "../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../src/component/interfaces/ComponentConfiguration";
 
-interface ITestConfiguration extends IComponentConfiguration {
+interface TestConfiguration extends ComponentConfiguration {
     test?: string;
 }
 
-class TestComponent extends Component<ITestConfiguration> {
+class TestComponent extends Component<TestConfiguration> {
     protected _activate(): void { /*noop*/ }
     protected _deactivate(): void { /*noop*/ }
 
-    protected _getDefaultConfiguration(): ITestConfiguration {
+    protected _getDefaultConfiguration(): TestConfiguration {
         return {};
     }
 }
@@ -29,7 +29,7 @@ describe("Component.configuration$", () => {
 
         component.configuration$
             .subscribe(
-                (configuration: IComponentConfiguration): void => {
+                (configuration: ComponentConfiguration): void => {
                     expect(Object.keys(configuration).length).toBe(0);
                 });
     });
@@ -40,7 +40,7 @@ describe("Component.configuration$", () => {
         component.configuration$.pipe(
             skip(1))
             .subscribe(
-                (configuration: ITestConfiguration): void => {
+                (configuration: TestConfiguration): void => {
                     expect(Object.keys(configuration).length).toBe(1);
                     expect(configuration.test).toBe("test");
                     done();
@@ -55,7 +55,7 @@ describe("Component.configuration$", () => {
         component.configuration$.pipe(
             skip(2))
             .subscribe(
-                (configuration: ITestConfiguration): void => {
+                (configuration: TestConfiguration): void => {
                     expect(Object.keys(configuration).length).toBe(1);
                     expect(configuration.test).toBe("testchanged");
                     done();
diff --git a/spec/component/direction/DirectionComponent.spec.ts b/spec/component/direction/DirectionComponent.spec.ts
index b461da583..0e378e58b 100644
--- a/spec/component/direction/DirectionComponent.spec.ts
+++ b/spec/component/direction/DirectionComponent.spec.ts
@@ -77,7 +77,7 @@ describe("DirectionComponent.activate", () => {
         directionComponent.configure({ distinguishSequence: true });
         directionComponent.activate();
 
-        const sequence: Sequence = new Sequence({ key: "skey", keys: [] });
+        const sequence: Sequence = new Sequence({ id: "skey", image_ids: [] });
         (<jasmine.Spy>navigatorMock.graphService.cacheSequence$).and.returnValue(observableOf<Sequence>(sequence));
 
         const node: Node = new NodeHelper().createNode();
@@ -105,7 +105,7 @@ describe("DirectionComponent.activate", () => {
         directionComponent.configure({ distinguishSequence: true });
         directionComponent.activate();
 
-        const sequence: Sequence = new Sequence({ key: "skey", keys: [] });
+        const sequence: Sequence = new Sequence({ id: "skey", image_ids: [] });
         const cacheSequence$: Subject<Sequence> = new Subject<Sequence>();
         (<jasmine.Spy>navigatorMock.graphService.cacheSequence$).and.returnValue(cacheSequence$);
 
diff --git a/spec/component/direction/DirectionDOMRenderer.spec.ts b/spec/component/direction/DirectionDOMRenderer.spec.ts
index 403f310a7..05de5088a 100644
--- a/spec/component/direction/DirectionDOMRenderer.spec.ts
+++ b/spec/component/direction/DirectionDOMRenderer.spec.ts
@@ -6,15 +6,15 @@ import { NodeHelper } from "../../helper/NodeHelper";
 import { Navigator } from "../../../src/viewer/Navigator";
 import { Node } from "../../../src/graph/Node";
 import { DirectionDOMRenderer } from "../../../src/component/direction/DirectionDOMRenderer";
-import { IDirectionConfiguration } from "../../../src/component/interfaces/IDirectionConfiguration";
+import { DirectionConfiguration } from "../../../src/component/interfaces/DirectionConfiguration";
 import { RenderCamera } from "../../../src/render/RenderCamera";
-import { IFrame } from "../../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../../src/state/interfaces/AnimationFrame";
 import { FrameHelper } from "../../helper/FrameHelper";
 import { RenderMode } from "../../../src/render/RenderMode";
 
 describe("DirectionDOMRenderer.ctor", () => {
     it("should be defined", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -34,7 +34,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should not need render when constructed", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -46,7 +46,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should need render when node is set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -63,7 +63,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should not need render after rendering", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -88,7 +88,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should not need render when setting render camera without node set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -105,7 +105,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should not need render when setting configuration without node set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -120,7 +120,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should not need render when resizing without node set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -134,7 +134,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should need render when setting changed render camera if node is set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -158,7 +158,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
         expect(renderer.needsRender).toBe(false);
 
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Fill);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.state.camera.up.fromArray([0, 0, 1]);
         frame.state.camera.lookat.fromArray([1, 1, 0]);
         renderCamera.setFrame(frame);
@@ -168,7 +168,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should need render when setting changed configuration if node is set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
@@ -198,7 +198,7 @@ describe("DirectionDOMRenderer.needsRender", () => {
     });
 
     it("should need render when resizing if node is set", () => {
-        let configuration: IDirectionConfiguration = {
+        let configuration: DirectionConfiguration = {
             distinguishSequence: false,
             maxWidth: 200,
             minWidth: 100,
diff --git a/spec/component/keyboard/KeyPlayHandler.spec.ts b/spec/component/keyboard/KeyPlayHandler.spec.ts
index 4472a286c..103c3355b 100644
--- a/spec/component/keyboard/KeyPlayHandler.spec.ts
+++ b/spec/component/keyboard/KeyPlayHandler.spec.ts
@@ -9,24 +9,24 @@ import { NodeHelper } from "../../helper/NodeHelper";
 import { Navigator } from "../../../src/viewer/Navigator";
 import { Node } from "../../../src/graph/Node";
 import { Component } from "../../../src/component/Component";
-import { IComponentConfiguration } from "../../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../../src/component/interfaces/ComponentConfiguration";
 import { KeyPlayHandler } from "../../../src/component/keyboard/KeyPlayHandler";
-import { IEdgeStatus } from "../../../src/graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../../src/graph/interfaces/NavigationEdgeStatus";
 import { State } from "../../../src/state/State";
 import { Container } from "../../../src/viewer/Container";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
 
-interface ITestConfiguration extends IComponentConfiguration {
+interface TestConfiguration extends ComponentConfiguration {
     test: boolean;
 }
 
-class TestComponent extends Component<ITestConfiguration> {
+class TestComponent extends Component<TestConfiguration> {
     constructor(name: string, container: Container, navigator: Navigator) {
         super(name, container, navigator);
     }
     protected _activate(): void { /* noop */ }
     protected _deactivate(): void { /* noop */ }
-    protected _getDefaultConfiguration(): ITestConfiguration { return { test: false }; }
+    protected _getDefaultConfiguration(): TestConfiguration { return { test: false }; }
 }
 
 describe("KeyPlayHandler.ctor", () => {
@@ -92,12 +92,12 @@ describe("KeyPlayHandler.enable", () => {
 
     it("should not prevent default if modifier key is pressed", () => {
         (<Subject<boolean>>navigatorMock.playService.playing$).next(true);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<number>>navigatorMock.playService.speed$).next(0.5);
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
 
         const node: Node = nodeHelper.createNode();
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
         sequenceEdgesSubject.next({ cached: false, edges: [] });
@@ -130,12 +130,12 @@ describe("KeyPlayHandler.enable", () => {
 
     it("should change speed if `>` or `<` is pressed", () => {
         (<Subject<boolean>>navigatorMock.playService.playing$).next(true);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<number>>navigatorMock.playService.speed$).next(0.5);
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
 
         const node: Node = nodeHelper.createNode();
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
         sequenceEdgesSubject.next({ cached: false, edges: [] });
@@ -162,12 +162,12 @@ describe("KeyPlayHandler.enable", () => {
 
     it("should change direction when not playing", () => {
         (<Subject<boolean>>navigatorMock.playService.playing$).next(true);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<number>>navigatorMock.playService.speed$).next(0.5);
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
 
         const node: Node = nodeHelper.createNode();
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
         sequenceEdgesSubject.next({ cached: false, edges: [] });
@@ -181,18 +181,18 @@ describe("KeyPlayHandler.enable", () => {
         expect(setDirectionSpy.calls.count()).toBe(0);
 
         (<Subject<boolean>>navigatorMock.playService.playing$).next(false);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<KeyboardEvent>>containerMock.keyboardService.keyDown$).next(shiftKeyboardEvent);
         expect(shiftPreventDefaultSpy.calls.count()).toBe(2);
         expect(setDirectionSpy.calls.count()).toBe(1);
-        expect(setDirectionSpy.calls.argsFor(0)[0]).toBe(EdgeDirection.Prev);
+        expect(setDirectionSpy.calls.argsFor(0)[0]).toBe(NavigationDirection.Prev);
 
         (<Subject<boolean>>navigatorMock.playService.playing$).next(false);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Prev);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Prev);
         (<Subject<KeyboardEvent>>containerMock.keyboardService.keyDown$).next(shiftKeyboardEvent);
         expect(shiftPreventDefaultSpy.calls.count()).toBe(3);
         expect(setDirectionSpy.calls.count()).toBe(2);
-        expect(setDirectionSpy.calls.argsFor(1)[0]).toBe(EdgeDirection.Next);
+        expect(setDirectionSpy.calls.argsFor(1)[0]).toBe(NavigationDirection.Next);
     });
 
     it("should play when stopped edge direction exist and stop when playing", () => {
@@ -201,13 +201,13 @@ describe("KeyPlayHandler.enable", () => {
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
 
         const node: Node = nodeHelper.createNode();
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
         sequenceEdgesSubject.next({ cached: false, edges: [] });
 
         (<Subject<boolean>>navigatorMock.playService.playing$).next(false);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<number>>navigatorMock.playService.speed$).next(0.5);
 
         const spacebarKeyboardEvent: KeyboardEvent = EventHelper.createKeyboardEvent("keyDown", { key: " " });
@@ -217,13 +217,13 @@ describe("KeyPlayHandler.enable", () => {
         expect(playSpy.calls.count()).toBe(0);
         expect(stopSpy.calls.count()).toBe(0);
 
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         sequenceEdgesSubject.next({
             cached: true,
             edges: [{
-                data: { direction: EdgeDirection.Next, worldMotionAzimuth: 0 },
-                from: node.key,
-                to: "toKey",
+                data: { direction: NavigationDirection.Next, worldMotionAzimuth: 0 },
+                source: node.id,
+                target: "toKey",
             }],
         });
         (<Subject<KeyboardEvent>>containerMock.keyboardService.keyDown$).next(spacebarKeyboardEvent);
@@ -245,13 +245,13 @@ describe("KeyPlayHandler.enable", () => {
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Earth);
 
         const node: Node = nodeHelper.createNode();
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node);
         sequenceEdgesSubject.next({ cached: false, edges: [] });
 
         (<Subject<boolean>>navigatorMock.playService.playing$).next(false);
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         (<Subject<number>>navigatorMock.playService.speed$).next(0.5);
 
         const spacebarKeyboardEvent: KeyboardEvent = EventHelper.createKeyboardEvent("keyDown", { key: " " });
@@ -261,13 +261,13 @@ describe("KeyPlayHandler.enable", () => {
         expect(playSpy.calls.count()).toBe(0);
         expect(stopSpy.calls.count()).toBe(0);
 
-        (<Subject<EdgeDirection>>navigatorMock.playService.direction$).next(EdgeDirection.Next);
+        (<Subject<NavigationDirection>>navigatorMock.playService.direction$).next(NavigationDirection.Next);
         sequenceEdgesSubject.next({
             cached: true,
             edges: [{
-                data: { direction: EdgeDirection.Next, worldMotionAzimuth: 0 },
-                from: node.key,
-                to: "toKey",
+                data: { direction: NavigationDirection.Next, worldMotionAzimuth: 0 },
+                source: node.id,
+                target: "toKey",
             }],
         });
         (<Subject<KeyboardEvent>>containerMock.keyboardService.keyDown$).next(spacebarKeyboardEvent);
diff --git a/spec/component/keyboard/KeyZoomHandler.spec.ts b/spec/component/keyboard/KeyZoomHandler.spec.ts
index d2568f4ce..b67991ceb 100644
--- a/spec/component/keyboard/KeyZoomHandler.spec.ts
+++ b/spec/component/keyboard/KeyZoomHandler.spec.ts
@@ -11,24 +11,24 @@ import { TransformHelper } from "../../helper/TransformHelper";
 import { Navigator } from "../../../src/viewer/Navigator";
 import { Transform } from "../../../src/geo/Transform";
 import { Component } from "../../../src/component/Component";
-import { IComponentConfiguration } from "../../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../../src/component/interfaces/ComponentConfiguration";
 import { KeyZoomHandler } from "../../../src/component/keyboard/KeyZoomHandler";
 import { ViewportCoords } from "../../../src/geo/ViewportCoords";
 import { RenderCamera } from "../../../src/render/RenderCamera";
 import { Container } from "../../../src/viewer/Container";
 import { RenderMode } from "../../../src/render/RenderMode";
 
-interface ITestConfiguration extends IComponentConfiguration {
+interface TestConfiguration extends ComponentConfiguration {
     test: boolean;
 }
 
-class TestComponent extends Component<ITestConfiguration> {
+class TestComponent extends Component<TestConfiguration> {
     constructor(name: string, container: Container, navigator: Navigator) {
         super(name, container, navigator);
     }
     protected _activate(): void { /* noop */ }
     protected _deactivate(): void { /* noop */ }
-    protected _getDefaultConfiguration(): ITestConfiguration { return { test: false }; }
+    protected _getDefaultConfiguration(): TestConfiguration { return { test: false }; }
 }
 
 describe("KeyZoomHandler.ctor", () => {
diff --git a/spec/component/marker/Marker.spec.ts b/spec/component/marker/Marker.spec.ts
index 15b4de94b..dfbe457be 100644
--- a/spec/component/marker/Marker.spec.ts
+++ b/spec/component/marker/Marker.spec.ts
@@ -1,9 +1,9 @@
 import * as THREE from "three";
-import { ILatLon } from "../../../src/api/interfaces/ILatLon";
+import { LatLon } from "../../../src/api/interfaces/LatLon";
 import { Marker } from "../../../src/component/marker/marker/Marker";
 
 class TestMarker extends Marker {
-    constructor(id: string, latLon: ILatLon) { super(id, latLon); }
+    constructor(id: string, latLon: LatLon) { super(id, latLon); }
     protected _createGeometry(position: number[]): void {
         this._geometry = new THREE.Object3D();
         this._geometry.position.fromArray(position);
diff --git a/spec/component/marker/MarkerScene.spec.ts b/spec/component/marker/MarkerScene.spec.ts
index 4f8c08116..3341615ba 100644
--- a/spec/component/marker/MarkerScene.spec.ts
+++ b/spec/component/marker/MarkerScene.spec.ts
@@ -1,10 +1,10 @@
 import * as THREE from "three";
-import { ILatLon } from "../../../src/api/interfaces/ILatLon";
+import { LatLon } from "../../../src/api/interfaces/LatLon";
 import { Marker } from "../../../src/component/marker/marker/Marker";
 import { MarkerScene } from "../../../src/component/marker/MarkerScene";
 
 class TestMarker extends Marker {
-    constructor(id: string, latLon: ILatLon) { super(id, latLon); }
+    constructor(id: string, latLon: LatLon) { super(id, latLon); }
     protected _createGeometry(position: number[]): void { /* noop */ }
     protected _disposeGeometry(): void { /* noop */ }
     protected _getInteractiveObjects(): THREE.Object3D[] { return []; }
diff --git a/spec/component/marker/MarkerSet.spec.ts b/spec/component/marker/MarkerSet.spec.ts
index 21d0f0057..934d3d1f9 100644
--- a/spec/component/marker/MarkerSet.spec.ts
+++ b/spec/component/marker/MarkerSet.spec.ts
@@ -3,12 +3,12 @@ bootstrap();
 
 import { first } from "rxjs/operators";
 import { Subscription } from "rxjs";
-import { ILatLon } from "../../../src/api/interfaces/ILatLon";
+import { LatLon } from "../../../src/api/interfaces/LatLon";
 import { Marker } from "../../../src/component/marker/marker/Marker";
 import { MarkerSet } from "../../../src/component/marker/MarkerSet";
 
 class TestMarker extends Marker {
-    constructor(id: string, latLon: ILatLon) { super(id, latLon); }
+    constructor(id: string, latLon: LatLon) { super(id, latLon); }
     protected _createGeometry(position: number[]): void { /* noop */ }
     protected _disposeGeometry(): void { /* noop */ }
     protected _getInteractiveObjects(): THREE.Object3D[] { return []; }
diff --git a/spec/component/mouse/DragPanHandler.spec.ts b/spec/component/mouse/DragPanHandler.spec.ts
index 8052d1188..94381d5d5 100644
--- a/spec/component/mouse/DragPanHandler.spec.ts
+++ b/spec/component/mouse/DragPanHandler.spec.ts
@@ -17,7 +17,7 @@ import { DragPanHandler } from "../../../src/component/mouse/DragPanHandler";
 import { Spatial } from "../../../src/geo/Spatial";
 import { ViewportCoords } from "../../../src/geo/ViewportCoords";
 import { RenderCamera } from "../../../src/render/RenderCamera";
-import { IFrame } from "../../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../../src/state/interfaces/AnimationFrame";
 import { Container } from "../../../src/viewer/Container";
 import { RenderMode } from "../../../src/render/RenderMode";
 
@@ -219,8 +219,8 @@ describe("DragPanHandler.enable", () => {
         testComponent.activate();
         handler.enable();
 
-        const frame: IFrame = new FrameHelper().createFrame();
-        (<Subject<IFrame>>navigatorMock.stateService.currentState$).next(frame);
+        const frame: AnimationFrame = new FrameHelper().createFrame();
+        (<Subject<AnimationFrame>>navigatorMock.stateService.currentState$).next(frame);
 
         (<Subject<[GraphNode, Transform, number][]>>navigatorMock.panService.panNodes$).next([]);
 
@@ -257,8 +257,8 @@ describe("DragPanHandler.enable", () => {
         testComponent.activate();
         handler.enable();
 
-        const frame: IFrame = new FrameHelper().createFrame();
-        (<Subject<IFrame>>navigatorMock.stateService.currentState$).next(frame);
+        const frame: AnimationFrame = new FrameHelper().createFrame();
+        (<Subject<AnimationFrame>>navigatorMock.stateService.currentState$).next(frame);
 
         (<Subject<[GraphNode, Transform, number][]>>navigatorMock.panService.panNodes$).next([]);
 
@@ -296,8 +296,8 @@ describe("DragPanHandler.enable", () => {
         testComponent.activate();
         handler.enable();
 
-        const frame: IFrame = new FrameHelper().createFrame();
-        (<Subject<IFrame>>navigatorMock.stateService.currentState$).next(frame);
+        const frame: AnimationFrame = new FrameHelper().createFrame();
+        (<Subject<AnimationFrame>>navigatorMock.stateService.currentState$).next(frame);
 
         (<Subject<[GraphNode, Transform, number][]>>navigatorMock.panService.panNodes$).next([]);
 
@@ -336,8 +336,8 @@ describe("DragPanHandler.enable", () => {
         testComponent.activate();
         handler.enable();
 
-        const frame: IFrame = new FrameHelper().createFrame();
-        (<Subject<IFrame>>navigatorMock.stateService.currentState$).next(frame);
+        const frame: AnimationFrame = new FrameHelper().createFrame();
+        (<Subject<AnimationFrame>>navigatorMock.stateService.currentState$).next(frame);
 
         (<Subject<[GraphNode, Transform, number][]>>navigatorMock.panService.panNodes$).next([]);
 
diff --git a/spec/component/popup/Popup.spec.ts b/spec/component/popup/Popup.spec.ts
index da81b33c2..516d361a2 100644
--- a/spec/component/popup/Popup.spec.ts
+++ b/spec/component/popup/Popup.spec.ts
@@ -1,10 +1,10 @@
 import { take } from "rxjs/operators";
-import { IPopupOffset } from "../../../src/component/popup/interfaces/IPopupOffset";
+import { PopupOffset } from "../../../src/component/popup/interfaces/PopupOffset";
 import { Popup } from "../../../src/component/popup/popup/Popup";
 import { ViewportCoords } from "../../../src/geo/ViewportCoords";
 import { RenderCamera } from "../../../src/render/RenderCamera";
 import { DOM } from "../../../src/utils/DOM";
-import { Alignment } from "../../../src/viewer/Alignment";
+import { Alignment } from "../../../src/viewer/enums/Alignment";
 
 describe("Popup.ctor", () => {
     it("should be defined", () => {
@@ -519,7 +519,7 @@ describe("Popup.offset", () => {
         const viewportCoords: ViewportCoords = new ViewportCoords();
         spyOn(viewportCoords, "basicToCanvasSafe").and.returnValue([40, 60]);
 
-        const offset: IPopupOffset = {
+        const offset: PopupOffset = {
             bottom: [0, 1],
             bottomLeft: [2, 3],
             bottomRight: [4, 5],
@@ -548,7 +548,7 @@ describe("Popup.offset", () => {
         const viewportCoords: ViewportCoords = new ViewportCoords();
         spyOn(viewportCoords, "basicToCanvasSafe").and.returnValue([40, 60]);
 
-        const offset: IPopupOffset = {
+        const offset: PopupOffset = {
             bottom: [-0, -1],
             bottomLeft: [-2, -3],
             bottomRight: [-4, -5],
diff --git a/spec/component/popup/PopupComponent.spec.ts b/spec/component/popup/PopupComponent.spec.ts
index 4092328c4..620a9e4c0 100644
--- a/spec/component/popup/PopupComponent.spec.ts
+++ b/spec/component/popup/PopupComponent.spec.ts
@@ -7,7 +7,7 @@ import { ContainerMockCreator } from "../../helper/ContainerMockCreator";
 import { NavigatorMockCreator } from "../../helper/NavigatorMockCreator";
 import { Popup } from "../../../src/component/popup/popup/Popup";
 import { PopupComponent } from "../../../src/component/popup/PopupComponent";
-import { ISize } from "../../../src/render/interfaces/ISize";
+import { ViewportSize } from "../../../src/render/interfaces/ViewportSize";
 import { RenderCamera } from "../../../src/render/RenderCamera";
 import { Container } from "../../../src/viewer/Container";
 
@@ -287,7 +287,7 @@ describe("PopupComponent.updateAdded", () => {
         popupComponent.activate();
 
         (<Subject<RenderCamera>>containerMock.renderService.renderCamera$).next(null);
-        (<Subject<ISize>>containerMock.renderService.size$).next(null);
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next(null);
         (<Subject<Transform>>navigatorMock.stateService.currentTransform$).next(null);
 
         popupComponent.add([popup]);
@@ -313,7 +313,7 @@ describe("PopupComponent.updateAdded", () => {
         popupComponent.activate();
 
         (<Subject<RenderCamera>>containerMock.renderService.renderCamera$).next(null);
-        (<Subject<ISize>>containerMock.renderService.size$).next(null);
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next(null);
         (<Subject<Transform>>navigatorMock.stateService.currentTransform$).next(null);
 
         popupComponent.add([popup]);
@@ -345,7 +345,7 @@ describe("PopupComponent.updateAll", () => {
         popupComponent.activate();
 
         (<Subject<RenderCamera>>containerMock.renderService.renderCamera$).next(null);
-        (<Subject<ISize>>containerMock.renderService.size$).next(null);
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next(null);
         (<Subject<Transform>>navigatorMock.stateService.currentTransform$).next(null);
 
         expect(updateSpy.calls.count()).toBe(1);
@@ -373,7 +373,7 @@ describe("PopupComponent.updateAll", () => {
         popupComponent.deactivate();
 
         (<Subject<RenderCamera>>containerMock.renderService.renderCamera$).next(null);
-        (<Subject<ISize>>containerMock.renderService.size$).next(null);
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next(null);
         (<Subject<Transform>>navigatorMock.stateService.currentTransform$).next(null);
 
         expect(updateSpy.calls.count()).toBe(0);
diff --git a/spec/component/sequence/SequenceComponent.spec.ts b/spec/component/sequence/SequenceComponent.spec.ts
index 3073c13e5..843600244 100644
--- a/spec/component/sequence/SequenceComponent.spec.ts
+++ b/spec/component/sequence/SequenceComponent.spec.ts
@@ -11,9 +11,9 @@ import { Node } from "../../../src/graph/Node";
 import { SequenceComponent } from "../../../src/component/sequence/SequenceComponent";
 import { SequenceDOMRenderer } from "../../../src/component/sequence/SequenceDOMRenderer";
 import { GraphMode } from "../../../src/graph/GraphMode";
-import { IEdgeStatus } from "../../../src/graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../../src/graph/interfaces/NavigationEdgeStatus";
 import { Sequence } from "../../../src/graph/Sequence";
-import { ISize } from "../../../src/render/interfaces/ISize";
+import { ViewportSize } from "../../../src/render/interfaces/ViewportSize";
 import { State } from "../../../src/state/State";
 import { Container } from "../../../src/viewer/Container";
 
@@ -132,26 +132,26 @@ describe("SequenceComponent.activate", () => {
 
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node1, "key", "nodeKey1");
+        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node1, "id", "nodeKey1");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(cacheNodeSpy.calls.count()).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(node1.key);
+        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(node1.id);
 
         const node2: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node2, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node2, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node2, "key", "nodeKey2");
+        mockCreator.mockProperty(node2, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node2, "id", "nodeKey2");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node2);
 
         expect(cacheNodeSpy.calls.count()).toBe(2);
-        expect(cacheNodeSpy.calls.argsFor(1)[0]).toBe(node2.key);
+        expect(cacheNodeSpy.calls.argsFor(1)[0]).toBe(node2.id);
 
         const node3: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node3, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node3, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node3, "key", "nodeKey2");
+        mockCreator.mockProperty(node3, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node3, "id", "nodeKey2");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node3);
 
         expect(cacheNodeSpy.calls.count()).toBe(2);
@@ -171,9 +171,9 @@ describe("SequenceComponent.activate", () => {
 
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node1, "key", "nodeKey1");
-        mockCreator.mockProperty(node1, "sequenceKey", "sequenceKey1");
+        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node1, "id", "nodeKey1");
+        mockCreator.mockProperty(node1, "sequenceId", "sequenceKey1");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(cacheSequenceSpy.calls.count()).toBe(1);
@@ -181,18 +181,18 @@ describe("SequenceComponent.activate", () => {
 
         const node2: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node2, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node2, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node2, "key", "nodeKey2");
-        mockCreator.mockProperty(node2, "sequenceKey", "sequenceKey1");
+        mockCreator.mockProperty(node2, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node2, "id", "nodeKey2");
+        mockCreator.mockProperty(node2, "sequenceId", "sequenceKey1");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node2);
 
         expect(cacheSequenceSpy.calls.count()).toBe(1);
 
         const node3: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node3, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node3, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node3, "key", "nodeKey3");
-        mockCreator.mockProperty(node3, "sequenceKey", "sequenceKey2");
+        mockCreator.mockProperty(node3, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node3, "id", "nodeKey3");
+        mockCreator.mockProperty(node3, "sequenceId", "sequenceKey2");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node3);
 
         expect(cacheSequenceSpy.calls.count()).toBe(2);
@@ -215,9 +215,9 @@ describe("SequenceComponent.activate", () => {
 
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
-        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<IEdgeStatus>());
-        mockCreator.mockProperty(node1, "key", "nodeKey1");
-        mockCreator.mockProperty(node1, "sequenceKey", "sequenceKey1");
+        mockCreator.mockProperty(node1, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
+        mockCreator.mockProperty(node1, "id", "nodeKey1");
+        mockCreator.mockProperty(node1, "sequenceId", "sequenceKey1");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         const graphModeSubject$: Subject<GraphMode> = <Subject<GraphMode>>navigatorMock.graphService.graphMode$;
@@ -270,13 +270,13 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", "nodeKey1");
-        mockCreator.mockProperty(node1, "sequenceKey", "sequenceKey1");
+        mockCreator.mockProperty(node1, "id", "nodeKey1");
+        mockCreator.mockProperty(node1, "sequenceId", "sequenceKey1");
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
@@ -303,7 +303,7 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const sequenceKey1: string = "sequenceKey1";
         const nodeKey1: string = "nodeKey1";
@@ -311,13 +311,13 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey1);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey1);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1] }));
 
         expect(renderSpy.calls.count()).toBe(2);
         expect(renderSpy.calls.argsFor(1)[4]).toBe(0);
@@ -343,7 +343,7 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const sequenceKey1: string = "sequenceKey1";
         const nodeKey1: string = "nodeKey1";
@@ -352,13 +352,13 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey1);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey1);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2] }));
 
         expect(renderSpy.calls.count()).toBe(2);
         expect(renderSpy.calls.argsFor(1)[4]).toBe(0);
@@ -367,8 +367,8 @@ describe("SequenceComponent.activate", () => {
         const node2: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node2, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node2, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node2, "key", nodeKey2);
-        mockCreator.mockProperty(node2, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node2, "id", nodeKey2);
+        mockCreator.mockProperty(node2, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node2);
 
         expect(renderSpy.calls.count()).toBe(4);
@@ -397,7 +397,7 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const sequenceKey1: string = "sequenceKey1";
         const sequenceKey2: string = "sequenceKey2";
@@ -407,13 +407,13 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey1);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey1);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1] }));
 
         expect(renderSpy.calls.count()).toBe(2);
         expect(renderSpy.calls.mostRecent().args[4]).toBe(0);
@@ -424,13 +424,13 @@ describe("SequenceComponent.activate", () => {
         const node2: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node2, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node2, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node2, "key", nodeKey2);
-        mockCreator.mockProperty(node2, "sequenceKey", sequenceKey2);
+        mockCreator.mockProperty(node2, "id", nodeKey2);
+        mockCreator.mockProperty(node2, "sequenceId", sequenceKey2);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node2);
 
         changingPositionChangedSubject$.next(false);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey2, keys: [nodeKey2] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey2, image_ids: [nodeKey2] }));
 
         expect(renderSpy.calls.count()).toBeGreaterThan(2);
         expect(renderSpy.calls.mostRecent().args[4]).toBe(0);
@@ -444,7 +444,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        (<jasmine.Spy>navigatorMock.moveToKey$).and.returnValue(new Subject<Node>());
+        (<jasmine.Spy>navigatorMock.moveTo$).and.returnValue(new Subject<Node>());
 
         const changedSubject$: Subject<SequenceDOMRenderer> = new Subject<SequenceDOMRenderer>();
         mockCreator.mockProperty(renderer, "changed$", changedSubject$);
@@ -463,7 +463,7 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const sequenceKey1: string = "sequenceKey1";
         const nodeKey1: string = "nodeKey1";
@@ -473,13 +473,13 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         changingPositionChangedSubject$.next(true);
         indexSubject$.next(0);
 
@@ -494,7 +494,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        (<jasmine.Spy>navigatorMock.moveToKey$).and.returnValue(new Subject<Node>());
+        (<jasmine.Spy>navigatorMock.moveTo$).and.returnValue(new Subject<Node>());
 
         const changedSubject$: Subject<SequenceDOMRenderer> = new Subject<SequenceDOMRenderer>();
         mockCreator.mockProperty(renderer, "changed$", changedSubject$);
@@ -513,7 +513,7 @@ describe("SequenceComponent.activate", () => {
 
         (<Subject<State>>navigatorMock.stateService.state$).next(State.Traversing);
         (<Subject<number>>navigatorMock.playService.speed$).next(1);
-        (<Subject<ISize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
+        (<Subject<ViewportSize>>containerMock.renderService.size$).next({ height: 1, width: 1 });
 
         const sequenceKey1: string = "sequenceKey1";
         const nodeKey1: string = "nodeKey1";
@@ -523,15 +523,15 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey1);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey1);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
 
         expect(renderSpy.calls.count()).toBe(1);
         expect(renderSpy.calls.mostRecent().args[4]).toBe(null);
         expect(renderSpy.calls.mostRecent().args[5]).toBe(null);
 
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
 
         expect(renderSpy.calls.count()).toBe(2);
         expect(renderSpy.calls.mostRecent().args[4]).toBe(0);
@@ -563,8 +563,8 @@ describe("SequenceComponent.activate", () => {
         const node3: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node3, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node3, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node3, "key", nodeKey3);
-        mockCreator.mockProperty(node3, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node3, "id", nodeKey3);
+        mockCreator.mockProperty(node3, "sequenceId", sequenceKey1);
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node3);
 
         expect(renderSpy.calls.mostRecent().args[4]).toBe(2);
@@ -577,7 +577,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveTo$;
         moveToKeySpy.and.returnValue(new Subject<Node>());
 
         const indexSubject$: Subject<number> = new Subject<number>();
@@ -601,11 +601,11 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
 
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         indexSubject$.next(1);
 
         expect(moveToKeySpy.calls.count()).toBe(0);
@@ -622,7 +622,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveTo$;
         moveToKeySpy.and.returnValue(new Subject<Node>());
 
         const indexSubject$: Subject<number> = new Subject<number>();
@@ -646,11 +646,11 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
 
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         indexSubject$.next(1);
 
         expect(moveToKeySpy.calls.count()).toBe(0);
@@ -668,7 +668,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveTo$;
         moveToKeySpy.and.returnValue(new Subject<Node>());
 
         const indexSubject$: Subject<number> = new Subject<number>();
@@ -692,11 +692,11 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
 
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         indexSubject$.next(1);
 
         expect(moveToKeySpy.calls.count()).toBe(0);
@@ -713,7 +713,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveTo$;
         moveToKeySpy.and.returnValue(new Subject<Node>());
 
         const indexSubject$: Subject<number> = new Subject<number>();
@@ -737,11 +737,11 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
 
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         indexSubject$.next(1);
 
         expect(moveToKeySpy.calls.count()).toBe(0);
@@ -767,7 +767,7 @@ describe("SequenceComponent.activate", () => {
         (<jasmine.Spy>navigatorMock.graphService.cacheSequenceNodes$).and.returnValue(new Subject<Sequence>());
         (<jasmine.Spy>navigatorMock.graphService.cacheNode$).and.returnValue(new Subject<Node>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigatorMock.moveTo$;
         moveToKeySpy.and.returnValue(new Subject<Node>());
 
         const indexSubject$: Subject<number> = new Subject<number>();
@@ -791,11 +791,11 @@ describe("SequenceComponent.activate", () => {
         const node1: Node = nodeHelper.createNode();
         mockCreator.mockProperty(node1, "spatialEdges", { cached: false, edges: [] });
         mockCreator.mockProperty(node1, "sequenceEdges$", observableOf({ cached: false, edges: [] }));
-        mockCreator.mockProperty(node1, "key", nodeKey2);
-        mockCreator.mockProperty(node1, "sequenceKey", sequenceKey1);
+        mockCreator.mockProperty(node1, "id", nodeKey2);
+        mockCreator.mockProperty(node1, "sequenceId", sequenceKey1);
 
         (<Subject<Node>>navigatorMock.stateService.currentNode$).next(node1);
-        sequenceSubject$.next(new Sequence({ key: sequenceKey1, keys: [nodeKey1, nodeKey2, nodeKey3] }));
+        sequenceSubject$.next(new Sequence({ id: sequenceKey1, image_ids: [nodeKey1, nodeKey2, nodeKey3] }));
         indexSubject$.next(1);
 
         expect(moveToKeySpy.calls.count()).toBe(0);
diff --git a/spec/component/spatialData/SpatialDataCache.spec.ts b/spec/component/spatialData/SpatialDataCache.spec.ts
index 2c7bc837f..122b01c26 100644
--- a/spec/component/spatialData/SpatialDataCache.spec.ts
+++ b/spec/component/spatialData/SpatialDataCache.spec.ts
@@ -1,9 +1,9 @@
 import { Subject } from "rxjs";
 
 import { Node } from "../../../src/graph/Node";
-import { FalcorDataProvider } from "../../../src/api/FalcorDataProvider";
+import { FalcorDataProvider } from "../../../src/api/falcor/FalcorDataProvider";
 import { GeohashGeometryProvider } from "../../../src/api/GeohashGeometryProvider";
-import { IClusterReconstruction } from "../../../src/api/interfaces/IClusterReconstruction";
+import { ClusterReconstructionContract } from "../../../src/api/contracts/ClusterReconstructionContract";
 import { SpatialDataCache } from "../../../src/component/spatialdata/SpatialDataCache";
 import { GraphService } from "../../../src/graph/GraphService";
 import { GraphServiceMockCreator } from "../../helper/GraphServiceMockCreator";
@@ -107,7 +107,7 @@ describe("SpatialDataCache.cacheTile$", () => {
         expect(cache.isCachingTile(hash)).toBe(false);
         expect(cache.hasTile(hash)).toBe(true);
         expect(cache.getTile(hash).length).toBe(1);
-        expect(cache.getTile(hash)[0].key).toBe(node.key);
+        expect(cache.getTile(hash)[0].id).toBe(node.id);
     });
 
     it("should catch error", (done: Function) => {
@@ -172,8 +172,8 @@ describe("SpatialDataCache.cacheReconstructions$", () => {
         let emitCount: number = 0;
         cache.cacheClusterReconstructions$(hash)
             .subscribe(
-                (r: IClusterReconstruction): void => {
-                    expect(r.key).toBe(node.clusterKey);
+                (r: ClusterReconstructionContract): void => {
+                    expect(r.id).toBe(node.clusterId);
                     emitCount++;
                 },
                 undefined,
@@ -183,7 +183,7 @@ describe("SpatialDataCache.cacheReconstructions$", () => {
                     done();
                 });
 
-        resolver({ key: node.clusterKey });
+        resolver({ key: node.clusterId });
     });
 
     it("should not have an errored reconstruction", (done: Function) => {
@@ -263,7 +263,7 @@ describe("SpatialDataCache.cacheReconstructions$", () => {
 
         let resolver: Function;
         const promise: any = {
-            then: (resolve: (value: IClusterReconstruction) => void): void => {
+            then: (resolve: (value: ClusterReconstructionContract) => void): void => {
                 resolver = resolve;
             },
         };
@@ -298,7 +298,7 @@ describe("SpatialDataCache.cacheReconstructions$", () => {
         expect(emitCount2).toBe(0);
 
         resolver({
-            key: node.clusterKey,
+            key: node.clusterId,
             points: [],
             refererence_lla: { altitude: 0, latitude: 0, longitude: 0 },
         });
@@ -311,7 +311,7 @@ describe("SpatialDataCache.cacheReconstructions$", () => {
         expect(cache.isCachingClusterReconstructions(hash)).toBe(false);
         expect(cache.hasClusterReconstructions(hash)).toBe(true);
         expect(cache.getClusterReconstructions(hash).length).toBe(1);
-        expect(cache.getClusterReconstructions(hash)[0].key).toBe(node.clusterKey);
+        expect(cache.getClusterReconstructions(hash)[0].id).toBe(node.clusterId);
     });
 });
 
@@ -365,7 +365,7 @@ describe("SpatialDataCache.updateCell$", () => {
         expect(cache.hasTile(cellId)).toBe(true);
         expect(cacheCellSpy.calls.count()).toBe(2);
         expect(cache.getTile(cellId).length).toBe(1);
-        expect(cache.getTile(cellId)[0].key).toBe(node.key);
+        expect(cache.getTile(cellId)[0].id).toBe(node.id);
     });
 
     it("should add new nodes to cell", () => {
@@ -397,17 +397,17 @@ describe("SpatialDataCache.updateCell$", () => {
         cacheCell2$.next([node]);
 
         expect(cache.getTile(cellId).length).toBe(1);
-        expect(cache.getTile(cellId)[0].key).toBe(node.key);
+        expect(cache.getTile(cellId)[0].id).toBe(node.id);
     });
 });
 
 describe("SpatialDataCache.updateReconstructions$", () => {
-    const createCluster = (key: string): IClusterReconstruction => {
+    const createCluster = (key: string): ClusterReconstructionContract => {
         return {
             cameras: {},
-            key,
+            id: key,
             points: {},
-            reference_lla: { latitude: 0, longitude: 0, altitude: 0 },
+            reference: { lat: 0, lon: 0, alt: 0 },
             shots: {},
         }
     }
@@ -418,7 +418,7 @@ describe("SpatialDataCache.updateReconstructions$", () => {
             { clientToken: "cid" }, geometryProvider);
         spyOn(dataProvider, "getClusterReconstruction").and
             .returnValue(
-                new Promise<IClusterReconstruction>(() => { /* noop */ }));
+                new Promise<ClusterReconstructionContract>(() => { /* noop */ }));
 
         const graphService = new GraphServiceMockCreator().create();
         const cache = new SpatialDataCache(graphService, dataProvider);
@@ -432,7 +432,7 @@ describe("SpatialDataCache.updateReconstructions$", () => {
 
         let resolver: Function;
         const promise: any = {
-            then: (resolve: (value: IClusterReconstruction) => void): void => {
+            then: (resolve: (value: ClusterReconstructionContract) => void): void => {
                 resolver = resolve;
             },
         };
@@ -450,7 +450,7 @@ describe("SpatialDataCache.updateReconstructions$", () => {
 
         cache.cacheClusterReconstructions$(cellId).subscribe();
 
-        const cluster = createCluster(node.clusterKey);
+        const cluster = createCluster(node.clusterId);
         resolver(cluster);
 
         expect(cache.hasClusterReconstructions(cellId)).toBe(true);
@@ -472,7 +472,7 @@ describe("SpatialDataCache.updateReconstructions$", () => {
 
         let resolver: Function;
         const promise: any = {
-            then: (resolve: (value: IClusterReconstruction) => void): void => {
+            then: (resolve: (value: ClusterReconstructionContract) => void): void => {
                 resolver = resolve;
             },
         };
@@ -516,12 +516,12 @@ describe("SpatialDataCache.updateReconstructions$", () => {
                     expect(cache.hasClusterReconstructions(cellId)).toBe(true);
                     const cs = cache.getClusterReconstructions(cellId);
                     expect(cs.length).toBe(1);
-                    expect(cs[0].key).toBe(node.clusterKey);
+                    expect(cs[0].id).toBe(node.clusterId);
                     expect(clusterSpy.calls.count()).toBe(1);
                     done();
                 });
 
-        const cluster = createCluster(node.clusterKey);
+        const cluster = createCluster(node.clusterId);
         resolver(cluster);
     });
 });
diff --git a/spec/component/tag/CreateHandlerBase.spec.ts b/spec/component/tag/CreateHandlerBase.spec.ts
index db2f97991..3cb321e2f 100644
--- a/spec/component/tag/CreateHandlerBase.spec.ts
+++ b/spec/component/tag/CreateHandlerBase.spec.ts
@@ -3,7 +3,7 @@ import { Navigator } from "../../../src/viewer/Navigator";
 import { ContainerMockCreator } from "../../helper/ContainerMockCreator";
 import { NavigatorMockCreator } from "../../helper/NavigatorMockCreator";
 import { Component } from "../../../src/component/Component";
-import { ITagConfiguration } from "../../../src/component/interfaces/ITagConfiguration";
+import { TagConfiguration } from "../../../src/component/interfaces/TagConfiguration";
 import { CreateHandlerBase } from "../../../src/component/tag/handlers/CreateHandlerBase";
 import { TagCreator } from "../../../src/component/tag/TagCreator";
 import { ViewportCoords } from "../../../src/geo/ViewportCoords";
@@ -19,10 +19,10 @@ class CreateTestHandler extends CreateHandlerBase {
     protected _getNameExtension(): string { return "create-test"; }
 }
 
-class TestComponent extends Component<ITagConfiguration> {
+class TestComponent extends Component<TagConfiguration> {
     protected _activate(): void { /*noop*/ }
     protected _deactivate(): void { /*noop*/ }
-    protected _getDefaultConfiguration(): ITagConfiguration { return {}; }
+    protected _getDefaultConfiguration(): TagConfiguration { return {}; }
 }
 
 describe("CreateHandlerBase.ctor", () => {
diff --git a/spec/component/tag/CreatePointHandler.spec.ts b/spec/component/tag/CreatePointHandler.spec.ts
index 233078922..46c014b54 100644
--- a/spec/component/tag/CreatePointHandler.spec.ts
+++ b/spec/component/tag/CreatePointHandler.spec.ts
@@ -5,7 +5,7 @@ import { NavigatorMockCreator } from "../../helper/NavigatorMockCreator";
 
 import { Navigator } from "../../../src/viewer/Navigator";
 import { Component } from "../../../src/component/Component";
-import { ITagConfiguration } from "../../../src/component/interfaces/ITagConfiguration";
+import { TagConfiguration } from "../../../src/component/interfaces/TagConfiguration";
 import { PointGeometry } from "../../../src/component/tag/geometry/PointGeometry";
 import { CreatePointHandler } from "../../../src/component/tag/handlers/CreatePointHandler";
 import { TagCreator } from "../../../src/component/tag/TagCreator";
@@ -13,10 +13,10 @@ import { ViewportCoords } from "../../../src/geo/ViewportCoords";
 import { Container } from "../../../src/viewer/Container";
 import { Geometry } from "../../../src/component/tag/geometry/Geometry";
 
-class TestComponent extends Component<ITagConfiguration> {
+class TestComponent extends Component<TagConfiguration> {
     protected _activate(): void { /*noop*/ }
     protected _deactivate(): void { /*noop*/ }
-    protected _getDefaultConfiguration(): ITagConfiguration { return {}; }
+    protected _getDefaultConfiguration(): TagConfiguration { return {}; }
 }
 
 describe("CreatePointHandler.ctor", () => {
diff --git a/spec/component/tag/ExtremePointRenderTag.spec.ts b/spec/component/tag/ExtremePointRenderTag.spec.ts
index 944af9c71..7fd426591 100644
--- a/spec/component/tag/ExtremePointRenderTag.spec.ts
+++ b/spec/component/tag/ExtremePointRenderTag.spec.ts
@@ -45,7 +45,7 @@ describe("ExtremePointRenderTag.getRetrievableObjects", () => {
         const extremePointRenderTag =
             new ExtremePointRenderTag(
                 extremePointTag,
-                transformHelper.createTransform("equirectangular"));
+                transformHelper.createTransform("spherical"));
 
         const retrievableObjects: THREE.Object3D[] = extremePointRenderTag.getRetrievableObjects();
 
diff --git a/spec/component/tag/OutlineRenderTag.spec.ts b/spec/component/tag/OutlineRenderTag.spec.ts
index 09bedb15b..32227171a 100644
--- a/spec/component/tag/OutlineRenderTag.spec.ts
+++ b/spec/component/tag/OutlineRenderTag.spec.ts
@@ -47,7 +47,7 @@ describe("OutlineRenderTag.getRetrievableObjects", () => {
             new OutlineRenderTag(
                 outlineTag,
                 transformHelper.createTransform(
-                    "equirectangular"));
+                    "spherical"));
 
         const retrievableObjects = outlineRenderTag.getRetrievableObjects();
 
@@ -67,7 +67,7 @@ describe("OutlineRenderTag.getRetrievableObjects", () => {
             new OutlineRenderTag(
                 outlineTag,
                 transformHelper.createTransform(
-                    "equirectangular"));
+                    "spherical"));
 
         const retrievableObjects = outlineRenderTag.getRetrievableObjects();
 
diff --git a/spec/component/tag/PointGeometry.spec.ts b/spec/component/tag/PointGeometry.spec.ts
index ef79785ff..f2fa864a9 100644
--- a/spec/component/tag/PointGeometry.spec.ts
+++ b/spec/component/tag/PointGeometry.spec.ts
@@ -34,7 +34,7 @@ describe("PointGeometry.setVertex2d", () => {
         let pointGeometry = new PointGeometry(original);
 
         let point = [0.5, 0.5];
-        let transform = transformHelper.createTransform("equirectangular");
+        let transform = transformHelper.createTransform("spherical");
 
         pointGeometry.setCentroid2d(point, transform);
 
@@ -47,7 +47,7 @@ describe("PointGeometry.setVertex2d", () => {
         let pointGeometry = new PointGeometry(original);
 
         let point = [-1, -1];
-        let transform = transformHelper.createTransform("equirectangular");
+        let transform = transformHelper.createTransform("spherical");
 
         pointGeometry.setCentroid2d(point, transform);
 
@@ -60,7 +60,7 @@ describe("PointGeometry.setVertex2d", () => {
         let pointGeometry = new PointGeometry(original);
 
         let point = [2, 2];
-        let transform = transformHelper.createTransform("equirectangular");
+        let transform = transformHelper.createTransform("spherical");
 
         pointGeometry.setCentroid2d(point, transform);
 
diff --git a/spec/component/tag/PointsGeometry.spec.ts b/spec/component/tag/PointsGeometry.spec.ts
index e5d40bf9b..5435cc10f 100644
--- a/spec/component/tag/PointsGeometry.spec.ts
+++ b/spec/component/tag/PointsGeometry.spec.ts
@@ -136,7 +136,7 @@ describe("PointsGeometry.getRect2d", () => {
         const pointsGeometry = new PointsGeometry(points);
 
         const helper = new TransformHelper();
-        const transform = helper.createTransform("equirectangular");
+        const transform = helper.createTransform("spherical");
         const result = pointsGeometry.getRect2d(transform);
 
         expect(result.length).toBe(4);
@@ -153,7 +153,7 @@ describe("PointsGeometry.getRect2d", () => {
         const pointsGeometry = new PointsGeometry(points);
 
         const helper = new TransformHelper();
-        const transform = helper.createTransform("equirectangular");
+        const transform = helper.createTransform("spherical");
         const result = pointsGeometry.getRect2d(transform);
 
         expect(result.length).toBe(4);
diff --git a/spec/component/tag/PolygonGeometry.spec.ts b/spec/component/tag/PolygonGeometry.spec.ts
index 38a864b08..0858a9779 100644
--- a/spec/component/tag/PolygonGeometry.spec.ts
+++ b/spec/component/tag/PolygonGeometry.spec.ts
@@ -496,7 +496,9 @@ describe("PolygonGeometry.get3dDomainTriangles", () => {
         const polygon = [[0, 0], [0.5, 0], [0.5, 0.5], [0, 0]];
         const geometry = new PolygonGeometry(polygon);
 
-        const transform = new Transform(1, 1, 1, 0.5, 1, [0, 0, 0], [0, 0, 0], undefined);
+        const transform = new Transform(
+            1, 1, 1, 0.5, [0, 0, 0], [0, 0, 0],
+            undefined, undefined, [1, 0, 0]);
 
         const triangles = geometry.get3dDomainTriangles3d(transform);
 
@@ -509,7 +511,9 @@ describe("PolygonGeometry.getTriangles", () => {
         const polygon = [[0, 0], [1e-4, 0], [1e-4, 1e-4], [0, 0]];
         const geometry = new PolygonGeometry(polygon);
 
-        const transform = new Transform(1, 1, 1, 0.5, 1, [0, 0, 0], [0, 0, 0], undefined);
+        const transform = new Transform(
+            1, 1, 1, 0.5, [0, 0, 0], [0, 0, 0],
+            undefined, undefined, [1, 0, 0]);
 
         const triangles = geometry.getTriangles3d(transform);
 
@@ -520,7 +524,9 @@ describe("PolygonGeometry.getTriangles", () => {
         const polygon = [[0, 0], [0.5, 0], [0.5, 0.5], [0, 0]];
         const geometry = new PolygonGeometry(polygon);
 
-        const transform = new Transform(1, 1, 1, 0.5, 1, [0, 0, 0], [0, 0, 0], undefined);
+        const transform = new Transform(
+            1, 1, 1, 0.5, [0, 0, 0], [0, 0, 0],
+            undefined, undefined, [1, 0, 0]);
 
         const triangles = geometry.getTriangles3d(transform);
 
@@ -530,7 +536,9 @@ describe("PolygonGeometry.getTriangles", () => {
     it("should return two triangles for four close points for a spherical", () => {
         const polygon = [[0, 0], [1e-4, 0], [1e-4, 1e-4], [0, 1e-4], [0, 0]];
         const geometry = new PolygonGeometry(polygon);
-        const transform = new Transform(1, 1, 1, 0.5, 1, [0, 0, 0], [0, 0, 0], undefined);
+        const transform = new Transform(
+            1, 1, 1, 0.5, [0, 0, 0], [0, 0, 0],
+            undefined, undefined, [1, 0, 0]);
 
         const triangles = geometry.getTriangles3d(transform);
 
diff --git a/spec/component/tag/RectGeometry.spec.ts b/spec/component/tag/RectGeometry.spec.ts
index 66621cff4..d7abe4b15 100644
--- a/spec/component/tag/RectGeometry.spec.ts
+++ b/spec/component/tag/RectGeometry.spec.ts
@@ -114,7 +114,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.5, 0.5];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(0, vertex, transform);
 
@@ -129,7 +129,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.5, 0.5];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -144,7 +144,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.5, 0.5];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(2, vertex, transform);
 
@@ -159,7 +159,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.5, 0.5];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -174,7 +174,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [-1, -1];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -189,7 +189,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [2, 2];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -204,7 +204,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.3, original[3]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -219,7 +219,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.6, original[1]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -234,7 +234,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [original[2], 0.4];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -249,7 +249,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [original[0], 0.6];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -264,7 +264,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.9, original[1]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -279,7 +279,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.1, original[3]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -294,7 +294,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.8, original[1]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -309,7 +309,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.9, original[3]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -324,7 +324,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.1, original[1]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -339,7 +339,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.99, original[3]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(3, vertex, transform);
 
@@ -354,7 +354,7 @@ describe("RectGeometry.setVertex2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let vertex = [0.01, original[1]];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setVertex2d(1, vertex, transform);
 
@@ -403,7 +403,7 @@ describe("RectGeometry.setCentroid2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let centroid = [0, 0.2];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setCentroid2d(centroid, transform);
 
@@ -433,7 +433,7 @@ describe("RectGeometry.setCentroid2d", () => {
         let rectGeometry = new RectGeometry(original);
 
         let centroid = [0.2, 0];
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.setCentroid2d(centroid, transform);
 
@@ -681,7 +681,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should invert for spherical when right side passes boundary rightward", () => {
         const rect = [0.9, 0.5, 0.99, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -695,7 +695,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should invert for spherical when left side passes right side and boundary rightward", () => {
         const rect = [0.9, 0.5, 0.99, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -709,7 +709,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should uninvert for spherical when left side passes boundary rightward", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -723,7 +723,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should uninvert for spherical when left side passes right side and boundary rightward", () => {
         const rect = [0.99, 0.5, 0.01, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -737,7 +737,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should invert for spherical when left side passes boundary leftward", () => {
         const rect = [0.01, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -751,7 +751,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should invert for spherical when right side passes left side and boundary leftward", () => {
         const rect = [0.01, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -765,7 +765,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should uninvert for spherical when right side passes boundary leftward", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -779,7 +779,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should uninvert for spherical when right side passes left side and boundary leftward", () => {
         const rect = [0.99, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -793,7 +793,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion for anchor index 0", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -807,7 +807,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion for anchor index 1", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
 
@@ -821,7 +821,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion for anchor index 2", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(2);
 
@@ -835,7 +835,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion for anchor index 2", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -849,7 +849,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion when passing vertically to the right", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
 
@@ -869,7 +869,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should keep inversion when passing vertically to the left", () => {
         const rect = [0.9, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(2);
 
@@ -889,7 +889,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should reset loop when right passes left", () => {
         const rect = [0.15, 0.5, 0.1, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
 
@@ -903,7 +903,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should reset loop when left passes right", () => {
         const rect = [0.2, 0.5, 0.15, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -919,7 +919,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should rotate anchor index clockwise for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
         expect(rectGeometry.anchorIndex).toBe(1);
@@ -944,7 +944,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should rotate anchor index counterclockwise for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
         expect(rectGeometry.anchorIndex).toBe(1);
@@ -969,7 +969,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should rotate anchor index diagonally se-nw for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
         expect(rectGeometry.anchorIndex).toBe(1);
@@ -986,7 +986,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should rotate anchor index diagonally ne-sw for spherical", () => {
         const rect = [0.5, 0.4, 0.6, 0.5];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(0);
         expect(rectGeometry.anchorIndex).toBe(0);
@@ -1003,7 +1003,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should not change anchor index when opposite decreases to equal anchor for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
 
@@ -1019,7 +1019,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should not change anchor index when opposite increases to equal anchor for spherical", () => {
         const rect = [0.4, 0.4, 0.5, 0.5];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(3);
 
@@ -1035,7 +1035,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should always have a larger right x than left x except when equal for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
 
@@ -1052,7 +1052,7 @@ describe("RectGeometry.setOppositeVertex", () => {
     it("should always have a larger bottom y than top y except when equal for spherical", () => {
         const rect = [0.5, 0.5, 0.6, 0.6];
         const rectGeometry = new RectGeometry(rect);
-        const transform = transformHelper.createTransform("equirectangular");
+        const transform = transformHelper.createTransform("spherical");
 
         rectGeometry.initializeAnchorIndexing(1);
 
diff --git a/spec/component/tag/TagScene.spec.ts b/spec/component/tag/TagScene.spec.ts
index 132a50b82..32f956eb8 100644
--- a/spec/component/tag/TagScene.spec.ts
+++ b/spec/component/tag/TagScene.spec.ts
@@ -4,7 +4,7 @@ import { RectGeometry } from "../../../src/component/tag/geometry/RectGeometry";
 import { RenderTag } from "../../../src/component/tag/tag/RenderTag";
 import { Tag } from "../../../src/component/tag/tag/Tag";
 import { TagScene } from "../../../src/component/tag/TagScene";
-import { ISize } from "../../../src/render/interfaces/ISize";
+import { ViewportSize } from "../../../src/render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../../src/viewer/interfaces/ISpriteAtlas";
 
 describe("TagScene.ctor", () => {
@@ -36,7 +36,7 @@ class TestTag extends Tag {
 
 class TestRenderTag extends RenderTag<Tag> {
     public dispose(): void { /*noop*/ }
-    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[] { return []; }
+    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] { return []; }
     public getGLObjects(): THREE.Object3D[] { return []; }
     public getRetrievableObjects(): THREE.Object3D[] { return []; }
 }
diff --git a/spec/component/utils/HandlerBase.spec.ts b/spec/component/utils/HandlerBase.spec.ts
index e75af2999..1a5ffda7c 100644
--- a/spec/component/utils/HandlerBase.spec.ts
+++ b/spec/component/utils/HandlerBase.spec.ts
@@ -4,27 +4,27 @@ import { NavigatorMockCreator } from "../../helper/NavigatorMockCreator";
 
 import { Navigator } from "../../../src/viewer/Navigator";
 import { Component } from "../../../src/component/Component";
-import { IComponentConfiguration } from "../../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../../src/component/interfaces/ComponentConfiguration";
 import { HandlerBase } from "../../../src/component/utils/HandlerBase";
 import { Container } from "../../../src/viewer/Container";
 
-interface ITestConfiguration extends IComponentConfiguration {
+interface TestConfiguration extends ComponentConfiguration {
     test: boolean;
 }
 
-class TestComponent extends Component<ITestConfiguration> {
+class TestComponent extends Component<TestConfiguration> {
     constructor(name: string, container: Container, navigator: Navigator) {
         super(name, container, navigator);
     }
     protected _activate(): void { /* noop */ }
     protected _deactivate(): void { /* noop */ }
-    protected _getDefaultConfiguration(): ITestConfiguration { return { test: false }; }
+    protected _getDefaultConfiguration(): TestConfiguration { return { test: false }; }
 }
 
-class TestHandler extends HandlerBase<ITestConfiguration> {
+class TestHandler extends HandlerBase<TestConfiguration> {
     protected _disable(): void { /* noop */ }
     protected _enable(): void { /* noop */ }
-    protected _getConfiguration(enable: boolean): ITestConfiguration { return { test: enable }; }
+    protected _getConfiguration(enable: boolean): TestConfiguration { return { test: enable }; }
 }
 
 describe("HandlerBase.ctor", () => {
diff --git a/spec/geo/GeoCoords.spec.ts b/spec/geo/GeoCoords.spec.ts
index 6dda35900..771eade1d 100644
--- a/spec/geo/GeoCoords.spec.ts
+++ b/spec/geo/GeoCoords.spec.ts
@@ -1,5 +1,5 @@
 import { GeoCoords } from "../../src/geo/GeoCoords";
-import { ILatLonAlt } from "../../src/geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../src/api/interfaces/LatLonAlt";
 
 let precision: number = 8;
 
@@ -14,7 +14,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert Equator - Greenwich to X axis value", () => {
-        let position: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let position: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
 
         let ecef: number[] = geoCoords.geodeticToEcef(position.lat, position.lon, position.alt);
 
@@ -24,7 +24,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert positions on Equator to WGS84 a distance", () => {
-        let position1: ILatLonAlt = { alt: 0, lat: 0, lon: 90 };
+        let position1: LatLonAlt = { alt: 0, lat: 0, lon: 90 };
 
         let ecef1: number[] = geoCoords.geodeticToEcef(position1.lat, position1.lon, position1.alt);
 
@@ -32,7 +32,7 @@ describe("GeoCoords.geodeticToEcef", () => {
         expect(ecef1[1]).toBeCloseTo(wgs84a, precision);
         expect(ecef1[2]).toBeCloseTo(0, precision);
 
-        let position2: ILatLonAlt = { alt: 0, lat: 0, lon: 180 };
+        let position2: LatLonAlt = { alt: 0, lat: 0, lon: 180 };
 
         let ecef2: number[] = geoCoords.geodeticToEcef(position2.lat, position2.lon, position2.alt);
 
@@ -40,7 +40,7 @@ describe("GeoCoords.geodeticToEcef", () => {
         expect(ecef2[1]).toBeCloseTo(0, precision);
         expect(ecef2[2]).toBeCloseTo(0, precision);
 
-        let position3: ILatLonAlt = { alt: 0, lat: 0, lon: -90 };
+        let position3: LatLonAlt = { alt: 0, lat: 0, lon: -90 };
 
         let ecef3: number[] = geoCoords.geodeticToEcef(position3.lat, position3.lon, position3.alt);
 
@@ -50,7 +50,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert random Equator postion correctly", () => {
-        let position: ILatLonAlt = { alt: 0, lat: 0, lon: 35.6589 };
+        let position: LatLonAlt = { alt: 0, lat: 0, lon: 35.6589 };
 
         let ecef: number[] = geoCoords.geodeticToEcef(position.lat, position.lon, position.alt);
 
@@ -60,7 +60,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert value with altitude correctly", () => {
-        let position: ILatLonAlt = { alt: 452.43537987, lat: 0, lon: 0 };
+        let position: LatLonAlt = { alt: 452.43537987, lat: 0, lon: 0 };
 
         let ecef: number[] = geoCoords.geodeticToEcef(position.lat, position.lon, position.alt);
 
@@ -70,7 +70,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert North Pole value correctly", () => {
-        let position: ILatLonAlt = { alt: 0, lat: 90, lon: 0 };
+        let position: LatLonAlt = { alt: 0, lat: 90, lon: 0 };
 
         let ecef: number[] = geoCoords.geodeticToEcef(position.lat, position.lon, position.alt);
 
@@ -80,7 +80,7 @@ describe("GeoCoords.geodeticToEcef", () => {
     });
 
     it("should convert back and forth between WGS84 and ECEF and correspond", () => {
-        let position: ILatLonAlt = { alt: 25.34543543, lat: 12.469889789, lon: -33.34589734 };
+        let position: LatLonAlt = { alt: 25.34543543, lat: 12.469889789, lon: -33.34589734 };
 
         let ecef: number[] = geoCoords.geodeticToEcef(position.lat, position.lon, position.alt);
         let rePosition: number[] = geoCoords.ecefToGeodetic(ecef[0], ecef[1], ecef[2]);
@@ -166,7 +166,7 @@ describe("GeoCoords.ecefToEnu", () => {
     });
 
     it("should convert to ECEF position corresponding to geodetic to ENU at origin", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let ecef: number[] = [wgs84a, 0, 0];
 
         let enu: number[] = geoCoords.ecefToEnu(ecef[0], ecef[1], ecef[2], ref.lat, ref.lon, ref.alt);
@@ -177,7 +177,7 @@ describe("GeoCoords.ecefToEnu", () => {
     });
 
     it("should convert positions on Equator to ENU positions at origin", () => {
-        let ref1: ILatLonAlt = { alt: 0, lat: 0, lon: 90 };
+        let ref1: LatLonAlt = { alt: 0, lat: 0, lon: 90 };
         let ecef1: number[] = [0, wgs84a, 0];
 
         let enu1: number[] = geoCoords.ecefToEnu(ecef1[0], ecef1[1], ecef1[2], ref1.lat, ref1.lon, ref1.alt);
@@ -186,7 +186,7 @@ describe("GeoCoords.ecefToEnu", () => {
         expect(enu1[1]).toBeCloseTo(0, precision);
         expect(enu1[2]).toBeCloseTo(0, precision);
 
-        let ref2: ILatLonAlt = { alt: 0, lat: 0, lon: 180 };
+        let ref2: LatLonAlt = { alt: 0, lat: 0, lon: 180 };
         let ecef2: number[] = [-wgs84a, 0, 0];
 
         let enu2: number[] = geoCoords.ecefToEnu(ecef2[0], ecef2[1], ecef2[2], ref2.lat, ref2.lon, ref2.alt);
@@ -195,7 +195,7 @@ describe("GeoCoords.ecefToEnu", () => {
         expect(enu2[1]).toBeCloseTo(0, precision);
         expect(enu2[2]).toBeCloseTo(0, precision);
 
-        let ref3: ILatLonAlt = { alt: 0, lat: 0, lon: -90 };
+        let ref3: LatLonAlt = { alt: 0, lat: 0, lon: -90 };
         let ecef3: number[] = [0, -wgs84a, 0];
 
         let enu3: number[] = geoCoords.ecefToEnu(ecef3[0], ecef3[1], ecef3[2], ref3.lat, ref3.lon, ref3.alt);
@@ -206,7 +206,7 @@ describe("GeoCoords.ecefToEnu", () => {
     });
 
     it("should convert ECEF position with altitude to ENU with correct z-value", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
 
         let altitude: number = 5.38973284;
         let ecef: number[] = [wgs84a + altitude, 0, 0];
@@ -219,7 +219,7 @@ describe("GeoCoords.ecefToEnu", () => {
     });
 
     it("should convert ECEF position with translation to correct ENU position", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
 
         let translation: number = 1.38973284;
         let ecef: number[] = [wgs84a, translation, translation];
@@ -240,7 +240,7 @@ describe("GeoCoords.enuToEcef", () => {
     });
 
     it("should convert to ENU position at origin to ECEF X-value", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let enu: number[] = [0, 0, 0];
 
         let ecef: number[] = geoCoords.enuToEcef(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
@@ -251,7 +251,7 @@ describe("GeoCoords.enuToEcef", () => {
     });
 
     it("should convert to ENU position with up value to ECEF X-value", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let enu: number[] = [0, 0, 7.3823847239847];
 
         let ecef: number[] = geoCoords.enuToEcef(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
@@ -262,7 +262,7 @@ describe("GeoCoords.enuToEcef", () => {
     });
 
     it("should convert ECEF position with translation to correct ENU position", () => {
-        let ref: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let ref: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
 
         let translation: number = -2.34875843758493;
         let enu: number[] = [translation, translation, 0];
@@ -283,8 +283,8 @@ describe("GeoCoords.geodeticToEnu", () => {
     });
 
     it("should convert to ENU position at origin when lla is at reference", () => {
-        let ref: ILatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
-        let lla: ILatLonAlt = { alt: ref.alt, lat: ref.lat, lon: ref.lon };
+        let ref: LatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
+        let lla: LatLonAlt = { alt: ref.alt, lat: ref.lat, lon: ref.lon };
 
         let enu: number[] = geoCoords.geodeticToEnu(lla.lat, lla.lon, lla.alt, ref.lat, ref.lon, ref.alt);
 
@@ -294,10 +294,10 @@ describe("GeoCoords.geodeticToEnu", () => {
     });
 
     it("should convert to ENU z value corresponding to diff with reference lla", () => {
-        let ref: ILatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
+        let ref: LatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
 
         let altTranslation: number = 4.4556433242;
-        let lla: ILatLonAlt = { alt: ref.alt + altTranslation, lat: ref.lat, lon: ref.lon };
+        let lla: LatLonAlt = { alt: ref.alt + altTranslation, lat: ref.lat, lon: ref.lon };
 
         let enu: number[] = geoCoords.geodeticToEnu(lla.lat, lla.lon, lla.alt, ref.lat, ref.lon, ref.alt);
 
@@ -307,8 +307,8 @@ describe("GeoCoords.geodeticToEnu", () => {
     });
 
     it("should convert back and forth between WGS84 and ENU and correspond", () => {
-        let ref: ILatLonAlt = { alt: -3.645563324, lat: 13.469889789, lon: 92.376689734 };
-        let lla: ILatLonAlt = { alt: ref.alt + 20, lat: ref.lat - 0.01, lon: ref.lon + 0.01 };
+        let ref: LatLonAlt = { alt: -3.645563324, lat: 13.469889789, lon: 92.376689734 };
+        let lla: LatLonAlt = { alt: ref.alt + 20, lat: ref.lat - 0.01, lon: ref.lon + 0.01 };
 
         let enu: number[] = geoCoords.geodeticToEnu(lla.lat, lla.lon, lla.alt, ref.lat, ref.lon, ref.alt);
         let reLla: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
@@ -327,7 +327,7 @@ describe("GeoCoords.enuToGeodetic", () => {
     });
 
     it("should convert to reference WGS84 when ENU position is origin", () => {
-        let ref: ILatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
+        let ref: LatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
         let enu: number[] = [0, 0, 0];
 
         let lla: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
@@ -338,7 +338,7 @@ describe("GeoCoords.enuToGeodetic", () => {
     });
 
     it("should convert to reference WGS84 at correct altitude when ENU position has non zero z value", () => {
-        let ref: ILatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
+        let ref: LatLonAlt = { alt: 12.523892390, lat: 12.9450823, lon: 133.34589734 };
         let enu: number[] = [0, 0, 5.234872384927];
 
         let lla: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
@@ -349,7 +349,7 @@ describe("GeoCoords.enuToGeodetic", () => {
     });
 
     it("should convert back and forth between ENU and WGS84 and correspond", () => {
-        let ref: ILatLonAlt = { alt: 7.34543543, lat: -52.469889789, lon: -113.34589734 };
+        let ref: LatLonAlt = { alt: 7.34543543, lat: -52.469889789, lon: -113.34589734 };
         let enu: number[] = [12.435534543, -55.34242121, 5.98023489];
 
         let lla: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], ref.lat, ref.lon, ref.alt);
diff --git a/spec/geo/Transform.spec.ts b/spec/geo/Transform.spec.ts
index 3b7ef25bb..24aa785f3 100644
--- a/spec/geo/Transform.spec.ts
+++ b/spec/geo/Transform.spec.ts
@@ -5,7 +5,8 @@ import { GeoHelper } from "../helper/GeoHelper";
 
 import { Node } from "../../src/graph/Node";
 import { Transform } from "../../src/geo/Transform";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { CameraType } from "../../src/geo/interfaces/CameraType";
 
 
 describe("Transform.rt", () => {
@@ -22,19 +23,21 @@ describe("Transform.rt", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let rt: THREE.Matrix4 = transform.rt;
 
@@ -64,19 +67,21 @@ describe("Transform.rt", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let rt: THREE.Matrix4 = transform.rt;
 
@@ -106,19 +111,21 @@ describe("Transform.rt", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let rt: THREE.Matrix4 = transform.rt;
 
@@ -148,19 +155,21 @@ describe("Transform.rt", () => {
         let t: number[] = [10, 20, 30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let rt: THREE.Matrix4 = transform.rt;
 
@@ -200,20 +209,22 @@ describe("Transform.srt", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.atomic_scale = 1;
-        fillNode.c_rotation = r;
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sRt: THREE.Matrix4 = transform.srt;
 
@@ -243,20 +254,22 @@ describe("Transform.srt", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.atomic_scale = 3;
-        fillNode.c_rotation = r;
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sRt: THREE.Matrix4 = transform.srt;
 
@@ -286,20 +299,22 @@ describe("Transform.srt", () => {
         let t: number[] = [-10, 20, -30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.atomic_scale = 0.5;
-        fillNode.c_rotation = r;
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sRt: THREE.Matrix4 = transform.srt;
 
@@ -338,20 +353,22 @@ describe("Transform.basicWidth", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.width = width;
-        fillNode.orientation = 1;
+        fillNode.exif_orientation = 1;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.basicWidth).toBe(width);
     });
@@ -362,20 +379,22 @@ describe("Transform.basicWidth", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.height = height;
-        fillNode.orientation = 5;
+        fillNode.exif_orientation = 5;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.basicWidth).toBe(height);
     });
@@ -394,20 +413,22 @@ describe("Transform.basicHeight", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.height = height;
-        fillNode.orientation = 1;
+        fillNode.exif_orientation = 1;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.basicHeight).toBe(height);
     });
@@ -418,20 +439,22 @@ describe("Transform.basicHeight", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.width = width;
-        fillNode.orientation = 5;
+        fillNode.exif_orientation = 5;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.basicHeight).toBe(width);
     });
@@ -449,19 +472,21 @@ describe("Transform.width", () => {
 
         let node: Node = new Node(helper.createCoreNode());
 
-        const fillNode: IFillNode = helper.createFillNode();
+        const fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.width = 0;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.width).toBe(4);
     });
@@ -472,19 +497,21 @@ describe("Transform.width", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.width = width;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.width).toBe(width);
     });
@@ -501,20 +528,22 @@ describe("Transform.height", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.height = -1;
-        fillNode.orientation = 1;
+        fillNode.exif_orientation = 1;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.height).toBe(3);
     });
@@ -525,20 +554,22 @@ describe("Transform.height", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.height = height;
-        fillNode.orientation = 1;
+        fillNode.exif_orientation = 1;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.height).toBe(height);
     });
@@ -555,18 +586,20 @@ describe("Transform.focal", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.focal).toBe(1);
     });
@@ -577,19 +610,21 @@ describe("Transform.focal", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.cfocal = focal;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.camera_parameters = [focal, 0, 0];
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.focal).toBe(focal);
     });
@@ -606,18 +641,20 @@ describe("Transform.orientation", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.orientation).toBe(1);
     });
@@ -628,19 +665,21 @@ describe("Transform.orientation", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.orientation = 3;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.exif_orientation = 3;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.orientation).toBe(orientation);
     });
@@ -660,14 +699,16 @@ describe("Transform.scale", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.scale).toBe(0);
     });
@@ -678,19 +719,21 @@ describe("Transform.scale", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.atomic_scale = 0.4;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         expect(transform.scale).toBe(scale);
     });
@@ -714,14 +757,16 @@ describe("Transform.unprojectSfM", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sfm: number[] = transform.unprojectSfM([0, 0], 0);
 
@@ -737,14 +782,16 @@ describe("Transform.unprojectSfM", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sfm: number[] = transform.unprojectSfM([0, 0], 0);
 
@@ -759,19 +806,21 @@ describe("Transform.unprojectSfM", () => {
         let t: number[] = geoHelper.getTranslation(r, C);
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let sfm: number[] = transform.unprojectSfM([0, 0], 0);
 
@@ -787,14 +836,16 @@ describe("Transform.unprojectSfM", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let depth: number = 10;
         let sfm: number[] = transform.unprojectSfM([0, 0], depth);
@@ -809,19 +860,21 @@ describe("Transform.unprojectSfM", () => {
         let t: number[] = [0, 0, 0];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = r;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = r;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let depth: number = 5;
         let sfm: number[] = transform.unprojectSfM([0.5, 0], depth);
@@ -848,14 +901,16 @@ describe("Transform.projectBasic", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = transform.projectBasic([0, 0, 10]);
 
@@ -870,14 +925,16 @@ describe("Transform.projectBasic", () => {
         node.makeFull(helper.createFillNode());
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = transform.projectBasic([1, 1, 10]);
 
@@ -899,20 +956,22 @@ describe("Transform.unprojectBasic", () => {
         let t: number[] = [10, 20, 30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = [0.1, 0.2, 0.3];
-        fillNode.orientation = 1;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = [0.1, 0.2, 0.3];
+        fillNode.exif_orientation = 1;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = [-0.1, 0.2];
 
@@ -928,20 +987,22 @@ describe("Transform.unprojectBasic", () => {
         let t: number[] = [10, 20, 30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = [0.1, 0.2, 0.3];
-        fillNode.orientation = 3;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = [0.1, 0.2, 0.3];
+        fillNode.exif_orientation = 3;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = [-0.1, 0.2];
 
@@ -957,20 +1018,22 @@ describe("Transform.unprojectBasic", () => {
         let t: number[] = [10, 20, 30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = [0.1, 0.2, 0.3];
-        fillNode.orientation = 6;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = [0.1, 0.2, 0.3];
+        fillNode.exif_orientation = 6;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = [-0.1, 0.2];
 
@@ -986,20 +1049,22 @@ describe("Transform.unprojectBasic", () => {
         let t: number[] = [10, 20, 30];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = [0.1, 0.2, 0.3];
-        fillNode.orientation = 8;
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = [0.1, 0.2, 0.3];
+        fillNode.exif_orientation = 8;
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let pixel: number[] = [-0.1, 0.2];
 
@@ -1015,21 +1080,23 @@ describe("Transform.unprojectBasic", () => {
         let t: number[] = [5, 15, 2];
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
-        fillNode.c_rotation = [0.5, -0.2, 0.3];
-        fillNode.camera_projection_type = "equirectangular";
+        let fillNode: SpatialImageEnt = helper.createFillNode();
+        fillNode.computed_rotation = [0.5, -0.2, 0.3];
+        fillNode.camera_type = "spherical";
 
         node.makeFull(fillNode);
 
         let transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             t,
-            null);
+            null,
+            null,
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         let basicPixel: number[] = [0.4534546, 0.72344564];
 
diff --git a/spec/graph/FilterCreator.spec.ts b/spec/graph/FilterCreator.spec.ts
index d9d796da5..3758f065f 100644
--- a/spec/graph/FilterCreator.spec.ts
+++ b/spec/graph/FilterCreator.spec.ts
@@ -1,7 +1,7 @@
 import { NodeHelper } from "../helper/NodeHelper";
 import { Node } from "../../src/graph/Node";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
 import { FilterCreator, FilterFunction } from "../../src/graph/FilterCreator";
 
 /**
@@ -26,17 +26,17 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "skey";
-        let filter: FilterFunction = creator.createFilter(["==", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["==", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = sequenceKey;
-        coreNode2.sequence_key = sequenceKey + "w";
-        coreNode3.sequence_key = null;
-        coreNode4.sequence_key = undefined;
+        coreNode1.sequence.id = sequenceKey;
+        coreNode2.sequence.id = sequenceKey + "w";
+        coreNode3.sequence.id = null;
+        coreNode4.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -60,10 +60,10 @@ describe("FilterCreator.createFilter", () => {
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt;
         fillNode2.captured_at = capturedAt + 1;
@@ -84,22 +84,22 @@ describe("FilterCreator.createFilter", () => {
     it("should compare ==, null", () => {
         let creator: FilterCreator = new FilterCreator();
 
-        let filter: FilterFunction = creator.createFilter(["==", "userKey", null]);
+        let filter = creator.createFilter(["==", "creatorId", null]);
 
         let node1: Node = new Node(helper.createCoreNode());
         let node2: Node = new Node(helper.createCoreNode());
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
-        fillNode1.user.key = null;
-        fillNode2.user.key = "ukey";
-        fillNode3.user.key = "null";
-        fillNode4.user.key = undefined;
+        fillNode1.creator.id = null;
+        fillNode2.creator.id = "ukey";
+        fillNode3.creator.id = "null";
+        fillNode4.creator.id = undefined;
 
         node1.makeFull(fillNode1);
         node2.makeFull(fillNode2);
@@ -124,17 +124,17 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "skey";
-        let filter: FilterFunction = creator.createFilter(["!=", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["!=", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = sequenceKey;
-        coreNode2.sequence_key = sequenceKey + "w";
-        coreNode3.sequence_key = null;
-        coreNode4.sequence_key = undefined;
+        coreNode1.sequence.id = sequenceKey;
+        coreNode2.sequence.id = sequenceKey + "w";
+        coreNode3.sequence.id = null;
+        coreNode4.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -158,10 +158,10 @@ describe("FilterCreator.createFilter", () => {
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt;
         fillNode2.captured_at = capturedAt + 1;
@@ -182,22 +182,22 @@ describe("FilterCreator.createFilter", () => {
     it("should compare !=, null", () => {
         let creator: FilterCreator = new FilterCreator();
 
-        let filter: FilterFunction = creator.createFilter(["!=", "userKey", null]);
+        let filter = creator.createFilter(["!=", "creatorId", null]);
 
         let node1: Node = new Node(helper.createCoreNode());
         let node2: Node = new Node(helper.createCoreNode());
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
-        fillNode1.user.key = null;
-        fillNode2.user.key = "ukey";
-        fillNode3.user.key = "null";
-        fillNode4.user.key = undefined;
+        fillNode1.creator.id = null;
+        fillNode2.creator.id = "ukey";
+        fillNode3.creator.id = "null";
+        fillNode4.creator.id = undefined;
 
         node1.makeFull(fillNode1);
         node2.makeFull(fillNode2);
@@ -230,11 +230,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -259,19 +259,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter([">", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter([">", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -306,11 +306,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -335,19 +335,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter([">=", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter([">=", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -382,11 +382,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -411,19 +411,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter(["<", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["<", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -458,11 +458,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -487,19 +487,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter(["<=", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["<=", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -534,11 +534,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -563,19 +563,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter(["in", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["in", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -593,15 +593,15 @@ describe("FilterCreator.createFilter", () => {
     it("should test in, null", () => {
         let creator: FilterCreator = new FilterCreator();
 
-        let filter: FilterFunction = creator.createFilter(["in", "sequenceKey", null]);
+        let filter: FilterFunction = creator.createFilter(["in", "sequenceId", null]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "1";
-        coreNode2.sequence_key = null;
-        coreNode3.sequence_key = undefined;
+        coreNode1.sequence.id = "1";
+        coreNode2.sequence.id = null;
+        coreNode3.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -621,9 +621,9 @@ describe("FilterCreator.createFilter", () => {
         let node2: Node = new Node(helper.createCoreNode());
         let node3: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = 0;
         fillNode2.captured_at = 1;
@@ -651,10 +651,10 @@ describe("FilterCreator.createFilter", () => {
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = 0;
         fillNode2.captured_at = 1;
@@ -692,11 +692,11 @@ describe("FilterCreator.createFilter", () => {
         let node4: Node = new Node(helper.createCoreNode());
         let node5: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
-        let fillNode5: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
+        let fillNode5: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = capturedAt - 1;
         fillNode2.captured_at = capturedAt;
@@ -721,19 +721,19 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let sequenceKey: string = "0";
-        let filter: FilterFunction = creator.createFilter(["!in", "sequenceKey", sequenceKey]);
+        let filter: FilterFunction = creator.createFilter(["!in", "sequenceId", sequenceKey]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
-        let coreNode4: ICoreNode = helper.createCoreNode();
-        let coreNode5: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
+        let coreNode4: CoreImageEnt = helper.createCoreNode();
+        let coreNode5: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "-1";
-        coreNode2.sequence_key = sequenceKey;
-        coreNode3.sequence_key = "1";
-        coreNode4.sequence_key = null;
-        coreNode5.sequence_key = undefined;
+        coreNode1.sequence.id = "-1";
+        coreNode2.sequence.id = sequenceKey;
+        coreNode3.sequence.id = "1";
+        coreNode4.sequence.id = null;
+        coreNode5.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -751,15 +751,15 @@ describe("FilterCreator.createFilter", () => {
     it("should test !in, null", () => {
         let creator: FilterCreator = new FilterCreator();
 
-        let filter: FilterFunction = creator.createFilter(["!in", "sequenceKey", null]);
+        let filter: FilterFunction = creator.createFilter(["!in", "sequenceId", null]);
 
-        let coreNode1: ICoreNode = helper.createCoreNode();
-        let coreNode2: ICoreNode = helper.createCoreNode();
-        let coreNode3: ICoreNode = helper.createCoreNode();
+        let coreNode1: CoreImageEnt = helper.createCoreNode();
+        let coreNode2: CoreImageEnt = helper.createCoreNode();
+        let coreNode3: CoreImageEnt = helper.createCoreNode();
 
-        coreNode1.sequence_key = "1";
-        coreNode2.sequence_key = null;
-        coreNode3.sequence_key = undefined;
+        coreNode1.sequence.id = "1";
+        coreNode2.sequence.id = null;
+        coreNode3.sequence.id = undefined;
 
         let node1: Node = new Node(coreNode1);
         let node2: Node = new Node(coreNode2);
@@ -779,9 +779,9 @@ describe("FilterCreator.createFilter", () => {
         let node2: Node = new Node(helper.createCoreNode());
         let node3: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = 0;
         fillNode2.captured_at = 1;
@@ -809,10 +809,10 @@ describe("FilterCreator.createFilter", () => {
         let node3: Node = new Node(helper.createCoreNode());
         let node4: Node = new Node(helper.createCoreNode());
 
-        let fillNode1: IFillNode = helper.createFillNode();
-        let fillNode2: IFillNode = helper.createFillNode();
-        let fillNode3: IFillNode = helper.createFillNode();
-        let fillNode4: IFillNode = helper.createFillNode();
+        let fillNode1: SpatialImageEnt = helper.createFillNode();
+        let fillNode2: SpatialImageEnt = helper.createFillNode();
+        let fillNode3: SpatialImageEnt = helper.createFillNode();
+        let fillNode4: SpatialImageEnt = helper.createFillNode();
 
         fillNode1.captured_at = 0;
         fillNode2.captured_at = 1;
@@ -842,7 +842,7 @@ describe("FilterCreator.createFilter", () => {
         let creator: FilterCreator = new FilterCreator();
 
         let node: Node = new Node(helper.createCoreNode());
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         fillNode.captured_at = 1;
         node.makeFull(fillNode);
 
diff --git a/spec/graph/Graph.spec.ts b/spec/graph/Graph.spec.ts
index c9a0f0890..4c0e0cc00 100644
--- a/spec/graph/Graph.spec.ts
+++ b/spec/graph/Graph.spec.ts
@@ -15,12 +15,11 @@ import {
 import { NodeHelper } from "../helper/NodeHelper";
 import { Node } from "../../src/graph/Node";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
+import { FalcorDataProvider } from "../../src/api/falcor/FalcorDataProvider";
 import { GeohashGeometryProvider } from "../../src/api/GeohashGeometryProvider";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { IFullNode } from "../../src/api/interfaces/IFullNode";
-import { ISequence } from "../../src/api/interfaces/ISequence";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { ImageEnt } from "../../src/api/ents/ImageEnt";
 import { GraphMapillaryError } from "../../src/error/GraphMapillaryError";
 import { EdgeCalculator } from "../../src/graph/edge/EdgeCalculator";
 import {
@@ -28,24 +27,29 @@ import {
     NodeIndexItem,
 } from "../../src/graph/Graph";
 import { GraphCalculator } from "../../src/graph/GraphCalculator";
-import { IGraphConfiguration } from "../../src/graph/interfaces/IGraphConfiguration";
+import { GraphConfiguration } from "../../src/graph/interfaces/GraphConfiguration";
 import { Sequence } from "../../src/graph/Sequence";
 import { DataProvider, GeometryProvider } from "../helper/ProviderHelper";
+import { SequenceEnt } from "../../src/api/ents/SequenceEnt";
+import { SpatialImagesContract } from "../../src/api/contracts/SpatialImagesContract";
+import { SequencesContract } from "../../src/api/contracts/SequencesContract";
+import { ImagesContract } from "../../src/api/contracts/ImagesContract";
+import { CoreImagesContract } from "../../src/api/contracts/CoreImagesContract";
 
 describe("Graph.ctor", () => {
     it("should create a graph", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
 
-        const graph: Graph = new Graph(api);
+        const graph = new Graph(api);
 
         expect(graph).toBeDefined();
     });
 
     it("should create a graph with all ctor params", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         expect(graph).toBeDefined();
     });
@@ -63,49 +67,52 @@ describe("Graph.cacheBoundingBox$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "bboxToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const key: string = "key";
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const id = "id";
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = key;
-        fullNode.cl.lat = 0.5;
-        fullNode.cl.lon = 0.5;
+        const fullNode = helper.createFullNode();
+        fullNode.id = id;
+        fullNode.computed_geometry.lat = 0.5;
+        fullNode.computed_geometry.lon = 0.5;
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         graph.cacheBoundingBox$({ lat: 0, lon: 0 }, { lat: 1, lon: 1 })
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(fullNode.key);
+                    expect(nodes[0].id).toBe(fullNode.id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
 
                     done();
                 });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[h] = {};
-        tileResult[h]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
-
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
+
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
     });
 
     it("should not cache tile of fill node if already cached", (done: Function) => {
@@ -113,72 +120,75 @@ describe("Graph.cacheBoundingBox$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "bboxToCellIds").and.returnValue([h]);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy: jasmine.Spy = spyOn(api, "imagesByH$");
-        imagesByHSpy.and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy = spyOn(api, "getCoreImages$");
+        coreImagesSpy.and.returnValue(coreImages);
 
-        const key: string = "key";
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFillSpy: jasmine.Spy = spyOn(api, "imageByKeyFill$");
-        imageByKeyFillSpy.and.returnValue(imageByKeyFill);
+        const id = "id";
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        const getSpatialImagesSpy = spyOn(api, "getSpatialImages$");
+        getSpatialImagesSpy.and.returnValue(getSpatialImages);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFullSpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        const getImagesSpy = spyOn(api, "getImages$");
+        getImagesSpy.and.returnValue(getImages);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = key;
-        fullNode.cl.lat = 0.5;
-        fullNode.cl.lon = 0.5;
+        const fullNode = helper.createFullNode();
+        fullNode.id = id;
+        fullNode.computed_geometry.lat = 0.5;
+        fullNode.computed_geometry.lon = 0.5;
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fullResult: { [key: string]: IFullNode } = {};
-        fullResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fullResult);
-        imageByKeyFull.complete();
+        const fullResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fullResult);
+        getImages.complete();
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[h] = {};
-        tileResult[h]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        expect(imagesByHSpy.calls.count()).toBe(1);
-        expect(imageByKeyFillSpy.calls.count()).toBe(0);
-        expect(imageByKeyFullSpy.calls.count()).toBe(1);
+        expect(coreImagesSpy.calls.count()).toBe(1);
+        expect(getSpatialImagesSpy.calls.count()).toBe(0);
+        expect(getImagesSpy.calls.count()).toBe(1);
 
         graph.cacheBoundingBox$({ lat: 0, lon: 0 }, { lat: 1, lon: 1 })
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(fullNode.key);
+                    expect(nodes[0].id).toBe(fullNode.id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
 
-                    expect(imagesByHSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFillSpy.calls.count()).toBe(0);
-                    expect(imageByKeyFullSpy.calls.count()).toBe(1);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
+                    expect(getSpatialImagesSpy.calls.count()).toBe(0);
+                    expect(getImagesSpy.calls.count()).toBe(1);
 
                     done();
                 });
@@ -186,29 +196,29 @@ describe("Graph.cacheBoundingBox$", () => {
 
     test("should only cache tile once for two similar calls", (done: Function) => {
         const dataProvider = new DataProvider();
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(dataProvider.geometry, "bboxToCellIds").and.returnValue([h]);
         spyOn(dataProvider.geometry, "latLonToCellIds").and.returnValue([h]);
         spyOn(dataProvider.geometry, "latLonToCellId").and.returnValue(h);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy: jasmine.Spy = spyOn(api, "imagesByH$");
-        imagesByHSpy.and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy = spyOn(api, "getCoreImages$");
+        coreImagesSpy.and.returnValue(coreImages);
 
-        const key: string = "key";
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const id = "id";
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = key;
-        fullNode.cl.lat = 0.5;
-        fullNode.cl.lon = 0.5;
+        const fullNode = helper.createFullNode();
+        fullNode.id = id;
+        fullNode.computed_geometry.lat = 0.5;
+        fullNode.computed_geometry.lon = 0.5;
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         let count: number = 0;
         observableMerge(
@@ -217,31 +227,34 @@ describe("Graph.cacheBoundingBox$", () => {
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(fullNode.key);
+                    expect(nodes[0].id).toBe(fullNode.id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
 
                     count++;
                 },
                 undefined,
                 (): void => {
                     expect(count).toBe(2);
-                    expect(imagesByHSpy.calls.count()).toBe(1);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
 
                     done();
                 });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[h] = {};
-        tileResult[h]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
-
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
+
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
     });
 });
 
@@ -253,117 +266,123 @@ describe("Graph.cacheFull$", () => {
     });
 
     it("should be fetching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
+        const fullNode = helper.createFullNode();
+        const getImages = new Subject<ImagesContract>();
 
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
-        graph.cacheFull$(fullNode.key);
+        const graph = new Graph(api, undefined, calculator);
+        graph.cacheFull$(fullNode.id);
 
-        expect(graph.isCachingFull(fullNode.key)).toBe(true);
-        expect(graph.hasNode(fullNode.key)).toBe(false);
-        expect(graph.getNode(fullNode.key)).toBeUndefined();
+        expect(graph.isCachingFull(fullNode.id)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(false);
+        expect(graph.getNode(fullNode.id)).toBeUndefined();
     });
 
     it("should fetch", (done: Function) => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key)
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id)
             .subscribe(
                 (g: Graph): void => {
-                    expect(g.isCachingFull(fullNode.key)).toBe(false);
-                    expect(g.hasNode(fullNode.key)).toBe(true);
-                    expect(g.getNode(fullNode.key)).toBeDefined();
-                    expect(g.getNode(fullNode.key).key).toBe(fullNode.key);
+                    expect(g.isCachingFull(fullNode.id)).toBe(false);
+                    expect(g.hasNode(fullNode.id)).toBe(true);
+                    expect(g.getNode(fullNode.id)).toBeDefined();
+                    expect(g.getNode(fullNode.id).id).toBe(fullNode.id);
 
                     done();
                 });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.isCachingFull(fullNode.key)).toBe(false);
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.getNode(fullNode.key)).toBeDefined();
-        expect(graph.getNode(fullNode.key).key).toBe(fullNode.key);
+        expect(graph.isCachingFull(fullNode.id)).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.getNode(fullNode.id)).toBeDefined();
+        expect(graph.getNode(fullNode.id).id).toBe(fullNode.id);
     });
 
     it("should not make additional calls when fetching same node twice", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
+        const fullNode = helper.createFullNode();
+        const getImages = new Subject<ImagesContract>();
 
-        const imageByKeyFullSpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull);
+        const getImagesSpy = spyOn(api, "getImages$");
+        getImagesSpy.and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        expect(imageByKeyFullSpy.calls.count()).toBe(1);
+        expect(getImagesSpy.calls.count()).toBe(1);
     });
 
     it("should throw when fetching node already in graph", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.isCachingFull(fullNode.key)).toBe(false);
-        expect(() => { graph.cacheFull$(fullNode.key); }).toThrowError(Error);
+        expect(graph.isCachingFull(fullNode.id)).toBe(false);
+        expect(() => { graph.cacheFull$(fullNode.id); }).toThrowError(Error);
     });
 
     it("should throw if sequence key is missing", (done: Function) => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = undefined;
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = undefined;
 
-        graph.cacheFull$(fullNode.key)
+        graph.cacheFull$(fullNode.id)
             .subscribe(
                 (): void => { return; },
                 (): void => {
                     done();
                 });
 
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(result);
+        getImages.complete();
     });
 
     it("should make full when fetched node has been retrieved in tile in parallell", () => {
@@ -371,71 +390,75 @@ describe("Graph.cacheFull$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
-
-        const key: string = "key";
-        const otherKey: string = "otherKey";
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeyFullOther: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.callFake(
-            (keys: string[]): Observable<{ [key: string]: IFullNode }> => {
-                if (keys[0] === key) {
-                    return imageByKeyFull;
-                } else if (keys[0] === otherKey) {
-                    return imageByKeyFullOther;
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
+
+        const id = "id";
+        const otherKey = "otherKey";
+        const getImages = new Subject<ImagesContract>();
+        const getImagesOther = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.callFake(
+            (imageIds: string[]): Observable<ImagesContract> => {
+                if (imageIds[0] === id) {
+                    return getImages;
+                } else if (imageIds[0] === otherKey) {
+                    return getImagesOther;
                 }
 
                 throw new GraphMapillaryError("Wrong key.");
             });
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const otherNode: IFullNode = helper.createFullNode();
-        otherNode.key = otherKey;
-        graph.cacheFull$(otherNode.key).subscribe(() => { /*noop*/ });
+        const otherNode = helper.createFullNode();
+        otherNode.id = otherKey;
+        graph.cacheFull$(otherNode.id).subscribe(() => { /*noop*/ });
 
-        const otherFullResult: { [key: string]: IFullNode } = {};
-        otherFullResult[otherNode.key] = otherNode;
-        imageByKeyFullOther.next(otherFullResult);
-        imageByKeyFullOther.complete();
+        const otherFullResult: ImagesContract = [{
+            node: otherNode,
+            node_id: otherNode.id,
+        }];
+        getImagesOther.next(otherFullResult);
+        getImagesOther.complete();
 
-        graph.hasTiles(otherNode.key);
-        observableFrom(graph.cacheTiles$(otherNode.key)).pipe(
+        graph.hasTiles(otherNode.id);
+        observableFrom(graph.cacheTiles$(otherNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = key;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        fullNode.id = id;
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        expect(graph.hasNode(fullNode.key)).toBe(false);
-        expect(graph.isCachingFull(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(false);
+        expect(graph.isCachingFull(fullNode.id)).toBe(true);
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[h] = {};
-        tileResult[h]["0"] = otherNode;
-        tileResult[h]["1"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: h,
+            images: [otherNode, fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.getNode(fullNode.key).full).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.getNode(fullNode.id).full).toBe(false);
 
-        const fullResult: { [key: string]: IFullNode } = {};
-        fullResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fullResult);
-        imageByKeyFull.complete();
+        const fullResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fullResult);
+        getImages.complete();
 
-        expect(graph.getNode(fullNode.key).full).toBe(true);
+        expect(graph.getNode(fullNode.id).full).toBe(true);
     });
 });
 
@@ -451,51 +474,54 @@ describe("Graph.cacheFill$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const tileNode: ICoreNode = helper.createCoreNode();
-        tileNode.key = "tileNodeKey";
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = tileNode;
-        imagesByH.next(result);
+        const tileNode: CoreImageEnt = helper.createCoreNode();
+        tileNode.id = "tileNodeKey";
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [tileNode],
+        };
+        coreImages.next(result);
 
-        expect(graph.getNode(tileNode.key).full).toBe(false);
-        expect(graph.isCachingFill(tileNode.key)).toBe(false);
+        expect(graph.getNode(tileNode.id).full).toBe(false);
+        expect(graph.isCachingFill(tileNode.id)).toBe(false);
 
-        graph.cacheFill$(tileNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFill$(tileNode.id).subscribe(() => { /*noop*/ });
 
-        expect(graph.getNode(tileNode.key).full).toBe(false);
-        expect(graph.isCachingFill(tileNode.key)).toBe(true);
+        expect(graph.getNode(tileNode.id).full).toBe(false);
+        expect(graph.isCachingFill(tileNode.id)).toBe(true);
     });
 
     it("should fill", () => {
@@ -503,56 +529,62 @@ describe("Graph.cacheFill$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const tileNode: ICoreNode = helper.createCoreNode();
-        tileNode.key = "tileNodeKey";
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = tileNode;
-        imagesByH.next(result);
+        const tileNode: CoreImageEnt = helper.createCoreNode();
+        tileNode.id = "tileNodeKey";
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [tileNode],
+        };
+        coreImages.next(result);
 
-        expect(graph.getNode(tileNode.key).full).toBe(false);
-        expect(graph.isCachingFill(tileNode.key)).toBe(false);
+        expect(graph.getNode(tileNode.id).full).toBe(false);
+        expect(graph.isCachingFill(tileNode.id)).toBe(false);
 
-        graph.cacheFill$(tileNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFill$(tileNode.id).subscribe(() => { /*noop*/ });
 
-        const fillTileNode: IFillNode = helper.createFullNode();
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[tileNode.key] = fillTileNode;
-        imageByKeyFill.next(fillResult);
+        const fillTileNode = helper.createFullNode();
+        fillTileNode.id = tileNode.id;
+        const spatialImages: SpatialImagesContract = [{
+            node: fillTileNode,
+            node_id: fillTileNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
 
-        expect(graph.getNode(tileNode.key).full).toBe(true);
-        expect(graph.isCachingFill(tileNode.key)).toBe(false);
+        expect(graph.getNode(tileNode.id).full).toBe(true);
+        expect(graph.isCachingFill(tileNode.id)).toBe(false);
     });
 
     it("should not make additional calls when filling same node twice", () => {
@@ -560,52 +592,55 @@ describe("Graph.cacheFill$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFillSpy: jasmine.Spy = spyOn(api, "imageByKeyFill$");
-        imageByKeyFillSpy.and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        const getSpatialImagesSpy = spyOn(api, "getSpatialImages$");
+        getSpatialImagesSpy.and.returnValue(getSpatialImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const tileNode: ICoreNode = helper.createCoreNode();
-        tileNode.key = "tileNodeKey";
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = tileNode;
-        imagesByH.next(result);
+        const tileNode: CoreImageEnt = helper.createCoreNode();
+        tileNode.id = "tileNodeKey";
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [tileNode],
+        };
+        coreImages.next(result);
 
-        expect(graph.getNode(tileNode.key).full).toBe(false);
-        expect(graph.isCachingFill(tileNode.key)).toBe(false);
+        expect(graph.getNode(tileNode.id).full).toBe(false);
+        expect(graph.isCachingFill(tileNode.id)).toBe(false);
 
-        graph.cacheFill$(tileNode.key).subscribe(() => { /*noop*/ });
-        graph.cacheFill$(tileNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFill$(tileNode.id).subscribe(() => { /*noop*/ });
+        graph.cacheFill$(tileNode.id).subscribe(() => { /*noop*/ });
 
-        expect(imageByKeyFillSpy.calls.count()).toBe(1);
+        expect(getSpatialImagesSpy.calls.count()).toBe(1);
     });
 
     it("should throw if already fetching", () => {
@@ -613,62 +648,64 @@ describe("Graph.cacheFill$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        graph.cacheFull$(fullNode.key);
+        const fullNode = helper.createFullNode();
+        graph.cacheFull$(fullNode.id);
 
-        expect(graph.isCachingFull(fullNode.key)).toBe(true);
+        expect(graph.isCachingFull(fullNode.id)).toBe(true);
 
-        expect(() => { graph.cacheFill$(fullNode.key); }).toThrowError(Error);
+        expect(() => { graph.cacheFill$(fullNode.id); }).toThrowError(Error);
     });
 
     it("should throw if node does not exist", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         expect(() => { graph.cacheFill$("key"); }).toThrowError(Error);
     });
 
     it("should throw if already full", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imageByKeyFill: Subject<{ [key: string]: IFillNode }> = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        graph.cacheFull$(fullNode.key);
+        const fullNode = helper.createFullNode();
+        graph.cacheFull$(fullNode.id);
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        expect(() => { graph.cacheFill$(fullNode.key); }).toThrowError(Error);
+        expect(() => { graph.cacheFill$(fullNode.id); }).toThrowError(Error);
     });
 });
 
@@ -684,29 +721,29 @@ describe("Graph.cacheTiles$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const node: Node = helper.createNode();
+        const node = helper.createNode();
 
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue(["h"]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         spyOn(graph, "hasNode").and.returnValue(true);
         spyOn(graph, "getNode").and.returnValue(node);
 
-        expect(graph.hasTiles(node.key)).toBe(false);
-        expect(graph.isCachingTiles(node.key)).toBe(false);
+        expect(graph.hasTiles(node.id)).toBe(false);
+        expect(graph.isCachingTiles(node.id)).toBe(false);
 
-        graph.cacheTiles$(node.key);
+        graph.cacheTiles$(node.id);
 
-        expect(graph.hasTiles(node.key)).toBe(false);
-        expect(graph.isCachingTiles(node.key)).toBe(true);
+        expect(graph.hasTiles(node.id)).toBe(false);
+        expect(graph.isCachingTiles(node.id)).toBe(true);
     });
 
     it("should cache tiles", () => {
@@ -714,41 +751,44 @@ describe("Graph.cacheTiles$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyResult: { [key: string]: IFullNode } = {};
-        imageByKeyResult[fullNode.key] = fullNode;
-        const imageByKeyFull: Observable<{ [key: string]: IFullNode }> = observableOf<{ [key: string]: IFullNode }>(imageByKeyResult);
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const imageByKeyResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        const getImages: Observable<ImagesContract> = observableOf<ImagesContract>(imageByKeyResult);
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, calculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        expect(graph.hasTiles(fullNode.key)).toBe(false);
-        expect(graph.isCachingTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(false);
+        expect(graph.isCachingTiles(fullNode.id)).toBe(false);
 
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = fullNode;
-        imagesByH.next(result);
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(result);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
-        expect(graph.isCachingTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
+        expect(graph.isCachingTiles(fullNode.id)).toBe(false);
     });
 
     it("should encode hs only once when checking tiles cache", () => {
@@ -756,26 +796,26 @@ describe("Graph.cacheTiles$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const node: Node = helper.createNode();
+        const node = helper.createNode();
 
-        const h: string = "h";
-        const encodeHsSpy: jasmine.Spy = spyOn(geometryProvider, "latLonToCellIds");
+        const h = "h";
+        const encodeHsSpy = spyOn(geometryProvider, "latLonToCellIds");
         encodeHsSpy.and.returnValue([h]);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
         spyOn(graph, "hasNode").and.returnValue(true);
         spyOn(graph, "getNode").and.returnValue(node);
 
-        expect(graph.hasTiles(node.key)).toBe(false);
-        expect(graph.hasTiles(node.key)).toBe(false);
+        expect(graph.hasTiles(node.id)).toBe(false);
+        expect(graph.hasTiles(node.id)).toBe(false);
 
         expect(encodeHsSpy.calls.count()).toBe(1);
     });
@@ -785,40 +825,43 @@ describe("Graph.cacheTiles$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
-        const encodeHsSpy: jasmine.Spy = spyOn(geometryProvider, "latLonToCellIds");
+        const encodeHsSpy = spyOn(geometryProvider, "latLonToCellIds");
         encodeHsSpy.and.returnValue([h]);
 
-        const imageByKeyResult: { [key: string]: IFullNode } = {};
-        imageByKeyResult[fullNode.key] = fullNode;
-        const imageByKeyFull: Observable<{ [key: string]: IFullNode }> = observableOf<{ [key: string]: IFullNode }>(imageByKeyResult);
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const imageByKeyResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        const getImages: Observable<ImagesContract> = observableOf<ImagesContract>(imageByKeyResult);
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, calculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        expect(graph.hasTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(false);
 
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = fullNode;
-        imagesByH.next(result);
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(result);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
         expect(encodeHsSpy.calls.count()).toBe(1);
     });
@@ -832,104 +875,113 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should throw when sequence does not exist", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        expect(() => { graph.cacheSequenceNodes$("sequenceKey"); }).toThrowError(Error);
+        expect(() => { graph.cacheSequenceNodes$("sequenceId"); }).toThrowError(Error);
     });
 
     it("should not be cached", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const key: string = "key";
+        const sequenceId = "sequenceId";
+        const id = "id";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [id] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(false);
     });
 
     it("should start caching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const key: string = "key";
+        const sequenceId = "sequenceId";
+        const id = "id";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [id] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
     });
 
     it("should be cached and not caching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        imageResult[nodeKey] = helper.createFullNode();
-        imageResult[nodeKey].key = nodeKey;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(false);
         expect(graph.hasNode(nodeKey)).toBe(true);
-        expect(graph.getNode(nodeKey).key).toBe(nodeKey);
+        expect(graph.getNode(nodeKey).id).toBe(nodeKey);
     });
 
     it("should not be cached after uncaching sequence node", () => {
@@ -937,51 +989,55 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue("h");
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
         graph.uncache([]);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(false);
     });
 
     it("should not be cached after uncaching sequence", () => {
@@ -989,53 +1045,57 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue("h");
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
         graph.uncache([]);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(false);
     });
 
     it("should be cached after uncaching if sequence is kept", () => {
@@ -1043,51 +1103,55 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue("h");
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
-        graph.uncache([], sequenceKey);
+        graph.uncache([], sequenceId);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
     });
 
     it("should be cached after uncaching if all nodes are kept", () => {
@@ -1095,51 +1159,55 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue("h");
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
-        graph.uncache([fullNode.key]);
+        graph.uncache([fullNode.id]);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
     });
 
     it("should not be cached after uncaching tile", () => {
@@ -1147,78 +1215,83 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const h: string = "h";
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(1);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(false);
     });
 
     it("should be cached after uncaching tile if sequence is kept", () => {
@@ -1226,144 +1299,159 @@ describe("Graph.cacheSequenceNodes$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const h: string = "h";
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-        const configuration: IGraphConfiguration = {
+        const edgeCalculator = new EdgeCalculator();
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.key = nodeKey;
-        fullNode.sequence_key = sequenceKey;
-        imageResult[fullNode.key] = fullNode;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        fullNode.sequence.id = sequenceId;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
-        graph.uncache([], sequenceKey);
+        graph.uncache([], sequenceId);
 
         expect(nodeUncacheSpy.calls.count()).toBe(1);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(true);
     });
 
     it("should throw if caching already cached sequence nodes", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        imageResult[nodeKey] = helper.createFullNode();
-        imageResult[nodeKey].key = nodeKey;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
-        expect(() => { graph.cacheSequenceNodes$(sequenceKey); }).toThrowError(Error);
+        expect(() => { graph.cacheSequenceNodes$(sequenceId); }).toThrowError(Error);
     });
 
     it("should only call API once if caching multiple times before response", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        const imageResult: { [key: string]: IFullNode } = {};
-        imageResult[nodeKey] = helper.createFullNode();
-        imageResult[nodeKey].key = nodeKey;
+        const fullNode = helper.createFullNode();
+        fullNode.id = nodeKey;
+        const imageResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
         imageByKey.next(imageResult);
         imageByKey.complete();
 
@@ -1371,66 +1459,75 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should not be cached and not caching on error", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKey);
+        const imageByKey = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const nodeKey: string = "nodeKey";
+        const sequenceId = "sequenceId";
+        const nodeKey = "nodeKey";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [nodeKey] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [nodeKey] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey)
+        graph.cacheSequenceNodes$(sequenceId)
             .subscribe(
                 (): void => { /*noop*/ },
                 (): void => { /*noop*/ });
 
         imageByKey.error(new Error("404"));
 
-        expect(graph.hasSequenceNodes(sequenceKey)).toBe(false);
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(false);
+        expect(graph.hasSequenceNodes(sequenceId)).toBe(false);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(false);
         expect(graph.hasNode(nodeKey)).toBe(false);
     });
 
     it("should start caching in with single batch when lass than or equal to 200 nodes", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array(200).fill(undefined).map((value, i) => { return i.toString(); }) };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array(200)
+                    .fill(undefined)
+                    .map((_, i) => i.toString())
+            },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(1);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(200);
@@ -1442,31 +1539,38 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should start caching in batches when more than 200 nodes", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array(201).fill(undefined).map((value, i) => { return i.toString(); }) };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array(201)
+                    .fill(undefined)
+                    .map((_, i) => i.toString()),
+            },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(2);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(200);
@@ -1479,34 +1583,42 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should start caching prioritized batch when reference node key is specified at start", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const referenceNodeKey: string = "referenceNodeKey";
+        const referenceNodeKey = "referenceNodeKey";
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array.from(new Array(400), (x, i): string => i.toString()) };
-        result[sequenceKey].keys.splice(0, 1, referenceNodeKey);
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array
+                    .from(
+                        new Array(400),
+                        (_, i): string => i.toString())
+            },
+            node_id: sequenceId,
+        }];
+        result[0].node.image_ids.splice(0, 1, referenceNodeKey);
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId, referenceNodeKey).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(3);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(50);
@@ -1521,34 +1633,42 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should start caching prioritized batch when reference node key is specified at end", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const referenceNodeKey: string = "referenceNodeKey";
+        const referenceNodeKey = "referenceNodeKey";
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array.from(new Array(400), (x, i): string => i.toString()) };
-        result[sequenceKey].keys.splice(399, 1, referenceNodeKey);
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array
+                    .from(
+                        new Array(400),
+                        (_, i) => i.toString()),
+            },
+            node_id: sequenceId,
+        }];
+        result[0].node.image_ids.splice(399, 1, referenceNodeKey);
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId, referenceNodeKey).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(3);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(50);
@@ -1564,34 +1684,42 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should start caching in prioritized batches when reference node key is specified in middle", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const referenceNodeKey: string = "referenceNodeKey";
+        const referenceNodeKey = "referenceNodeKey";
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array.from(new Array(400), (x, i): string => i.toString()) };
-        result[sequenceKey].keys.splice(200, 1, referenceNodeKey);
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array
+                    .from(
+                        new Array(400),
+                        (_, i) => i.toString()),
+            },
+            node_id: sequenceId,
+        }];
+        result[0].node.image_ids.splice(200, 1, referenceNodeKey);
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId, referenceNodeKey).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(3);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(50);
@@ -1608,67 +1736,84 @@ describe("Graph.cacheSequenceNodes$", () => {
     });
 
     it("should not corrupt sequence when caching in batches", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const referenceNodeKey: string = "referenceNodeKey";
+        const referenceNodeKey = "referenceNodeKey";
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array.from(new Array(400), (x, i): string => i.toString()) };
-        result[sequenceKey].keys.splice(200, 1, referenceNodeKey);
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array
+                    .from(
+                        new Array(400),
+                        (_, i) => i.toString()),
+            },
+            node_id: sequenceId,
+        }];
+        result[0].node.image_ids.splice(200, 1, referenceNodeKey);
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId, referenceNodeKey).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
-        expect(graph.getSequence(sequenceKey).keys.length).toBe(400);
-        expect(graph.getSequence(sequenceKey).keys).toEqual(result[sequenceKey].keys);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
+        expect(graph.getSequence(sequenceId).imageIds.length).toBe(400);
+        expect(graph.getSequence(sequenceId).imageIds)
+            .toEqual(result[0].node.image_ids);
     });
 
     it("should create single batch when fewer than or equal to 50 nodes", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const imageByKey: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeySpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const imageByKey = new Subject<ImagesContract>();
+        const imageByKeySpy = spyOn(api, "getImages$");
         imageByKeySpy.and.returnValue(imageByKey);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe();
+        graph.cacheSequence$(sequenceId).subscribe();
 
-        const referenceNodeKey: string = "referenceNodeKey";
+        const referenceNodeKey = "referenceNodeKey";
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: Array.from(new Array(50), (x, i): string => i.toString()) };
-        result[sequenceKey].keys.splice(20, 1, referenceNodeKey);
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: sequenceId,
+                image_ids: Array
+                    .from(
+                        new Array(50),
+                        (_, i) => i.toString()),
+            },
+            node_id: sequenceId,
+        }];
+        result[0].node.image_ids.splice(20, 1, referenceNodeKey);
+        getSequences.next(result);
+        getSequences.complete();
 
-        graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe();
+        graph.cacheSequenceNodes$(sequenceId, referenceNodeKey).subscribe();
 
-        expect(graph.isCachingSequenceNodes(sequenceKey)).toBe(true);
+        expect(graph.isCachingSequenceNodes(sequenceId)).toBe(true);
 
         expect(imageByKeySpy.calls.count()).toBe(1);
         expect(imageByKeySpy.calls.argsFor(0)[0].length).toBe(50);
@@ -1696,79 +1841,83 @@ describe("Graph.cacheSpatialArea$", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: 0, lon: 0 }, { lat: 0, lon: 0 }]);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
     });
 
     test("should not be cached", () => {
         const dataProvider = new DataProvider()
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const h: string = "h";
+        const h = "h";
         spyOn(dataProvider.geometry, "latLonToCellId").and.returnValue(h);
         spyOn(dataProvider.geometry, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
         expect(node).toBeDefined();
 
         spyOn(graphCalculator, "boundingBoxCorners")
             .and.returnValue([{ lat: -0.5, lon: -0.5 }, { lat: 0.5, lon: 0.5 }]);
 
-        const coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "otherKey";
+        const coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "otherKey";
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: { [index: string]: ICoreNode } } = {};
-        result[h] = {};
-        result[h]["0"] = fullNode;
-        result[h]["1"] = coreNode;
-        imagesByH.next(result);
+        const result: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode, coreNode],
+        };
+        coreImages.next(result);
 
-        const otherNode: Node = graph.getNode(coreNode.key);
+        const otherNode = graph.getNode(coreNode.id);
         expect(otherNode).toBeDefined();
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(false);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(false);
     });
 });
 
@@ -1780,40 +1929,47 @@ describe("Graph.cacheSpatialEdges", () => {
     });
 
     it("should use fallback keys", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: ["prev", fullNode.key, "next"] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: ["prev", fullNode.id, "next"],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: 0, lon: 0 }, { lat: 0, lon: 0 }]);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
 
-        const getPotentialSpy: jasmine.Spy = spyOn(edgeCalculator, "getPotentialEdges");
+        const getPotentialSpy = spyOn(edgeCalculator, "getPotentialEdges");
         getPotentialSpy.and.returnValue([]);
 
         spyOn(edgeCalculator, "computeStepEdges").and.returnValue([]);
@@ -1822,14 +1978,14 @@ describe("Graph.cacheSpatialEdges", () => {
         spyOn(edgeCalculator, "computePerspectiveToSphericalEdges").and.returnValue([]);
         spyOn(edgeCalculator, "computeSimilarEdges").and.returnValue([]);
 
-        graph.initializeCache(fullNode.key);
-        graph.cacheSpatialEdges(fullNode.key);
+        graph.initializeCache(fullNode.id);
+        graph.cacheSpatialEdges(fullNode.id);
 
         expect(getPotentialSpy.calls.first().args.length).toBe(3);
         expect(getPotentialSpy.calls.first().args[2].length).toBe(2);
         expect(getPotentialSpy.calls.first().args[2].indexOf("prev")).not.toBe(-1);
         expect(getPotentialSpy.calls.first().args[2].indexOf("next")).not.toBe(-1);
-        expect(getPotentialSpy.calls.first().args[2].indexOf(fullNode.key)).toBe(-1);
+        expect(getPotentialSpy.calls.first().args[2].indexOf(fullNode.id)).toBe(-1);
     });
 
     test("should apply filter", () => {
@@ -1840,73 +1996,87 @@ describe("Graph.cacheSpatialEdges", () => {
         spyOn(dataProvider.geometry, "latLonToCellIds")
             .and.returnValue([cellId]);
         const api = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
-
-        const fullNode: IFullNode = helper.createFullNode();
-        const otherFullNode: IFullNode = helper.createFullNode();
-        otherFullNode.key = "other-key";
-        otherFullNode.sequence_key = "otherSequenceKey";
-
-        const imageByKeyFill = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
-
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
-
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
-
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
-
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
-
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
-
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
-
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: ["prev", fullNode.key, "next"] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
-
-        const node = graph.getNode(fullNode.key);
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
+
+        const fullNode = helper.createFullNode();
+        const otherFullNode = helper.createFullNode();
+        otherFullNode.id = "other-key";
+        otherFullNode.sequence.id = "otherSequenceKey";
+
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
+
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
+
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
+
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
+
+        const graph = new Graph(
+            api,
+            undefined,
+            graphCalculator,
+            edgeCalculator);
+
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
+
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
+
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
+
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: ["prev", fullNode.id, "next"],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
+
+        const node = graph.getNode(fullNode.id);
         expect(node).toBeDefined();
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(false);
-        expect(graph.isCachingTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(false);
+        expect(graph.isCachingTiles(fullNode.id)).toBe(false);
 
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const coreResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        coreResult[cellId] = {};
-        coreResult[cellId]["0"] = fullNode;
-        coreResult[cellId]["1"] = otherFullNode;
-        imagesByH.next(coreResult);
+        const coreResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode, otherFullNode],
+        };
+        coreImages.next(coreResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: -0.5, lon: -0.5 }, { lat: 0.5, lon: 0.5 }]);
 
-        graph.cacheFill$(otherFullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFill$(otherFullNode.id).subscribe(() => { /*noop*/ });
 
-        const otherFetchResult: { [key: string]: IFullNode } = {};
-        otherFetchResult[otherFullNode.key] = otherFullNode;
-        imageByKeyFill.next(otherFetchResult);
-        imageByKeyFill.complete();
+        const otherSpatialImages: SpatialImagesContract = [{
+            node: otherFullNode,
+            node_id: otherFullNode.id,
+        }];
+        getSpatialImages.next(otherSpatialImages);
+        getSpatialImages.complete();
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
 
-        const getPotentialSpy: jasmine.Spy = spyOn(edgeCalculator, "getPotentialEdges");
+        const getPotentialSpy = spyOn(edgeCalculator, "getPotentialEdges");
         getPotentialSpy.and.returnValue([]);
 
         spyOn(edgeCalculator, "computeStepEdges").and.returnValue([]);
@@ -1915,56 +2085,63 @@ describe("Graph.cacheSpatialEdges", () => {
         spyOn(edgeCalculator, "computePerspectiveToSphericalEdges").and.returnValue([]);
         spyOn(edgeCalculator, "computeSimilarEdges").and.returnValue([]);
 
-        graph.setFilter(["==", "sequenceKey", "otherSequenceKey"]);
+        graph.setFilter(["==", "sequenceId", "otherSequenceKey"]);
 
-        graph.initializeCache(fullNode.key);
-        graph.cacheSpatialEdges(fullNode.key);
+        graph.initializeCache(fullNode.id);
+        graph.cacheSpatialEdges(fullNode.id);
 
         expect(getPotentialSpy.calls.first().args.length).toBe(3);
         expect(getPotentialSpy.calls.first().args[1].length).toBe(1);
-        expect(getPotentialSpy.calls.first().args[1][0].sequenceKey).toBe("otherSequenceKey");
+        expect(getPotentialSpy.calls.first().args[1][0].sequenceId).toBe("otherSequenceKey");
     });
 
     it("should apply remove by filtering", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: ["prev", fullNode.key, "next"] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: ["prev", fullNode.id, "next"],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: 0, lon: 0 }, { lat: 0, lon: 0 }]);
 
-        const otherFullNode: IFullNode = helper.createFullNode();
-        otherFullNode.sequence_key = "otherSequenceKey";
-        const otherNode: Node = new Node(otherFullNode);
+        const otherFullNode = helper.createFullNode();
+        otherFullNode.sequence.id = "otherSequenceKey";
+        const otherNode = new Node(otherFullNode);
         otherNode.makeFull(otherFullNode);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
 
-        const getPotentialSpy: jasmine.Spy = spyOn(edgeCalculator, "getPotentialEdges");
+        const getPotentialSpy = spyOn(edgeCalculator, "getPotentialEdges");
         getPotentialSpy.and.returnValue([]);
 
         spyOn(edgeCalculator, "computeStepEdges").and.returnValue([]);
@@ -1973,10 +2150,10 @@ describe("Graph.cacheSpatialEdges", () => {
         spyOn(edgeCalculator, "computePerspectiveToSphericalEdges").and.returnValue([]);
         spyOn(edgeCalculator, "computeSimilarEdges").and.returnValue([]);
 
-        graph.setFilter(["==", "sequenceKey", "none"]);
+        graph.setFilter(["==", "sequenceId", "none"]);
 
-        graph.initializeCache(fullNode.key);
-        graph.cacheSpatialEdges(fullNode.key);
+        graph.initializeCache(fullNode.id);
+        graph.cacheSpatialEdges(fullNode.id);
 
         expect(getPotentialSpy.calls.first().args.length).toBe(3);
         expect(getPotentialSpy.calls.first().args[1].length).toBe(0);
@@ -1991,293 +2168,322 @@ describe("Graph.cacheNodeSequence$", () => {
     });
 
     it("should not be cached", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        expect(graph.hasNodeSequence(fullNode.key)).toBe(false);
+        expect(graph.hasNodeSequence(fullNode.id)).toBe(false);
     });
 
     it("should be caching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
 
-        graph.cacheNodeSequence$(fullNode.key);
+        graph.cacheNodeSequence$(fullNode.id);
 
-        expect(graph.hasNodeSequence(fullNode.key)).toBe(false);
-        expect(graph.isCachingNodeSequence(fullNode.key)).toBe(true);
+        expect(graph.hasNodeSequence(fullNode.id)).toBe(false);
+        expect(graph.isCachingNodeSequence(fullNode.id)).toBe(true);
     });
 
     it("should be cached", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.cacheNodeSequence$(fullNode.key)
+        graph.cacheNodeSequence$(fullNode.id)
             .subscribe(
                 (g: Graph): void => {
-                    expect(g.hasNodeSequence(fullNode.key)).toBe(true);
-                    expect(g.isCachingNodeSequence(fullNode.key)).toBe(false);
+                    expect(g.hasNodeSequence(fullNode.id)).toBe(true);
+                    expect(g.isCachingNodeSequence(fullNode.id)).toBe(false);
                 });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: [fullNode.key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
-
-        expect(graph.hasNodeSequence(fullNode.key)).toBe(true);
-        expect(graph.isCachingNodeSequence(fullNode.key)).toBe(false);
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: [fullNode.id],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
+
+        expect(graph.hasNodeSequence(fullNode.id)).toBe(true);
+        expect(graph.isCachingNodeSequence(fullNode.id)).toBe(false);
     });
 
     it("should throw if node not in graph", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
 
-        expect(() => { graph.cacheNodeSequence$(fullNode.key); }).toThrowError(Error);
+        expect(() => { graph.cacheNodeSequence$(fullNode.id); }).toThrowError(Error);
     });
 
     it("should throw if already cached", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: [fullNode.key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: [fullNode.id],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasNodeSequence(fullNode.key)).toBe(true);
+        expect(graph.hasNodeSequence(fullNode.id)).toBe(true);
 
-        expect(() => { graph.cacheNodeSequence$(fullNode.key); }).toThrowError(Error);
+        expect(() => { graph.cacheNodeSequence$(fullNode.id); }).toThrowError(Error);
     });
 
     it("should call api only once when caching the same sequence twice in succession", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        const sequenceByKeySpy: jasmine.Spy = spyOn(api, "sequenceByKey$");
-        sequenceByKeySpy.and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        const sequenceByKeySpy = spyOn(api, "getSequences$");
+        sequenceByKeySpy.and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
         expect(sequenceByKeySpy.calls.count()).toBe(1);
     });
 
     it("should emit to changed stream", (done: Function) => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
         graph.changed$.pipe(
             first())
             .subscribe(
                 (g: Graph): void => {
-                    expect(g.hasNodeSequence(fullNode.key)).toBe(true);
-                    expect(g.isCachingNodeSequence(fullNode.key)).toBe(false);
+                    expect(g.hasNodeSequence(fullNode.id)).toBe(true);
+                    expect(g.isCachingNodeSequence(fullNode.id)).toBe(false);
 
                     done();
                 });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: [fullNode.key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: [fullNode.id],
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
     });
 });
 
 describe("Graph.cacheSequence$", () => {
     it("should not be cached", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        expect(graph.hasSequence(sequenceKey)).toBe(false);
+        expect(graph.hasSequence(sequenceId)).toBe(false);
     });
 
     it("should not be caching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        expect(graph.isCachingSequence(sequenceKey)).toBe(false);
+        expect(graph.isCachingSequence(sequenceId)).toBe(false);
     });
 
     it("should be caching", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
 
-        expect(graph.hasSequence(sequenceKey)).toBe(false);
-        expect(graph.isCachingSequence(sequenceKey)).toBe(true);
+        expect(graph.hasSequence(sequenceId)).toBe(false);
+        expect(graph.isCachingSequence(sequenceId)).toBe(true);
     });
 
     it("should cache", (done: Function) => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const sequenceKey: string = "sequenceKey";
-        const key: string = "key";
+        const sequenceId = "sequenceId";
+        const id = "id";
 
-        graph.cacheSequence$(sequenceKey)
+        graph.cacheSequence$(sequenceId)
             .subscribe(
                 (g: Graph): void => {
-                    expect(g.hasSequence(sequenceKey)).toBe(true);
-                    expect(g.isCachingSequence(sequenceKey)).toBe(false);
-                    expect(g.getSequence(sequenceKey)).toBeDefined();
-                    expect(g.getSequence(sequenceKey).key).toBe(sequenceKey);
-                    expect(g.getSequence(sequenceKey).keys.length).toBe(1);
-                    expect(g.getSequence(sequenceKey).keys[0]).toBe(key);
+                    expect(g.hasSequence(sequenceId)).toBe(true);
+                    expect(g.isCachingSequence(sequenceId)).toBe(false);
+                    expect(g.getSequence(sequenceId)).toBeDefined();
+                    expect(g.getSequence(sequenceId).id).toBe(sequenceId);
+                    expect(g.getSequence(sequenceId).imageIds.length).toBe(1);
+                    expect(g.getSequence(sequenceId).imageIds[0]).toBe(id);
 
                     done();
                 });
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [key] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [id] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
     });
 
     it("should call api only once when caching the same sequence twice in succession", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        const sequenceByKeySpy: jasmine.Spy = spyOn(api, "sequenceByKey$");
-        sequenceByKeySpy.and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        const sequenceByKeySpy = spyOn(api, "getSequences$");
+        sequenceByKeySpy.and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
 
         expect(sequenceByKeySpy.calls.count()).toBe(1);
     });
@@ -2291,40 +2497,47 @@ describe("Graph.resetSpatialEdges", () => {
     });
 
     it("should use fallback keys", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: ["prev", fullNode.key, "next"] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: ["prev", fullNode.id, "next"]
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: 0, lon: 0 }, { lat: 0, lon: 0 }]);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
 
-        const getPotentialSpy: jasmine.Spy = spyOn(edgeCalculator, "getPotentialEdges");
+        const getPotentialSpy = spyOn(edgeCalculator, "getPotentialEdges");
         getPotentialSpy.and.returnValue([]);
 
         spyOn(edgeCalculator, "computeStepEdges").and.returnValue([]);
@@ -2333,18 +2546,18 @@ describe("Graph.resetSpatialEdges", () => {
         spyOn(edgeCalculator, "computePerspectiveToSphericalEdges").and.returnValue([]);
         spyOn(edgeCalculator, "computeSimilarEdges").and.returnValue([]);
 
-        graph.initializeCache(fullNode.key);
-        graph.cacheSpatialEdges(fullNode.key);
+        graph.initializeCache(fullNode.id);
+        graph.cacheSpatialEdges(fullNode.id);
 
-        const nodeSequenceResetSpy: jasmine.Spy = spyOn(node, "resetSequenceEdges").and.stub();
-        const nodeSpatialResetSpy: jasmine.Spy = spyOn(node, "resetSpatialEdges").and.stub();
+        const nodeSequenceResetSpy = spyOn(node, "resetSequenceEdges").and.stub();
+        const nodeSpatialResetSpy = spyOn(node, "resetSpatialEdges").and.stub();
 
         graph.resetSpatialEdges();
 
         expect(nodeSequenceResetSpy.calls.count()).toBe(0);
         expect(nodeSpatialResetSpy.calls.count()).toBe(1);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
     });
 
     it("should have to re-encode hs after spatial edges reset", () => {
@@ -2352,64 +2565,72 @@ describe("Graph.resetSpatialEdges", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const graphCalculator: GraphCalculator = new GraphCalculator(null);
-        const edgeCalculator: EdgeCalculator = new EdgeCalculator();
+        const api = new APIWrapper(dataProvider);
+        const graphCalculator = new GraphCalculator(null);
+        const edgeCalculator = new EdgeCalculator();
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
-        const encodeHsSpy: jasmine.Spy = spyOn(geometryProvider, "latLonToCellIds");
+        const encodeHsSpy = spyOn(geometryProvider, "latLonToCellIds");
         encodeHsSpy.and.returnValue([h]);
 
-        const fullNode: IFullNode = helper.createFullNode();
+        const fullNode = helper.createFullNode();
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const graph: Graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const graph = new Graph(api, undefined, graphCalculator, edgeCalculator);
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fetchResult: { [key: string]: IFullNode } = {};
-        fetchResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fetchResult);
-        imageByKeyFull.complete();
+        const fetchResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fetchResult);
+        getImages.complete();
 
-        graph.cacheNodeSequence$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheNodeSequence$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const result: { [key: string]: ISequence } = {};
-        result[fullNode.sequence_key] = { key: fullNode.sequence_key, keys: ["prev", fullNode.key, "next"] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: {
+                id: fullNode.sequence.id,
+                image_ids: ["prev", fullNode.id, "next"]
+            },
+            node_id: fullNode.sequence.id,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasTiles(fullNode.key)).toBe(false);
-        expect(graph.isCachingTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(false);
+        expect(graph.isCachingTiles(fullNode.id)).toBe(false);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHresult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHresult[h] = {};
-        imagesByHresult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHresult);
+        const coreImagesresult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesresult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
-        expect(graph.isCachingTiles(fullNode.key)).toBe(false);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
+        expect(graph.isCachingTiles(fullNode.id)).toBe(false);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
         spyOn(graphCalculator, "boundingBoxCorners").and.returnValue([{ lat: 0, lon: 0 }, { lat: 0, lon: 0 }]);
 
-        expect(graph.hasSpatialArea(fullNode.key)).toBe(true);
+        expect(graph.hasSpatialArea(fullNode.id)).toBe(true);
 
-        const getPotentialSpy: jasmine.Spy = spyOn(edgeCalculator, "getPotentialEdges");
+        const getPotentialSpy = spyOn(edgeCalculator, "getPotentialEdges");
         getPotentialSpy.and.returnValue([]);
 
         spyOn(edgeCalculator, "computeStepEdges").and.returnValue([]);
@@ -2418,11 +2639,11 @@ describe("Graph.resetSpatialEdges", () => {
         spyOn(edgeCalculator, "computePerspectiveToSphericalEdges").and.returnValue([]);
         spyOn(edgeCalculator, "computeSimilarEdges").and.returnValue([]);
 
-        graph.initializeCache(fullNode.key);
-        graph.cacheSpatialEdges(fullNode.key);
+        graph.initializeCache(fullNode.id);
+        graph.cacheSpatialEdges(fullNode.id);
 
-        const nodeSequenceResetSpy: jasmine.Spy = spyOn(node, "resetSequenceEdges").and.stub();
-        const nodeSpatialResetSpy: jasmine.Spy = spyOn(node, "resetSpatialEdges").and.stub();
+        const nodeSequenceResetSpy = spyOn(node, "resetSequenceEdges").and.stub();
+        const nodeSpatialResetSpy = spyOn(node, "resetSpatialEdges").and.stub();
 
         graph.resetSpatialEdges();
 
@@ -2430,7 +2651,7 @@ describe("Graph.resetSpatialEdges", () => {
         expect(nodeSpatialResetSpy.calls.count()).toBe(1);
 
         const countBefore: number = encodeHsSpy.calls.count();
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
         const countAfter: number = encodeHsSpy.calls.count();
 
         expect(countAfter - countBefore).toBe(1);
@@ -2450,36 +2671,38 @@ describe("Graph.reset", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose");
+        const nodeDisposeSpy = spyOn(node, "dispose");
         nodeDisposeSpy.and.stub();
 
         graph.reset([]);
 
         expect(nodeDisposeSpy.calls.count()).toBe(0);
-        expect(graph.hasNode(node.key)).toBe(false);
+        expect(graph.hasNode(node.id)).toBe(false);
     });
 
     it("should dispose cache initialized node", () => {
@@ -2487,37 +2710,39 @@ describe("Graph.reset", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        graph.initializeCache(node.key);
+        const node = graph.getNode(fullNode.id);
+        graph.initializeCache(node.id);
 
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose");
+        const nodeDisposeSpy = spyOn(node, "dispose");
         nodeDisposeSpy.and.stub();
 
         graph.reset([]);
 
         expect(nodeDisposeSpy.calls.count()).toBe(1);
-        expect(graph.hasNode(node.key)).toBe(false);
+        expect(graph.hasNode(node.id)).toBe(false);
     });
 
     it("should keep supplied node", () => {
@@ -2525,43 +2750,45 @@ describe("Graph.reset", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        graph.initializeCache(node.key);
+        const node = graph.getNode(fullNode.id);
+        graph.initializeCache(node.id);
 
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose");
+        const nodeDisposeSpy = spyOn(node, "dispose");
         nodeDisposeSpy.and.stub();
-        const nodeResetSequenceSpy: jasmine.Spy = spyOn(node, "resetSequenceEdges");
+        const nodeResetSequenceSpy = spyOn(node, "resetSequenceEdges");
         nodeResetSequenceSpy.and.stub();
-        const nodeResetSpatialSpy: jasmine.Spy = spyOn(node, "resetSpatialEdges");
+        const nodeResetSpatialSpy = spyOn(node, "resetSpatialEdges");
         nodeResetSpatialSpy.and.stub();
 
-        graph.reset([node.key]);
+        graph.reset([node.id]);
 
         expect(nodeDisposeSpy.calls.count()).toBe(0);
         expect(nodeResetSequenceSpy.calls.count()).toBe(1);
         expect(nodeResetSpatialSpy.calls.count()).toBe(1);
-        expect(graph.hasNode(node.key)).toBe(true);
+        expect(graph.hasNode(node.id)).toBe(true);
     });
 });
 
@@ -2577,44 +2804,46 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(1);
 
-        expect(graph.hasNode(fullNode.key)).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(false);
     });
 
     it("should not remove prestored node if in kept sequence", () => {
@@ -2622,45 +2851,47 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequencKey";
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequencKey";
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
-        graph.uncache([], fullNode.sequence_key);
+        graph.uncache([], fullNode.sequence.id);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
     });
 
     it("should remove prestored node if cache initialized", () => {
@@ -2668,44 +2899,46 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeDisposeSpy.calls.count()).toBe(1);
 
-        expect(graph.hasNode(fullNode.key)).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(false);
     });
 
     it("should not remove prestored node when in keys to keep", () => {
@@ -2713,46 +2946,48 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
-        graph.uncache([fullNode.key]);
+        graph.uncache([fullNode.id]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
     });
 
     it("should not remove prestored node if below threshold", () => {
@@ -2760,46 +2995,48 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 1,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
     });
 
     it("should remove prestored node accessed earliest", () => {
@@ -2807,78 +3044,81 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
 
-        const imageByKeyFullSpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const getImagesSpy = spyOn(api, "getImages$");
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 1,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
-
-        const fullNode1: IFullNode = helper.createFullNode();
-        fullNode1.key = "key1";
-        const result1: { [key: string]: IFullNode } = {};
-        result1[fullNode1.key] = fullNode1;
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const imageByKeyFull1: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull1);
+        const fullNode1 = helper.createFullNode();
+        fullNode1.id = "key1";
+        const result1: ImagesContract = [{
+            node: fullNode1,
+            node_id: fullNode1.id,
+        }];
 
-        graph.cacheFull$(fullNode1.key).subscribe(() => { /*noop*/ });
+        const getImages1 = new Subject<ImagesContract>();
+        getImagesSpy.and.returnValue(getImages1);
 
-        imageByKeyFull1.next(result1);
-        imageByKeyFull1.complete();
+        graph.cacheFull$(fullNode1.id).subscribe(() => { /*noop*/ });
 
-        expect(graph.hasNode(fullNode1.key)).toBe(true);
+        getImages1.next(result1);
+        getImages1.complete();
 
-        const fullNode2: IFullNode = helper.createFullNode();
-        fullNode2.key = "key2";
-        const result2: { [key: string]: IFullNode } = {};
-        result2[fullNode2.key] = fullNode2;
+        expect(graph.hasNode(fullNode1.id)).toBe(true);
 
-        const imageByKeyFull2: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull2);
+        const fullNode2 = helper.createFullNode();
+        fullNode2.id = "key2";
+        const result2: ImagesContract = [{
+            node: fullNode2,
+            node_id: fullNode2.id,
+        }];
+        const getImages2 = new Subject<ImagesContract>();
+        getImagesSpy.and.returnValue(getImages2);
 
-        graph.cacheFull$(fullNode2.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode2.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull2.next(result2);
-        imageByKeyFull2.complete();
+        getImages2.next(result2);
+        getImages2.complete();
 
-        const node1: Node = graph.getNode(fullNode1.key);
-        graph.initializeCache(node1.key);
+        const node1 = graph.getNode(fullNode1.id);
+        graph.initializeCache(node1.id);
 
-        expect(graph.hasInitializedCache(node1.key)).toBe(true);
+        expect(graph.hasInitializedCache(node1.id)).toBe(true);
 
-        const node2: Node = graph.getNode(fullNode2.key);
-        graph.initializeCache(node2.key);
+        const node2 = graph.getNode(fullNode2.id);
+        graph.initializeCache(node2.id);
 
-        expect(graph.hasInitializedCache(node2.key)).toBe(true);
+        expect(graph.hasInitializedCache(node2.id)).toBe(true);
 
-        const nodeDisposeSpy1: jasmine.Spy = spyOn(node1, "dispose").and.stub();
-        const nodeDisposeSpy2: jasmine.Spy = spyOn(node2, "dispose").and.stub();
+        const nodeDisposeSpy1 = spyOn(node1, "dispose").and.stub();
+        const nodeDisposeSpy2 = spyOn(node2, "dispose").and.stub();
 
-        const time: number = new Date().getTime();
+        const time = new Date().getTime();
         while (new Date().getTime() === time) {
-            graph.hasNode(node2.key);
+            graph.hasNode(node2.id);
         }
 
-        graph.hasNode(node2.key);
+        graph.hasNode(node2.id);
 
         graph.uncache([]);
 
         expect(nodeDisposeSpy1.calls.count()).toBe(1);
         expect(nodeDisposeSpy2.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode1.key)).toBe(false);
-        expect(graph.hasNode(fullNode2.key)).toBe(true);
+        expect(graph.hasNode(fullNode1.id)).toBe(false);
+        expect(graph.hasNode(fullNode2.id)).toBe(true);
 
     });
 
@@ -2887,62 +3127,65 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        expect(graph.hasInitializedCache(fullNode.key)).toBe(true);
+        expect(graph.hasInitializedCache(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(1);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasInitializedCache(fullNode.key)).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasInitializedCache(fullNode.id)).toBe(false);
     });
 
     it("should not uncache cache initialized node if below threshold", () => {
@@ -2950,64 +3193,67 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        graph.initializeCache(fullNode.key);
+        graph.initializeCache(fullNode.id);
 
-        expect(graph.hasInitializedCache(fullNode.key)).toBe(true);
+        expect(graph.hasInitializedCache(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasInitializedCache(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasInitializedCache(fullNode.id)).toBe(true);
     });
 
     it("should not uncache cache initialized node if key should be kept", () => {
@@ -3015,63 +3261,66 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        graph.initializeCache(node.key);
+        const node = graph.getNode(fullNode.id);
+        graph.initializeCache(node.id);
 
-        expect(graph.hasInitializedCache(node.key)).toBe(true);
+        expect(graph.hasInitializedCache(node.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache");
+        const nodeUncacheSpy = spyOn(node, "uncache");
         nodeUncacheSpy.and.stub();
 
-        graph.uncache([node.key]);
+        graph.uncache([node.id]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(node.key)).toBe(true);
-        expect(graph.hasInitializedCache(node.key)).toBe(true);
+        expect(graph.hasNode(node.id)).toBe(true);
+        expect(graph.hasInitializedCache(node.id)).toBe(true);
     });
 
     it("should not uncache cache initialized node if key in use", () => {
@@ -3079,59 +3328,61 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        graph.initializeCache(node.key);
+        const node = graph.getNode(fullNode.id);
+        graph.initializeCache(node.id);
 
-        expect(graph.hasInitializedCache(node.key)).toBe(true);
+        expect(graph.hasInitializedCache(node.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(node.key);
-        observableFrom(graph.cacheTiles$(node.key)).pipe(
+        graph.hasTiles(node.id);
+        observableFrom(graph.cacheTiles$(node.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(node.key)).toBe(true);
-        expect(graph.hasInitializedCache(node.key)).toBe(true);
+        expect(graph.hasNode(node.id)).toBe(true);
+        expect(graph.hasInitializedCache(node.id)).toBe(true);
     });
 
     it("should uncache cache initialized node accessed earliest", () => {
@@ -3139,282 +3390,295 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFullSpy: jasmine.Spy = spyOn(api, "imageByKeyFull$");
+        const getImagesSpy = spyOn(api, "getImages$");
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode1: IFullNode = helper.createFullNode();
-        fullNode1.key = "key1";
-        const result1: { [key: string]: IFullNode } = {};
-        result1[fullNode1.key] = fullNode1;
+        const fullNode1 = helper.createFullNode();
+        fullNode1.id = "key1";
+        const result1: ImagesContract = [{
+            node: fullNode1,
+            node_id: fullNode1.id,
+        }];
 
-        const imageByKeyFull1: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull1);
+        const getImages1 = new Subject<ImagesContract>();
+        getImagesSpy.and.returnValue(getImages1);
 
-        graph.cacheFull$(fullNode1.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode1.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull1.next(result1);
-        imageByKeyFull1.complete();
+        getImages1.next(result1);
+        getImages1.complete();
 
-        expect(graph.hasNode(fullNode1.key)).toBe(true);
+        expect(graph.hasNode(fullNode1.id)).toBe(true);
 
-        const fullNode2: IFullNode = helper.createFullNode();
-        fullNode2.key = "key2";
-        const result2: { [key: string]: IFullNode } = {};
-        result2[fullNode2.key] = fullNode2;
+        const fullNode2 = helper.createFullNode();
+        fullNode2.id = "key2";
+        const result2: ImagesContract = [{
+            node: fullNode2,
+            node_id: fullNode2.id,
+        }];
 
-        const imageByKeyFull2: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        imageByKeyFullSpy.and.returnValue(imageByKeyFull2);
+        const getImages2 = new Subject<ImagesContract>();
+        getImagesSpy.and.returnValue(getImages2);
 
-        graph.cacheFull$(fullNode2.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode2.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull2.next(result2);
-        imageByKeyFull2.complete();
+        getImages2.next(result2);
+        getImages2.complete();
 
-        expect(graph.hasNode(fullNode2.key)).toBe(true);
+        expect(graph.hasNode(fullNode2.id)).toBe(true);
 
-        const node1: Node = graph.getNode(fullNode1.key);
-        graph.initializeCache(node1.key);
+        const node1 = graph.getNode(fullNode1.id);
+        graph.initializeCache(node1.id);
 
-        expect(graph.hasInitializedCache(node1.key)).toBe(true);
+        expect(graph.hasInitializedCache(node1.id)).toBe(true);
 
-        const node2: Node = graph.getNode(fullNode2.key);
-        graph.initializeCache(node2.key);
+        const node2 = graph.getNode(fullNode2.id);
+        graph.initializeCache(node2.id);
 
-        expect(graph.hasInitializedCache(node2.key)).toBe(true);
+        expect(graph.hasInitializedCache(node2.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode1.key);
-        observableFrom(graph.cacheTiles$(fullNode1.key)).pipe(
+        graph.hasTiles(fullNode1.id);
+        observableFrom(graph.cacheTiles$(fullNode1.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode1;
-        imagesByHResult[h]["1"] = fullNode2;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode1, fullNode2],
+        };
+        coreImages.next(coreImagesResult);
 
-        const nodeUncacheSpy1: jasmine.Spy = spyOn(node1, "uncache").and.stub();
-        const nodeUncacheSpy2: jasmine.Spy = spyOn(node2, "uncache").and.stub();
+        const nodeUncacheSpy1 = spyOn(node1, "uncache").and.stub();
+        const nodeUncacheSpy2 = spyOn(node2, "uncache").and.stub();
 
-        const time: number = new Date().getTime();
+        const time = new Date().getTime();
         while (new Date().getTime() === time) {
-            graph.hasNode(node2.key);
+            graph.hasNode(node2.id);
         }
 
-        graph.hasNode(node2.key);
+        graph.hasNode(node2.id);
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy1.calls.count()).toBe(1);
-        expect(graph.hasNode(node1.key)).toBe(true);
-        expect(graph.hasInitializedCache(node1.key)).toBe(false);
+        expect(graph.hasNode(node1.id)).toBe(true);
+        expect(graph.hasInitializedCache(node1.id)).toBe(false);
 
         expect(nodeUncacheSpy2.calls.count()).toBe(0);
-        expect(graph.hasNode(node2.key)).toBe(true);
-        expect(graph.hasInitializedCache(node2.key)).toBe(true);
+        expect(graph.hasNode(node2.id)).toBe(true);
+        expect(graph.hasInitializedCache(node2.id)).toBe(true);
     });
 
     it("should uncache sequence", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasSequence(sequenceKey)).toBe(true);
+        expect(graph.hasSequence(sequenceId)).toBe(true);
 
-        const sequence: Sequence = graph.getSequence(sequenceKey);
+        const sequence = graph.getSequence(sequenceId);
 
-        const sequenceDisposeSpy: jasmine.Spy = spyOn(sequence, "dispose");
+        const sequenceDisposeSpy = spyOn(sequence, "dispose");
         sequenceDisposeSpy.and.stub();
 
         graph.uncache([]);
 
         expect(sequenceDisposeSpy.calls.count()).toBe(1);
 
-        expect(graph.hasSequence(sequence.key)).toBe(false);
+        expect(graph.hasSequence(sequence.id)).toBe(false);
     });
 
     it("should not uncache sequence if specified to keep", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasSequence(sequenceKey)).toBe(true);
+        expect(graph.hasSequence(sequenceId)).toBe(true);
 
-        const sequence: Sequence = graph.getSequence(sequenceKey);
+        const sequence = graph.getSequence(sequenceId);
 
-        const sequenceDisposeSpy: jasmine.Spy = spyOn(sequence, "dispose");
+        const sequenceDisposeSpy = spyOn(sequence, "dispose");
         sequenceDisposeSpy.and.stub();
 
-        graph.uncache([], sequenceKey);
+        graph.uncache([], sequenceId);
 
         expect(sequenceDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasSequence(sequence.key)).toBe(true);
+        expect(graph.hasSequence(sequence.id)).toBe(true);
     });
 
     it("should not uncache sequence if number below threshold", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(
+            new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
 
-        const sequenceByKey: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        spyOn(api, "sequenceByKey$").and.returnValue(sequenceByKey);
+        const getSequences = new Subject<SequencesContract>();
+        spyOn(api, "getSequences$").and.returnValue(getSequences);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceId = "sequenceId";
 
-        graph.cacheSequence$(sequenceKey).subscribe(() => { /*noop*/ });
+        graph.cacheSequence$(sequenceId).subscribe(() => { /*noop*/ });
 
-        const result: { [sequenceKey: string]: ISequence } = {};
-        result[sequenceKey] = { key: sequenceKey, keys: [] };
-        sequenceByKey.next(result);
-        sequenceByKey.complete();
+        const result: SequencesContract = [{
+            node: { id: sequenceId, image_ids: [] },
+            node_id: sequenceId,
+        }];
+        getSequences.next(result);
+        getSequences.complete();
 
-        expect(graph.hasSequence(sequenceKey)).toBe(true);
+        expect(graph.hasSequence(sequenceId)).toBe(true);
 
-        const sequence: Sequence = graph.getSequence(sequenceKey);
+        const sequence = graph.getSequence(sequenceId);
 
-        const sequenceDisposeSpy: jasmine.Spy = spyOn(sequence, "dispose");
+        const sequenceDisposeSpy = spyOn(sequence, "dispose");
         sequenceDisposeSpy.and.stub();
 
         graph.uncache([]);
 
         expect(sequenceDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasSequence(sequence.key)).toBe(true);
+        expect(graph.hasSequence(sequence.id)).toBe(true);
     });
 
     it("should not uncache sequence accessed last", () => {
-        const api: APIWrapper = new APIWrapper(new FalcorDataProvider({ clientToken: "cid" }));
-        const calculator: GraphCalculator = new GraphCalculator(null);
-
-        const sequenceByKeySpy: jasmine.Spy = spyOn(api, "sequenceByKey$");
-
-        const configuration: IGraphConfiguration = {
+        const api = new APIWrapper(
+            new FalcorDataProvider({ clientToken: "cid" }));
+        const calculator = new GraphCalculator(null);
+        const getSequencesSpy = spyOn(api, "getSequences$");
+        const configuration: GraphConfiguration = {
             maxSequences: 1,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
-
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
-
-        const sequenceKey1: string = "sequenceKey1";
-
-        const sequenceByKey1: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        sequenceByKeySpy.and.returnValue(sequenceByKey1);
-
-        graph.cacheSequence$(sequenceKey1).subscribe(() => { /*noop*/ });
-
-        const result1: { [sequenceKey: string]: ISequence } = {};
-        result1[sequenceKey1] = { key: sequenceKey1, keys: [] };
-        sequenceByKey1.next(result1);
-        sequenceByKey1.complete();
-
-        expect(graph.hasSequence(sequenceKey1)).toBe(true);
-
-        const sequence1: Sequence = graph.getSequence(sequenceKey1);
-
-        const sequenceDisposeSpy1: jasmine.Spy = spyOn(sequence1, "dispose").and.stub();
-
-        const sequenceKey2: string = "sequenceKey2";
-
-        const sequenceByKey2: Subject<{ [key: string]: ISequence }> = new Subject<{ [key: string]: ISequence }>();
-        sequenceByKeySpy.and.returnValue(sequenceByKey2);
-
-        graph.cacheSequence$(sequenceKey2).subscribe(() => { /*noop*/ });
-
-        const result2: { [sequenceKey: string]: ISequence } = {};
-        result2[sequenceKey2] = { key: sequenceKey2, keys: [] };
-        sequenceByKey2.next(result2);
-        sequenceByKey2.complete();
-
-        expect(graph.hasSequence(sequenceKey2)).toBe(true);
-
-        const sequence2: Sequence = graph.getSequence(sequenceKey2);
-
-        const sequenceDisposeSpy2: jasmine.Spy = spyOn(sequence2, "dispose").and.stub();
-
-        const time: number = new Date().getTime();
+        const graph = new Graph(
+            api,
+            undefined,
+            calculator,
+            undefined,
+            undefined,
+            configuration);
+
+        const sequenceId1 = "sequenceId1";
+        const sequences1 = new Subject<SequencesContract>();
+        getSequencesSpy.and.returnValue(sequences1);
+
+        graph.cacheSequence$(sequenceId1).subscribe(() => { /*noop*/ });
+
+        const result1: SequencesContract = [{
+            node_id: sequenceId1,
+            node: { id: sequenceId1, image_ids: [] },
+        }];
+        sequences1.next(result1);
+        sequences1.complete();
+
+        expect(graph.hasSequence(sequenceId1)).toBe(true);
+
+        const sequence1 = graph.getSequence(sequenceId1);
+        const sequenceDisposeSpy1 = spyOn(sequence1, "dispose").and.stub();
+
+        const sequenceId2 = "sequenceId2";
+        const getSequences2 = new Subject<SequencesContract>();
+        getSequencesSpy.and.returnValue(getSequences2);
+
+        graph.cacheSequence$(sequenceId2).subscribe(() => { /*noop*/ });
+
+        const result2: SequencesContract = [{
+            node_id: sequenceId2,
+            node: { id: sequenceId2, image_ids: [] },
+        }];
+        getSequences2.next(result2);
+        getSequences2.complete();
+
+        expect(graph.hasSequence(sequenceId2)).toBe(true);
+        const sequence2 = graph.getSequence(sequenceId2);
+        const sequenceDisposeSpy2 = spyOn(sequence2, "dispose").and.stub();
+
+        const time = new Date().getTime();
         while (new Date().getTime() === time) {
-            graph.hasSequence(sequenceKey2);
+            graph.hasSequence(sequenceId2);
         }
 
-        graph.getSequence(sequenceKey2);
-
+        graph.getSequence(sequenceId2);
         graph.uncache([]);
 
         expect(sequenceDisposeSpy1.calls.count()).toBe(1);
-        expect(graph.hasSequence(sequence1.key)).toBe(false);
+        expect(graph.hasSequence(sequence1.id)).toBe(false);
 
         expect(sequenceDisposeSpy2.calls.count()).toBe(0);
-        expect(graph.hasSequence(sequence2.key)).toBe(true);
+        expect(graph.hasSequence(sequence2.id)).toBe(true);
     });
 
     it("should uncache node by uncaching tile", () => {
@@ -3422,61 +3686,64 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose");
+        const nodeDisposeSpy = spyOn(node, "dispose");
         nodeDisposeSpy.and.stub();
 
         graph.uncache([]);
 
         expect(nodeDisposeSpy.calls.count()).toBe(1);
 
-        expect(graph.hasNode(fullNode.key)).toBe(false);
+        expect(graph.hasNode(fullNode.id)).toBe(false);
     });
 
     it("should not dispose node by uncaching tile if in specified sequence", () => {
@@ -3484,63 +3751,66 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        fullNode.sequence_key = "sequenceKey";
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        fullNode.sequence.id = "sequenceId";
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
+        const node = graph.getNode(fullNode.id);
 
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
 
-        graph.uncache([], fullNode.sequence_key);
+        graph.uncache([], fullNode.sequence.id);
 
         expect(nodeDisposeSpy.calls.count()).toBe(0);
         expect(nodeUncacheSpy.calls.count()).toBe(1);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
     });
 
     it("should not uncache node by uncaching tile when number below threshold", () => {
@@ -3548,62 +3818,65 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 1,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 1,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
         graph.uncache([]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
     });
 
     it("should not uncache and dispose node by uncaching tile when tile is related to kept key", () => {
@@ -3611,62 +3884,65 @@ describe("Graph.uncache", () => {
         const dataProvider = new FalcorDataProvider(
             { clientToken: "cid" },
             geometryProvider);
-        const api: APIWrapper = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const api = new APIWrapper(dataProvider);
+        const calculator = new GraphCalculator(null);
 
-        const h: string = "h";
+        const h = "h";
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(h);
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([h]);
 
-        const imageByKeyFull: Subject<{ [key: string]: IFullNode }> = new Subject<{ [key: string]: IFullNode }>();
-        spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const configuration: IGraphConfiguration = {
+        const configuration: GraphConfiguration = {
             maxSequences: 0,
             maxUnusedNodes: 0,
             maxUnusedPreStoredNodes: 0,
             maxUnusedTiles: 0,
         };
 
-        const graph: Graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
+        const graph = new Graph(api, undefined, calculator, undefined, undefined, configuration);
 
-        const fullNode: IFullNode = helper.createFullNode();
-        const result: { [key: string]: IFullNode } = {};
-        result[fullNode.key] = fullNode;
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        const fullNode = helper.createFullNode();
+        const result: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        imageByKeyFull.next(result);
-        imageByKeyFull.complete();
+        getImages.next(result);
+        getImages.complete();
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
 
-        const imagesByH: Subject<{ [key: string]: { [index: string]: ICoreNode } }> =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const imagesByHResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        imagesByHResult[h] = {};
-        imagesByHResult[h]["0"] = fullNode;
-        imagesByH.next(imagesByHResult);
+        const coreImagesResult: CoreImagesContract = {
+            cell_id: h,
+            images: [fullNode],
+        };
+        coreImages.next(coreImagesResult);
 
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        const node: Node = graph.getNode(fullNode.key);
-        const nodeUncacheSpy: jasmine.Spy = spyOn(node, "uncache").and.stub();
-        const nodeDisposeSpy: jasmine.Spy = spyOn(node, "dispose").and.stub();
+        const node = graph.getNode(fullNode.id);
+        const nodeUncacheSpy = spyOn(node, "uncache").and.stub();
+        const nodeDisposeSpy = spyOn(node, "dispose").and.stub();
 
-        graph.uncache([node.key]);
+        graph.uncache([node.id]);
 
         expect(nodeUncacheSpy.calls.count()).toBe(0);
         expect(nodeDisposeSpy.calls.count()).toBe(0);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
     });
 });
 
@@ -3680,18 +3956,18 @@ describe("Graph.cacheCell$", () => {
         const calculator = new GraphCalculator(null);
 
         const cellId = "cellId";
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFillSpy =
-            spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        const getSpatialImagesSpy =
+            spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const key = "full-key";
+        const id = "full-id";
         const fullNode = new NodeHelper().createFullNode();
-        fullNode.key = key;
+        fullNode.id = id;
 
         const graph = new Graph(api, undefined, calculator);
 
@@ -3699,28 +3975,30 @@ describe("Graph.cacheCell$", () => {
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(key);
+                    expect(nodes[0].id).toBe(id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
 
-                    expect(imagesByHSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFillSpy.calls.count()).toBe(1);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
+                    expect(getSpatialImagesSpy.calls.count()).toBe(1);
 
                     done();
                 });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } =
-            {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
-
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
+
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
     });
 
     it("should not cache again if all cell nodes cached", (done: Function) => {
@@ -3729,65 +4007,68 @@ describe("Graph.cacheCell$", () => {
             { clientToken: "token" },
             geometryProvider);
         const api = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const calculator = new GraphCalculator(null);
 
         const cellId = "cell-id";
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([cellId]);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(cellId);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFull = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeyFullSpy =
-            spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        const getImagesSpy =
+            spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imageByKeyFillSpy =
-            spyOn(api, "imageByKeyFill$").and.stub();
+        const getSpatialImagesSpy =
+            spyOn(api, "getSpatialImages$").and.stub();
 
-        const key = "full-key";
-        const fullNode: IFullNode = new NodeHelper().createFullNode();
-        fullNode.key = key;
+        const id = "full-id";
+        const fullNode: ImageEnt = new NodeHelper().createFullNode();
+        fullNode.id = id;
 
-        const graph: Graph = new Graph(api, undefined, calculator);
+        const graph = new Graph(api, undefined, calculator);
 
-        graph.cacheFull$(fullNode.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode.id).subscribe(() => { /*noop*/ });
 
-        const fullResult: { [key: string]: IFullNode } = {};
-        fullResult[fullNode.key] = fullNode;
-        imageByKeyFull.next(fullResult);
-        imageByKeyFull.complete();
+        const fullResult: ImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getImages.next(fullResult);
+        getImages.complete();
 
-        graph.hasTiles(fullNode.key);
-        observableFrom(graph.cacheTiles$(fullNode.key)).pipe(
+        graph.hasTiles(fullNode.id);
+        observableFrom(graph.cacheTiles$(fullNode.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode;
-        imagesByH.next(tileResult);
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
 
-        expect(graph.hasNode(fullNode.key)).toBe(true);
-        expect(graph.hasTiles(fullNode.key)).toBe(true);
+        expect(graph.hasNode(fullNode.id)).toBe(true);
+        expect(graph.hasTiles(fullNode.id)).toBe(true);
 
-        expect(imagesByHSpy.calls.count()).toBe(1);
-        expect(imageByKeyFullSpy.calls.count()).toBe(1);
+        expect(coreImagesSpy.calls.count()).toBe(1);
+        expect(getImagesSpy.calls.count()).toBe(1);
 
         graph.cacheCell$(cellId)
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(key);
+                    expect(nodes[0].id).toBe(id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
 
-                    expect(imagesByHSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFullSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFillSpy.calls.count()).toBe(0);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
+                    expect(getImagesSpy.calls.count()).toBe(1);
+                    expect(getSpatialImagesSpy.calls.count()).toBe(0);
 
                     done();
                 });
@@ -3799,87 +4080,91 @@ describe("Graph.cacheCell$", () => {
             { clientToken: "token" },
             geometryProvider);
         const api = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const calculator = new GraphCalculator(null);
 
         const cellId = "cell-id";
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([cellId]);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(cellId);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFull = new Subject<{ [key: string]: IFullNode }>();
-        const imageByKeyFullSpy =
-            spyOn(api, "imageByKeyFull$").and.returnValue(imageByKeyFull);
+        const getImages = new Subject<ImagesContract>();
+        const getImagesSpy =
+            spyOn(api, "getImages$").and.returnValue(getImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFillSpy =
-            spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        const getSpatialImagesSpy =
+            spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
         const key1 = "full-key-1";
         const key2 = "full-key-2";
         const fullNode1 = new NodeHelper().createFullNode();
-        fullNode1.key = key1;
+        fullNode1.id = key1;
 
         const graph = new Graph(api, undefined, calculator);
 
-        graph.cacheFull$(fullNode1.key).subscribe(() => { /*noop*/ });
+        graph.cacheFull$(fullNode1.id).subscribe(() => { /*noop*/ });
 
-        const fullResult: { [key: string]: IFullNode } = {};
-        fullResult[fullNode1.key] = fullNode1;
-        imageByKeyFull.next(fullResult);
-        imageByKeyFull.complete();
+        const fullResult: ImagesContract = [{
+            node: fullNode1,
+            node_id: fullNode1.id,
+        }];
+        getImages.next(fullResult);
+        getImages.complete();
 
-        graph.hasTiles(fullNode1.key);
-        observableFrom(graph.cacheTiles$(fullNode1.key)).pipe(
+        graph.hasTiles(fullNode1.id);
+        observableFrom(graph.cacheTiles$(fullNode1.id)).pipe(
             mergeAll())
             .subscribe(() => { /*noop*/ });
 
         const fullNode2 = new NodeHelper().createFullNode();
-        fullNode2.key = key2;
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode1;
-        tileResult[cellId]["1"] = fullNode2;
-        imagesByH.next(tileResult);
+        fullNode2.id = key2;
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode1, fullNode2],
+        };
+        coreImages.next(tileResult);
 
-        expect(graph.hasNode(fullNode1.key)).toBe(true);
-        expect(graph.hasNode(fullNode2.key)).toBe(true);
-        expect(graph.hasTiles(fullNode1.key)).toBe(true);
-        expect(graph.hasTiles(fullNode2.key)).toBe(true);
+        expect(graph.hasNode(fullNode1.id)).toBe(true);
+        expect(graph.hasNode(fullNode2.id)).toBe(true);
+        expect(graph.hasTiles(fullNode1.id)).toBe(true);
+        expect(graph.hasTiles(fullNode2.id)).toBe(true);
 
 
-        expect(graph.getNode(fullNode1.key).full).toBe(true);
-        expect(graph.getNode(fullNode2.key).full).toBe(false);
+        expect(graph.getNode(fullNode1.id).full).toBe(true);
+        expect(graph.getNode(fullNode2.id).full).toBe(false);
 
-        expect(imagesByHSpy.calls.count()).toBe(1);
-        expect(imageByKeyFullSpy.calls.count()).toBe(1);
+        expect(coreImagesSpy.calls.count()).toBe(1);
+        expect(getImagesSpy.calls.count()).toBe(1);
 
         graph.cacheCell$(cellId)
             .subscribe(
                 (nodes: Node[]): void => {
                     expect(nodes.length).toBe(2);
-                    expect([key1, key2].includes(nodes[0].key)).toBe(true);
-                    expect([key1, key2].includes(nodes[1].key)).toBe(true);
+                    expect([key1, key2].includes(nodes[0].id)).toBe(true);
+                    expect([key1, key2].includes(nodes[1].id)).toBe(true);
                     expect(nodes[0].full).toBe(true);
                     expect(nodes[1].full).toBe(true);
 
                     expect(graph.hasNode(key1)).toBe(true);
                     expect(graph.hasNode(key2)).toBe(true);
 
-                    expect(imagesByHSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFullSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFillSpy.calls.count()).toBe(1);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
+                    expect(getImagesSpy.calls.count()).toBe(1);
+                    expect(getSpatialImagesSpy.calls.count()).toBe(1);
 
                     done();
                 });
 
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[fullNode2.key] = fullNode2;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode2,
+            node_id: fullNode2.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
     });
 
     it("should cache cache tile once for the same cell", (done: Function) => {
@@ -3888,24 +4173,24 @@ describe("Graph.cacheCell$", () => {
             { clientToken: "token" },
             geometryProvider);
         const api = new APIWrapper(dataProvider);
-        const calculator: GraphCalculator = new GraphCalculator(null);
+        const calculator = new GraphCalculator(null);
 
         const cellId = "cell-id";
         spyOn(geometryProvider, "latLonToCellIds").and.returnValue([cellId]);
         spyOn(geometryProvider, "latLonToCellId").and.returnValue(cellId);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        const imageByKeyFillSpy =
-            spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        const getSpatialImagesSpy =
+            spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const key = "full-key";
+        const id = "full-id";
         const fullNode = new NodeHelper().createFullNode();
-        fullNode.key = key;
+        fullNode.id = id;
 
         const graph = new Graph(api, undefined, calculator);
 
@@ -3918,32 +4203,35 @@ describe("Graph.cacheCell$", () => {
                     count++;
 
                     expect(nodes.length).toBe(1);
-                    expect(nodes[0].key).toBe(fullNode.key);
+                    expect(nodes[0].id).toBe(fullNode.id);
                     expect(nodes[0].full).toBe(true);
 
-                    expect(graph.hasNode(key)).toBe(true);
-                    expect(graph.hasTiles(fullNode.key)).toBe(true);
-                    expect(graph.getNode(fullNode.key).full).toBe(true);
+                    expect(graph.hasNode(id)).toBe(true);
+                    expect(graph.hasTiles(fullNode.id)).toBe(true);
+                    expect(graph.getNode(fullNode.id).full).toBe(true);
                 },
                 undefined,
                 (): void => {
                     expect(count).toBe(2);
-                    expect(imagesByHSpy.calls.count()).toBe(1);
-                    expect(imageByKeyFillSpy.calls.count()).toBe(2);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
+                    expect(getSpatialImagesSpy.calls.count()).toBe(2);
 
                     done();
                 });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } = {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
-
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[fullNode.key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
+
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
     });
 });
 
@@ -3956,7 +4244,7 @@ describe("Graph.updateCells$", () => {
         const api = new APIWrapper(dataProvider);
         const calculator = new GraphCalculator(null);
 
-        const imagesByHSpy = spyOn(api, "imagesByH$").and.stub();
+        const coreImagesSpy = spyOn(api, "getCoreImages$").and.stub();
 
         const graph = new Graph(api, undefined, calculator);
 
@@ -3968,7 +4256,7 @@ describe("Graph.updateCells$", () => {
                 undefined,
                 (): void => {
                     expect(count).toBe(0);
-                    expect(imagesByHSpy.calls.count()).toBe(0);
+                    expect(coreImagesSpy.calls.count()).toBe(0);
                     done();
                 });
     });
@@ -3981,52 +4269,54 @@ describe("Graph.updateCells$", () => {
         const api = new APIWrapper(dataProvider);
         const calculator = new GraphCalculator(null);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const key = "full-key";
+        const id = "full-id";
         const fullNode = new NodeHelper().createFullNode();
-        fullNode.key = key;
+        fullNode.id = id;
 
         const graph = new Graph(api, undefined, calculator);
 
         const cellId = "cellId";
         graph.cacheCell$(cellId).subscribe();
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } =
-            {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
 
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
 
-        expect(graph.hasNode(key)).toBe(true);
+        expect(graph.hasNode(id)).toBe(true);
 
-        const imagesByHUpdate =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        imagesByHSpy.calls.reset();
-        imagesByHSpy.and.returnValue(imagesByHUpdate);
+        const coreImagesUpdate =
+            new Subject<CoreImagesContract>();
+        coreImagesSpy.calls.reset();
+        coreImagesSpy.and.returnValue(coreImagesUpdate);
 
         graph.updateCells$([cellId])
             .subscribe(
-                (id: string): void => {
-                    expect(id).toBe(cellId);
-                    expect(imagesByHSpy.calls.count()).toBe(1);
+                (cid: string): void => {
+                    expect(cid).toBe(cellId);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
                     done();
                 });
 
-        imagesByHUpdate.next(tileResult);
-        imagesByHUpdate.complete();
+        coreImagesUpdate.next(tileResult);
+        coreImagesUpdate.complete();
     });
 
     it("should update currently caching cell", (done: Function) => {
@@ -4037,54 +4327,56 @@ describe("Graph.updateCells$", () => {
         const api = new APIWrapper(dataProvider);
         const calculator = new GraphCalculator(null);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
-        const key = "full-key";
+        const id = "full-id";
         const fullNode = new NodeHelper().createFullNode();
-        fullNode.key = key;
+        fullNode.id = id;
 
         const graph = new Graph(api, undefined, calculator);
 
         const cellId = "cellId";
         graph.cacheCell$(cellId).subscribe();
 
-        expect(graph.hasNode(key)).toBe(false);
+        expect(graph.hasNode(id)).toBe(false);
 
-        const imagesByHUpdate =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        imagesByHSpy.calls.reset();
-        imagesByHSpy.and.returnValue(imagesByHUpdate);
+        const coreImagesUpdate =
+            new Subject<CoreImagesContract>();
+        coreImagesSpy.calls.reset();
+        coreImagesSpy.and.returnValue(coreImagesUpdate);
 
         graph.updateCells$([cellId])
             .subscribe(
-                (id: string): void => {
-                    expect(id).toBe(cellId);
-                    expect(imagesByHSpy.calls.count()).toBe(1);
+                (cid: string): void => {
+                    expect(cid).toBe(cellId);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
                     done();
                 });
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } =
-            {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
 
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key] = fullNode;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode,
+            node_id: fullNode.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
 
-        expect(graph.hasNode(key)).toBe(true);
+        expect(graph.hasNode(id)).toBe(true);
 
-        imagesByHUpdate.next(tileResult);
-        imagesByHUpdate.complete();
+        coreImagesUpdate.next(tileResult);
+        coreImagesUpdate.complete();
     });
 
     it("should add new nodes to existing cell", (done: Function) => {
@@ -4095,41 +4387,43 @@ describe("Graph.updateCells$", () => {
         const api = new APIWrapper(dataProvider);
         const calculator = new GraphCalculator(null);
 
-        const imagesByH =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        const imagesByHSpy =
-            spyOn(api, "imagesByH$").and.returnValue(imagesByH);
+        const coreImages =
+            new Subject<CoreImagesContract>();
+        const coreImagesSpy =
+            spyOn(api, "getCoreImages$").and.returnValue(coreImages);
 
-        const imageByKeyFill = new Subject<{ [key: string]: IFillNode }>();
-        spyOn(api, "imageByKeyFill$").and.returnValue(imageByKeyFill);
+        const getSpatialImages = new Subject<SpatialImagesContract>();
+        spyOn(api, "getSpatialImages$").and.returnValue(getSpatialImages);
 
         const key1 = "full-key-1";
         const fullNode1 = new NodeHelper().createFullNode();
-        fullNode1.key = key1;
+        fullNode1.id = key1;
 
         const graph = new Graph(api, undefined, calculator);
 
         const cellId = "cellId";
         graph.cacheCell$(cellId).subscribe();
 
-        const tileResult: { [key: string]: { [index: string]: ICoreNode } } =
-            {};
-        tileResult[cellId] = {};
-        tileResult[cellId]["0"] = fullNode1;
-        imagesByH.next(tileResult);
-        imagesByH.complete();
+        const tileResult: CoreImagesContract = {
+            cell_id: cellId,
+            images: [fullNode1],
+        };
+        coreImages.next(tileResult);
+        coreImages.complete();
 
-        const fillResult: { [key: string]: IFillNode } = {};
-        fillResult[key1] = fullNode1;
-        imageByKeyFill.next(fillResult);
-        imageByKeyFill.complete();
+        const spatialImages: SpatialImagesContract = [{
+            node: fullNode1,
+            node_id: fullNode1.id,
+        }];
+        getSpatialImages.next(spatialImages);
+        getSpatialImages.complete();
 
         expect(graph.hasNode(key1)).toBe(true);
 
-        const imagesByHUpdate =
-            new Subject<{ [key: string]: { [index: string]: ICoreNode } }>();
-        imagesByHSpy.calls.reset();
-        imagesByHSpy.and.returnValue(imagesByHUpdate);
+        const coreImagesUpdate =
+            new Subject<CoreImagesContract>();
+        coreImagesSpy.calls.reset();
+        coreImagesSpy.and.returnValue(coreImagesUpdate);
 
         graph.updateCells$([cellId])
             .subscribe(
@@ -4141,15 +4435,15 @@ describe("Graph.updateCells$", () => {
 
                     expect(graph.getNode(key2).full).toBe(false);
 
-                    expect(imagesByHSpy.calls.count()).toBe(1);
+                    expect(coreImagesSpy.calls.count()).toBe(1);
                     done();
                 });
 
         const key2 = "full-key-2";
         const fullNode2 = new NodeHelper().createFullNode();
-        fullNode2.key = key2;
-        tileResult[cellId]["1"] = fullNode2;
-        imagesByHUpdate.next(tileResult);
-        imagesByHUpdate.complete();
+        fullNode2.id = key2;
+        tileResult.images.push(fullNode2);
+        coreImagesUpdate.next(tileResult);
+        coreImagesUpdate.complete();
     });
 });
diff --git a/spec/graph/GraphCalculator.spec.ts b/spec/graph/GraphCalculator.spec.ts
index 25b035f54..80e7f2b49 100644
--- a/spec/graph/GraphCalculator.spec.ts
+++ b/spec/graph/GraphCalculator.spec.ts
@@ -1,4 +1,4 @@
-import { ILatLon } from "../../src/api/interfaces/ILatLon";
+import { LatLon } from "../../src/api/interfaces/LatLon";
 import { GeoCoords } from "../../src/geo/GeoCoords";
 import { GraphCalculator } from "../../src/graph/GraphCalculator";
 
@@ -22,7 +22,7 @@ describe("GraphCalculator.boundingBoxCorners", () => {
         let calculator: GraphCalculator = new GraphCalculator(geoCoords);
 
         let threshold: number = 1;
-        let bbox: [ILatLon, ILatLon] = calculator.boundingBoxCorners({ lat: 0, lon: 0 }, threshold);
+        let bbox: [LatLon, LatLon] = calculator.boundingBoxCorners({ lat: 0, lon: 0 }, threshold);
 
         expect(bbox.length).toBe(2);
         expect(bbox[0].lat).toBe(-1);
diff --git a/spec/graph/GraphService.spec.ts b/spec/graph/GraphService.spec.ts
index e62cbc5dd..4482d07e2 100644
--- a/spec/graph/GraphService.spec.ts
+++ b/spec/graph/GraphService.spec.ts
@@ -17,11 +17,11 @@ import { NodeHelper } from "../helper/NodeHelper";
 
 import { Node } from "../../src/graph/Node";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
 import { Graph } from "../../src/graph/Graph";
 import { GraphMode } from "../../src/graph/GraphMode";
 import { GraphService } from "../../src/graph/GraphService";
-import { IEdgeStatus } from "../../src/graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../src/graph/interfaces/NavigationEdgeStatus";
 import { Sequence } from "../../src/graph/Sequence";
 import { DataProvider } from "../helper/ProviderHelper";
 
@@ -166,7 +166,7 @@ describe("GraphService.cacheSequence$", () => {
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequence$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequence$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequence$.next(graph);
 
@@ -190,7 +190,7 @@ describe("GraphService.cacheSequence$", () => {
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequence$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequence$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequence$.next(graph);
 
@@ -214,7 +214,7 @@ describe("GraphService.cacheSequence$", () => {
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequence$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequence$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequence$.next(graph);
 
@@ -238,11 +238,11 @@ describe("GraphService.cacheSequenceNodes$", () => {
         cacheSequenceNodesSpy.and.returnValue(cacheSequenceNodes$);
 
         const getSequenceSpy: jasmine.Spy = spyOn(graph, "getSequence");
-        getSequenceSpy.and.returnValue(new Sequence({ key: "skey", keys: [] }));
+        getSequenceSpy.and.returnValue(new Sequence({ id: "skey", image_ids: [] }));
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequenceNodes$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequenceNodes$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequenceNodes$.next(graph);
 
@@ -264,11 +264,11 @@ describe("GraphService.cacheSequenceNodes$", () => {
         cacheSequenceNodesSpy.and.returnValue(cacheSequenceNodes$);
 
         const getSequenceSpy: jasmine.Spy = spyOn(graph, "getSequence");
-        getSequenceSpy.and.returnValue(new Sequence({ key: "skey", keys: [] }));
+        getSequenceSpy.and.returnValue(new Sequence({ id: "skey", image_ids: [] }));
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequenceNodes$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequenceNodes$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequenceNodes$.next(graph);
 
@@ -290,11 +290,11 @@ describe("GraphService.cacheSequenceNodes$", () => {
         cacheSequenceNodesSpy.and.returnValue(cacheSequenceNodes$);
 
         const getSequenceSpy: jasmine.Spy = spyOn(graph, "getSequence");
-        getSequenceSpy.and.returnValue(new Sequence({ key: "skey", keys: [] }));
+        getSequenceSpy.and.returnValue(new Sequence({ id: "skey", image_ids: [] }));
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.cacheSequenceNodes$("sequenceKey").subscribe(() => { /*noop*/ });
+        graphService.cacheSequenceNodes$("sequenceId").subscribe(() => { /*noop*/ });
 
         cacheSequenceNodes$.next(graph);
 
@@ -316,11 +316,11 @@ describe("GraphService.cacheSequenceNodes$", () => {
         cacheSequenceNodesSpy.and.returnValue(cacheSequenceNodes$);
 
         const getSequenceSpy: jasmine.Spy = spyOn(graph, "getSequence");
-        getSequenceSpy.and.returnValue(new Sequence({ key: "skey", keys: [] }));
+        getSequenceSpy.and.returnValue(new Sequence({ id: "skey", image_ids: [] }));
 
         const graphService: GraphService = new GraphService(graph);
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
         const referenceNodeKey: string = "referenceNodeKey";
         graphService.cacheSequenceNodes$(sequenceKey, referenceNodeKey).subscribe(() => { /*noop*/ });
 
@@ -434,7 +434,7 @@ describe("GraphService.graphMode$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (n: Node): void => {
                     expect(n).toBeDefined();
@@ -455,10 +455,10 @@ describe("GraphService.graphMode$", () => {
 
 class TestNode extends Node {
     private _assetsCached: boolean;
-    private _sequenceEdges: IEdgeStatus;
-    private _spatialEdges: IEdgeStatus;
+    private _sequenceEdges: NavigationEdgeStatus;
+    private _spatialEdges: NavigationEdgeStatus;
 
-    constructor(core: ICoreNode) {
+    constructor(core: CoreImageEnt) {
         super(core);
 
         this._assetsCached = false;
@@ -474,11 +474,11 @@ class TestNode extends Node {
         this._assetsCached = value;
     }
 
-    public get sequenceEdges(): IEdgeStatus {
+    public get sequenceEdges(): NavigationEdgeStatus {
         return this._sequenceEdges;
     }
 
-    public get spatialEdges(): IEdgeStatus {
+    public get spatialEdges(): NavigationEdgeStatus {
         return this._spatialEdges;
     }
 }
@@ -525,7 +525,7 @@ describe("GraphService.cacheNode$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (): void => {
                     expect(cacheFullSpy.calls.count()).toBe(1);
@@ -577,7 +577,7 @@ describe("GraphService.cacheNode$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (): void => {
                     expect(cacheFillSpy.calls.count()).toBe(1);
@@ -627,7 +627,7 @@ describe("GraphService.cacheNode$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key).subscribe(() => { /*noop*/ });
+        graphService.cacheNode$(node.id).subscribe(() => { /*noop*/ });
 
         cacheFull$.next(graph);
 
@@ -635,11 +635,11 @@ describe("GraphService.cacheNode$", () => {
 
         expect(cacheNodeSequenceSpy.calls.count()).toBe(1);
         expect(cacheNodeSequenceSpy.calls.first().args.length).toBe(1);
-        expect(cacheNodeSequenceSpy.calls.first().args[0]).toBe(node.key);
+        expect(cacheNodeSequenceSpy.calls.first().args[0]).toBe(node.id);
 
         expect(cacheSequenceEdgesSpy.calls.count()).toBe(1);
         expect(cacheSequenceEdgesSpy.calls.first().args.length).toBe(1);
-        expect(cacheSequenceEdgesSpy.calls.first().args[0]).toBe(node.key);
+        expect(cacheSequenceEdgesSpy.calls.first().args[0]).toBe(node.id);
     });
 
     it("should cache spatial edges", () => {
@@ -672,13 +672,13 @@ describe("GraphService.cacheNode$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key).subscribe(() => { /*noop*/ });
+        graphService.cacheNode$(node.id).subscribe(() => { /*noop*/ });
 
         cacheFull$.next(graph);
 
         expect(cacheSpatialEdgesSpy.calls.count()).toBe(1);
         expect(cacheSpatialEdgesSpy.calls.first().args.length).toBe(1);
-        expect(cacheSpatialEdgesSpy.calls.first().args[0]).toBe(node.key);
+        expect(cacheSpatialEdgesSpy.calls.first().args[0]).toBe(node.id);
     });
 
     it("should cache spatial edges if in spatial mode", () => {
@@ -715,7 +715,7 @@ describe("GraphService.cacheNode$", () => {
 
         graphService.setGraphMode(GraphMode.Spatial);
 
-        graphService.cacheNode$(node.key).subscribe(() => { /*noop*/ });
+        graphService.cacheNode$(node.id).subscribe(() => { /*noop*/ });
 
         cacheFull$.next(graph);
 
@@ -752,7 +752,7 @@ describe("GraphService.cacheNode$", () => {
 
         graphService.setGraphMode(GraphMode.Sequence);
 
-        graphService.cacheNode$(node.key).subscribe(() => { /*noop*/ });
+        graphService.cacheNode$(node.id).subscribe(() => { /*noop*/ });
 
         cacheFull$.next(graph);
 
@@ -804,7 +804,7 @@ describe("GraphService.reset$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (): void => { return; },
                 (e: Error): void => {
@@ -863,7 +863,7 @@ describe("GraphService.reset$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (n: Node): void => {
                     expect(n).toBeDefined();
@@ -921,7 +921,7 @@ describe("GraphService.reset$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (n: Node): void => {
                     expect(n).toBeDefined();
@@ -956,7 +956,7 @@ describe("GraphService.setFilter$", () => {
 
         const graphService: GraphService = new GraphService(graph);
 
-        graphService.setFilter$(["==", "sequenceKey", "skey"]).subscribe(() => { /*noop*/ });
+        graphService.setFilter$(["==", "sequenceId", "skey"]).subscribe(() => { /*noop*/ });
 
         expect(resetSpatialEdgesSpy.calls.count()).toBe(1);
 
@@ -964,7 +964,7 @@ describe("GraphService.setFilter$", () => {
         expect(setFilterSpy.calls.first().args.length).toBe(1);
         expect(setFilterSpy.calls.first().args[0].length).toBe(3);
         expect(setFilterSpy.calls.first().args[0][0]).toBe("==");
-        expect(setFilterSpy.calls.first().args[0][1]).toBe("sequenceKey");
+        expect(setFilterSpy.calls.first().args[0][1]).toBe("sequenceId");
         expect(setFilterSpy.calls.first().args[0][2]).toBe("skey");
     });
 
@@ -1009,7 +1009,7 @@ describe("GraphService.setFilter$", () => {
 
         spyOn(graph, "getNode").and.returnValue(node);
 
-        graphService.cacheNode$(node.key)
+        graphService.cacheNode$(node.id)
             .subscribe(
                 (n: Node): void => {
                     expect(n).toBeDefined();
@@ -1020,7 +1020,7 @@ describe("GraphService.setFilter$", () => {
         node.assetsCached = true;
         cacheAssets$.next(node);
 
-        graphService.setFilter$(["==", "sequenceKey", "skey"]).subscribe(() => { /*noop*/ });
+        graphService.setFilter$(["==", "sequenceId", "skey"]).subscribe(() => { /*noop*/ });
 
         cacheTiles$[0].next(graph);
 
diff --git a/spec/graph/Node.spec.ts b/spec/graph/Node.spec.ts
index f2531ddbe..e4650a6a6 100644
--- a/spec/graph/Node.spec.ts
+++ b/spec/graph/Node.spec.ts
@@ -1,8 +1,8 @@
 import { NodeHelper } from "../helper/NodeHelper";
 import { Node } from "../../src/graph/Node";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { IMesh } from "../../src/api/interfaces/IMesh";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { MeshContract } from "../../src/api/contracts/MeshContract";
 import { NodeCache } from "../../src/graph/NodeCache";
 
 describe("Node", () => {
@@ -13,7 +13,7 @@ describe("Node", () => {
     });
 
     it("should create a node", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         expect(node).toBeDefined();
@@ -28,12 +28,12 @@ describe("Node.full", () => {
     });
 
     it("should make node full", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         expect(node.full).toBe(false);
 
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
 
         node.makeFull(fillNode);
 
@@ -41,7 +41,7 @@ describe("Node.full", () => {
     });
 
     it("should throw when fill is null", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         expect(() => { node.makeFull(null); }).toThrowError(Error);
@@ -56,20 +56,20 @@ describe("Node.dispose", () => {
     });
 
     it("should clear core and fill properties", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         node.dispose();
 
         expect(node.full).toBe(false);
 
-        expect(() => { return node.key; }).toThrowError(Error);
+        expect(() => { return node.id; }).toThrowError(Error);
     });
 
     it("should dipose cache", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
         let nodeCache: NodeCache = new NodeCache(undefined);
 
@@ -92,14 +92,14 @@ describe("Node.uncache", () => {
     });
 
     it("should handle when cache is not initilized", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         node.uncache();
     });
 
     it("should dispose node cache", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
         let nodeCache: NodeCache = new NodeCache(undefined);
 
@@ -114,7 +114,7 @@ describe("Node.uncache", () => {
     });
 
     it("should be able to initialize cache again after uncache", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
         let nodeCache: NodeCache = new NodeCache(undefined);
 
@@ -137,16 +137,16 @@ describe("Node.merged", () => {
     });
 
     it("should not be merged when not full", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         expect(node.merged).toBe(false);
     });
 
     it("should not be merged because merge version is zero", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
 
         fillNode.merge_version = 0;
 
@@ -156,9 +156,9 @@ describe("Node.merged", () => {
     });
 
     it("should be merged because merge version present and larger than zero", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
 
         fillNode.merge_version = 7;
 
@@ -176,7 +176,7 @@ describe("Node.assetsCached", () => {
     });
 
     it("should not be cached when core", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
 
         expect(node.assetsCached).toBe(false);
@@ -184,7 +184,7 @@ describe("Node.assetsCached", () => {
 
     class NodeCacheMock extends NodeCache {
         protected _overridingImage: HTMLImageElement;
-        protected _overridingMesh: IMesh;
+        protected _overridingMesh: MeshContract;
 
         constructor() { super(undefined); }
 
@@ -196,19 +196,19 @@ describe("Node.assetsCached", () => {
             this._overridingImage = value;
         }
 
-        public get mesh(): IMesh {
+        public get mesh(): MeshContract {
             return this._overridingMesh;
         }
 
-        public set mesh(value: IMesh) {
+        public set mesh(value: MeshContract) {
             this._overridingMesh = value;
         }
     }
 
     it("should be cached when assets set", () => {
-        let coreNode: ICoreNode = helper.createCoreNode();
+        let coreNode: CoreImageEnt = helper.createCoreNode();
         let node: Node = new Node(coreNode);
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         let nodeCache: NodeCacheMock = new NodeCacheMock();
diff --git a/spec/graph/NodeCache.spec.ts b/spec/graph/NodeCache.spec.ts
index 311a7d6eb..50be33d5a 100644
--- a/spec/graph/NodeCache.spec.ts
+++ b/spec/graph/NodeCache.spec.ts
@@ -1,11 +1,11 @@
 import { first, skip } from "rxjs/operators";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
-import { EdgeDirection } from "../../src/graph/edge/EdgeDirection";
-import { IEdge } from "../../src/graph/edge/interfaces/IEdge";
-import { IEdgeStatus } from "../../src/graph/interfaces/IEdgeStatus";
+import { FalcorDataProvider } from "../../src/api/falcor/FalcorDataProvider";
+import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../src/graph/edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "../../src/graph/interfaces/NavigationEdgeStatus";
 import { NodeCache } from "../../src/graph/NodeCache";
-import { ImageSize } from "../../src/viewer/ImageSize";
 import { MockCreator } from "../helper/MockCreator";
+import { NodeHelper } from "../helper/NodeHelper";
 
 global.URL.createObjectURL = jest.fn();
 
@@ -37,7 +37,7 @@ describe("NodeCache.sequenceEdges$", () => {
         nodeCache.sequenceEdges$.pipe(
             first())
             .subscribe(
-                (edgeStatus: IEdgeStatus): void => {
+                (edgeStatus: NavigationEdgeStatus): void => {
                     expect(edgeStatus.cached).toBe(false);
                     expect(edgeStatus.edges.length).toBe(0);
 
@@ -48,24 +48,24 @@ describe("NodeCache.sequenceEdges$", () => {
     it("should emit cached non empty edge status when sequence edges cached", (done: Function) => {
         let nodeCache: NodeCache = new NodeCache(undefined);
 
-        let sequenceEdge: IEdge = {
+        let sequenceEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.Next,
+                direction: NavigationDirection.Next,
                 worldMotionAzimuth: 0,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
         nodeCache.sequenceEdges$.pipe(
             skip(1),
             first())
             .subscribe(
-                (edgeStatus: IEdgeStatus): void => {
+                (edgeStatus: NavigationEdgeStatus): void => {
                     expect(edgeStatus.cached).toBe(true);
                     expect(edgeStatus.edges.length).toBe(1);
-                    expect(edgeStatus.edges[0].from).toBe(sequenceEdge.from);
-                    expect(edgeStatus.edges[0].to).toBe(sequenceEdge.to);
+                    expect(edgeStatus.edges[0].source).toBe(sequenceEdge.source);
+                    expect(edgeStatus.edges[0].target).toBe(sequenceEdge.target);
                     expect(edgeStatus.edges[0].data.direction).toBe(sequenceEdge.data.direction);
                     expect(edgeStatus.edges[0].data.worldMotionAzimuth).toBe(sequenceEdge.data.worldMotionAzimuth);
 
@@ -80,20 +80,20 @@ describe("NodeCache.resetSequenceEdges", () => {
     it("should reset the sequence edges", () => {
         let nodeCache: NodeCache = new NodeCache(undefined);
 
-        let sequenceEdge: IEdge = {
+        let sequenceEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.Next,
+                direction: NavigationDirection.Next,
                 worldMotionAzimuth: null,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
         nodeCache.cacheSequenceEdges([sequenceEdge]);
 
         expect(nodeCache.sequenceEdges.cached).toBe(true);
         expect(nodeCache.sequenceEdges.edges.length).toBe(1);
-        expect(nodeCache.sequenceEdges.edges[0].from).toBe(sequenceEdge.from);
+        expect(nodeCache.sequenceEdges.edges[0].source).toBe(sequenceEdge.source);
 
         nodeCache.resetSequenceEdges();
 
@@ -109,7 +109,7 @@ describe("NodeCache.spatialEdges$", () => {
         nodeCache.spatialEdges$.pipe(
             first())
             .subscribe(
-                (edgeStatus: IEdgeStatus): void => {
+                (edgeStatus: NavigationEdgeStatus): void => {
                     expect(edgeStatus.cached).toBe(false);
                     expect(edgeStatus.edges.length).toBe(0);
 
@@ -120,24 +120,24 @@ describe("NodeCache.spatialEdges$", () => {
     it("should emit cached non empty edge status when spatial edges cached", (done: Function) => {
         let nodeCache: NodeCache = new NodeCache(undefined);
 
-        let spatialEdge: IEdge = {
+        let spatialEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.StepForward,
+                direction: NavigationDirection.StepForward,
                 worldMotionAzimuth: 0,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
         nodeCache.spatialEdges$.pipe(
             skip(1),
             first())
             .subscribe(
-                (edgeStatus: IEdgeStatus): void => {
+                (edgeStatus: NavigationEdgeStatus): void => {
                     expect(edgeStatus.cached).toBe(true);
                     expect(edgeStatus.edges.length).toBe(1);
-                    expect(edgeStatus.edges[0].from).toBe(spatialEdge.from);
-                    expect(edgeStatus.edges[0].to).toBe(spatialEdge.to);
+                    expect(edgeStatus.edges[0].source).toBe(spatialEdge.source);
+                    expect(edgeStatus.edges[0].target).toBe(spatialEdge.target);
                     expect(edgeStatus.edges[0].data.direction).toBe(spatialEdge.data.direction);
                     expect(edgeStatus.edges[0].data.worldMotionAzimuth).toBe(spatialEdge.data.worldMotionAzimuth);
 
@@ -152,20 +152,20 @@ describe("NodeCache.resetSpatialEdges", () => {
     it("should reset the spatial edges", () => {
         let nodeCache: NodeCache = new NodeCache(undefined);
 
-        let spatialEdge: IEdge = {
+        let spatialEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.StepForward,
+                direction: NavigationDirection.StepForward,
                 worldMotionAzimuth: 0,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
         nodeCache.cacheSpatialEdges([spatialEdge]);
 
         expect(nodeCache.spatialEdges.cached).toBe(true);
         expect(nodeCache.spatialEdges.edges.length).toBe(1);
-        expect(nodeCache.spatialEdges.edges[0].from).toBe(spatialEdge.from);
+        expect(nodeCache.spatialEdges.edges[0].source).toBe(spatialEdge.source);
 
         nodeCache.resetSpatialEdges();
 
@@ -178,22 +178,22 @@ describe("NodeCache.dispose", () => {
     it("should clear all properties", () => {
         let nodeCache: NodeCache = new NodeCache(undefined);
 
-        let sequencEdge: IEdge = {
+        let sequencEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.StepForward,
+                direction: NavigationDirection.StepForward,
                 worldMotionAzimuth: 0,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
-        let spatialEdge: IEdge = {
+        let spatialEdge: NavigationEdge = {
             data: {
-                direction: EdgeDirection.StepForward,
+                direction: NavigationDirection.StepForward,
                 worldMotionAzimuth: 0,
             },
-            from: "key1",
-            to: "key2",
+            source: "key1",
+            target: "key2",
         };
 
         nodeCache.cacheSequenceEdges([sequencEdge]);
@@ -220,7 +220,7 @@ describe("NodeCache.cacheImage$", () => {
         };
 
         const dataProvider = new FalcorDataProvider({ clientToken: "cid" });
-        spyOn(dataProvider, "getImage").and.returnValue(promise);
+        spyOn(dataProvider, "getImageBuffer").and.returnValue(promise);
 
         const imageMock: HTMLImageElement = new Image();
         spyOn(window, <keyof Window>"Image").and.returnValue(imageMock);
@@ -234,7 +234,7 @@ describe("NodeCache.cacheImage$", () => {
 
         expect(nodeCache.image).toBeNull();
 
-        nodeCache.cacheImage$({}, ImageSize.Size640)
+        nodeCache.cacheImage$(new NodeHelper().createFillNode())
             .subscribe(
                 (nc: NodeCache): void => {
                     expect(nc.image).not.toBeNull();
@@ -254,7 +254,7 @@ describe("NodeCache.cacheImage$", () => {
         };
 
         const dataProvider = new FalcorDataProvider({ clientToken: "cid" });
-        spyOn(dataProvider, "getImage").and.returnValue(promise);
+        spyOn(dataProvider, "getImageBuffer").and.returnValue(promise);
 
         const imageMock: HTMLImageElement = new Image();
         spyOn(window, <keyof Window>"Image").and.returnValue(imageMock);
@@ -268,7 +268,7 @@ describe("NodeCache.cacheImage$", () => {
 
         expect(nodeCache.image).toBeNull();
 
-        nodeCache.cacheImage$({}, ImageSize.Size640).subscribe();
+        nodeCache.cacheImage$(new NodeHelper().createFillNode()).subscribe();
 
         imageMock.dispatchEvent(new CustomEvent("load"));
 
@@ -284,7 +284,7 @@ describe("NodeCache.cacheImage$", () => {
         };
 
         const dataProvider = new FalcorDataProvider({ clientToken: "cid" });
-        spyOn(dataProvider, "getImage").and.returnValue(promise);
+        spyOn(dataProvider, "getImageBuffer").and.returnValue(promise);
 
         const imageMock: HTMLImageElement = new Image();
         spyOn(window, <keyof Window>"Image").and.returnValue(imageMock);
@@ -308,7 +308,7 @@ describe("NodeCache.cacheImage$", () => {
                     done();
                 });
 
-        nodeCache.cacheImage$({}, ImageSize.Size640).subscribe();
+        nodeCache.cacheImage$(new NodeHelper().createFillNode()).subscribe();
         imageMock.dispatchEvent(new CustomEvent("load"));
     });
 });
diff --git a/spec/graph/Sequence.spec.ts b/spec/graph/Sequence.spec.ts
index cd165267e..31b137558 100644
--- a/spec/graph/Sequence.spec.ts
+++ b/spec/graph/Sequence.spec.ts
@@ -1,13 +1,13 @@
-import { ISequence } from "../../src/api/interfaces/ISequence";
+import { SequenceEnt } from "../../src/api/ents/SequenceEnt";
 import { Sequence } from "../../src/graph/Sequence";
 
 describe("Sequence", () => {
     let sequence: Sequence;
 
     beforeEach(() => {
-        let response: ISequence = {
-            key: "A",
-            keys: ["B", "C", "D", "E"],
+        let response: SequenceEnt = {
+            id: "A",
+            image_ids: ["B", "C", "D", "E"],
         };
 
         sequence = new Sequence(response);
@@ -18,18 +18,18 @@ describe("Sequence", () => {
     });
 
     it("should find next key when it exists", () => {
-        expect(sequence.findNextKey("C")).toEqual("D");
+        expect(sequence.findNext("C")).toEqual("D");
     });
 
     it("should find prev key when it exists", () => {
-        expect(sequence.findPrevKey("C")).toEqual("B");
+        expect(sequence.findPrev("C")).toEqual("B");
     });
 
     it("should return null if no next key", () => {
-        expect(sequence.findNextKey("E")).toBe(null);
+        expect(sequence.findNext("E")).toBe(null);
     });
 
     it("should return null if no prev key", () => {
-        expect(sequence.findPrevKey("B")).toBe(null);
+        expect(sequence.findPrev("B")).toBe(null);
     });
 });
diff --git a/spec/graph/edge/EdgeCalculator.Pano.spec.ts b/spec/graph/edge/EdgeCalculator.Pano.spec.ts
index 0b3f7379c..47e9adb44 100644
--- a/spec/graph/edge/EdgeCalculator.Pano.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.Pano.spec.ts
@@ -2,9 +2,9 @@ import { Node } from "../../../src/graph/Node";
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
 import { EdgeCalculatorDirections } from "../../../src/graph/edge/EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "../../../src/graph/edge/EdgeCalculatorSettings";
-import { IPotentialEdge } from "../../../src/graph/edge/interfaces/IPotentialEdge";
+import { PotentialEdge } from "../../../src/graph/edge/interfaces/PotentialEdge";
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
 
 describe("EdgeCalculator.computeSphericalEdges", () => {
     let edgeCalculator: EdgeCalculator;
@@ -14,7 +14,7 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -52,8 +52,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge irrespective of rotation", () => {
@@ -65,8 +65,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should not have a spherical edge with to long distance", () => {
@@ -91,7 +91,7 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
         let sphericalEdges = edgeCalculator.computeSphericalEdges(node, [potentialEdge1]);
 
         for (let sphericalEdge of sphericalEdges) {
-            expect(sphericalEdge.data.direction === EdgeDirection.Spherical).toBe(false);
+            expect(sphericalEdge.data.direction === NavigationDirection.Spherical).toBe(false);
         }
     });
 
@@ -112,8 +112,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -152,8 +152,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge closest to preferred distance", () => {
@@ -166,8 +166,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge with same sequence", () => {
@@ -180,8 +180,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge with same sequence", () => {
@@ -194,8 +194,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge with smallest motion change", () => {
@@ -208,8 +208,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 });
 
@@ -222,10 +222,10 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
     let node: Node;
 
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
-    let potentialEdge3: IPotentialEdge;
-    let potentialEdge4: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
+    let potentialEdge3: PotentialEdge;
+    let potentialEdge4: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -276,8 +276,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge4.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge4.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should have a spherical edge in four directions", () => {
@@ -293,21 +293,21 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
         expect(sphericalEdges.length).toBe(4);
 
         let keys: string[] = [
-            potentialEdge1.key,
-            potentialEdge2.key,
-            potentialEdge3.key,
-            potentialEdge4.key,
+            potentialEdge1.id,
+            potentialEdge2.id,
+            potentialEdge3.id,
+            potentialEdge4.id,
         ];
 
         for (let key of keys) {
             let edge = null;
             for (let sphericalEdge of sphericalEdges) {
-                if (sphericalEdge.to === key) {
+                if (sphericalEdge.target === key) {
                     edge = sphericalEdge;
                 }
             }
 
-            expect(edge.data.direction).toBe(EdgeDirection.Spherical);
+            expect(edge.data.direction).toBe(NavigationDirection.Spherical);
         }
     });
 
@@ -324,19 +324,19 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
         expect(sphericalEdges.length).toBe(2);
 
         let keys: string[] = [
-            potentialEdge1.key,
-            potentialEdge3.key,
+            potentialEdge1.id,
+            potentialEdge3.id,
         ];
 
         for (let key of keys) {
             let edge = null;
             for (let sphericalEdge of sphericalEdges) {
-                if (sphericalEdge.to === key) {
+                if (sphericalEdge.target === key) {
                     edge = sphericalEdge;
                 }
             }
 
-            expect(edge.data.direction).toBe(EdgeDirection.Spherical);
+            expect(edge.data.direction).toBe(NavigationDirection.Spherical);
         }
     });
 
@@ -352,8 +352,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 });
 
@@ -365,7 +365,7 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -402,8 +402,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step left edge", () => {
@@ -416,8 +416,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepLeft);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepLeft);
     });
 
     it("should have a step left edge for direction change", () => {
@@ -430,8 +430,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepLeft);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepLeft);
     });
 
     it("should have a step right edge", () => {
@@ -444,8 +444,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepRight);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepRight);
     });
 
     it("should have a step right edge for direction change", () => {
@@ -458,8 +458,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepRight);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepRight);
     });
 
     it("should have a step backward edge", () => {
@@ -472,8 +472,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepBackward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepBackward);
     });
 
     it("should have a step backward edge for direction change", () => {
@@ -486,8 +486,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepBackward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepBackward);
     });
 
     it("should have a step forward edge in opposite motion direction", () => {
@@ -500,8 +500,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge in perpendicular motion direction", () => {
@@ -514,8 +514,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge in perpendicular motion direction", () => {
@@ -528,8 +528,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should not have a step forward edge when turn is to large", () => {
@@ -577,8 +577,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -619,8 +619,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should prefer a step forward edge with preferred distance", () => {
@@ -633,8 +633,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should prefer a step forward edge with smaller motion change", () => {
@@ -647,8 +647,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should prefer a step forward edge with smaller motion change", () => {
@@ -661,8 +661,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should prefer a step forward edge with same merge connected component", () => {
@@ -675,8 +675,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 });
 
@@ -689,10 +689,10 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
     let node: Node;
 
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
-    let potentialEdge3: IPotentialEdge;
-    let potentialEdge4: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
+    let potentialEdge3: PotentialEdge;
+    let potentialEdge4: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -742,14 +742,14 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
         expect(sphericalEdges.length).toBe(4);
 
         for (let sphericalEdge of sphericalEdges) {
-            if (sphericalEdge.to === potentialEdge1.key) {
-                expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
-            } else if (sphericalEdge.to === potentialEdge2.key) {
-                expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepLeft);
-            } else if (sphericalEdge.to === potentialEdge3.key) {
-                expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepBackward);
-            } else if (sphericalEdge.to === potentialEdge4.key) {
-                expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepRight);
+            if (sphericalEdge.target === potentialEdge1.id) {
+                expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
+            } else if (sphericalEdge.target === potentialEdge2.id) {
+                expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepLeft);
+            } else if (sphericalEdge.target === potentialEdge3.id) {
+                expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepBackward);
+            } else if (sphericalEdge.target === potentialEdge4.id) {
+                expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepRight);
             }
         }
     });
@@ -769,8 +769,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should not have a step left or right edge based on step forward edges", () => {
@@ -791,8 +791,8 @@ describe("EdgeCalculator.computeSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 });
 
@@ -804,8 +804,8 @@ describe("EdgeCalculator.computePerspectiveToSphericalEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -841,8 +841,8 @@ describe("EdgeCalculator.computePerspectiveToSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge1.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge1.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should not return a spherical edge when node is spherical", () => {
@@ -869,8 +869,8 @@ describe("EdgeCalculator.computePerspectiveToSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should return the spherical edge preferring forward motion", () => {
@@ -883,8 +883,8 @@ describe("EdgeCalculator.computePerspectiveToSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 
     it("should return the spherical edge preferring same connected component", () => {
@@ -897,7 +897,7 @@ describe("EdgeCalculator.computePerspectiveToSphericalEdges", () => {
 
         let sphericalEdge = sphericalEdges[0];
 
-        expect(sphericalEdge.to).toBe(potentialEdge2.key);
-        expect(sphericalEdge.data.direction).toBe(EdgeDirection.Spherical);
+        expect(sphericalEdge.target).toBe(potentialEdge2.id);
+        expect(sphericalEdge.data.direction).toBe(NavigationDirection.Spherical);
     });
 });
diff --git a/spec/graph/edge/EdgeCalculator.Sequence.spec.ts b/spec/graph/edge/EdgeCalculator.Sequence.spec.ts
index f38443afd..ff6ea1f27 100644
--- a/spec/graph/edge/EdgeCalculator.Sequence.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.Sequence.spec.ts
@@ -1,8 +1,8 @@
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
 import { EdgeCalculatorDirections } from "../../../src/graph/edge/EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "../../../src/graph/edge/EdgeCalculatorSettings";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
-import { IEdge } from "../../../src/graph/edge/interfaces/IEdge";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../../src/graph/edge/interfaces/NavigationEdge";
 import { Node } from "../../../src/graph/Node";
 import { Sequence } from "../../../src/graph/Sequence";
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
@@ -28,7 +28,7 @@ describe("EdgeCalculator.computeSequenceEdges", () => {
         let sequenceKey: string = "skey";
 
         let node: Node = helper.createCoreNode(key, { alt: 0, lat: 0, lon: 0 }, sequenceKey);
-        let sequence: Sequence = new Sequence({ key: sequenceKey, keys: [key] });
+        let sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [key] });
 
         expect(() => { edgeCalculator.computeSequenceEdges(node, sequence); }).toThrowError(Error);
     });
@@ -39,7 +39,7 @@ describe("EdgeCalculator.computeSequenceEdges", () => {
         let sequenceKey2: string = "skey2";
 
         let node: Node = helper.createCoreNode(key, { alt: 0, lat: 0, lon: 0 }, sequenceKey1);
-        let sequence: Sequence = new Sequence({ key: sequenceKey2, keys: [key] });
+        let sequence: Sequence = new Sequence({ id: sequenceKey2, image_ids: [key] });
 
         expect(() => { edgeCalculator.computeSequenceEdges(node, sequence); }).toThrowError(Error);
     });
@@ -50,16 +50,16 @@ describe("EdgeCalculator.computeSequenceEdges", () => {
         let sequenceKey: string = "skey";
 
         let node: Node = helper.createFullNode(key, { alt: 0, lat: 0, lon: 0 }, sequenceKey, [0, 0, 0]);
-        let sequence: Sequence = new Sequence({ key: sequenceKey, keys: [key, nextKey] });
+        let sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [key, nextKey] });
 
-        let sequenceEdges: IEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
+        let sequenceEdges: NavigationEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
 
         expect(sequenceEdges.length).toBe(1);
 
-        let sequenceEdge: IEdge = sequenceEdges[0];
+        let sequenceEdge: NavigationEdge = sequenceEdges[0];
 
-        expect(sequenceEdge.to).toBe(nextKey);
-        expect(sequenceEdge.data.direction).toBe(EdgeDirection.Next);
+        expect(sequenceEdge.target).toBe(nextKey);
+        expect(sequenceEdge.data.direction).toBe(NavigationDirection.Next);
     });
 
     it("should return a prev edge", () => {
@@ -68,16 +68,16 @@ describe("EdgeCalculator.computeSequenceEdges", () => {
         let sequenceKey: string = "skey";
 
         let node: Node = helper.createFullNode(key, { alt: 0, lat: 0, lon: 0 }, sequenceKey, [0, 0, 0]);
-        let sequence: Sequence = new Sequence({ key: sequenceKey, keys: [prevKey, key] });
+        let sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [prevKey, key] });
 
-        let sequenceEdges: IEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
+        let sequenceEdges: NavigationEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
 
         expect(sequenceEdges.length).toBe(1);
 
-        let sequenceEdge: IEdge = sequenceEdges[0];
+        let sequenceEdge: NavigationEdge = sequenceEdges[0];
 
-        expect(sequenceEdge.to).toBe(prevKey);
-        expect(sequenceEdge.data.direction).toBe(EdgeDirection.Prev);
+        expect(sequenceEdge.target).toBe(prevKey);
+        expect(sequenceEdge.data.direction).toBe(NavigationDirection.Prev);
     });
 
     it("should return a prev and a next edge", () => {
@@ -88,17 +88,17 @@ describe("EdgeCalculator.computeSequenceEdges", () => {
         let sequenceKey: string = "skey";
 
         let node: Node = helper.createFullNode(key, { alt: 0, lat: 0, lon: 0 }, sequenceKey, [0, 0, 0]);
-        let sequence: Sequence = new Sequence({ key: sequenceKey, keys: [prevKey, key, nextKey] });
+        let sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [prevKey, key, nextKey] });
 
-        let sequenceEdges: IEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
+        let sequenceEdges: NavigationEdge[] = edgeCalculator.computeSequenceEdges(node, sequence);
 
         expect(sequenceEdges.length).toBe(2);
 
         for (let sequenceEdge of sequenceEdges) {
-            if (sequenceEdge.to === prevKey) {
-                expect(sequenceEdge.data.direction).toBe(EdgeDirection.Prev);
-            } else if (sequenceEdge.to === nextKey) {
-                expect(sequenceEdge.data.direction).toBe(EdgeDirection.Next);
+            if (sequenceEdge.target === prevKey) {
+                expect(sequenceEdge.data.direction).toBe(NavigationDirection.Prev);
+            } else if (sequenceEdge.target === nextKey) {
+                expect(sequenceEdge.data.direction).toBe(NavigationDirection.Next);
             }
         }
     });
diff --git a/spec/graph/edge/EdgeCalculator.Similar.spec.ts b/spec/graph/edge/EdgeCalculator.Similar.spec.ts
index 8c1838a67..e7f34360c 100644
--- a/spec/graph/edge/EdgeCalculator.Similar.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.Similar.spec.ts
@@ -1,9 +1,9 @@
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
 import { EdgeCalculatorDirections } from "../../../src/graph/edge/EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "../../../src/graph/edge/EdgeCalculatorSettings";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
-import { IEdge } from "../../../src/graph/edge/interfaces/IEdge";
-import { IPotentialEdge } from "../../../src/graph/edge/interfaces/IPotentialEdge";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../../src/graph/edge/interfaces/NavigationEdge";
+import { PotentialEdge } from "../../../src/graph/edge/interfaces/PotentialEdge";
 import { Node } from "../../../src/graph/Node";
 
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
@@ -16,7 +16,7 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge: IPotentialEdge;
+    let potentialEdge: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -49,24 +49,24 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
     it("should have a similar edge", () => {
         potentialEdge.capturedAt = 24234;
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(1);
 
-        let similarEdge: IEdge = similarEdges[0];
+        let similarEdge: NavigationEdge = similarEdges[0];
 
-        expect(similarEdge.to).toBe(potentialEdge.key);
-        expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+        expect(similarEdge.target).toBe(potentialEdge.id);
+        expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
     });
 
     it("should not have a similar edge if sequence is missing on potential edge", () => {
         potentialEdge.capturedAt = 24234;
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = null;
+        potentialEdge.sequenceId = null;
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
@@ -74,9 +74,9 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
     it("should not have a similar edge if node is spherical and potential node is not spherical", () => {
         potentialEdge.sameMergeCC = true;
         potentialEdge.sameSequence = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
@@ -84,27 +84,27 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
     it("should not have a similar edge if same sequence", () => {
         potentialEdge.sameMergeCC = true;
         potentialEdge.sameSequence = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
 
     it("should have a similar edge even if not same merge cc", () => {
         potentialEdge.sameMergeCC = false;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(1);
     });
 
     it("should have a similar edge if same merge cc", () => {
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(1);
     });
@@ -114,9 +114,9 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
 
         potentialEdge.distance = 8;
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
@@ -126,9 +126,9 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
 
         potentialEdge.directionChange = 1;
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
@@ -139,16 +139,16 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
         potentialEdge.directionChange = 1;
         potentialEdge.spherical = true;
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(1);
 
-        let similarEdge: IEdge = similarEdges[0];
+        let similarEdge: NavigationEdge = similarEdges[0];
 
-        expect(similarEdge.to).toBe(potentialEdge.key);
-        expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+        expect(similarEdge.target).toBe(potentialEdge.id);
+        expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
     });
 
     it("should not have a similar edge for the same user within min time diff", () => {
@@ -157,11 +157,11 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
         settings.similarMinTimeDifference = 100;
 
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
         potentialEdge.sameUser = true;
         potentialEdge.capturedAt = 1050;
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(0);
     });
@@ -172,46 +172,46 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
         settings.similarMinTimeDifference = 100;
 
         potentialEdge.sameMergeCC = true;
-        potentialEdge.sequenceKey = "other";
+        potentialEdge.sequenceId = "other";
         potentialEdge.sameUser = true;
         potentialEdge.capturedAt = 1200;
 
-        let similarEdges: IEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
+        let similarEdges: NavigationEdge[] = edgeCalculator.computeSimilarEdges(node, [potentialEdge]);
 
         expect(similarEdges.length).toBe(1);
 
-        let similarEdge: IEdge = similarEdges[0];
+        let similarEdge: NavigationEdge = similarEdges[0];
 
-        expect(similarEdge.to).toBe(potentialEdge.key);
-        expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+        expect(similarEdge.target).toBe(potentialEdge.id);
+        expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
     });
 
     it("should have a multiple similar edges from different sequences", () => {
-        let potentialEdge1: IPotentialEdge = helper.createPotentialEdge();
-        let potentialEdge2: IPotentialEdge = helper.createPotentialEdge();
+        let potentialEdge1: PotentialEdge = helper.createPotentialEdge();
+        let potentialEdge2: PotentialEdge = helper.createPotentialEdge();
 
-        potentialEdge1.key = "k1";
+        potentialEdge1.id = "k1";
         potentialEdge1.sameMergeCC = true;
-        potentialEdge1.sequenceKey = "s1";
+        potentialEdge1.sequenceId = "s1";
 
-        potentialEdge2.key = "k2";
+        potentialEdge2.id = "k2";
         potentialEdge2.sameMergeCC = true;
-        potentialEdge2.sequenceKey = "s2";
+        potentialEdge2.sequenceId = "s2";
 
-        let similarEdges: IEdge[] =
+        let similarEdges: NavigationEdge[] =
             edgeCalculator.computeSimilarEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(similarEdges.length).toBe(2);
 
         for (let similarEdge of similarEdges) {
-            expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+            expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
         }
 
-        for (let key of [potentialEdge1.key, potentialEdge2.key]) {
+        for (let key of [potentialEdge1.id, potentialEdge2.id]) {
             let count: number = 0;
 
             for (let similarEdge of similarEdges) {
-                if (similarEdge.to === key) {
+                if (similarEdge.target === key) {
                     count++;
                 }
             }
@@ -221,52 +221,52 @@ describe("EdgeCalculator.computeSimilarEdges", () => {
     });
 
     it("should have only one similar edge for a sequence based on distance", () => {
-        let potentialEdge1: IPotentialEdge = helper.createPotentialEdge();
-        let potentialEdge2: IPotentialEdge = helper.createPotentialEdge();
+        let potentialEdge1: PotentialEdge = helper.createPotentialEdge();
+        let potentialEdge2: PotentialEdge = helper.createPotentialEdge();
 
-        potentialEdge1.key = "k1";
+        potentialEdge1.id = "k1";
         potentialEdge1.distance = 2;
         potentialEdge1.sameMergeCC = true;
-        potentialEdge1.sequenceKey = "s1";
+        potentialEdge1.sequenceId = "s1";
 
-        potentialEdge2.key = "k2";
+        potentialEdge2.id = "k2";
         potentialEdge2.distance = 1;
         potentialEdge2.sameMergeCC = true;
-        potentialEdge2.sequenceKey = "s1";
+        potentialEdge2.sequenceId = "s1";
 
-        let similarEdges: IEdge[] =
+        let similarEdges: NavigationEdge[] =
             edgeCalculator.computeSimilarEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(similarEdges.length).toBe(1);
 
-        let similarEdge: IEdge = similarEdges[0];
+        let similarEdge: NavigationEdge = similarEdges[0];
 
-        expect(similarEdge.to).toBe(potentialEdge2.key);
-        expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+        expect(similarEdge.target).toBe(potentialEdge2.id);
+        expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
     });
 
     it("should have only one similar edge for a sequence based on rotation", () => {
-        let potentialEdge1: IPotentialEdge = helper.createPotentialEdge();
-        let potentialEdge2: IPotentialEdge = helper.createPotentialEdge();
+        let potentialEdge1: PotentialEdge = helper.createPotentialEdge();
+        let potentialEdge2: PotentialEdge = helper.createPotentialEdge();
 
-        potentialEdge1.key = "k1";
+        potentialEdge1.id = "k1";
         potentialEdge1.rotation = 2;
         potentialEdge1.sameMergeCC = true;
-        potentialEdge1.sequenceKey = "s1";
+        potentialEdge1.sequenceId = "s1";
 
-        potentialEdge2.key = "k2";
+        potentialEdge2.id = "k2";
         potentialEdge2.rotation = 1;
         potentialEdge2.sameMergeCC = true;
-        potentialEdge2.sequenceKey = "s1";
+        potentialEdge2.sequenceId = "s1";
 
-        let similarEdges: IEdge[] =
+        let similarEdges: NavigationEdge[] =
             edgeCalculator.computeSimilarEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(similarEdges.length).toBe(1);
 
-        let similarEdge: IEdge = similarEdges[0];
+        let similarEdge: NavigationEdge = similarEdges[0];
 
-        expect(similarEdge.to).toBe(potentialEdge2.key);
-        expect(similarEdge.data.direction).toBe(EdgeDirection.Similar);
+        expect(similarEdge.target).toBe(potentialEdge2.id);
+        expect(similarEdge.data.direction).toBe(NavigationDirection.Similar);
     });
 });
diff --git a/spec/graph/edge/EdgeCalculator.Step.spec.ts b/spec/graph/edge/EdgeCalculator.Step.spec.ts
index dc0b576e3..e8d0eba8a 100644
--- a/spec/graph/edge/EdgeCalculator.Step.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.Step.spec.ts
@@ -1,9 +1,9 @@
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
 import { EdgeCalculatorDirections } from "../../../src/graph/edge/EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "../../../src/graph/edge/EdgeCalculatorSettings";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
-import { IEdge } from "../../../src/graph/edge/interfaces/IEdge";
-import { IPotentialEdge } from "../../../src/graph/edge/interfaces/IPotentialEdge";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../../src/graph/edge/interfaces/NavigationEdge";
+import { PotentialEdge } from "../../../src/graph/edge/interfaces/PotentialEdge";
 import { Node } from "../../../src/graph/Node";
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
 
@@ -15,14 +15,14 @@ describe("EdgeCalculator.computeStepEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge: IPotentialEdge;
+    let potentialEdge: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
 
         directions = new EdgeCalculatorDirections();
-        directions.steps[EdgeDirection.StepForward].useFallback = true;
-        directions.steps[EdgeDirection.StepBackward].useFallback = false;
+        directions.steps[NavigationDirection.StepForward].useFallback = true;
+        directions.steps[NavigationDirection.StepBackward].useFallback = false;
 
         edgeCalculator = new EdgeCalculator(settings, directions);
 
@@ -45,59 +45,59 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should have a step forward edge", () => {
         potentialEdge.motionChange = 0;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step left edge", () => {
         potentialEdge.motionChange = Math.PI / 2;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepLeft);
+        expect(stepEdge.target).toBe(potentialEdge.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepLeft);
     });
 
     it("should have a step right edge", () => {
         potentialEdge.motionChange = -Math.PI / 2;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepRight);
+        expect(stepEdge.target).toBe(potentialEdge.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepRight);
     });
 
     it("should have a step back edge", () => {
         potentialEdge.motionChange = Math.PI;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepBackward);
+        expect(stepEdge.target).toBe(potentialEdge.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepBackward);
     });
 
     it("should not have any edges because potential is spherical", () => {
         potentialEdge.spherical = true;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -105,7 +105,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges because of max distance", () => {
         potentialEdge.distance = settings.stepMaxDistance + 1;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -113,7 +113,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges because of direction change", () => {
         potentialEdge.directionChange = settings.stepMaxDirectionChange + Math.PI / 18;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -121,7 +121,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges because of negative direction change", () => {
         potentialEdge.directionChange = -settings.stepMaxDirectionChange - Math.PI / 18;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -129,7 +129,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges because of drift", () => {
         potentialEdge.motionChange = settings.stepMaxDrift + Math.PI / 18;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -137,7 +137,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges because of negative drift", () => {
         potentialEdge.motionChange = -settings.stepMaxDrift - Math.PI / 18;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -146,29 +146,29 @@ describe("EdgeCalculator.computeStepEdges", () => {
         potentialEdge.distance = settings.stepMaxDistance + 1;
         potentialEdge.motionChange = 0;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(
             node,
             [potentialEdge],
-            potentialEdge.key,
+            potentialEdge.id,
             null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should not fallback to previous node with disabled fallback setting", () => {
         potentialEdge.distance = settings.stepMaxDistance + 1;
         potentialEdge.motionChange = Math.PI;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(
             node,
             [potentialEdge],
             null,
-            potentialEdge.key);
+            potentialEdge.id);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -176,7 +176,7 @@ describe("EdgeCalculator.computeStepEdges", () => {
     it("should not have any edges if node is spherical", () => {
         node = helper.createDefaultNode(true);
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge], null, null);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -190,8 +190,8 @@ describe("EdgeCalculator.computeStepEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -212,84 +212,84 @@ describe("EdgeCalculator.computeStepEdges", () => {
         potentialEdge1.distance = settings.stepPreferredDistance + 1;
         potentialEdge2.distance = settings.stepPreferredDistance;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge based on preferred distance", () => {
         potentialEdge1.distance = settings.stepPreferredDistance - 1;
         potentialEdge2.distance = settings.stepPreferredDistance;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge for smallest motion change", () => {
         potentialEdge1.motionChange = settings.stepMaxDrift / 2;
         potentialEdge2.motionChange = settings.stepMaxDrift / 4;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge for smallest motion change", () => {
         potentialEdge1.motionChange = -settings.stepMaxDrift / 2;
         potentialEdge2.motionChange = -settings.stepMaxDrift / 4;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge for smallest vertical motion change", () => {
         potentialEdge1.verticalMotion = settings.stepMaxDrift / 2;
         potentialEdge2.verticalMotion = settings.stepMaxDrift / 4;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge for smallest vertical motion change", () => {
         potentialEdge1.verticalMotion = -settings.stepMaxDrift / 2;
         potentialEdge2.verticalMotion = -settings.stepMaxDrift / 4;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge for smallest combined motion change", () => {
@@ -299,55 +299,55 @@ describe("EdgeCalculator.computeStepEdges", () => {
         potentialEdge2.motionChange = -settings.stepMaxDrift / 3;
         potentialEdge2.verticalMotion = -settings.stepMaxDrift / 3;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge with the same sequence", () => {
         potentialEdge1.sameSequence = false;
         potentialEdge2.sameSequence = true;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge with the same merge cc", () => {
         potentialEdge1.sameMergeCC = false;
         potentialEdge2.sameMergeCC = true;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 
     it("should have a step forward edge with smallest rotation", () => {
         potentialEdge1.rotation = 0.2;
         potentialEdge2.rotation = 0.1;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeStepEdges(node, [potentialEdge1, potentialEdge2], null, null);
 
         expect(stepEdges.length).toBe(1);
 
-        let stepEdge: IEdge = stepEdges[0];
+        let stepEdge: NavigationEdge = stepEdges[0];
 
-        expect(stepEdge.to).toBe(potentialEdge2.key);
-        expect(stepEdge.data.direction).toBe(EdgeDirection.StepForward);
+        expect(stepEdge.target).toBe(potentialEdge2.id);
+        expect(stepEdge.data.direction).toBe(NavigationDirection.StepForward);
     });
 });
diff --git a/spec/graph/edge/EdgeCalculator.Turn.spec.ts b/spec/graph/edge/EdgeCalculator.Turn.spec.ts
index db1581f7d..90fb33d71 100644
--- a/spec/graph/edge/EdgeCalculator.Turn.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.Turn.spec.ts
@@ -1,9 +1,9 @@
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
 import { EdgeCalculatorDirections } from "../../../src/graph/edge/EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "../../../src/graph/edge/EdgeCalculatorSettings";
-import { EdgeDirection } from "../../../src/graph/edge/EdgeDirection";
-import { IEdge } from "../../../src/graph/edge/interfaces/IEdge";
-import { IPotentialEdge } from "../../../src/graph/edge/interfaces/IPotentialEdge";
+import { NavigationDirection } from "../../../src/graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../../src/graph/edge/interfaces/NavigationEdge";
+import { PotentialEdge } from "../../../src/graph/edge/interfaces/PotentialEdge";
 import { Node } from "../../../src/graph/Node";
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
 
@@ -15,7 +15,7 @@ describe("EdgeCalculator.computeTurnEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge: IPotentialEdge;
+    let potentialEdge: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -42,7 +42,7 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge.directionChange = Math.PI / 2;
         potentialEdge.spherical = true;
 
-        let stepEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
+        let stepEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
 
         expect(stepEdges.length).toBe(0);
     });
@@ -50,40 +50,40 @@ describe("EdgeCalculator.computeTurnEdges", () => {
     it("should have a turn left edge", () => {
         potentialEdge.directionChange = Math.PI / 2;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn right edge", () => {
         potentialEdge.directionChange = -Math.PI / 2;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnRight);
+        expect(turnEdge.target).toBe(potentialEdge.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnRight);
     });
 
     it("should have a u-turn edge", () => {
         potentialEdge.directionChange = Math.PI;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnU);
+        expect(turnEdge.target).toBe(potentialEdge.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnU);
     });
 
     it("should not have a u-turn edge when node is spherical", () => {
@@ -91,7 +91,7 @@ describe("EdgeCalculator.computeTurnEdges", () => {
 
         potentialEdge.directionChange = Math.PI;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge]);
 
         expect(turnEdges.length).toBe(0);
     });
@@ -105,8 +105,8 @@ describe("EdgeCalculator.computeTurnEdges", () => {
     let helper: EdgeCalculatorHelper;
 
     let node: Node;
-    let potentialEdge1: IPotentialEdge;
-    let potentialEdge2: IPotentialEdge;
+    let potentialEdge1: PotentialEdge;
+    let potentialEdge2: PotentialEdge;
 
     beforeEach(() => {
         settings = new EdgeCalculatorSettings();
@@ -133,14 +133,14 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.directionChange = Math.PI / 2;
         potentialEdge2.sameSequence = true;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn left with the same merge cc", () => {
@@ -150,14 +150,14 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.directionChange = Math.PI / 2;
         potentialEdge2.sameMergeCC = true;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn left edge with the smallest distance", () => {
@@ -167,19 +167,19 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.directionChange = Math.PI / 2;
         potentialEdge2.distance = 3;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn left edge with the smallest motion difference", () => {
         let motionChange: number =
-            directions.turns[EdgeDirection.TurnLeft].motionChange;
+            directions.turns[NavigationDirection.TurnLeft].motionChange;
 
         potentialEdge1.directionChange = Math.PI / 2;
         potentialEdge1.motionChange = 0.9 * motionChange;
@@ -187,14 +187,14 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.directionChange = Math.PI / 2;
         potentialEdge2.motionChange = motionChange;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn left edge for rig setup with smallest direction change", () => {
@@ -204,14 +204,14 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.distance = 0.5 * settings.turnMaxRigDistance;
         potentialEdge2.directionChange = 1.1 * settings.turnMinRigDirectionChange;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnLeft);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnLeft);
     });
 
     it("should have a turn right edge for rig setup with smallest direction change", () => {
@@ -221,14 +221,14 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge2.distance = 0.5 * settings.turnMaxRigDistance;
         potentialEdge2.directionChange = -1.1 * settings.turnMinRigDirectionChange;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(1);
 
-        let turnEdge: IEdge = turnEdges[0];
+        let turnEdge: NavigationEdge = turnEdges[0];
 
-        expect(turnEdge.to).toBe(potentialEdge2.key);
-        expect(turnEdge.data.direction).toBe(EdgeDirection.TurnRight);
+        expect(turnEdge.target).toBe(potentialEdge2.id);
+        expect(turnEdge.data.direction).toBe(NavigationDirection.TurnRight);
     });
 
     it("should not have a turn left edge for rig with too small angle", () => {
@@ -238,7 +238,7 @@ describe("EdgeCalculator.computeTurnEdges", () => {
         potentialEdge1.distance = 0.5 * settings.turnMaxRigDistance;
         potentialEdge1.directionChange = -0.9 * settings.turnMinRigDirectionChange;
 
-        let turnEdges: IEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
+        let turnEdges: NavigationEdge[] = edgeCalculator.computeTurnEdges(node, [potentialEdge1, potentialEdge2]);
 
         expect(turnEdges.length).toBe(0);
     });
diff --git a/spec/graph/edge/EdgeCalculator.spec.ts b/spec/graph/edge/EdgeCalculator.spec.ts
index d3316853a..941102e3a 100644
--- a/spec/graph/edge/EdgeCalculator.spec.ts
+++ b/spec/graph/edge/EdgeCalculator.spec.ts
@@ -1,8 +1,8 @@
 import { GeoCoords } from "../../../src/geo/GeoCoords";
-import { ILatLonAlt } from "../../../src/geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../../src/api/interfaces/LatLonAlt";
 import { Spatial } from "../../../src/geo/Spatial";
 import { EdgeCalculator } from "../../../src/graph/edge/EdgeCalculator";
-import { IPotentialEdge } from "../../../src/graph/edge/interfaces/IPotentialEdge";
+import { PotentialEdge } from "../../../src/graph/edge/interfaces/PotentialEdge";
 import { Node } from "../../../src/graph/Node";
 import { EdgeCalculatorHelper } from "../../helper/EdgeCalculatorHelper";
 
@@ -44,15 +44,15 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [0, -Math.PI / 2, 0], 2, "perspective", 0, 0);
 
         let enu: number[] = [10, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [0, -Math.PI / 2, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(0);
@@ -63,22 +63,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [0, -Math.PI / 2, 0]);
 
         let enu: number[] = [10, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [0, -Math.PI / 2, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.distance).toBeCloseTo(10, precision);
         expect(potentialEdge.motionChange).toBeCloseTo(0, precision);
         expect(potentialEdge.verticalMotion).toBeCloseTo(0, precision);
@@ -95,15 +95,15 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let sequenceKey: string = "skey";
         let edgeKey: string = "edgeKey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [0, -Math.PI / 2, 0]);
 
         let enu: number[] = [10, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, null, [0, -Math.PI / 2, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
@@ -114,22 +114,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [0, -Math.PI / 2, 0]);
 
         let enu: number[] = [3, -4, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [0, -Math.PI / 2, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.distance).toBeCloseTo(5, precision);
     });
 
@@ -138,22 +138,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [0, -Math.PI / 2, 0]);
 
         let enu: number[] = [5, 5, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [0, -Math.PI / 2, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.motionChange).toBeCloseTo(Math.PI / 4, precision);
     });
 
@@ -162,22 +162,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [Math.PI / 2, 0, 0]);
 
         let enu: number[] = [5, 5, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [Math.PI / 2, 0, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.motionChange).toBeCloseTo(-Math.PI / 4, precision);
     });
 
@@ -186,22 +186,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [Math.PI / 2, 0, 0]);
 
         let enu: number[] = [0, -10, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [Math.PI / 2, 0, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(Math.abs(potentialEdge.motionChange)).toBeCloseTo(Math.PI, precision);
     });
 
@@ -210,22 +210,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [Math.PI / 2, 0, 0]);
 
         let enu: number[] = [3, 4, 5];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [Math.PI / 2, 0, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.verticalMotion).toBeCloseTo(Math.PI / 4, precision);
     });
 
@@ -234,22 +234,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, [Math.PI / 2, 0, 0]);
 
         let enu: number[] = [-3, 4, -5];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, [Math.PI / 2, 0, 0]);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.verticalMotion).toBeCloseTo(-Math.PI / 4, precision);
     });
 
@@ -258,22 +258,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(Math.PI / 2));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.directionChange).toBeCloseTo(Math.PI / 2, precision);
     });
 
@@ -282,22 +282,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(-Math.PI / 2));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.directionChange).toBeCloseTo(-Math.PI / 2, precision);
     });
 
@@ -306,22 +306,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(Math.PI / 4));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(-3 * Math.PI / 4));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(Math.abs(potentialEdge.directionChange)).toBeCloseTo(Math.PI, precision);
     });
 
@@ -330,22 +330,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(Math.PI / 4));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(Math.PI / 4, Math.PI / 4));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.verticalDirectionChange).toBeCloseTo(Math.PI / 4, precision);
     });
 
@@ -354,22 +354,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(Math.PI / 4, 5 * Math.PI / 12));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(Math.PI / 4, 7 * Math.PI / 12));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.verticalDirectionChange).toBeCloseTo(-Math.PI / 6, precision);
     });
 
@@ -378,22 +378,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(Math.PI / 2, Math.PI / 6));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(Math.PI / 2, 2 * Math.PI / 3));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.rotation).toBeCloseTo(Math.PI / 2, precision);
     });
 
@@ -407,22 +407,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
 
         let theta: number = spatial.relativeRotationAngle(r1, r2);
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.rotation).toBeCloseTo(theta, precision);
     });
 
@@ -434,22 +434,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let r1: number[] = [0, 0, 0];
         let r2: number[] = [0, 0, 0];
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.worldMotionAzimuth).toBeCloseTo(0, precision);
     });
 
@@ -461,22 +461,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let r1: number[] = [0, 0, 0];
         let r2: number[] = [0, 0, 0];
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [0, 1, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.worldMotionAzimuth).toBeCloseTo(Math.PI / 2, precision);
     });
 
@@ -488,22 +488,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let r1: number[] = [0, 0, 0];
         let r2: number[] = [0, 0, 0];
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [-1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(Math.abs(potentialEdge.worldMotionAzimuth)).toBeCloseTo(Math.PI, precision);
     });
 
@@ -515,22 +515,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let r1: number[] = [0, 0, 0];
         let r2: number[] = [0, 0, 0];
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [0, -1, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.worldMotionAzimuth).toBeCloseTo(-Math.PI / 2, precision);
     });
 
@@ -542,22 +542,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let r1: number[] = [0, 0, 0];
         let r2: number[] = [0, 0, 0];
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, r1);
 
         let enu: number[] = [1, 1, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, r2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.worldMotionAzimuth).toBeCloseTo(Math.PI / 4, precision);
     });
 
@@ -566,22 +566,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameSequence).toBe(true);
     });
 
@@ -591,22 +591,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let sequenceKey: string = "skey";
         let edgeSequenceKey: string = "edgeSkey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0));
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, edgeSequenceKey, createRotationVector(0));
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameSequence).toBe(false);
     });
 
@@ -617,22 +617,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
 
         let mergeCC: number = 45;
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0), mergeCC);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), mergeCC);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameMergeCC).toBe(true);
     });
 
@@ -644,22 +644,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let mergeCC1: number = 45;
         let mergeCC2: number = 22;
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0), mergeCC1);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), mergeCC2);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameMergeCC).toBe(false);
     });
 
@@ -668,22 +668,22 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0), null);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), null);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameMergeCC).toBe(true);
     });
 
@@ -692,46 +692,46 @@ describe("EdgeCalculator.getPotentialEdges", () => {
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0), 467);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
         let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), null);
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.sameMergeCC).toBe(false);
     });
 
-    it("should be spherical when camera type equirectangular", () => {
+    it("should be spherical when camera type spherical", () => {
         let key: string = "key";
         let edgeKey: string = "edgeKey";
         let sequenceKey: string = "skey";
 
-        let lla: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let lla: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
         let node: Node = helper.createFullNode(key, lla, sequenceKey, createRotationVector(0), 467);
 
         let enu: number[] = [1, 0, 0];
         let geodetic: number[] = geoCoords.enuToGeodetic(enu[0], enu[1], enu[2], lla.lat, lla.lon, lla.alt);
-        let edgeLla: ILatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
-        let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), 435, "equirectangular");
+        let edgeLla: LatLonAlt = { alt: geodetic[2], lat: geodetic[0], lon: geodetic[1] };
+        let edgeNode: Node = helper.createFullNode(edgeKey, edgeLla, sequenceKey, createRotationVector(0), 435, "spherical");
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             edgeCalculator.getPotentialEdges(node, [edgeNode], []);
 
         expect(potentialEdges.length).toBe(1);
 
-        let potentialEdge: IPotentialEdge = potentialEdges[0];
+        let potentialEdge: PotentialEdge = potentialEdges[0];
 
-        expect(potentialEdge.key).toBe(edgeKey);
+        expect(potentialEdge.id).toBe(edgeKey);
         expect(potentialEdge.spherical).toBe(true);
     });
 });
diff --git a/spec/helper/DOMRendererMockCreator.ts b/spec/helper/DOMRendererMockCreator.ts
index d25a9ac5d..3ad0fd694 100644
--- a/spec/helper/DOMRendererMockCreator.ts
+++ b/spec/helper/DOMRendererMockCreator.ts
@@ -1,6 +1,6 @@
 import { Subject } from "rxjs";
 import { DOMRenderer } from "../../src/render/DOMRenderer";
-import { IVNodeHash } from "../../src/render/interfaces/IVNodeHash";
+import { VirtualNodeHash } from "../../src/render/interfaces/VirtualNodeHash";
 
 import { MockCreator } from "./MockCreator";
 import { MockCreatorBase } from "./MockCreatorBase";
@@ -9,8 +9,8 @@ export class DOMRendererMockCreator extends MockCreatorBase<DOMRenderer> {
     public create(): DOMRenderer {
         const mock: DOMRenderer = new MockCreator().create(DOMRenderer, "DOMRenderer");
 
-        this._mockProperty(mock, "element$", new Subject<IVNodeHash>());
-        this._mockProperty(mock, "render$", new Subject<IVNodeHash>());
+        this._mockProperty(mock, "element$", new Subject<VirtualNodeHash>());
+        this._mockProperty(mock, "render$", new Subject<VirtualNodeHash>());
 
         return mock;
     }
diff --git a/spec/helper/EdgeCalculatorHelper.ts b/spec/helper/EdgeCalculatorHelper.ts
index 30bef35f5..c2ce46ccd 100644
--- a/spec/helper/EdgeCalculatorHelper.ts
+++ b/spec/helper/EdgeCalculatorHelper.ts
@@ -1,24 +1,24 @@
 import { Node } from "../../src/graph/Node";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { ILatLonAlt } from "../../src/geo/interfaces/ILatLonAlt";
-import { IPotentialEdge } from "../../src/graph/edge/interfaces/IPotentialEdge";
-import { CameraProjectionType } from "../../src/api/interfaces/CameraProjectionType";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { LatLonAlt } from "../../src/api/interfaces/LatLonAlt";
+import { PotentialEdge } from "../../src/graph/edge/interfaces/PotentialEdge";
+import { CameraType } from "../../src/geo/interfaces/CameraType";
 
 export class EdgeCalculatorHelper {
-    public createPotentialEdge(key: string = "pkey"): IPotentialEdge {
+    public createPotentialEdge(key: string = "pkey"): PotentialEdge {
         return {
             capturedAt: 0,
             directionChange: 0,
             distance: 0,
             spherical: false,
-            key: key,
+            id: key,
             motionChange: 0,
             rotation: 0,
             sameMergeCC: false,
             sameSequence: false,
             sameUser: false,
-            sequenceKey: "skey",
+            sequenceId: "skey",
             verticalDirectionChange: 0,
             verticalMotion: 0,
             worldMotionAzimuth: 0,
@@ -27,14 +27,14 @@ export class EdgeCalculatorHelper {
 
     public createCoreNode(
         key: string,
-        latLonAlt: ILatLonAlt,
+        latLonAlt: LatLonAlt,
         sequenceKey: string): Node {
 
-        let coreNode: ICoreNode = {
-            cl: { lat: latLonAlt.lat, lon: latLonAlt.lon },
-            key: key,
-            l: { lat: latLonAlt.lat, lon: latLonAlt.lon },
-            sequence_key: sequenceKey,
+        let coreNode: CoreImageEnt = {
+            computed_geometry: { lat: latLonAlt.lat, lon: latLonAlt.lon },
+            id: key,
+            geometry: { lat: latLonAlt.lat, lon: latLonAlt.lon },
+            sequence: { id: sequenceKey },
         };
 
         return new Node(coreNode);
@@ -42,32 +42,41 @@ export class EdgeCalculatorHelper {
 
     public createFullNode(
         key: string = "key",
-        latLonAlt: ILatLonAlt = { alt: 0, lat: 0, lon: 0 },
+        latLonAlt: LatLonAlt = { alt: 0, lat: 0, lon: 0 },
         sequenceKey: string = "skey",
         r: number[] = [0, 0, 0],
         mergeCC: number = 2,
-        cameraType: CameraProjectionType = "perspective",
+        cameraType: CameraType = "perspective",
         capturedAt: number = 0,
         mergeVersion: number = 1): Node {
 
         let node: Node = this.createCoreNode(key, latLonAlt, sequenceKey);
 
-        let fillNode: IFillNode = {
+        let fillNode: SpatialImageEnt = {
+            altitude: 0,
             atomic_scale: 0,
-            c_rotation: r,
-            ca: 0,
-            calt: latLonAlt.alt,
-            camera_projection_type: cameraType,
+            computed_rotation: r,
+            compass_angle: 0,
+            computed_altitude: latLonAlt.alt,
+            camera_parameters: cameraType === "spherical" ?
+                [] : [1, 0, 0],
+            camera_type: cameraType,
             captured_at: capturedAt,
-            cca: 0,
-            cfocal: 0,
-            cluster_key: "ckey",
+            computed_compass_angle: 0,
+            cluster: {
+                id: "ckey",
+                url: "ckey-url",
+            },
+            creator: { id: "ukey", username: "uname" },
+            exif_orientation: 0,
             height: 0,
+            id: "key",
             merge_cc: mergeCC,
             merge_version: mergeVersion,
-            orientation: 0,
+            mesh: { id: "mesh-id", url: "mesh-url" },
             private: false,
-            user: { key: "ukey", username: "uname" },
+            owner: { id: null },
+            thumb: { id: "thumb-id", url: "thumb-url" },
             width: 0,
         };
 
@@ -79,10 +88,10 @@ export class EdgeCalculatorHelper {
     public createDefaultNode(spherical: boolean = false): Node {
         let key: string = "key";
         let sequenceKey: string = "skey";
-        let latLonAlt: ILatLonAlt = { alt: 0, lat: 0, lon: 0 };
+        let latLonAlt: LatLonAlt = { alt: 0, lat: 0, lon: 0 };
 
-        let cameraType: CameraProjectionType = spherical ?
-            "equirectangular" :
+        let cameraType: CameraType = spherical ?
+            "spherical" :
             null;
 
         return this.createFullNode(key, latLonAlt, sequenceKey, [0, 0, 0], 2, cameraType, 0);
diff --git a/spec/helper/FrameHelper.ts b/spec/helper/FrameHelper.ts
index f5d295d37..f69f12924 100644
--- a/spec/helper/FrameHelper.ts
+++ b/spec/helper/FrameHelper.ts
@@ -1,17 +1,17 @@
 import { NodeHelper } from "./NodeHelper";
 import { TransformHelper } from "./TransformHelper";
 
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { Camera } from "../../src/geo/Camera";
-import { CameraProjectionType } from "../../src/api/interfaces/CameraProjectionType";
+import { CameraType } from "../../src/geo/interfaces/CameraType";
 
 export class FrameHelper {
     private _nodeHelper: NodeHelper = new NodeHelper();
     private _transformHelper: TransformHelper = new TransformHelper();
 
     public createFrame(
-        cameraType: CameraProjectionType = "perspective"): IFrame {
+        cameraType: CameraType = "perspective"): AnimationFrame {
 
         const currentNode =
             this._nodeHelper.createNode(cameraType);
diff --git a/spec/helper/GLRendererMockCreator.ts b/spec/helper/GLRendererMockCreator.ts
index c316fc0f0..88f6ddba6 100644
--- a/spec/helper/GLRendererMockCreator.ts
+++ b/spec/helper/GLRendererMockCreator.ts
@@ -1,17 +1,17 @@
 import { Subject } from "rxjs";
 import { GLRenderer } from "../../src/render/GLRenderer";
-import { IGLRenderHash } from "../../src/render/interfaces/IGLRenderHash";
+import { GLRenderHash } from "../../src/render/interfaces/IGLRenderHash";
 
 import { MockCreator } from "./MockCreator";
 import { MockCreatorBase } from "./MockCreatorBase";
 
 export class GLRendererMockCreator extends MockCreatorBase<GLRenderer> {
     public create(): GLRenderer {
-        const mock: GLRenderer = new MockCreator().create(GLRenderer, "GLRenderer");
+        const mock = new MockCreator().create(GLRenderer, "GLRenderer");
 
         this._mockProperty(mock, "webGLRenderer$", new Subject<THREE.WebGLRenderer>());
-        this._mockProperty(mock, "render$", new Subject<IGLRenderHash>());
-        this._mockProperty(mock, "postrender$", new Subject<void>());
+        this._mockProperty(mock, "render$", new Subject<GLRenderHash>());
+        this._mockProperty(mock, "opaqueRender$", new Subject<void>());
 
         return mock;
     }
diff --git a/spec/helper/NavigatorMockCreator.ts b/spec/helper/NavigatorMockCreator.ts
index c6cf4dbfe..398151dfe 100644
--- a/spec/helper/NavigatorMockCreator.ts
+++ b/spec/helper/NavigatorMockCreator.ts
@@ -20,7 +20,7 @@ export class NavigatorMockCreator extends MockCreatorBase<Navigator> {
         this._mockProperty(mock, "cacheService", new MockCreator().create(CacheService, "CacheService"));
         this._mockProperty(mock, "graphService", new GraphServiceMockCreator().create());
         this._mockProperty(mock, "loadingService", new LoadingServiceMockCreator().create());
-        this._mockProperty(mock, "movedToKey$", new Subject<string>());
+        this._mockProperty(mock, "movedToId$", new Subject<string>());
         this._mockProperty(mock, "panService", new PanServiceMockCreator().create());
         this._mockProperty(mock, "playService", new PlayServiceMockCreator().create());
         this._mockProperty(mock, "stateService", new StateServiceMockCreator().create());
diff --git a/spec/helper/NodeHelper.ts b/spec/helper/NodeHelper.ts
index 1aeb0b285..53ddd47e0 100644
--- a/spec/helper/NodeHelper.ts
+++ b/spec/helper/NodeHelper.ts
@@ -1,7 +1,7 @@
-import { CameraProjectionType } from "../../src/api/interfaces/CameraProjectionType";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { IFullNode } from "../../src/api/interfaces/IFullNode";
+import { CameraType } from "../../src/geo/interfaces/CameraType";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { ImageEnt } from "../../src/api/ents/ImageEnt";
 import { Node } from "../../src/graph/Node";
 
 export class NodeHelper {
@@ -11,79 +11,93 @@ export class NodeHelper {
     private _userKey: string = "ukey";
     private _username: string = "uname";
 
-    public createCoreNode(): ICoreNode {
+    public createCoreNode(): CoreImageEnt {
         return {
-            cl: { lat: 0, lon: 0 },
-            key: this._nodeKey,
-            l: { lat: 0, lon: 0 },
-            sequence_key: this._sequenceKey,
+            computed_geometry: { lat: 0, lon: 0 },
+            id: this._nodeKey,
+            geometry: { lat: 0, lon: 0 },
+            sequence: { id: this._sequenceKey },
         };
     }
 
-    public createFillNode(): IFillNode {
+    public createFillNode(): SpatialImageEnt {
         return {
+            altitude: 0,
             atomic_scale: 0,
-            c_rotation: [0, 0, 0],
-            ca: 0,
-            calt: 0,
-            camera_projection_type: "perspective",
+            camera_parameters: [1, 0, 0],
+            camera_type: "perspective",
             captured_at: 0,
-            cca: 0,
-            cfocal: 0,
-            cluster_key: this._clusterKey,
-            cluster_url: this._clusterKey = "_url",
+            computed_rotation: [0, 0, 0],
+            compass_angle: 0,
+            computed_altitude: 0,
+            computed_compass_angle: 0,
+            cluster: {
+                id: this._clusterKey,
+                url: this._clusterKey + "_url",
+            },
+            creator: { id: this._userKey, username: this._username },
+            exif_orientation: 0,
             height: 1,
+            id: "id",
             merge_cc: 0,
             merge_version: 0,
-            orientation: 0,
+            mesh: { id: "mesh-id", url: "mesh-url" },
+            owner: { id: null },
             private: false,
-            user: { key: this._userKey, username: this._username },
+            thumb: { id: "thumb-id", url: "thumb-url" },
             width: 1,
         };
     }
 
-    public createFullNode(): IFullNode {
+    public createFullNode(): ImageEnt {
         return {
+            altitude: 0,
             atomic_scale: 0,
-            c_rotation: [0, 0, 0],
-            ca: 0,
-            calt: 0,
-            camera_projection_type: "perspective",
+            computed_rotation: [0, 0, 0],
+            compass_angle: 0,
+            computed_altitude: 0,
+            camera_parameters: [1, 0, 0],
+            camera_type: "perspective",
             captured_at: 0,
-            cca: 0,
-            cfocal: 0,
-            cl: { lat: 0, lon: 0 },
-            cluster_key: this._clusterKey,
-            cluster_url: this._clusterKey = "_url",
+            computed_compass_angle: 0,
+            computed_geometry: { lat: 0, lon: 0 },
+            cluster: {
+                id: this._clusterKey,
+                url: this._clusterKey + "_url",
+            },
+            creator: { id: this._userKey, username: this._username },
+            exif_orientation: 0,
+            geometry: { lat: 0, lon: 0 },
             height: 1,
-            key: this._nodeKey,
-            l: { lat: 0, lon: 0 },
+            id: this._nodeKey,
             merge_cc: 1,
             merge_version: 1,
-            orientation: 0,
+            mesh: { id: "mesh-id", url: "mesh-url" },
+            owner: { id: null },
             private: false,
-            sequence_key: this._sequenceKey,
-            user: { key: this._userKey, username: this._username },
+            sequence: { id: this._sequenceKey },
+            thumb: { id: "thumb-id", url: "thumb-url" },
             width: 1,
         };
     }
 
-    public createNode(cameraType: CameraProjectionType = "perspective"): Node {
+    public createNode(cameraType: CameraType = "perspective"): Node {
         let fullNode = this.createFullNode();
-        fullNode.camera_projection_type = cameraType;
+        fullNode.camera_type = cameraType;
         let node = new Node(fullNode);
         node.makeFull(fullNode);
         return node;
     }
 
     public createUnmergedNode(): Node {
-        let fullNode: IFullNode = this.createFullNode();
+        let fullNode: ImageEnt = this.createFullNode();
 
         fullNode.atomic_scale = undefined;
-        fullNode.ca = undefined;
-        fullNode.calt = undefined;
-        fullNode.cfocal = undefined;
-        fullNode.cl = undefined;
+        fullNode.compass_angle = undefined;
+        fullNode.computed_altitude = undefined;
+        fullNode.camera_parameters = undefined;
+        fullNode.camera_type = undefined;
+        fullNode.computed_geometry = undefined;
         fullNode.merge_cc = undefined;
         fullNode.merge_version = undefined;
 
diff --git a/spec/helper/PlayServiceMockCreator.ts b/spec/helper/PlayServiceMockCreator.ts
index 535d54f23..40f9f64a8 100644
--- a/spec/helper/PlayServiceMockCreator.ts
+++ b/spec/helper/PlayServiceMockCreator.ts
@@ -1,5 +1,5 @@
 import { Subject } from "rxjs";
-import { EdgeDirection } from "../../src/graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
 import { PlayService } from "../../src/viewer/PlayService";
 
 import { MockCreator } from "./MockCreator";
@@ -9,7 +9,7 @@ export class PlayServiceMockCreator extends MockCreatorBase<PlayService> {
     public create(): PlayService {
         const mock: PlayService = new MockCreator().create(PlayService, "PlayService");
 
-        this._mockProperty(mock, "direction$", new Subject<EdgeDirection>());
+        this._mockProperty(mock, "direction$", new Subject<NavigationDirection>());
         this._mockProperty(mock, "playing$", new Subject<boolean>());
         this._mockProperty(mock, "speed$", new Subject<boolean>());
 
diff --git a/spec/helper/StateServiceMockCreator.ts b/spec/helper/StateServiceMockCreator.ts
index e07075919..6f123250b 100644
--- a/spec/helper/StateServiceMockCreator.ts
+++ b/spec/helper/StateServiceMockCreator.ts
@@ -5,8 +5,8 @@ import { MockCreatorBase } from "./MockCreatorBase";
 
 import { Node } from "../../src/graph/Node";
 import { Transform } from "stream";
-import { ILatLonAlt } from "../../src/geo/interfaces/ILatLonAlt";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { LatLonAlt } from "../../src/api/interfaces/LatLonAlt";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { StateService } from "../../src/state/StateService";
 
@@ -15,14 +15,14 @@ export class StateServiceMockCreator extends MockCreatorBase<StateService> {
         const mock: StateService = new MockCreator().create(StateService, "StateService");
 
         this._mockProperty(mock, "currentCamera$", new Subject<Node>());
-        this._mockProperty(mock, "currentKey$", new Subject<Node>());
+        this._mockProperty(mock, "currentId$", new Subject<Node>());
         this._mockProperty(mock, "currentNode$", new Subject<Node>());
         this._mockProperty(mock, "currentNodeExternal$", new Subject<Node>());
-        this._mockProperty(mock, "currentState$", new Subject<IFrame>());
+        this._mockProperty(mock, "currentState$", new Subject<AnimationFrame>());
         this._mockProperty(mock, "currentTransform$", new Subject<Transform>());
         this._mockProperty(mock, "inMotion$", new Subject<boolean>());
         this._mockProperty(mock, "inTranslation$", new Subject<boolean>());
-        this._mockProperty(mock, "reference$", new Subject<ILatLonAlt>());
+        this._mockProperty(mock, "reference$", new Subject<LatLonAlt>());
         this._mockProperty(mock, "state$", new Subject<State>());
 
         return mock;
diff --git a/spec/helper/TestComponent.ts b/spec/helper/TestComponent.ts
index fb65f99f1..1a31ac6f6 100644
--- a/spec/helper/TestComponent.ts
+++ b/spec/helper/TestComponent.ts
@@ -1,17 +1,17 @@
 import { Component } from "../../src/component/Component";
-import { IComponentConfiguration } from "../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../src/component/interfaces/ComponentConfiguration";
 import { Container } from "../../src/viewer/Container";
 import { Navigator } from "../../src/viewer/Navigator";
 
-export interface ITestConfiguration extends IComponentConfiguration {
+export interface TestConfiguration extends ComponentConfiguration {
     test: boolean;
 }
 
-export class TestComponent extends Component<ITestConfiguration> {
+export class TestComponent extends Component<TestConfiguration> {
     constructor(name: string, container: Container, navigator: Navigator) {
         super(name, container, navigator);
     }
     protected _activate(): void { /* noop */ }
     protected _deactivate(): void { /* noop */ }
-    protected _getDefaultConfiguration(): ITestConfiguration { return { test: false }; }
+    protected _getDefaultConfiguration(): TestConfiguration { return { test: false }; }
 }
diff --git a/spec/helper/TransformHelper.ts b/spec/helper/TransformHelper.ts
index 6964358bb..ba1f96759 100644
--- a/spec/helper/TransformHelper.ts
+++ b/spec/helper/TransformHelper.ts
@@ -1,28 +1,26 @@
 import { NodeHelper } from "./NodeHelper";
 import { Transform } from "../../src/geo/Transform";
-import { CameraProjectionType } from "../../src/api/interfaces/CameraProjectionType";
+import { CameraType } from "../../src/geo/interfaces/CameraType";
 
 export class TransformHelper {
     private _nodeHelper: NodeHelper = new NodeHelper();
 
     public createTransform(
-        cameraType: CameraProjectionType = "perspective"): Transform {
+        cameraType: CameraType = "perspective"): Transform {
 
         const node = this._nodeHelper
             .createNode(cameraType);
 
         return new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             [0, 0, 0],
             null,
             null,
-            null,
-            null,
+            node.cameraParameters,
             cameraType);
     }
 }
diff --git a/spec/render/GLRenderer.spec.ts b/spec/render/GLRenderer.spec.ts
index e90f5dece..b3e756f36 100644
--- a/spec/render/GLRenderer.spec.ts
+++ b/spec/render/GLRenderer.spec.ts
@@ -3,21 +3,21 @@ import { empty as observableEmpty, BehaviorSubject, Subscription, Subject } from
 import { map } from "rxjs/operators";
 import * as THREE from "three";
 import { GLRenderer } from "../../src/render/GLRenderer";
-import { GLRenderStage } from "../../src/render/GLRenderStage";
-import { IGLRender } from "../../src/render/interfaces/IGLRender";
-import { IGLRenderFunction } from "../../src/render/interfaces/IGLRenderFunction";
-import { IGLRenderHash } from "../../src/render/interfaces/IGLRenderHash";
-import { ISize } from "../../src/render/interfaces/ISize";
+import { RenderPass } from "../../src/render/RenderPass";
+import { GLFrameRenderer } from "../../src/render/interfaces/GLFrameRenderer";
+import { GLRenderFunction } from "../../src/render/interfaces/GLRenderFunction";
+import { GLRenderHash } from "../../src/render/interfaces/IGLRenderHash";
+import { ViewportSize } from "../../src/render/interfaces/ViewportSize";
 import { RenderCamera } from "../../src/render/RenderCamera";
 import { RenderMode } from "../../src/render/RenderMode";
 import { RenderService } from "../../src/render/RenderService";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { FrameHelper } from "../helper/FrameHelper";
 import { RendererMock } from "../helper/WebGLRenderer";
 
 
 class RenderServiceMock extends RenderService {
-    private _sizeMock$: Subject<ISize> = new Subject<ISize>();
+    private _sizeMock$: Subject<ViewportSize> = new Subject<ViewportSize>();
     private _renderModeMock$: Subject<RenderMode> = new Subject<RenderMode>();
     private _renderCameraFrameMock$: Subject<RenderCamera> = new Subject<RenderCamera>();
 
@@ -25,11 +25,11 @@ class RenderServiceMock extends RenderService {
         super(element, observableEmpty(), RenderMode.Letterbox);
     }
 
-    public get size$(): Subject<ISize> {
+    public get size$(): Subject<ViewportSize> {
         return this._sizeMock$;
     }
 
-    public set size$(value: Subject<ISize>) {
+    public set size$(value: Subject<ViewportSize>) {
         this._sizeMock$ = value;
     }
 
@@ -79,23 +79,23 @@ describe("GLRenderer.ctor", () => {
 });
 
 describe("GLRenderer.renderer", () => {
-    let createGLRenderHash: (frameId: number, needsRender: boolean, name?: string) => IGLRenderHash =
-        (frameId: number, needsRender: boolean, name?: string): IGLRenderHash => {
-            let renderFunction: IGLRenderFunction =
+    let createGLRenderHash: (frameId: number, needsRender: boolean, name?: string) => GLRenderHash =
+        (frameId: number, needsRender: boolean, name?: string): GLRenderHash => {
+            let renderFunction: GLRenderFunction =
                 (pc: THREE.PerspectiveCamera, r: THREE.WebGLRenderer): void => {
                     r.render(new THREE.Scene(), pc);
                 };
 
-            let render: IGLRender = {
+            let render: GLFrameRenderer = {
                 frameId: frameId,
                 needsRender: needsRender,
                 render: renderFunction,
-                stage: GLRenderStage.Background,
+                pass: RenderPass.Background,
             };
 
-            let renderHash: IGLRenderHash = {
+            let renderHash: GLRenderHash = {
                 name: name != null ? name : "mock",
-                render: render,
+                renderer: render,
             };
 
             return renderHash;
@@ -108,7 +108,7 @@ describe("GLRenderer.renderer", () => {
         let canvas = document.createElement("canvas");
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
-        let renderHash: IGLRenderHash = createGLRenderHash(0, true);
+        let renderHash: GLRenderHash = createGLRenderHash(0, true);
 
         glRenderer.render$.next(renderHash);
 
@@ -124,11 +124,11 @@ describe("GLRenderer.renderer", () => {
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
 
-        let renderHash: IGLRenderHash = createGLRenderHash(0, true);
+        let renderHash: GLRenderHash = createGLRenderHash(0, true);
         glRenderer.render$.next(renderHash);
 
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 0;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$.next(renderCamera);
@@ -145,11 +145,11 @@ describe("GLRenderer.renderer", () => {
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
 
-        let renderHash: IGLRenderHash = createGLRenderHash(0, true);
+        let renderHash: GLRenderHash = createGLRenderHash(0, true);
         glRenderer.render$.next(renderHash);
 
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 0;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$.next(renderCamera);
@@ -164,9 +164,9 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "render");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
-        let frame$: BehaviorSubject<IFrame> = new BehaviorSubject<IFrame>(frame);
+        let frame$: BehaviorSubject<AnimationFrame> = new BehaviorSubject<AnimationFrame>(frame);
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
@@ -178,8 +178,8 @@ describe("GLRenderer.renderer", () => {
 
         frame$.pipe(
             map(
-                (f: IFrame): IGLRenderHash => {
-                    let renderHash: IGLRenderHash = createGLRenderHash(f.id, true);
+                (f: AnimationFrame): GLRenderHash => {
+                    let renderHash: GLRenderHash = createGLRenderHash(f.id, true);
 
                     return renderHash;
                 }))
@@ -200,9 +200,9 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "clear");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
-        let frame$: BehaviorSubject<IFrame> = new BehaviorSubject<IFrame>(frame);
+        let frame$: BehaviorSubject<AnimationFrame> = new BehaviorSubject<AnimationFrame>(frame);
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
@@ -214,8 +214,8 @@ describe("GLRenderer.renderer", () => {
 
         let frameSubscription: Subscription = frame$.pipe(
             map(
-                (f: IFrame): IGLRenderHash => {
-                    let renderHash: IGLRenderHash = createGLRenderHash(f.id, true);
+                (f: AnimationFrame): GLRenderHash => {
+                    let renderHash: GLRenderHash = createGLRenderHash(f.id, true);
 
                     return renderHash;
                 }))
@@ -239,7 +239,7 @@ describe("GLRenderer.renderer", () => {
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
 
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
 
@@ -268,7 +268,7 @@ describe("GLRenderer.renderer", () => {
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
@@ -295,7 +295,7 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "setClearColor");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
@@ -326,7 +326,7 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "setClearColor");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
@@ -362,7 +362,7 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "setClearColor");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
@@ -403,7 +403,7 @@ describe("GLRenderer.renderer", () => {
         spyOn(rendererMock, "setClearColor");
         spyOn(THREE, "WebGLRenderer").and.returnValue(<THREE.WebGLRenderer>rendererMock);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
@@ -414,7 +414,7 @@ describe("GLRenderer.renderer", () => {
         let canvas = document.createElement("canvas");
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
 
-        glRenderer.postrender$.subscribe(
+        glRenderer.opaqueRender$.subscribe(
             () => {
                 expect((<jasmine.Spy>rendererMock.resetState)
                     .calls.count()).toBe(1);
@@ -437,7 +437,7 @@ describe("GLRenderer.renderer", () => {
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
@@ -466,7 +466,7 @@ describe("GLRenderer.renderer", () => {
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
@@ -497,7 +497,7 @@ describe("GLRenderer.renderer", () => {
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
@@ -505,8 +505,8 @@ describe("GLRenderer.renderer", () => {
         let canvas = document.createElement("canvas");
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
 
-        let renderHash1: IGLRenderHash = createGLRenderHash(frame.id, true, hash1);
-        let renderHash2: IGLRenderHash = createGLRenderHash(frame.id, true, hash2);
+        let renderHash1: GLRenderHash = createGLRenderHash(frame.id, true, hash1);
+        let renderHash2: GLRenderHash = createGLRenderHash(frame.id, true, hash2);
 
         glRenderer.render$.next(renderHash1);
         glRenderer.render$.next(renderHash2);
@@ -544,7 +544,7 @@ describe("GLRenderer.renderer", () => {
 
         let renderServiceMock: RenderServiceMock = new RenderServiceMock(document.createElement("div"));
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 1;
         renderCamera.setFrame(frame);
         renderServiceMock.renderCameraFrame$ = new BehaviorSubject<RenderCamera>(renderCamera);
@@ -552,8 +552,8 @@ describe("GLRenderer.renderer", () => {
         let canvas = document.createElement("canvas");
         let glRenderer: GLRenderer = new GLRenderer(canvas, document.createElement("div"), renderServiceMock);
 
-        let renderHash1: IGLRenderHash = createGLRenderHash(frame.id, true, hash1);
-        let renderHash2: IGLRenderHash = createGLRenderHash(frame.id, true, hash2);
+        let renderHash1: GLRenderHash = createGLRenderHash(frame.id, true, hash1);
+        let renderHash2: GLRenderHash = createGLRenderHash(frame.id, true, hash2);
 
         glRenderer.render$.next(renderHash1);
         glRenderer.render$.next(renderHash2);
diff --git a/spec/render/RenderCamera.spec.ts b/spec/render/RenderCamera.spec.ts
index 7393fba1a..85dc87126 100644
--- a/spec/render/RenderCamera.spec.ts
+++ b/spec/render/RenderCamera.spec.ts
@@ -1,6 +1,6 @@
 import { RenderCamera } from "../../src/render/RenderCamera";
 import { RenderMode } from "../../src/render/RenderMode";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { FrameHelper } from "../helper/FrameHelper";
 
 describe("RenderCamera.ctor", () => {
@@ -63,7 +63,7 @@ describe("RenderCamera.setRenderMode", () => {
 
         renderCamera.setRenderMode(RenderMode.Fill);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         renderCamera.setFrame(frame);
 
         expect(renderCamera.changed).toBe(true);
@@ -88,7 +88,7 @@ describe("RenderCamera.setFrame", () => {
     it("should not be changed when not updated", () => {
         let renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Letterbox);
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         renderCamera.setFrame(frame);
 
         expect(renderCamera.changed).toBe(true);
@@ -113,7 +113,7 @@ describe("RenderCamera.setFrame", () => {
 
         renderCamera.setSize({ width: 1, height: 1 });
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.id = 0;
         renderCamera.setFrame(frame);
         frame.id = 1;
@@ -186,7 +186,7 @@ describe("RenderCamera.perspective.fov", () => {
 
         const fov: number = renderCamera.perspective.fov;
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.state.zoom = 1;
         renderCamera.setFrame(frame);
 
diff --git a/spec/render/RenderService.spec.ts b/spec/render/RenderService.spec.ts
index b29bbf12c..600152569 100644
--- a/spec/render/RenderService.spec.ts
+++ b/spec/render/RenderService.spec.ts
@@ -2,16 +2,16 @@ import { empty as observableEmpty, Subject } from "rxjs";
 
 import { skip, first, take, count } from "rxjs/operators";
 import { Camera } from "../../src/geo/Camera";
-import { ISize } from "../../src/render/interfaces/ISize";
+import { ViewportSize } from "../../src/render/interfaces/ViewportSize";
 import { RenderCamera } from "../../src/render/RenderCamera";
 import { RenderMode } from "../../src/render/RenderMode";
 import { RenderService } from "../../src/render/RenderService";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { FrameHelper } from "../helper/FrameHelper";
 
-const createFrame: (frameId: number, alpha?: number, camera?: Camera) => IFrame =
-    (frameId: number, alpha?: number, camera?: Camera): IFrame => {
-        const frame: IFrame = new FrameHelper().createFrame();
+const createFrame: (frameId: number, alpha?: number, camera?: Camera) => AnimationFrame =
+    (frameId: number, alpha?: number, camera?: Camera): AnimationFrame => {
+        const frame: AnimationFrame = new FrameHelper().createFrame();
 
         frame.id = frameId;
         frame.state.alpha = alpha != null ? alpha : 0;
@@ -89,7 +89,7 @@ describe("RenderService.size", () => {
         renderService.size$.pipe(
             first())
             .subscribe(
-                (size: ISize): void => {
+                (size: ViewportSize): void => {
                     expect(size).toBeDefined();
 
                     done();
@@ -104,7 +104,7 @@ describe("RenderService.size", () => {
         renderService.size$.pipe(
             first())
             .subscribe(
-                (size: ISize): void => {
+                (size: ViewportSize): void => {
                     expect(size.width).toBe(0);
                     expect(size.height).toBe(0);
 
@@ -120,7 +120,7 @@ describe("RenderService.size", () => {
         renderService.size$.pipe(
             take(2))
             .subscribe(
-                (size: ISize): void => { return; },
+                (size: ViewportSize): void => { return; },
                 (e: Error): void => { return; },
                 (): void => { done(); });
 
@@ -137,7 +137,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be defined", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -157,7 +157,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be changed for first frame", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -177,7 +177,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should not be changed for two identical frames", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -199,7 +199,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be changed for alpha changes between two frames", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -221,7 +221,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be changed for camera changes between two frames", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -246,7 +246,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be changed for resize", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -270,7 +270,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should be changed for changed render mode", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -294,7 +294,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should have correct render mode when changed before subscribe", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -316,7 +316,7 @@ describe("RenderService.renderCameraFrame", () => {
 
     it("should emit once for each frame", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const renderCamera: RenderCamera = createRenderCameraMock();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox, renderCamera);
@@ -345,7 +345,7 @@ describe("RenderService.renderCameraFrame", () => {
 describe("RenderService.renderCamera$", () => {
     it("should be defined", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         const renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Fill);
 
@@ -366,7 +366,7 @@ describe("RenderService.renderCamera$", () => {
 
     it("should only emit when camera has changed", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         const renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Fill);
 
@@ -405,7 +405,7 @@ describe("RenderService.renderCamera$", () => {
             appendChild(htmlElement: HTMLElement): void { return; },
         };
 
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         let renderService: RenderService = new RenderService(element, frame$, RenderMode.Letterbox);
 
@@ -425,7 +425,7 @@ describe("RenderService.renderCamera$", () => {
 describe("RenderService.bearing$", () => {
     it("should be defined", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         const renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Fill);
 
@@ -445,7 +445,7 @@ describe("RenderService.bearing$", () => {
 
     it("should be 90 degrees", (done: Function) => {
         let element: HTMLDivElement = document.createElement("div");
-        let frame$: Subject<IFrame> = new Subject<IFrame>();
+        let frame$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         const renderCamera: RenderCamera = new RenderCamera(1, 1, RenderMode.Fill);
 
@@ -460,7 +460,7 @@ describe("RenderService.bearing$", () => {
                     done();
                 });
 
-        let frame: IFrame = createFrame(0);
+        let frame: AnimationFrame = createFrame(0);
         frame.state.camera.lookat.set(1, 0, 0);
 
         frame$.next(frame);
diff --git a/spec/state/StateBase.spec.ts b/spec/state/StateBase.spec.ts
index aebfa3276..8ac1a4adb 100644
--- a/spec/state/StateBase.spec.ts
+++ b/spec/state/StateBase.spec.ts
@@ -1,10 +1,10 @@
 import { NodeHelper } from "../helper/NodeHelper";
 
 import { Node } from "../../src/graph/Node";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
-import { IFullNode } from "../../src/api/interfaces/IFullNode";
-import { IRotation } from "../../src/state/interfaces/IRotation";
-import { IState } from "../../src/state/interfaces/IState";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
+import { ImageEnt } from "../../src/api/ents/ImageEnt";
+import { EulerRotation } from "../../src/state/interfaces/EulerRotation";
+import { IStateBase } from "../../src/state/interfaces/IStateBase";
 import { StateBase } from "../../src/state/states/StateBase";
 import { Camera } from "../../src/geo/Camera";
 import { TransitionMode } from "../../src/state/TransitionMode";
@@ -15,9 +15,9 @@ class TestStateBase extends StateBase {
     public waitInteractively(): StateBase { return null; }
     public move(delta: number): void { return; }
     public moveTo(position: number): void { return; }
-    public rotate(delta: IRotation): void { return; }
-    public rotateUnbounded(delta: IRotation): void { return; }
-    public rotateWithoutInertia(delta: IRotation): void { return; }
+    public rotate(delta: EulerRotation): void { return; }
+    public rotateUnbounded(delta: EulerRotation): void { return; }
+    public rotateWithoutInertia(delta: EulerRotation): void { return; }
     public rotateBasic(basicRotation: number[]): void { return; }
     public rotateBasicUnbounded(basic: number[]): void { return; }
     public rotateBasicWithoutInertia(basic: number[]): void { return; }
@@ -34,7 +34,7 @@ class TestStateBase extends StateBase {
 }
 
 class TestNode extends Node {
-    constructor(core: ICoreNode) {
+    constructor(core: CoreImageEnt) {
         super(core);
     }
 
@@ -47,7 +47,7 @@ class TestNode extends Node {
     }
 }
 
-let createState: () => IState = (): IState => {
+let createState: () => IStateBase = (): IStateBase => {
     return {
         alpha: 1,
         camera: new Camera(),
@@ -69,12 +69,12 @@ let createFullNode: () => Node = (): Node => {
 
 describe("StateBase.transitionMode", () => {
     it("should set transition mode", () => {
-        const state1: IState = createState();
+        const state1: IStateBase = createState();
         const stateBase1: TestStateBase = new TestStateBase(state1);
 
         expect(stateBase1.transitionMode).toBe(TransitionMode.Default);
 
-        const state2: IState = createState();
+        const state2: IStateBase = createState();
         state2.transitionMode = TransitionMode.Instantaneous;
         const stateBase2: TestStateBase = new TestStateBase(state2);
 
@@ -84,25 +84,25 @@ describe("StateBase.transitionMode", () => {
 
 describe("StateBase.motionlessTransition", () => {
     it("should be false if not both nodes set", () => {
-        const state: IState = createState();
+        const state: IStateBase = createState();
         const stateBase: TestStateBase = new TestStateBase(state);
 
         expect(stateBase.motionlessTransition()).toBe(false);
     });
 
     it("should be false if nodes in same connected component", () => {
-        const state: IState = createState();
+        const state: IStateBase = createState();
         const stateBase: TestStateBase = new TestStateBase(state);
 
         const helper: NodeHelper = new NodeHelper();
 
-        const fullNode1: IFullNode = helper.createFullNode();
+        const fullNode1: ImageEnt = helper.createFullNode();
         fullNode1.merge_cc = 1;
         fullNode1.merge_version = 1;
         const node1: Node = new TestNode(fullNode1);
         node1.makeFull(fullNode1);
 
-        const fullNode2: IFullNode = helper.createFullNode();
+        const fullNode2: ImageEnt = helper.createFullNode();
         fullNode2.merge_cc = 1;
         fullNode2.merge_version = 1;
         const node2: Node = new TestNode(fullNode2);
@@ -115,19 +115,19 @@ describe("StateBase.motionlessTransition", () => {
     });
 
     it("should be true if instantaneous transition mode", () => {
-        const state: IState = createState();
+        const state: IStateBase = createState();
         state.transitionMode = TransitionMode.Instantaneous;
         const stateBase: TestStateBase = new TestStateBase(state);
 
         const helper: NodeHelper = new NodeHelper();
 
-        const fullNode1: IFullNode = helper.createFullNode();
+        const fullNode1: ImageEnt = helper.createFullNode();
         fullNode1.merge_cc = 1;
         fullNode1.merge_version = 1;
         const node1: Node = new TestNode(fullNode1);
         node1.makeFull(fullNode1);
 
-        const fullNode2: IFullNode = helper.createFullNode();
+        const fullNode2: ImageEnt = helper.createFullNode();
         fullNode2.merge_cc = 1;
         fullNode2.merge_version = 1;
         const node2: Node = new TestNode(fullNode2);
@@ -142,7 +142,7 @@ describe("StateBase.motionlessTransition", () => {
 
 describe("StateBase.set", () => {
     it("should set current node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         let node: Node = createFullNode();
@@ -154,7 +154,7 @@ describe("StateBase.set", () => {
     });
 
     it("should set multiple nodes", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         stateBase.set([
@@ -177,14 +177,14 @@ describe("StateBase.remove", () => {
     });
 
     it("should throw when removing negative number", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         expect((): void => { stateBase.remove(-1); }).toThrowError(Error);
     });
 
     it("should throw when removing current node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         let node: Node = createFullNode();
@@ -194,7 +194,7 @@ describe("StateBase.remove", () => {
     });
 
     it("should throw when removing previous node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
@@ -205,12 +205,12 @@ describe("StateBase.remove", () => {
     });
 
     it("should remove one node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -220,18 +220,18 @@ describe("StateBase.remove", () => {
         stateBase.remove(1);
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
 
     it("should remove multiple nodes", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -246,7 +246,7 @@ describe("StateBase.remove", () => {
         stateBase.remove(3);
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
@@ -260,7 +260,7 @@ describe("StateBase.clear", () => {
     });
 
     it("should clear empty state without affecting it", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         stateBase.clear();
@@ -269,12 +269,12 @@ describe("StateBase.clear", () => {
     });
 
     it("should remove one previous node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -284,18 +284,18 @@ describe("StateBase.clear", () => {
         stateBase.clear();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
 
     it("should remove multiple previous nodes", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -310,18 +310,18 @@ describe("StateBase.clear", () => {
         stateBase.clear();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
 
     it("should remove one coming node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -331,18 +331,18 @@ describe("StateBase.clear", () => {
         stateBase.clear();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(0);
         expect(stateBase.trajectory.length).toBe(1);
     });
 
     it("should remove multiple coming nodes", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -357,18 +357,18 @@ describe("StateBase.clear", () => {
         stateBase.clear();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(0);
         expect(stateBase.trajectory.length).toBe(1);
     });
 
     it("should remove one previous and one coming node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -379,7 +379,7 @@ describe("StateBase.clear", () => {
         stateBase.clear();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
@@ -393,7 +393,7 @@ describe("StateBase.clearPrior", () => {
     });
 
     it("should clear prior of empty state without affecting it", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
         let stateBase: TestStateBase = new TestStateBase(state);
 
         stateBase.clearPrior();
@@ -402,12 +402,12 @@ describe("StateBase.clearPrior", () => {
     });
 
     it("should remove one previous node", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -417,18 +417,18 @@ describe("StateBase.clearPrior", () => {
         stateBase.clearPrior();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
 
     it("should remove multiple previous nodes", () => {
-        let state: IState = createState();
+        let state: IStateBase = createState();
 
         let stateBase: TestStateBase = new TestStateBase(state);
 
-        let coreNode: ICoreNode = helper.createCoreNode();
-        coreNode.key = "currentNode";
+        let coreNode: CoreImageEnt = helper.createCoreNode();
+        coreNode.id = "currentNode";
         let node: TestNode = new TestNode(coreNode);
         node.makeFull(helper.createFillNode());
 
@@ -443,7 +443,7 @@ describe("StateBase.clearPrior", () => {
         stateBase.clearPrior();
 
         expect(stateBase.currentNode).toBeDefined();
-        expect(stateBase.currentNode.key).toBe(node.key);
+        expect(stateBase.currentNode.id).toBe(node.id);
         expect(stateBase.currentIndex).toBe(1);
         expect(stateBase.trajectory.length).toBe(2);
     });
diff --git a/spec/state/TraversingState.spec.ts b/spec/state/TraversingState.spec.ts
index 5e4fcdf8e..8c1ba81e6 100644
--- a/spec/state/TraversingState.spec.ts
+++ b/spec/state/TraversingState.spec.ts
@@ -6,8 +6,8 @@ import * as THREE from "three";
 import { NodeHelper } from "../helper/NodeHelper";
 
 import { Node } from "../../src/graph/Node";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { IState } from "../../src/state/interfaces/IState";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { IStateBase } from "../../src/state/interfaces/IStateBase";
 import { TraversingState } from "../../src/state/states/TraversingState";
 import { Camera } from "../../src/geo/Camera";
 import { TransitionMode } from "../../src/state/TransitionMode";
@@ -17,7 +17,7 @@ const transformHelper = new TransformHelper();
 
 describe("TraversingState.ctor", () => {
     it("should be defined", () => {
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: new Camera(),
             currentIndex: -1,
@@ -46,10 +46,10 @@ class TestTraversingState extends TraversingState {
 class TestNode extends Node {
     constructor() {
         super({
-            cl: { lat: 0, lon: 0 },
-            key: "key",
-            l: { lat: 0, lon: 0 },
-            sequence_key: "skey",
+            computed_geometry: { lat: 0, lon: 0 },
+            id: "key",
+            geometry: { lat: 0, lon: 0 },
+            sequence: { id: "skey" },
         });
     }
 
@@ -76,7 +76,7 @@ describe("TraversingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -89,7 +89,7 @@ describe("TraversingState.currentCamera.lookat", () => {
         let traversingState: TestTraversingState = new TestTraversingState(state);
 
         let node: TestNode = new TestNode();
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         traversingState.set([node]);
@@ -108,7 +108,7 @@ describe("TraversingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -121,12 +121,12 @@ describe("TraversingState.currentCamera.lookat", () => {
         let traversingState: TestTraversingState = new TestTraversingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
-        previousFillNode.c_rotation = [Math.PI, 0, 0];
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
+        previousFillNode.computed_rotation = [Math.PI, 0, 0];
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
         currentNode.makeFull(currentFillNode);
 
         traversingState.set([previousNode]);
@@ -146,7 +146,7 @@ describe("TraversingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -159,13 +159,13 @@ describe("TraversingState.currentCamera.lookat", () => {
         let traversingState: TestTraversingState = new TestTraversingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let preivousFillNode: IFillNode = helper.createFillNode();
-        preivousFillNode.c_rotation = [Math.PI, 0, 0];
+        let preivousFillNode: SpatialImageEnt = helper.createFillNode();
+        preivousFillNode.computed_rotation = [Math.PI, 0, 0];
         previousNode.makeFull(preivousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
-        currentFillNode.camera_projection_type = "equirectangular";
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
+        currentFillNode.camera_type = "spherical";
 
         currentNode.makeFull(currentFillNode);
 
@@ -198,7 +198,7 @@ describe("TraversingState.previousCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -211,7 +211,7 @@ describe("TraversingState.previousCamera.lookat", () => {
         let traversingState: TestTraversingState = new TestTraversingState(state);
 
         let node: TestNode = new TestNode();
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         traversingState.set([node]);
@@ -230,7 +230,7 @@ describe("TraversingState.previousCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -243,12 +243,12 @@ describe("TraversingState.previousCamera.lookat", () => {
         let traversingState: TestTraversingState = new TestTraversingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
-        previousFillNode.c_rotation = [Math.PI, 0, 0];
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
+        previousFillNode.computed_rotation = [Math.PI, 0, 0];
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
         currentNode.makeFull(currentFillNode);
 
         traversingState.set([previousNode]);
diff --git a/spec/state/WaitingState.spec.ts b/spec/state/WaitingState.spec.ts
index 15e29ad59..d41a3df7e 100644
--- a/spec/state/WaitingState.spec.ts
+++ b/spec/state/WaitingState.spec.ts
@@ -3,8 +3,8 @@ import * as THREE from "three";
 import { NodeHelper } from "../helper/NodeHelper";
 
 import { Node } from "../../src/graph/Node";
-import { IFillNode } from "../../src/api/interfaces/IFillNode";
-import { IState } from "../../src/state/interfaces/IState";
+import { SpatialImageEnt } from "../../src/api/ents/SpatialImageEnt";
+import { IStateBase } from "../../src/state/interfaces/IStateBase";
 import { WaitingState } from "../../src/state/states/WaitingState";
 import { Camera } from "../../src/geo/Camera";
 import { TransitionMode } from "../../src/state/TransitionMode";
@@ -14,7 +14,7 @@ const transformHelper = new TransformHelper();
 
 describe("WaitingState.ctor", () => {
     it("should be defined", () => {
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: new Camera(),
             currentIndex: -1,
@@ -43,10 +43,10 @@ class TestWaitingState extends WaitingState {
 class TestNode extends Node {
     constructor() {
         super({
-            cl: { lat: 0, lon: 0 },
-            key: "key",
-            l: { lat: 0, lon: 0 },
-            sequence_key: "skey",
+            computed_geometry: { lat: 0, lon: 0 },
+            id: "key",
+            geometry: { lat: 0, lon: 0 },
+            sequence: { id: "skey" },
         });
     }
 
@@ -73,7 +73,7 @@ describe("WaitingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -86,7 +86,7 @@ describe("WaitingState.currentCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let node: TestNode = new TestNode();
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         waitingState.set([node]);
@@ -105,7 +105,7 @@ describe("WaitingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -118,12 +118,12 @@ describe("WaitingState.currentCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
-        previousFillNode.c_rotation = [Math.PI, 0, 0];
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
+        previousFillNode.computed_rotation = [Math.PI, 0, 0];
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
         currentNode.makeFull(currentFillNode);
 
         waitingState.set([previousNode]);
@@ -143,7 +143,7 @@ describe("WaitingState.currentCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -156,13 +156,13 @@ describe("WaitingState.currentCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
-        previousFillNode.c_rotation = [Math.PI, 0, 0];
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
+        previousFillNode.computed_rotation = [Math.PI, 0, 0];
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
-        currentFillNode.camera_projection_type = "equirectangular";
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
+        currentFillNode.camera_type = "spherical";
 
         currentNode.makeFull(currentFillNode);
 
@@ -199,7 +199,7 @@ describe("WaitingState.previousCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -212,7 +212,7 @@ describe("WaitingState.previousCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let node: TestNode = new TestNode();
-        let fillNode: IFillNode = helper.createFillNode();
+        let fillNode: SpatialImageEnt = helper.createFillNode();
         node.makeFull(fillNode);
 
         waitingState.set([node]);
@@ -231,7 +231,7 @@ describe("WaitingState.previousCamera.lookat", () => {
         camera.position.fromArray([10, 10, 0]);
         camera.lookat.fromArray([15, 15, 0]);
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -244,12 +244,12 @@ describe("WaitingState.previousCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
-        currentFillNode.c_rotation = [Math.PI, 0, 0];
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
+        currentFillNode.computed_rotation = [Math.PI, 0, 0];
         currentNode.makeFull(currentFillNode);
 
         waitingState.set([previousNode]);
@@ -267,7 +267,7 @@ describe("WaitingState.previousCamera.lookat", () => {
     it("should correspond to direction of current camera when spherical and previous node set", () => {
         let camera: Camera = new Camera();
 
-        let state: IState = {
+        let state: IStateBase = {
             alpha: 1,
             camera: camera,
             currentIndex: -1,
@@ -280,14 +280,14 @@ describe("WaitingState.previousCamera.lookat", () => {
         let waitingState: TestWaitingState = new TestWaitingState(state);
 
         let previousNode: TestNode = new TestNode();
-        let previousFillNode: IFillNode = helper.createFillNode();
-        previousFillNode.camera_projection_type = "equirectangular";
+        let previousFillNode: SpatialImageEnt = helper.createFillNode();
+        previousFillNode.camera_type = "spherical";
 
         previousNode.makeFull(previousFillNode);
 
         let currentNode: TestNode = new TestNode();
-        let currentFillNode: IFillNode = helper.createFillNode();
-        currentFillNode.c_rotation = [0.2, 0.3, 0.4];
+        let currentFillNode: SpatialImageEnt = helper.createFillNode();
+        currentFillNode.computed_rotation = [0.2, 0.3, 0.4];
         currentNode.makeFull(currentFillNode);
 
         waitingState.set([previousNode]);
diff --git a/spec/tiles/TextureProvider.spec.ts b/spec/tiles/TextureProvider.spec.ts
index 414c547ad..864e18f47 100644
--- a/spec/tiles/TextureProvider.spec.ts
+++ b/spec/tiles/TextureProvider.spec.ts
@@ -2,7 +2,7 @@ import { empty as observableEmpty } from "rxjs";
 import * as THREE from "three";
 import { ImageTileLoader } from "../../src/tiles/ImageTileLoader";
 import { ImageTileStore } from "../../src/tiles/ImageTileStore";
-import { IRegionOfInterest } from "../../src/tiles/interfaces/IRegionOfInterest";
+import { TileRegionOfInterest } from "../../src/tiles/interfaces/TileRegionOfInterest";
 import { TextureProvider } from "../../src/tiles/TextureProvider";
 
 import { MockCreator } from "../helper/MockCreator";
@@ -77,7 +77,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 0, maxY: 0, minX: 0, minY: 0 },
             pixelHeight: 1 / height,
             pixelWidth: 1 / width,
@@ -129,7 +129,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 0 },
             pixelHeight: 1 / height / 4,
             pixelWidth: 1 / width / 4,
@@ -181,7 +181,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 0 },
             pixelHeight: 2 / height,
             pixelWidth: 2 / width,
@@ -233,7 +233,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 0 },
             pixelHeight: 2,
             pixelWidth: 2,
@@ -285,7 +285,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 1, minY: 0 },
             pixelHeight: 1 / height / 2,
             pixelWidth: 1 / width / 2,
@@ -337,7 +337,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 1 },
             pixelHeight: 1 / height / 2,
             pixelWidth: 1 / width / 2,
@@ -389,7 +389,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 1, minY: 1 },
             pixelHeight: 1 / height / 2,
             pixelWidth: 1 / width / 2,
@@ -441,7 +441,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 0 },
             pixelHeight: 1 / tileSize,
             pixelWidth: 1 / tileSize,
@@ -493,7 +493,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 1, maxY: 1, minX: 0, minY: 0 },
             pixelHeight: 2 / tileSize,
             pixelWidth: 2 / tileSize,
@@ -545,7 +545,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 0.75, maxY: 0.25, minX: 0.25, minY: 0 },
             pixelHeight: 1 / width,
             pixelWidth: 1 / height,
@@ -606,7 +606,7 @@ describe("TextureProvider.setRegionOfInterest", () => {
                 imageTileStore,
                 rendererMock);
 
-        let roi: IRegionOfInterest = {
+        let roi: TileRegionOfInterest = {
             bbox: { maxX: 0.25, maxY: 0.75, minX: 0, minY: 0.25 },
             pixelHeight: 1 / width,
             pixelWidth: 1 / height,
diff --git a/spec/utils/Urls.spec.ts b/spec/utils/Urls.spec.ts
index 5f4ce0cd6..7c3104664 100644
--- a/spec/utils/Urls.spec.ts
+++ b/spec/utils/Urls.spec.ts
@@ -1,9 +1,9 @@
 import { Urls } from "../../src/utils/Urls";
-import { IUrlOptions } from "../../src/viewer/interfaces/IUrlOptions";
+import { UrlOptions } from "../../src/viewer/options/UrlOptions";
 
 describe("Urls.setOptions", () => {
     it("should set all option properties", () => {
-        const options: IUrlOptions = {
+        const options: UrlOptions = {
             exploreHost: "test-explore",
             scheme: "test-scheme",
         };
diff --git a/spec/viewer/CacheService.spec.ts b/spec/viewer/CacheService.spec.ts
index 080a117e3..c49fb5a1d 100644
--- a/spec/viewer/CacheService.spec.ts
+++ b/spec/viewer/CacheService.spec.ts
@@ -7,13 +7,13 @@ import { NodeHelper } from "../helper/NodeHelper";
 
 import { Node } from "../../src/graph/Node";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
+import { FalcorDataProvider } from "../../src/api/falcor/FalcorDataProvider";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
 import { Graph } from "../../src/graph/Graph";
 import { GraphMode } from "../../src/graph/GraphMode";
 import { GraphService } from "../../src/graph/GraphService";
-import { ICurrentState } from "../../src/state/interfaces/ICurrentState";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { IAnimationState } from "../../src/state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { StateService } from "../../src/state/StateService";
 import { CacheService } from "../../src/viewer/CacheService";
@@ -68,20 +68,20 @@ describe("CacheService.started", () => {
 });
 
 class TestStateService extends StateService {
-    private _overridingCurrentState$: Subject<IFrame>;
+    private _overridingCurrentState$: Subject<AnimationFrame>;
 
-    constructor(currentState$: Subject<IFrame>) {
+    constructor(currentState$: Subject<AnimationFrame>) {
         super();
 
         this._overridingCurrentState$ = currentState$;
     }
 
-    public get currentState$(): Subject<IFrame> {
+    public get currentState$(): Subject<AnimationFrame> {
         return this._overridingCurrentState$;
     }
 }
 
-const createState: () => ICurrentState = (): ICurrentState => {
+const createState: () => IAnimationState = (): IAnimationState => {
     return {
         alpha: 0,
         camera: null,
@@ -114,7 +114,7 @@ describe("CacheService.start", () => {
         const graphService: GraphService = new GraphService(graph);
         graphService.setGraphMode(GraphMode.Spatial);
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
 
         const uncacheSpy: jasmine.Spy = spyOn(graphService, "uncache$");
@@ -125,15 +125,15 @@ describe("CacheService.start", () => {
 
         cacheService.start();
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
         const node2: Node = new Node(coreNode2);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2];
         state.currentNode = node1;
 
@@ -145,8 +145,8 @@ describe("CacheService.start", () => {
         expect(uncacheSpy.calls.count()).toBe(1);
         expect(uncacheSpy.calls.first().args.length).toBe(2);
         expect(uncacheSpy.calls.first().args[0].length).toBe(2);
-        expect(uncacheSpy.calls.first().args[0][0]).toBe(coreNode1.key);
-        expect(uncacheSpy.calls.first().args[0][1]).toBe(coreNode2.key);
+        expect(uncacheSpy.calls.first().args[0][0]).toBe(coreNode1.id);
+        expect(uncacheSpy.calls.first().args[0][1]).toBe(coreNode2.id);
         expect(uncacheSpy.calls.first().args[1]).toBeUndefined();
     });
 
@@ -156,7 +156,7 @@ describe("CacheService.start", () => {
         const graphService: GraphService = new GraphService(graph);
         graphService.setGraphMode(GraphMode.Sequence);
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
 
         const uncacheSpy: jasmine.Spy = spyOn(graphService, "uncache$");
@@ -167,16 +167,16 @@ describe("CacheService.start", () => {
 
         cacheService.start();
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
-        coreNode2.sequence_key = "sequence2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
+        coreNode2.sequence.id = "sequence2";
         const node2: Node = new Node(coreNode2);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2];
         state.currentNode = node1;
 
@@ -188,9 +188,9 @@ describe("CacheService.start", () => {
         expect(uncacheSpy.calls.count()).toBe(1);
         expect(uncacheSpy.calls.first().args.length).toBe(2);
         expect(uncacheSpy.calls.first().args[0].length).toBe(2);
-        expect(uncacheSpy.calls.first().args[0][0]).toBe(coreNode1.key);
-        expect(uncacheSpy.calls.first().args[0][1]).toBe(coreNode2.key);
-        expect(uncacheSpy.calls.first().args[1]).toBe(coreNode2.sequence_key);
+        expect(uncacheSpy.calls.first().args[0][0]).toBe(coreNode1.id);
+        expect(uncacheSpy.calls.first().args[0][1]).toBe(coreNode2.id);
+        expect(uncacheSpy.calls.first().args[1]).toBe(coreNode2.sequence.id);
     });
 
     it("should cache current node if switching to sequence graph mode", () => {
@@ -202,7 +202,7 @@ describe("CacheService.start", () => {
 
         graphService.setGraphMode(GraphMode.Spatial);
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
@@ -213,15 +213,15 @@ describe("CacheService.start", () => {
 
         cacheService.start();
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
         const node2: Node = new Node(coreNode2);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2];
         state.currentNode = node1;
 
@@ -231,7 +231,7 @@ describe("CacheService.start", () => {
 
         expect(cacheNodeSpy.calls.count()).toBe(1);
         expect(cacheNodeSpy.calls.first().args.length).toBe(1);
-        expect(cacheNodeSpy.calls.first().args[0]).toBe(coreNode1.key);
+        expect(cacheNodeSpy.calls.first().args[0]).toBe(coreNode1.id);
 
         cacheService.stop();
     });
@@ -245,7 +245,7 @@ describe("CacheService.start", () => {
 
         graphService.setGraphMode(GraphMode.Sequence);
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
@@ -256,19 +256,19 @@ describe("CacheService.start", () => {
 
         cacheService.start();
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
         const node2: Node = new Node(coreNode2);
 
-        const coreNode3: ICoreNode = helper.createCoreNode();
-        coreNode3.key = "node3";
+        const coreNode3: CoreImageEnt = helper.createCoreNode();
+        coreNode3.id = "node3";
         const node3: Node = new Node(coreNode3);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2, node3];
         state.currentNode = node2;
         state.currentIndex = 1;
@@ -279,9 +279,9 @@ describe("CacheService.start", () => {
 
         expect(cacheNodeSpy.calls.count()).toBe(2);
         expect(cacheNodeSpy.calls.first().args.length).toBe(1);
-        expect(cacheNodeSpy.calls.first().args[0]).toBe(coreNode2.key);
+        expect(cacheNodeSpy.calls.first().args[0]).toBe(coreNode2.id);
         expect(cacheNodeSpy.calls.argsFor(1).length).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(1)[0]).toBe(coreNode3.key);
+        expect(cacheNodeSpy.calls.argsFor(1)[0]).toBe(coreNode3.id);
 
         cacheService.stop();
     });
@@ -295,7 +295,7 @@ describe("CacheService.start", () => {
 
         spyOn(graphService, "uncache$").and.returnValue(observableOf<void>(null));
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
@@ -304,11 +304,11 @@ describe("CacheService.start", () => {
 
         cacheService.start();
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1];
         state.currentNode = node1;
         state.currentIndex = 0;
diff --git a/spec/viewer/ComponentController.spec.ts b/spec/viewer/ComponentController.spec.ts
index 010bfd50c..f75922481 100644
--- a/spec/viewer/ComponentController.spec.ts
+++ b/spec/viewer/ComponentController.spec.ts
@@ -1,7 +1,6 @@
 import { skip, first, take } from "rxjs/operators";
 import { Subject } from "rxjs";
 
-import { Navigator } from "../../src/viewer/Navigator";
 import { Node } from "../../src/graph/Node";
 
 import { ContainerMockCreator } from "../helper/ContainerMockCreator";
@@ -9,47 +8,47 @@ import { NavigatorMockCreator } from "../helper/NavigatorMockCreator";
 import { NodeMockCreator } from "../helper/NodeMockCreator";
 import { MockCreator } from "../helper/MockCreator";
 import { ComponentService } from "../../src/component/ComponentService";
-import { CoverComponent } from "../../src/component/CoverComponent";
-import { ICoverConfiguration, CoverState } from "../../src/component/interfaces/ICoverConfiguration";
-import { Container } from "../../src/viewer/Container";
+import { CoverComponent } from "../../src/component/cover/CoverComponent";
+import { CoverConfiguration } from "../../src/component/interfaces/CoverConfiguration";
 import { Observer } from "../../src/viewer/Observer";
 import { EventEmitter } from "../../src/utils/EventEmitter";
 import { ComponentController } from "../../src/viewer/ComponentController";
 import { Viewer } from "../../src/viewer/Viewer";
 import { Component } from "../../src/component/Component";
-import { IComponentConfiguration } from "../../src/component/interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../../src/component/interfaces/ComponentConfiguration";
+import { CoverState } from "../../src/component/cover/CoverState";
 
-class ComponentMock extends Component<IComponentConfiguration> {
+class CMock extends Component<ComponentConfiguration> {
     protected static _cn: string = "mock";
     public static get componentName(): string {
         return this._cn;
     };
     protected _activate(): void { /*noop*/ }
     protected _deactivate(): void { /*noop*/ }
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 }
 
-class AC extends ComponentMock { protected static _cn: string = "attribution"; };
-class BaC extends ComponentMock { protected static _cn: string = "background"; }
-class BeC extends ComponentMock { protected static _cn: string = "bearing"; }
-class CC extends ComponentMock { protected static _cn: string = "cache"; }
-class DiC extends ComponentMock { protected static _cn: string = "direction"; }
-class DeC extends ComponentMock { protected static _cn: string = "debug"; }
-class IC extends ComponentMock { protected static _cn: string = "image"; }
-class IPC extends ComponentMock { protected static _cn: string = "imagePlane"; }
-class KC extends ComponentMock { protected static _cn: string = "keyboard"; }
-class MaC extends ComponentMock { protected static _cn: string = "marker"; }
-class MoC extends ComponentMock { protected static _cn: string = "mouse"; }
-class NC extends ComponentMock { protected static _cn: string = "navigation"; }
-class PC extends ComponentMock { protected static _cn: string = "popup"; }
-class RC extends ComponentMock { protected static _cn: string = "route"; }
-class SeC extends ComponentMock { protected static _cn: string = "sequence"; }
-class SlC extends ComponentMock { protected static _cn: string = "slider"; }
-class SDC extends ComponentMock { protected static _cn: string = "spatialData"; }
-class TC extends ComponentMock { protected static _cn: string = "tag"; }
-class ZC extends ComponentMock { protected static _cn: string = "zoom"; }
+class AC extends CMock { protected static _cn: string = "attribution"; };
+class BaC extends CMock { protected static _cn: string = "background"; }
+class BeC extends CMock { protected static _cn: string = "bearing"; }
+class CC extends CMock { protected static _cn: string = "cache"; }
+class DiC extends CMock { protected static _cn: string = "direction"; }
+class DeC extends CMock { protected static _cn: string = "debug"; }
+class IC extends CMock { protected static _cn: string = "image"; }
+class IPC extends CMock { protected static _cn: string = "imagePlane"; }
+class KC extends CMock { protected static _cn: string = "keyboard"; }
+class MaC extends CMock { protected static _cn: string = "marker"; }
+class MoC extends CMock { protected static _cn: string = "mouse"; }
+class NC extends CMock { protected static _cn: string = "navigation"; }
+class PC extends CMock { protected static _cn: string = "popup"; }
+class RC extends CMock { protected static _cn: string = "route"; }
+class SeC extends CMock { protected static _cn: string = "sequence"; }
+class SlC extends CMock { protected static _cn: string = "slider"; }
+class SDC extends CMock { protected static _cn: string = "spatialData"; }
+class TC extends CMock { protected static _cn: string = "tag"; }
+class ZC extends CMock { protected static _cn: string = "zoom"; }
 
 ComponentService.register(AC);
 ComponentService.register(BaC);
@@ -74,7 +73,7 @@ ComponentService.register(ZC);
 class CoverComponentMock extends CoverComponent {
     protected _activate(): void { /*noop*/ }
     protected _deactivate(): void { /*noop*/ }
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 }
@@ -83,15 +82,15 @@ ComponentService.registerCover(CoverComponentMock);
 
 describe("ComponentController.ctor", () => {
     it("should be defined", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         const componentService = new ComponentService(container, navigator);
-        const componentController: ComponentController =
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -104,17 +103,17 @@ describe("ComponentController.ctor", () => {
     });
 
     it("should always have cover activated initially", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         const controllers: ComponentController[] = [];
         for (let i = 0; i < 5; i++) {
             const componentService = new ComponentService(container, navigator);
-            const componentController: ComponentController =
+            const componentController =
                 new ComponentController(container, navigator, observer, "key", { cover: false }, componentService);
 
             expect(componentService.coverActivated).toBe(true);
@@ -130,14 +129,14 @@ describe("ComponentController.ctor", () => {
 
 describe("ComponentController.navigable", () => {
     it("should be navigable if no key is supplied", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
 
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         const componentController =
             new ComponentController(
@@ -152,15 +151,15 @@ describe("ComponentController.navigable", () => {
     });
 
     it("should not be navigable if key is supplied", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
-        const componentController: ComponentController =
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -173,18 +172,18 @@ describe("ComponentController.navigable", () => {
     });
 
     it("should not change when initialized without key and moved to key", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         (<jasmine.Spy>container.mouseService.filteredWheel$).and.returnValue(new Subject<MouseEvent>());
 
-        const componentController: ComponentController =
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -203,18 +202,18 @@ describe("ComponentController.navigable", () => {
             skip(1), // skip initial default configuration
             take(1))
             .subscribe(
-                (c: ICoverConfiguration): void => {
-                    expect(c.key).toBe(key);
+                (c: CoverConfiguration): void => {
+                    expect(c.id).toBe(key);
                 });
 
         let navigableChangedCount: number = 0;
-        eventEmitter.on(
-            Viewer.navigablechanged,
+        viewer.on(
+            "navigable",
             (): void => {
                 navigableChangedCount++;
             });
 
-        (<Subject<string>>navigator.movedToKey$).next(key);
+        (<Subject<string>>navigator.movedToId$).next(key);
 
         expect(componentController.navigable).toBe(true);
         expect(navigableChangedCount).toBe(0);
@@ -222,21 +221,21 @@ describe("ComponentController.navigable", () => {
     });
 
     it("should change when initialized with key and cover false and node retrieved", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         (<jasmine.Spy>container.mouseService.filteredWheel$).and.returnValue(new Subject<MouseEvent>());
         const moveToKey$: Subject<Node> = new Subject<Node>();
-        (<jasmine.Spy>navigator.moveToKey$).and.returnValue(moveToKey$);
+        (<jasmine.Spy>navigator.moveTo$).and.returnValue(moveToKey$);
 
         const key: string = "key";
-        const componentController: ComponentController =
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -253,24 +252,24 @@ describe("ComponentController.navigable", () => {
         let configurationCount: number = 0;
         coverComponent.configuration$.pipe(
             first(
-                (c: ICoverConfiguration): boolean => {
+                (c: CoverConfiguration): boolean => {
                     return c.state === CoverState.Hidden;
                 }))
             .subscribe(
-                (c: ICoverConfiguration): void => {
+                (c: CoverConfiguration): void => {
                     configurationCount++;
-                    expect(c.key).toBe(key);
+                    expect(c.id).toBe(key);
                 });
 
         let navigableChangedCount: number = 0;
-        eventEmitter.on(
-            Viewer.navigablechanged,
+        viewer.on(
+            "navigable",
             (navigable: boolean): void => {
                 navigableChangedCount++;
                 expect(navigable).toBe(true);
             });
 
-        (<Subject<string>>navigator.stateService.currentKey$).next(null);
+        (<Subject<string>>navigator.stateService.currentId$).next(null);
         moveToKey$.next(new NodeMockCreator().create({ key: "key" }));
 
         expect(componentController.navigable).toBe(true);
@@ -282,20 +281,20 @@ describe("ComponentController.navigable", () => {
     it("should not change when initialized with key and cover false and node retrieval fail", () => {
         spyOn(console, "error").and.stub();
 
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         const moveToKey$: Subject<Node> = new Subject<Node>();
-        (<jasmine.Spy>navigator.moveToKey$).and.returnValue(moveToKey$);
+        (<jasmine.Spy>navigator.moveTo$).and.returnValue(moveToKey$);
 
-        const key: string = "key";
-        const componentController: ComponentController =
+        const key = "key";
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -308,13 +307,13 @@ describe("ComponentController.navigable", () => {
         expect(componentService.coverActivated).toBe(true);
 
         let navigableChangedCount: number = 0;
-        eventEmitter.on(
-            Viewer.navigablechanged,
+        viewer.on(
+            "navigable",
             (): void => {
                 navigableChangedCount++;
             });
 
-        (<Subject<string>>navigator.stateService.currentKey$).next(null);
+        (<Subject<string>>navigator.stateService.currentId$).next(null);
         moveToKey$.error(new Error("Move to key failed"));
 
         expect(componentController.navigable).toBe(false);
@@ -323,21 +322,21 @@ describe("ComponentController.navigable", () => {
     });
 
     it("should change when activating cover after successful deactivation", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const observer: Observer = new Observer(eventEmitter, navigator, container);
+        const componentService = new ComponentService(container, navigator);
+        const viewer = <Viewer>new EventEmitter();
+        const observer = new Observer(viewer, navigator, container);
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         (<jasmine.Spy>container.mouseService.filteredWheel$).and.returnValue(new Subject<MouseEvent>());
         const moveToKey$: Subject<Node> = new Subject<Node>();
-        (<jasmine.Spy>navigator.moveToKey$).and.returnValue(moveToKey$);
+        (<jasmine.Spy>navigator.moveTo$).and.returnValue(moveToKey$);
 
-        const key: string = "key";
-        const componentController: ComponentController =
+        const key = "key";
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -346,15 +345,15 @@ describe("ComponentController.navigable", () => {
                 { cover: false },
                 componentService);
 
-        (<Subject<string>>navigator.stateService.currentKey$).next(null);
+        (<Subject<string>>navigator.stateService.currentId$).next(null);
         moveToKey$.next(new NodeMockCreator().create({ key: "key" }));
 
         expect(componentController.navigable).toBe(true);
         expect(componentService.coverActivated).toBe(false);
 
         let navigableChangedCount: number = 0;
-        eventEmitter.on(
-            Viewer.navigablechanged,
+        viewer.on(
+            "navigable",
             (navigable: boolean): void => {
                 navigableChangedCount++;
                 expect(navigable).toBe(false);
@@ -370,22 +369,22 @@ describe("ComponentController.navigable", () => {
 
 describe("ComponentController.activateCover", () => {
     it("should not move again if deactivating cover twice", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const observer: Observer = new MockCreator().create(Observer, "Observer");
+        const componentService = new ComponentService(container, navigator);
+        const observer = new MockCreator().create(Observer, "Observer");
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         (<jasmine.Spy>container.mouseService.filteredWheel$).and.returnValue(new Subject<MouseEvent>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigator.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigator.moveTo$;
         const moveToKey$: Subject<Node> = new Subject<Node>();
         moveToKeySpy.and.returnValue(moveToKey$);
 
-        const key: string = "key_key";
-        const componentController: ComponentController =
+        const key = "key_key";
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
@@ -396,36 +395,36 @@ describe("ComponentController.activateCover", () => {
 
         componentController.deactivateCover();
 
-        (<Subject<string>>navigator.stateService.currentKey$).next(null);
+        (<Subject<string>>navigator.stateService.currentId$).next(null);
 
         expect(moveToKeySpy.calls.count()).toBe(1);
 
         componentController.deactivateCover();
 
-        (<Subject<string>>navigator.stateService.currentKey$).next(null);
+        (<Subject<string>>navigator.stateService.currentId$).next(null);
 
         expect(moveToKeySpy.calls.count()).toBe(1);
     });
 
     it("should not stop again if activating cover twice", () => {
-        const container: Container = new ContainerMockCreator().create();
-        const navigator: Navigator = new NavigatorMockCreator().create();
-        (<jasmine.Spy>navigator.api.imageByKeyFull$)
+        const container = new ContainerMockCreator().create();
+        const navigator = new NavigatorMockCreator().create();
+        (<jasmine.Spy>navigator.api.getImages$)
             .and.returnValue(new Subject());
-        const componentService: ComponentService = new ComponentService(container, navigator);
-        const observer: Observer = new MockCreator().create(Observer, "Observer");
+        const componentService = new ComponentService(container, navigator);
+        const observer = new MockCreator().create(Observer, "Observer");
 
         (<jasmine.Spy>container.mouseService.filtered$).and.returnValue(new Subject<MouseEvent>());
         (<jasmine.Spy>container.mouseService.filteredWheel$).and.returnValue(new Subject<MouseEvent>());
 
-        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigator.moveToKey$;
+        const moveToKeySpy: jasmine.Spy = <jasmine.Spy>navigator.moveTo$;
         const moveToKey$: Subject<Node> = new Subject<Node>();
         moveToKeySpy.and.returnValue(moveToKey$);
 
         const stopEmitSpy: jasmine.Spy = <jasmine.Spy>observer.stopEmit;
 
-        const key: string = "key_key";
-        const componentController: ComponentController =
+        const key = "key_key";
+        const componentController =
             new ComponentController(
                 container,
                 navigator,
diff --git a/spec/viewer/CustomRenderer.spec.ts b/spec/viewer/CustomRenderer.spec.ts
index d7ab5b8a0..e6dd5dc7f 100644
--- a/spec/viewer/CustomRenderer.spec.ts
+++ b/spec/viewer/CustomRenderer.spec.ts
@@ -12,9 +12,10 @@ import { ContainerMockCreator } from "../helper/ContainerMockCreator";
 import { MockCreator } from "../helper/MockCreator";
 import { NavigatorMockCreator } from "../helper/NavigatorMockCreator";
 import { RendererMock } from "../helper/WebGLRenderer";
-import { ILatLonAlt } from "../../src/geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../src/api/interfaces/LatLonAlt";
 import { RenderCamera } from "../../src/render/RenderCamera";
 import { RenderMode } from "../../src/render/RenderMode";
+import { RenderPass } from "../../src/viewer/enums/RenderPass";
 
 global.WebGL2RenderingContext = <any>jest.fn();
 
@@ -51,6 +52,7 @@ describe("CustomRenderer.add", () => {
         customRenderer.add(
             {
                 id,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: () => { /* noop */ },
@@ -80,6 +82,7 @@ describe("CustomRenderer.add", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: (viewer, reference, context) => {
                     expect(viewer).toBe(viewerMock);
                     expect(reference).toBe(referenceMock);
@@ -99,7 +102,7 @@ describe("CustomRenderer.add", () => {
         spyOn(rendererMock, "getContext").and.returnValue(contextMock);
         (<Subject<WebGLRenderer>>container.glRenderer.webGLRenderer$)
             .next(rendererMock);
-        (<Subject<ILatLonAlt>>navigator.stateService.reference$)
+        (<Subject<LatLonAlt>>navigator.stateService.reference$)
             .next(referenceMock);
     });
 
@@ -121,6 +124,7 @@ describe("CustomRenderer.add", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { invokeCount++; },
                 onRemove: () => { /* noop */ },
@@ -134,7 +138,7 @@ describe("CustomRenderer.add", () => {
         spyOn(rendererMock, "getContext").and.returnValue(contextMock);
         (<Subject<WebGLRenderer>>container.glRenderer.webGLRenderer$)
             .next(rendererMock);
-        (<Subject<ILatLonAlt>>navigator.stateService.reference$)
+        (<Subject<LatLonAlt>>navigator.stateService.reference$)
             .next(referenceMock);
 
         expect(invokeCount).toBe(0);
@@ -158,6 +162,7 @@ describe("CustomRenderer.add", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { invokeCount++; },
                 onRemove: () => { /* noop */ },
@@ -172,9 +177,9 @@ describe("CustomRenderer.add", () => {
         (<Subject<WebGLRenderer>>container.glRenderer.webGLRenderer$)
             .next(rendererMock);
 
-        (<Subject<ILatLonAlt>>navigator.stateService.reference$)
+        (<Subject<LatLonAlt>>navigator.stateService.reference$)
             .next(referenceMock);
-        (<Subject<ILatLonAlt>>navigator.stateService.reference$)
+        (<Subject<LatLonAlt>>navigator.stateService.reference$)
             .next(referenceMock);
 
         expect(invokeCount).toBe(1);
@@ -197,6 +202,7 @@ describe("CustomRenderer.add", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: () => { /* noop */ },
@@ -215,7 +221,7 @@ describe("CustomRenderer.add", () => {
         spyOn(rendererMock, "getContext").and.returnValue(contextMock);
         (<Subject<WebGLRenderer>>container.glRenderer.webGLRenderer$)
             .next(rendererMock);
-        (<Subject<ILatLonAlt>>navigator.stateService.reference$)
+        (<Subject<LatLonAlt>>navigator.stateService.reference$)
             .next(referenceMock);
 
         const renderCameraMock = new RenderCamera(1, 1, RenderMode.Fill);
@@ -238,7 +244,7 @@ describe("CustomRenderer.add", () => {
         (<Subject<RenderCamera>>container.renderService.renderCamera$)
             .next(renderCameraMock);
 
-        (<Subject<void>>container.glRenderer.postrender$).next();
+        (<Subject<void>>container.glRenderer.opaqueRender$).next();
     });
 });
 
@@ -259,6 +265,7 @@ describe("CustomRenderer.remove", () => {
         customRenderer.add(
             {
                 id,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: () => { /* noop */ },
@@ -287,6 +294,7 @@ describe("CustomRenderer.remove", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: (viewer, context) => {
@@ -328,6 +336,7 @@ describe("CustomRenderer.dispose", () => {
         customRenderer.add(
             {
                 id,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: () => { /* noop */ },
@@ -355,6 +364,7 @@ describe("CustomRenderer.dispose", () => {
         customRenderer.add(
             {
                 id: rendererId,
+                renderPass: RenderPass.Opaque,
                 onAdd: () => { /* noop */ },
                 onReferenceChanged: () => { /* noop */ },
                 onRemove: (viewer, context) => {
diff --git a/spec/viewer/Navigator.spec.ts b/spec/viewer/Navigator.spec.ts
index c46d0a482..3134ce8ee 100644
--- a/spec/viewer/Navigator.spec.ts
+++ b/spec/viewer/Navigator.spec.ts
@@ -16,20 +16,20 @@ import { StateServiceMockCreator } from "../helper/StateServiceMockCreator";
 import { Navigator } from "../../src/viewer/Navigator";
 import { Node } from "../../src/graph/Node";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
-import { ICoreNode } from "../../src/api/interfaces/ICoreNode";
+import { FalcorDataProvider } from "../../src/api/falcor/FalcorDataProvider";
+import { CoreImageEnt } from "../../src/api/ents/CoreImageEnt";
 import { Graph } from "../../src/graph/Graph";
 import { GraphService } from "../../src/graph/GraphService";
-import { ICurrentState } from "../../src/state/interfaces/ICurrentState";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { IAnimationState } from "../../src/state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { StateService } from "../../src/state/StateService";
 import { CacheService } from "../../src/viewer/CacheService";
 import { LoadingService } from "../../src/viewer/LoadingService";
 import { AbortMapillaryError } from "../../src/error/AbortMapillaryError";
-import { EdgeDirection } from "../../src/graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
 
-const createState: () => ICurrentState = (): ICurrentState => {
+const createState: () => IAnimationState = (): IAnimationState => {
     return {
         alpha: 0,
         camera: null,
@@ -103,7 +103,7 @@ describe("Navigator.moveToKey$", () => {
 
         const key: string = "key";
 
-        navigator.moveToKey$(key);
+        navigator.moveTo$(key);
 
         expect(loadingSpy.calls.count()).toBe(1);
         expect(loadingSpy.calls.first().args[0]).toBe("navigator");
@@ -120,13 +120,13 @@ describe("Navigator.moveToKey$", () => {
         const stopLoadingSpy: jasmine.Spy = spyOn(loadingService, "stopLoading").and.stub();
 
         const key: string = "key";
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
         spyOn(graphService, "cacheNode$").and.returnValue(observableOf<Node>(
             new Node({
-                cl: { lat: 0, lon: 0 },
-                key: key,
-                l: { lat: 0, lon: 0 },
-                sequence_key: sequenceKey,
+                computed_geometry: { lat: 0, lon: 0 },
+                id: key,
+                geometry: { lat: 0, lon: 0 },
+                sequence: { id: sequenceKey },
             })));
 
         const stateSpy: jasmine.Spy = spyOn(stateService, "setNodes").and.stub();
@@ -139,7 +139,7 @@ describe("Navigator.moveToKey$", () => {
                 loadingService,
                 stateService);
 
-        navigator.moveToKey$(key).subscribe(() => { /*noop*/ });
+        navigator.moveTo$(key).subscribe(() => { /*noop*/ });
 
         expect(stateSpy.calls.count()).toBe(1);
 
@@ -173,7 +173,7 @@ describe("Navigator.moveToKey$", () => {
 
         const key: string = "key";
 
-        navigator.moveToKey$(key)
+        navigator.moveTo$(key)
             .subscribe(
                 (): void => { return; },
                 (): void => { return; });
@@ -205,7 +205,7 @@ describe("Navigator.moveToKey$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveToKey$("key1")
+        navigator.moveTo$("key1")
             .subscribe(
                 undefined,
                 (e: Error): void => {
@@ -214,7 +214,7 @@ describe("Navigator.moveToKey$", () => {
                     done();
                 });
 
-        navigator.moveToKey$("key2");
+        navigator.moveTo$("key2");
     });
 
     it("should succeed when node is cached", (done: () => void) => {
@@ -228,12 +228,12 @@ describe("Navigator.moveToKey$", () => {
         spyOn(loadingService, "stopLoading").and.stub();
 
         const key: string = "key";
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
         const node: Node = new Node({
-            cl: { lat: 0, lon: 0 },
-            key: key,
-            l: { lat: 0, lon: 0 },
-            sequence_key: sequenceKey,
+            computed_geometry: { lat: 0, lon: 0 },
+            id: key,
+            geometry: { lat: 0, lon: 0 },
+            sequence: { id: sequenceKey },
         });
 
         spyOn(graphService, "cacheNode$").and.returnValue(observableOf<Node>(node));
@@ -247,10 +247,10 @@ describe("Navigator.moveToKey$", () => {
                 loadingService,
                 stateService);
 
-        navigator.moveToKey$(key)
+        navigator.moveTo$(key)
             .subscribe(
                 (n: Node) => {
-                    expect(n.key).toBe(node.key);
+                    expect(n.id).toBe(node.id);
                     done();
                 });
     });
@@ -266,13 +266,13 @@ describe("Navigator.moveToKey$", () => {
         spyOn(loadingService, "stopLoading").and.stub();
 
         const key: string = "key";
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
         const cacheNodeSubject$: Subject<Node> = new Subject<Node>();
         const node: Node = new Node({
-            cl: { lat: 0, lon: 0 },
-            key: key,
-            l: { lat: 0, lon: 0 },
-            sequence_key: sequenceKey,
+            computed_geometry: { lat: 0, lon: 0 },
+            id: key,
+            geometry: { lat: 0, lon: 0 },
+            sequence: { id: sequenceKey },
         });
 
         spyOn(graphService, "cacheNode$").and.returnValue(cacheNodeSubject$);
@@ -286,10 +286,10 @@ describe("Navigator.moveToKey$", () => {
                 loadingService,
                 stateService);
 
-        navigator.moveToKey$(key)
+        navigator.moveTo$(key)
             .subscribe(
                 (n: Node) => {
-                    expect(n.key).toBe(node.key);
+                    expect(n.id).toBe(node.id);
                     done();
                 });
 
@@ -309,13 +309,13 @@ describe("Navigator.moveToKey$", () => {
             spyOn(loadingService, "stopLoading").and.stub();
 
             const key: string = "key1";
-            const sequenceKey: string = "sequenceKey";
+            const sequenceKey: string = "sequenceId";
             const cacheNodeSubject$: Subject<Node> = new Subject<Node>();
             const node: Node = new Node({
-                cl: { lat: 0, lon: 0 },
-                key: key,
-                l: { lat: 0, lon: 0 },
-                sequence_key: sequenceKey,
+                computed_geometry: { lat: 0, lon: 0 },
+                id: key,
+                geometry: { lat: 0, lon: 0 },
+                sequence: { id: sequenceKey },
             });
 
             spyOn(graphService, "cacheNode$").and.returnValue(cacheNodeSubject$);
@@ -334,10 +334,10 @@ describe("Navigator.moveToKey$", () => {
             let errorCount: number = 0;
             let completeCount: number = 0;
 
-            navigator.moveToKey$(key)
+            navigator.moveTo$(key)
                 .subscribe(
                     (): void => {
-                        navigator.moveToKey$("key2").subscribe();
+                        navigator.moveTo$("key2").subscribe();
                         successCount++;
                     },
                     (): void => {
@@ -369,13 +369,13 @@ describe("Navigator.movedToKey$", () => {
         spyOn(loadingService, "stopLoading").and.stub();
 
         const key: string = "key";
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
         spyOn(graphService, "cacheNode$").and.returnValue(observableOf<Node>(
             new Node({
-                cl: { lat: 0, lon: 0 },
-                key: key,
-                l: { lat: 0, lon: 0 },
-                sequence_key: sequenceKey,
+                computed_geometry: { lat: 0, lon: 0 },
+                id: key,
+                geometry: { lat: 0, lon: 0 },
+                sequence: { id: sequenceKey },
             })));
 
         spyOn(stateService, "setNodes").and.stub();
@@ -389,7 +389,7 @@ describe("Navigator.movedToKey$", () => {
                 stateService,
                 cacheService);
 
-        navigator.movedToKey$.pipe(
+        navigator.movedToId$.pipe(
             first(
                 (k: string): boolean => {
                     return k != null;
@@ -401,20 +401,20 @@ describe("Navigator.movedToKey$", () => {
                     done();
                 });
 
-        navigator.moveToKey$(key).subscribe(() => { /*noop*/ });
+        navigator.moveTo$(key).subscribe(() => { /*noop*/ });
     });
 });
 
 class TestStateService extends StateService {
-    private _overridingCurrentState$: Subject<IFrame>;
+    private _overridingCurrentState$: Subject<AnimationFrame>;
 
-    constructor(currentState$: Subject<IFrame>) {
+    constructor(currentState$: Subject<AnimationFrame>) {
         super();
 
         this._overridingCurrentState$ = currentState$;
     }
 
-    public get currentState$(): Subject<IFrame> {
+    public get currentState$(): Subject<AnimationFrame> {
         return this._overridingCurrentState$;
     }
 }
@@ -497,7 +497,7 @@ describe("Navigator.setFilter$", () => {
         navigator.setFilter$(["==", "key", "value"]).subscribe();
 
         // trigger key requested
-        navigator.moveToKey$("key").subscribe();
+        navigator.moveTo$("key").subscribe();
 
         expect(setFilterSpy.calls.count()).toBe(1);
     });
@@ -542,7 +542,7 @@ describe("Navigator.setFilter$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveToKey$("moveToKey").subscribe(() => { /*noop*/ });
+        navigator.moveTo$("moveToKey").subscribe(() => { /*noop*/ });
 
         navigator.setFilter$(["==", "key", "value"])
             .subscribe(
@@ -572,7 +572,7 @@ describe("Navigator.setFilter$", () => {
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
         const cacheService: CacheService = new CacheService(graphService, stateService);
 
@@ -611,10 +611,10 @@ describe("Navigator.setFilter$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveToKey$("key").subscribe(() => { /*noop*/ });
+        navigator.moveTo$("key").subscribe(() => { /*noop*/ });
 
-        const coreNode0: ICoreNode = helper.createCoreNode();
-        coreNode0.key = "node0";
+        const coreNode0: CoreImageEnt = helper.createCoreNode();
+        coreNode0.id = "node0";
         const node0: Node = new Node(coreNode0);
 
         cacheNodeSubject1$.next(node0);
@@ -635,15 +635,15 @@ describe("Navigator.setFilter$", () => {
                     done();
                 });
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
         const node2: Node = new Node(coreNode2);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2];
 
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
@@ -716,7 +716,7 @@ describe("Navigator.setToken$", () => {
         const graphService: GraphService = new GraphService(graph);
         const loadingService: LoadingService = new LoadingService();
 
-        const currentStateSubject$: Subject<IFrame> = new Subject<IFrame>();
+        const currentStateSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
         const stateService: TestStateService = new TestStateService(currentStateSubject$);
         const cacheService: CacheService = new CacheService(graphService, stateService);
 
@@ -756,10 +756,10 @@ describe("Navigator.setToken$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveToKey$("key").subscribe(() => { /*noop*/ });
+        navigator.moveTo$("key").subscribe(() => { /*noop*/ });
 
-        const coreNode0: ICoreNode = helper.createCoreNode();
-        coreNode0.key = "node0";
+        const coreNode0: CoreImageEnt = helper.createCoreNode();
+        coreNode0.id = "node0";
         const node0: Node = new Node(coreNode0);
 
         cacheNodeSubject1$.next(node0);
@@ -786,15 +786,15 @@ describe("Navigator.setToken$", () => {
                     done();
                 });
 
-        const coreNode1: ICoreNode = helper.createCoreNode();
-        coreNode1.key = "node1";
+        const coreNode1: CoreImageEnt = helper.createCoreNode();
+        coreNode1.id = "node1";
         const node1: Node = new Node(coreNode1);
 
-        const coreNode2: ICoreNode = helper.createCoreNode();
-        coreNode2.key = "node2";
+        const coreNode2: CoreImageEnt = helper.createCoreNode();
+        coreNode2.id = "node2";
         const node2: Node = new Node(coreNode2);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [node1, node2];
 
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
@@ -829,7 +829,7 @@ describe("Navigator.setToken$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveToKey$("key1")
+        navigator.moveTo$("key1")
             .subscribe(
                 undefined,
                 (e: Error): void => {
@@ -861,7 +861,7 @@ describe("Navigator.setToken$", () => {
                 stateService,
                 cacheService);
 
-        navigator.moveDir$(EdgeDirection.Next)
+        navigator.moveDir$(NavigationDirection.Next)
             .subscribe(
                 undefined,
                 (e: Error): void => {
diff --git a/spec/viewer/Observer.spec.ts b/spec/viewer/Observer.spec.ts
index c6e6eb1ed..0f4f9a923 100644
--- a/spec/viewer/Observer.spec.ts
+++ b/spec/viewer/Observer.spec.ts
@@ -7,14 +7,15 @@ import { NavigatorMockCreator } from "../helper/NavigatorMockCreator";
 import { EventEmitter } from "../../src/utils/EventEmitter";
 import { Observer } from "../../src/viewer/Observer";
 import { Viewer } from "../../src/viewer/Viewer";
+import { ViewerLoadingEvent } from "../../src/Mapillary";
 
 describe("Observer.ctor", () => {
     it("should be defined", () => {
-        const eventEmitter: EventEmitter = new EventEmitter();
+        const viewer = <Viewer>new EventEmitter();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 new NavigatorMockCreator().create(),
                 new ContainerMockCreator().create());
 
@@ -24,20 +25,20 @@ describe("Observer.ctor", () => {
 
 describe("Observer.loading", () => {
     it("should emit loading when not started", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer = new Observer(
-            eventEmitter,
+        const observer = new Observer(
+            viewer,
             navigatorMock,
             new ContainerMockCreator().create());
 
         expect(observer).toBeDefined();
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 
@@ -45,19 +46,19 @@ describe("Observer.loading", () => {
     });
 
     it("should emit loading when started", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 navigatorMock,
                 new ContainerMockCreator().create());
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 
@@ -67,19 +68,19 @@ describe("Observer.loading", () => {
     });
 
     it("should emit loading when started and stopped", (done: Function) => {
-        const eventEmitter: EventEmitter = new EventEmitter();
-        const navigatorMock: Navigator = new NavigatorMockCreator().create();
+        const viewer = <Viewer>new EventEmitter();
+        const navigatorMock = new NavigatorMockCreator().create();
 
-        const observer: Observer =
+        const observer =
             new Observer(
-                eventEmitter,
+                viewer,
                 navigatorMock,
                 new ContainerMockCreator().create());
 
-        eventEmitter.on(
-            Viewer.loadingchanged,
-            (loading: boolean) => {
-                expect(loading).toBe(true);
+        viewer.on(
+            "loading",
+            (event: ViewerLoadingEvent) => {
+                expect(event.loading).toBe(true);
                 done();
             });
 
diff --git a/spec/viewer/PanService.spec.ts b/spec/viewer/PanService.spec.ts
index 5de4596ae..cc7324c8c 100644
--- a/spec/viewer/PanService.spec.ts
+++ b/spec/viewer/PanService.spec.ts
@@ -3,9 +3,9 @@ import { skip } from "rxjs/operators";
 
 import { Node } from "../../src/graph/Node";
 import { Transform } from "../../src/geo/Transform";
-import { ILatLonAlt } from "../../src/geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../src/api/interfaces/LatLonAlt";
 import { GraphService } from "../../src/graph/GraphService";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { StateService } from "../../src/state/StateService";
 import { PanService } from "../../src/viewer/PanService";
 import { FrameHelper } from "../helper/FrameHelper";
@@ -40,9 +40,9 @@ describe("PanService.panNodes$", () => {
                 done();
             });
 
-        (<Subject<IFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
+        (<Subject<AnimationFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
     });
 
     it("should emit", (done: Function) => {
@@ -63,9 +63,9 @@ describe("PanService.panNodes$", () => {
                     done();
                 });
 
-        (<Subject<IFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
+        (<Subject<AnimationFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
         cacheBoundingBoxSubject.next([]);
     });
 
@@ -87,9 +87,9 @@ describe("PanService.panNodes$", () => {
                     done();
                 });
 
-        (<Subject<IFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
+        (<Subject<AnimationFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createUnmergedNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
         cacheBoundingBoxSubject.next([]);
     });
 
@@ -112,9 +112,9 @@ describe("PanService.panNodes$", () => {
                     emitCount++;
                 });
 
-        (<Subject<IFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
+        (<Subject<AnimationFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
         erroredCacheBoundingBoxSubject.error(new Error());
 
         expect(emitCount).toBe(1);
@@ -123,7 +123,7 @@ describe("PanService.panNodes$", () => {
         (<jasmine.Spy>graphService.cacheBoundingBox$).and.returnValue(cacheBoundingBoxSubject);
 
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
 
         cacheBoundingBoxSubject.next([]);
 
@@ -150,9 +150,9 @@ describe("PanService.panNodes$", () => {
                     done();
                 });
 
-        (<Subject<IFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
+        (<Subject<AnimationFrame>>stateService.currentState$).next(new FrameHelper().createFrame());
         (<Subject<Node>>stateService.currentNode$).next(new NodeHelper().createNode());
-        (<Subject<ILatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
+        (<Subject<LatLonAlt>>stateService.reference$).next({ alt: 0, lat: 0, lon: 0 });
         cacheBoundingBoxSubject.next([]);
     });
 });
diff --git a/spec/viewer/PlayService.spec.ts b/spec/viewer/PlayService.spec.ts
index ef30953da..32b84bf4e 100644
--- a/spec/viewer/PlayService.spec.ts
+++ b/spec/viewer/PlayService.spec.ts
@@ -14,20 +14,20 @@ import { StateServiceMockCreator } from "../helper/StateServiceMockCreator";
 import { FrameHelper } from "../helper/FrameHelper";
 import { Node } from "../../src/graph/Node";
 import { APIWrapper } from "../../src/api/APIWrapper";
-import { FalcorDataProvider } from "../../src/api/FalcorDataProvider";
-import { IFullNode } from "../../src/api/interfaces/IFullNode";
+import { FalcorDataProvider } from "../../src/api/falcor/FalcorDataProvider";
+import { ImageEnt } from "../../src/api/ents/ImageEnt";
 import { Graph } from "../../src/graph/Graph";
 import { GraphMode } from "../../src/graph/GraphMode";
 import { GraphService } from "../../src/graph/GraphService";
-import { IEdgeStatus } from "../../src/graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../src/graph/interfaces/NavigationEdgeStatus";
 import { NodeCache } from "../../src/graph/NodeCache";
 import { Sequence } from "../../src/graph/Sequence";
-import { ICurrentState } from "../../src/state/interfaces/ICurrentState";
-import { IFrame } from "../../src/state/interfaces/IFrame";
+import { IAnimationState } from "../../src/state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../src/state/interfaces/AnimationFrame";
 import { State } from "../../src/state/State";
 import { StateService } from "../../src/state/StateService";
 import { PlayService } from "../../src/viewer/PlayService";
-import { EdgeDirection } from "../../src/graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../src/graph/edge/NavigationDirection";
 
 describe("PlayService.ctor", () => {
     it("should be defined when constructed", () => {
@@ -53,8 +53,8 @@ describe("PlayService.ctor", () => {
             playService.speed$).pipe(
                 first())
             .subscribe(
-                ([d, p, s]: [EdgeDirection, boolean, number]): void => {
-                    expect(d).toBe(EdgeDirection.Next);
+                ([d, p, s]: [NavigationDirection, boolean, number]): void => {
+                    expect(d).toBe(NavigationDirection.Next);
                     expect(p).toBe(false);
                     expect(s).toBe(0.5);
 
@@ -199,7 +199,7 @@ describe("PlayService.speed$", () => {
     });
 });
 
-let createState: () => ICurrentState = (): ICurrentState => {
+let createState: () => IAnimationState = (): IAnimationState => {
     return {
         alpha: 0,
         camera: null,
@@ -260,13 +260,13 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(observableOf([]));
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.state.currentNode.initializeCache(new NodeCache(undefined));
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
         frame.state.currentNode.cacheSequenceEdges([]);
 
@@ -281,7 +281,7 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(observableOf([]));
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
@@ -300,17 +300,17 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(new Subject<Node[]>());
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
 
         const node: Node = frame.state.currentNode;
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
 
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
         sequenceEdgesSubject.error(new Error());
 
@@ -324,7 +324,7 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(observableOf([]));
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         let firstEmit: boolean = true;
         playService.playing$.pipe(
@@ -345,9 +345,9 @@ describe("PlayService.play", () => {
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         frame.state.currentNode.initializeCache(new NodeCache(undefined));
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
         frame.state.currentNode.cacheSequenceEdges([]);
     });
@@ -360,17 +360,17 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(observableOf([]));
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         const node: Node = frame.state.currentNode;
         node.initializeCache(new NodeCache(undefined));
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
 
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
         sequenceEdgesSubject.next({ cached: false, edges: [] });
 
@@ -381,25 +381,23 @@ describe("PlayService.play", () => {
         expect(stopSpy.calls.count()).toBe(1);
     });
 
-    it("should not stop until bridge call completes", () => {
+    it("should stop if no more nodes", () => {
         const playService: PlayService = new PlayService(graphService, stateService);
 
         const stopSpy: jasmine.Spy = spyOn(playService, "stop").and.callThrough();
         spyOn(graphService, "cacheSequence$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
-        const cacheBoundingBoxSubject: Subject<Node[]> = new Subject<Node[]>();
-        spyOn(graphService, "cacheBoundingBox$").and.returnValue(cacheBoundingBoxSubject);
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         const node: Node = frame.state.currentNode;
         node.initializeCache(new NodeCache(undefined));
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
 
-        const prevFullNode: IFullNode = new NodeHelper().createFullNode();
+        const prevFullNode: ImageEnt = new NodeHelper().createFullNode();
         prevFullNode.captured_at = -1;
         const prevNode: Node = new Node(prevFullNode);
         prevNode.makeFull(prevFullNode);
@@ -408,7 +406,7 @@ describe("PlayService.play", () => {
 
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
 
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
         sequenceEdgesSubject.next({ cached: false, edges: [] });
 
@@ -416,223 +414,7 @@ describe("PlayService.play", () => {
 
         sequenceEdgesSubject.next({ cached: true, edges: [] });
 
-        expect(stopSpy.calls.count()).toBe(0);
-
-        cacheBoundingBoxSubject.next([]);
-
-        expect(stopSpy.calls.count()).toBe(1);
-    });
-
-    it("should bridge if camera id corresponds and time monotonic", () => {
-        const playService: PlayService = new PlayService(graphService, stateService);
-
-        const stopSpy: jasmine.Spy = spyOn(playService, "stop").and.callThrough();
-        spyOn(graphService, "cacheSequence$").and.returnValue(new Subject<Sequence>());
-        spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
-        const cacheBoundingBoxSubject: Subject<Node[]> = new Subject<Node[]>();
-        spyOn(graphService, "cacheBoundingBox$").and.returnValue(cacheBoundingBoxSubject);
-        const cacheNodeSubject: Subject<Node> = new Subject<Node>();
-        const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
-        cacheNodeSpy.and.returnValue(cacheNodeSubject);
-
-        const appendNodesSpy: jasmine.Spy = <jasmine.Spy>stateService.appendNodes;
-        appendNodesSpy.and.stub();
-
-        playService.setDirection(EdgeDirection.Next);
-
-        playService.play();
-
-        const cameraUuid: string = "camera_uuid";
-        const sequenceKey1: string = "sequence1";
-
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.captured_at = 0;
-        currentFullNode.captured_with_camera_uuid = cameraUuid;
-        currentFullNode.key = "currKey";
-        currentFullNode.sequence_key = sequenceKey1;
-        const currentNode: Node = new Node(currentFullNode);
-        currentNode.makeFull(currentFullNode);
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", sequenceEdgesSubject);
-
-        const prevFullNode: IFullNode = new NodeHelper().createFullNode();
-        prevFullNode.captured_at = -1;
-        prevFullNode.captured_with_camera_uuid = cameraUuid;
-        prevFullNode.key = "prevKey";
-        prevFullNode.sequence_key = sequenceKey1;
-        const prevNode: Node = new Node(prevFullNode);
-        prevNode.makeFull(prevFullNode);
-
-        const state: ICurrentState = createState();
-        state.trajectory = [prevNode, currentNode];
-        state.lastNode = currentNode;
-        state.currentNode = currentNode;
-        state.nodesAhead = 0;
-        state.currentIndex = 1;
-
-        (<Subject<IFrame>>stateService.currentState$).next({ fps: 60, id: 0, state: state });
-
-        sequenceEdgesSubject.next({ cached: true, edges: [] });
-
-        expect(stopSpy.calls.count()).toBe(0);
-
-        const bridgeFullNode: IFullNode = new NodeHelper().createFullNode();
-        bridgeFullNode.captured_at = 1;
-        bridgeFullNode.captured_with_camera_uuid = cameraUuid;
-        bridgeFullNode.key = "bridgeKey";
-        bridgeFullNode.sequence_key = "sequenceBrdige";
-        const bridgeNode: Node = new Node(bridgeFullNode);
-        bridgeNode.makeFull(bridgeFullNode);
-
-        cacheBoundingBoxSubject.next([bridgeNode]);
-        cacheNodeSubject.next(bridgeNode);
-
-        expect(stopSpy.calls.count()).toBe(0);
-
-        expect(appendNodesSpy.calls.count()).toBe(1);
-        expect(appendNodesSpy.calls.argsFor(0)[0][0].key).toBe(bridgeNode.key);
-
-        expect(cacheNodeSpy.calls.count()).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(bridgeNode.key);
-    });
-
-    it("should bridge to closest node in decreasing time", () => {
-        const playService: PlayService = new PlayService(graphService, stateService);
-
-        const stopSpy: jasmine.Spy = spyOn(playService, "stop").and.callThrough();
-        spyOn(graphService, "cacheSequence$").and.returnValue(new Subject<Sequence>());
-        spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
-        const cacheBoundingBoxSubject: Subject<Node[]> = new Subject<Node[]>();
-        spyOn(graphService, "cacheBoundingBox$").and.returnValue(cacheBoundingBoxSubject);
-        const cacheNodeSubject: Subject<Node> = new Subject<Node>();
-        const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
-        cacheNodeSpy.and.returnValue(cacheNodeSubject);
-
-        const appendNodesSpy: jasmine.Spy = <jasmine.Spy>stateService.appendNodes;
-        appendNodesSpy.and.stub();
-
-        playService.setDirection(EdgeDirection.Next);
-
-        playService.play();
-
-        const cameraUuid: string = "camera_uuid";
-        const sequenceKey1: string = "sequence1";
-
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.captured_at = -1;
-        currentFullNode.captured_with_camera_uuid = cameraUuid;
-        currentFullNode.key = "currKey";
-        currentFullNode.sequence_key = sequenceKey1;
-        const currentNode: Node = new Node(currentFullNode);
-        currentNode.makeFull(currentFullNode);
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", sequenceEdgesSubject);
-
-        const prevFullNode: IFullNode = new NodeHelper().createFullNode();
-        prevFullNode.captured_at = 0;
-        prevFullNode.captured_with_camera_uuid = cameraUuid;
-        prevFullNode.key = "prevKey";
-        prevFullNode.sequence_key = sequenceKey1;
-        const prevNode: Node = new Node(prevFullNode);
-        prevNode.makeFull(prevFullNode);
-
-        const state: ICurrentState = createState();
-        state.trajectory = [prevNode, currentNode];
-        state.lastNode = currentNode;
-        state.currentNode = currentNode;
-        state.nodesAhead = 0;
-        state.currentIndex = 1;
-
-        (<Subject<IFrame>>stateService.currentState$).next({ fps: 60, id: 0, state: state });
-
-        sequenceEdgesSubject.next({ cached: true, edges: [] });
-
-        expect(stopSpy.calls.count()).toBe(0);
-
-        const cacheBoudndingBoxNodex: Node[] = [1, -3, -5]
-            .map(
-                (capturedAt: number): Node => {
-                    const bridgeFullNode: IFullNode = new NodeHelper().createFullNode();
-                    bridgeFullNode.captured_at = capturedAt;
-                    bridgeFullNode.captured_with_camera_uuid = cameraUuid;
-                    bridgeFullNode.key = "bridgeKey";
-                    bridgeFullNode.sequence_key = "sequenceBrdige";
-                    const bridgeNode: Node = new Node(bridgeFullNode);
-                    bridgeNode.makeFull(bridgeFullNode);
-
-                    return bridgeNode;
-                });
-
-        const sameSequenceFullNode: IFullNode = new NodeHelper().createFullNode();
-        sameSequenceFullNode.captured_at = -2;
-        sameSequenceFullNode.captured_with_camera_uuid = cameraUuid;
-        sameSequenceFullNode.key = "bridgeKey";
-        sameSequenceFullNode.sequence_key = sequenceKey1;
-        const sameSequenceNode: Node = new Node(sameSequenceFullNode);
-        sameSequenceNode.makeFull(sameSequenceFullNode);
-
-        cacheBoudndingBoxNodex.push(sameSequenceNode);
-
-        cacheBoundingBoxSubject.next(cacheBoudndingBoxNodex);
-        cacheNodeSubject.next(cacheBoudndingBoxNodex[1]);
-
-        expect(stopSpy.calls.count()).toBe(0);
-
-        expect(appendNodesSpy.calls.count()).toBe(1);
-        expect(appendNodesSpy.calls.argsFor(0)[0][0].key).toBe(cacheBoudndingBoxNodex[1].key);
-
-        expect(cacheNodeSpy.calls.count()).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(cacheBoudndingBoxNodex[1].key);
-    });
-
-    it("should not bridge if time direction cannot be determined", () => {
-        const playService: PlayService = new PlayService(graphService, stateService);
-
-        const stopSpy: jasmine.Spy = spyOn(playService, "stop").and.callThrough();
-        spyOn(graphService, "cacheSequence$").and.returnValue(new Subject<Sequence>());
-        spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
-        const cacheBoundingBoxSubject: Subject<Node[]> = new Subject<Node[]>();
-        const cacheBoudningBoxSpy: jasmine.Spy = spyOn(graphService, "cacheBoundingBox$");
-        cacheBoudningBoxSpy.and.returnValue(cacheBoundingBoxSubject);
-        const cacheNodeSubject: Subject<Node> = new Subject<Node>();
-        const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
-        cacheNodeSpy.and.returnValue(cacheNodeSubject);
-
-        const appendNodesSpy: jasmine.Spy = <jasmine.Spy>stateService.appendNodes;
-        appendNodesSpy.and.stub();
-
-        playService.setDirection(EdgeDirection.Next);
-
-        playService.play();
-
-        const cameraUuid: string = "camera_uuid";
-        const sequenceKey1: string = "sequence1";
-
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.captured_at = 0;
-        currentFullNode.captured_with_camera_uuid = cameraUuid;
-        currentFullNode.key = "currKey";
-        currentFullNode.sequence_key = sequenceKey1;
-        const currentNode: Node = new Node(currentFullNode);
-        currentNode.makeFull(currentFullNode);
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", sequenceEdgesSubject);
-
-        const state: ICurrentState = createState();
-        state.trajectory = [currentNode];
-        state.lastNode = currentNode;
-        state.currentNode = currentNode;
-        state.nodesAhead = 0;
-        state.currentIndex = 0;
-
-        (<Subject<IFrame>>stateService.currentState$).next({ fps: 60, id: 0, state: state });
-
-        sequenceEdgesSubject.next({ cached: true, edges: [] });
-
         expect(stopSpy.calls.count()).toBe(1);
-        expect(cacheBoudningBoxSpy.calls.count()).toBe(0);
-        expect(appendNodesSpy.calls.count()).toBe(0);
-        expect(cacheNodeSpy.calls.count()).toBe(0);
     });
 
     it("should append node when cached", () => {
@@ -648,39 +430,39 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(new Subject<Node[]>());
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         const node: Node = frame.state.currentNode;
         node.initializeCache(new NodeCache(undefined));
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
 
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
-        const fullToNode: IFullNode = nodeHelper.createFullNode();
-        fullToNode.key = "toKey";
+        const fullToNode: ImageEnt = nodeHelper.createFullNode();
+        fullToNode.id = "toKey";
         const toNode: Node = new Node(fullToNode);
 
         sequenceEdgesSubject.next({
             cached: true,
             edges: [{
-                data: { direction: EdgeDirection.Next, worldMotionAzimuth: 0 },
-                from: node.key,
-                to: toNode.key,
+                data: { direction: NavigationDirection.Next, worldMotionAzimuth: 0 },
+                source: node.id,
+                target: toNode.id,
             }],
         });
 
         cacheNodeSubject.next(toNode);
 
         expect(cacheNodeSpy.calls.count()).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(toNode.key);
+        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(toNode.id);
 
         expect(appendNodesSpy.calls.count()).toBe(1);
         expect(appendNodesSpy.calls.argsFor(0)[0].length).toBe(1);
-        expect(appendNodesSpy.calls.argsFor(0)[0][0].key).toBe(toNode.key);
+        expect(appendNodesSpy.calls.argsFor(0)[0][0].id).toBe(toNode.id);
     });
 
     it("should stop on node caching error", () => {
@@ -700,35 +482,35 @@ describe("PlayService.play", () => {
         spyOn(graphService, "cacheSequenceNodes$").and.returnValue(new Subject<Sequence>());
         spyOn(graphService, "cacheBoundingBox$").and.returnValue(new Subject<Node[]>());
 
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         playService.play();
 
-        const frame: IFrame = new FrameHelper().createFrame();
+        const frame: AnimationFrame = new FrameHelper().createFrame();
         const node: Node = frame.state.currentNode;
         node.initializeCache(new NodeCache(undefined));
-        const sequenceEdgesSubject: Subject<IEdgeStatus> = new Subject<IEdgeStatus>();
+        const sequenceEdgesSubject: Subject<NavigationEdgeStatus> = new Subject<NavigationEdgeStatus>();
         new MockCreator().mockProperty(node, "sequenceEdges$", sequenceEdgesSubject);
 
-        (<Subject<IFrame>>stateService.currentState$).next(frame);
+        (<Subject<AnimationFrame>>stateService.currentState$).next(frame);
 
-        const fullToNode: IFullNode = nodeHelper.createFullNode();
-        fullToNode.key = "toKey";
+        const fullToNode: ImageEnt = nodeHelper.createFullNode();
+        fullToNode.id = "toKey";
         const toNode: Node = new Node(fullToNode);
 
         sequenceEdgesSubject.next({
             cached: true,
             edges: [{
-                data: { direction: EdgeDirection.Next, worldMotionAzimuth: 0 },
-                from: node.key,
-                to: toNode.key,
+                data: { direction: NavigationDirection.Next, worldMotionAzimuth: 0 },
+                source: node.id,
+                target: toNode.id,
             }],
         });
 
         cacheNodeSubject.error(new Error());
 
         expect(cacheNodeSpy.calls.count()).toBe(1);
-        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(toNode.key);
+        expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(toNode.id);
 
         expect(appendNodesSpy.calls.count()).toBe(0);
 
@@ -737,7 +519,7 @@ describe("PlayService.play", () => {
 
     it("should cache sequence when in spatial graph mode", () => {
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
         // Set speed to zero so that graph mode is set to spatial when calling play
         playService.setSpeed(0);
 
@@ -749,13 +531,13 @@ describe("PlayService.play", () => {
         playService.play();
 
         const currentNode: Node = nodeHelper.createNode();
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
         expect(cacheSequenceSpy.calls.count()).toBe(1);
-        expect(cacheSequenceSpy.calls.argsFor(0)[0]).toBe(currentNode.sequenceKey);
+        expect(cacheSequenceSpy.calls.argsFor(0)[0]).toBe(currentNode.sequenceId);
 
         expect(cacheSequenceNodesSpy.calls.count()).toBe(0);
 
@@ -764,7 +546,7 @@ describe("PlayService.play", () => {
 
     it("should cache sequence nodes when in sequence graph mode", () => {
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
         // Set speed to one so that graph mode is set to sequence when calling play
         playService.setSpeed(1);
 
@@ -776,7 +558,7 @@ describe("PlayService.play", () => {
         playService.play();
 
         const currentNode: Node = nodeHelper.createNode();
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
@@ -784,7 +566,7 @@ describe("PlayService.play", () => {
         expect(cacheSequenceSpy.calls.count()).toBe(0);
 
         expect(cacheSequenceNodesSpy.calls.count()).toBe(1);
-        expect(cacheSequenceNodesSpy.calls.argsFor(0)[0]).toBe(currentNode.sequenceKey);
+        expect(cacheSequenceNodesSpy.calls.argsFor(0)[0]).toBe(currentNode.sequenceId);
 
         playService.stop();
     });
@@ -793,40 +575,40 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         const cacheSequenceSubject: Subject<Sequence> = new Subject<Sequence>();
         spyOn(graphService, "cacheSequence$").and.returnValue(cacheSequenceSubject);
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "node0";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "node0";
         const currentNode: Node = new Node(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const prevNodeKey: string = "node1";
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [prevNodeKey, currentNode.key] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [prevNodeKey, currentNode.id] });
         cacheSequenceSubject.next(sequence);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
         const cacheNodeSubject: Subject<Node> = new Subject<Node>();
         cacheNodeSpy.and.returnValue(cacheNodeSubject);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode];
         state.lastNode = currentNode;
         state.currentNode = currentNode;
         state.nodesAhead = 0;
 
-        (<Subject<IFrame>>stateService.currentState$).next({ fps: 60, id: 0, state: state });
+        (<Subject<AnimationFrame>>stateService.currentState$).next({ fps: 60, id: 0, state: state });
 
         expect(cacheNodeSpy.calls.count()).toBe(0);
 
@@ -837,40 +619,40 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         const cacheSequenceSubject: Subject<Sequence> = new Subject<Sequence>();
         spyOn(graphService, "cacheSequence$").and.returnValue(cacheSequenceSubject);
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "node0";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "node0";
         const currentNode: Node = new Node(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const nextNodeKey: string = "node1";
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [currentNode.key, nextNodeKey] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [currentNode.id, nextNodeKey] });
         cacheSequenceSubject.next(sequence);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
         const cacheNodeSubject: Subject<Node> = new Subject<Node>();
         cacheNodeSpy.and.returnValue(cacheNodeSubject);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode];
         state.lastNode = currentNode;
         state.currentNode = currentNode;
         state.nodesAhead = 0;
 
-        const currentStateSubject$: Subject<IFrame> = <Subject<IFrame>>stateService.currentState$;
+        const currentStateSubject$: Subject<AnimationFrame> = <Subject<AnimationFrame>>stateService.currentState$;
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
 
         cacheNodeSubject.next(new NodeHelper().createNode());
@@ -885,40 +667,40 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Prev);
+        playService.setDirection(NavigationDirection.Prev);
 
         const cacheSequenceSubject: Subject<Sequence> = new Subject<Sequence>();
         spyOn(graphService, "cacheSequence$").and.returnValue(cacheSequenceSubject);
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "node0";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "node0";
         const currentNode: Node = new Node(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const prevNodeKey: string = "node1";
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [prevNodeKey, currentNode.key] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [prevNodeKey, currentNode.id] });
         cacheSequenceSubject.next(sequence);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
         const cacheNodeSubject: Subject<Node> = new Subject<Node>();
         cacheNodeSpy.and.returnValue(cacheNodeSubject);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode];
         state.lastNode = currentNode;
         state.currentNode = currentNode;
         state.nodesAhead = 0;
 
-        const currentStateSubject$: Subject<IFrame> = <Subject<IFrame>>stateService.currentState$;
+        const currentStateSubject$: Subject<AnimationFrame> = <Subject<AnimationFrame>>stateService.currentState$;
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
 
         cacheNodeSubject.next(new NodeHelper().createNode());
@@ -927,8 +709,8 @@ describe("PlayService.play", () => {
         expect(cacheNodeSpy.calls.argsFor(0)[0]).toBe(prevNodeKey);
 
         // Sequence should not have changed because of internal reversing
-        expect(sequence.keys[0]).toBe(prevNodeKey);
-        expect(sequence.keys[1]).toBe(currentNode.key);
+        expect(sequence.imageIds[0]).toBe(prevNodeKey);
+        expect(sequence.imageIds[1]).toBe(currentNode.id);
 
         playService.stop();
     });
@@ -937,46 +719,46 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         const cacheSequenceSubject: Subject<Sequence> = new Subject<Sequence>();
         spyOn(graphService, "cacheSequence$").and.returnValue(cacheSequenceSubject);
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "node0";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "node0";
         const currentNode: Node = new Node(currentFullNode);
         currentNode.makeFull(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const nextNodeKey: string = "node1";
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [currentNode.key, nextNodeKey] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [currentNode.id, nextNodeKey] });
         cacheSequenceSubject.next(sequence);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
         const cacheNodeSubject: Subject<Node> = new Subject<Node>();
         cacheNodeSpy.and.returnValue(cacheNodeSubject);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode];
         state.lastNode = currentNode;
         state.currentNode = currentNode;
         state.nodesAhead = 0;
 
-        const currentStateSubject$: Subject<IFrame> = <Subject<IFrame>>stateService.currentState$;
+        const currentStateSubject$: Subject<AnimationFrame> = <Subject<AnimationFrame>>stateService.currentState$;
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
 
-        const nextFullNode: IFullNode = new NodeHelper().createFullNode();
-        nextFullNode.sequence_key = sequenceKey;
-        nextFullNode.key = nextNodeKey;
+        const nextFullNode: ImageEnt = new NodeHelper().createFullNode();
+        nextFullNode.sequence.id = sequenceKey;
+        nextFullNode.id = nextNodeKey;
         const nextNode: Node = new Node(nextFullNode);
         nextNode.makeFull(nextFullNode);
         cacheNodeSubject.next(nextNode);
@@ -995,47 +777,47 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
 
         const cacheSequenceSubject: Subject<Sequence> = new Subject<Sequence>();
         spyOn(graphService, "cacheSequence$").and.returnValue(cacheSequenceSubject);
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "node0";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "node0";
         const currentNode: Node = new Node(currentFullNode);
         currentNode.makeFull(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const nextNodeKey: string = "node1";
-        const nextFullNode: IFullNode = new NodeHelper().createFullNode();
-        nextFullNode.sequence_key = sequenceKey;
-        nextFullNode.key = nextNodeKey;
+        const nextFullNode: ImageEnt = new NodeHelper().createFullNode();
+        nextFullNode.sequence.id = sequenceKey;
+        nextFullNode.id = nextNodeKey;
         const nextNode: Node = new Node(nextFullNode);
         nextNode.makeFull(nextFullNode);
-        new MockCreator().mockProperty(nextNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(nextNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
         const currentNodeSubject: Subject<Node> = <Subject<Node>>stateService.currentNode$;
         currentNodeSubject.next(currentNode);
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [currentNode.key, nextNodeKey] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [currentNode.id, nextNodeKey] });
         cacheSequenceSubject.next(sequence);
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$");
         const cacheNodeSubject: Subject<Node> = new Subject<Node>();
         cacheNodeSpy.and.returnValue(cacheNodeSubject);
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode, nextNode];
         state.lastNode = nextNode;
         state.currentNode = currentNode;
         state.nodesAhead = 0;
 
-        const currentStateSubject$: Subject<IFrame> = <Subject<IFrame>>stateService.currentState$;
+        const currentStateSubject$: Subject<AnimationFrame> = <Subject<AnimationFrame>>stateService.currentState$;
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
 
         expect(cacheNodeSpy.calls.count()).toBe(0);
@@ -1047,7 +829,7 @@ describe("PlayService.play", () => {
         graphService.setGraphMode(GraphMode.Spatial);
 
         const playService: PlayService = new PlayService(graphService, stateService);
-        playService.setDirection(EdgeDirection.Next);
+        playService.setDirection(NavigationDirection.Next);
         // Zero speed means max ten nodes ahead
         playService.setSpeed(0);
 
@@ -1056,28 +838,28 @@ describe("PlayService.play", () => {
 
         playService.play();
 
-        const sequenceKey: string = "sequenceKey";
+        const sequenceKey: string = "sequenceId";
 
-        const currentFullNode: IFullNode = new NodeHelper().createFullNode();
-        currentFullNode.sequence_key = sequenceKey;
-        currentFullNode.key = "currentNodeKey";
+        const currentFullNode: ImageEnt = new NodeHelper().createFullNode();
+        currentFullNode.sequence.id = sequenceKey;
+        currentFullNode.id = "currentNodeKey";
         const currentNode: Node = new Node(currentFullNode);
         currentNode.makeFull(currentFullNode);
-        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+        new MockCreator().mockProperty(currentNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
-        const sequence: Sequence = new Sequence({ key: sequenceKey, keys: [currentNode.key] });
+        const sequence: Sequence = new Sequence({ id: sequenceKey, image_ids: [currentNode.id] });
         const sequenceNodes: Node[] = [];
 
         for (let i: number = 0; i < 20; i++) {
             const sequenceNodeKey: string = `node${i}`;
-            const sequenceFullNode: IFullNode = new NodeHelper().createFullNode();
-            sequenceFullNode.sequence_key = sequenceKey;
-            sequenceFullNode.key = sequenceNodeKey;
+            const sequenceFullNode: ImageEnt = new NodeHelper().createFullNode();
+            sequenceFullNode.sequence.id = sequenceKey;
+            sequenceFullNode.id = sequenceNodeKey;
             const sequenceNode: Node = new Node(sequenceFullNode);
             sequenceNode.makeFull(sequenceFullNode);
-            new MockCreator().mockProperty(sequenceNode, "sequenceEdges$", new Subject<IEdgeStatus>());
+            new MockCreator().mockProperty(sequenceNode, "sequenceEdges$", new Subject<NavigationEdgeStatus>());
 
-            sequence.keys.push(sequenceNode.key);
+            sequence.imageIds.push(sequenceNode.id);
             sequenceNodes.push(sequenceNode);
         }
 
@@ -1088,16 +870,16 @@ describe("PlayService.play", () => {
 
         const cacheNodeSpy: jasmine.Spy = spyOn(graphService, "cacheNode$").and.callFake(
             (key: string): Observable<Node> => {
-                const fullNode: IFullNode = new NodeHelper().createFullNode();
-                fullNode.sequence_key = sequenceKey;
-                fullNode.key = key;
+                const fullNode: ImageEnt = new NodeHelper().createFullNode();
+                fullNode.sequence.id = sequenceKey;
+                fullNode.id = key;
                 const node: Node = new Node(fullNode);
                 node.makeFull(fullNode);
 
                 return observableOf(node);
             });
 
-        const state: ICurrentState = createState();
+        const state: IAnimationState = createState();
         state.trajectory = [currentNode];
         state.lastNode = currentNode;
         state.currentNode = currentNode;
@@ -1105,7 +887,7 @@ describe("PlayService.play", () => {
         state.nodesAhead = 0;
 
         // Cache ten nodes immediately
-        const currentStateSubject$: Subject<IFrame> = <Subject<IFrame>>stateService.currentState$;
+        const currentStateSubject$: Subject<AnimationFrame> = <Subject<AnimationFrame>>stateService.currentState$;
         currentStateSubject$.next({ fps: 60, id: 0, state: state });
 
         let cachedCount: number = 10;
@@ -1184,7 +966,7 @@ describe("PlayService.play", () => {
         expect(cacheNodeSpy.calls.count()).toBe(20);
 
         for (let i: number = 0; i < 20; i++) {
-            expect(cacheNodeSpy.calls.argsFor(i)[0]).toBe(sequence.keys[i + 1]);
+            expect(cacheNodeSpy.calls.argsFor(i)[0]).toBe(sequence.imageIds[i + 1]);
         }
 
         playService.stop();
diff --git a/spec/viewer/Viewer.spec.ts b/spec/viewer/Viewer.spec.ts
index d68f621c2..40012d89e 100644
--- a/spec/viewer/Viewer.spec.ts
+++ b/spec/viewer/Viewer.spec.ts
@@ -1,6 +1,8 @@
+import { ViewerEvent } from "../../src/Mapillary";
 import * as ComponentController from "../../src/viewer/ComponentController";
 import * as Container from "../../src/viewer/Container";
 import * as CustomRenderer from "../../src/viewer/CustomRenderer";
+import { RenderPass } from "../../src/viewer/enums/RenderPass";
 import * as Navigator from "../../src/viewer/Navigator";
 import * as Observer from "../../src/viewer/Observer";
 
@@ -83,12 +85,12 @@ describe("Viewer.remove", () => {
     it("should emit removed event", (done: Function) => {
         createMocks();
         const viewer = new Viewer({ apiClient: "", container: "" });
-
+        const remove: ViewerEvent = "remove";
         viewer.on(
-            Viewer.removed,
+            remove,
             (event: { type: string }): void => {
                 expect(event).toBeDefined();
-                expect(event.type).toBe(Viewer.removed);
+                expect(event.type).toBe(remove);
 
                 done();
             });
@@ -104,6 +106,7 @@ describe("Viewer.addCustomRenderer", () => {
 
         viewer.addCustomRenderer({
             id: "1",
+            renderPass: RenderPass.Opaque,
             onAdd: () => { /* noop */ },
             onReferenceChanged: () => { /* noop */ },
             onRemove: () => { /* noop */ },
diff --git a/src/Mapillary.ts b/src/Mapillary.ts
index c1dd6476b..86f3e4b13 100644
--- a/src/Mapillary.ts
+++ b/src/Mapillary.ts
@@ -4,16 +4,21 @@
  * @name Mapillary
  */
 
-// Bootstrap spatial index.
-//
+// Bootstrap
 // This is a workaround to make the CommonJS unit testing
 // work with Jest. Once Jest/Node supports ES6 modules
-// fully this should be removed.
+// fully this should be removed. GeoRBush and UnitBezier
+// are registered here only to avoid loading them during
+// unit tests.
+
+// Bootstrap GeoRBush
 import { Graph } from "./graph/Graph";
 import { MarkerSet } from "./component/marker/MarkerSet";
 import { GeoRBush } from "./geo/GeoRBush";
 Graph.register(GeoRBush);
 MarkerSet.register(GeoRBush);
+
+// Bootstrap UnitBezier
 import UnitBezier from "@mapbox/unitbezier";
 import { TraversingState } from "./state/states/TraversingState";
 TraversingState.register(UnitBezier);
@@ -21,17 +26,17 @@ TraversingState.register(UnitBezier);
 // Bootstrap components
 import { ComponentService } from "./component/ComponentService";
 
-import { AttributionComponent } from "./component/AttributionComponent";
-import { BearingComponent } from "./component/BearingComponent";
-import { CacheComponent } from "./component/CacheComponent";
-import { CoverComponent } from "./component/CoverComponent";
+import { AttributionComponent } from "./component/attribution/AttributionComponent";
+import { BearingComponent } from "./component/bearing/BearingComponent";
+import { CacheComponent } from "./component/cache/CacheComponent";
+import { CoverComponent } from "./component/cover/CoverComponent";
 import { DirectionComponent } from "./component/direction/DirectionComponent";
-import { ImageComponent } from "./component/ImageComponent";
+import { ImageComponent } from "./component/image/ImageComponent";
 import { ImagePlaneComponent } from "./component/imageplane/ImagePlaneComponent";
 import { KeyboardComponent } from "./component/keyboard/KeyboardComponent";
 import { MarkerComponent } from "./component/marker/MarkerComponent";
 import { MouseComponent } from "./component/mouse/MouseComponent";
-import { NavigationComponent } from "./component/NavigationComponent";
+import { NavigationComponent } from "./component/navigation/NavigationComponent";
 import { PopupComponent } from "./component/popup/PopupComponent";
 import { SequenceComponent } from "./component/sequence/SequenceComponent";
 import { SliderComponent } from "./component/slider/SliderComponent";
@@ -62,26 +67,39 @@ ComponentService.register(ZoomComponent);
 export { isFallbackSupported, isSupported } from "./utils/Support";
 
 // Viewer types
+export { Alignment } from "./viewer/enums/Alignment";
+export { ComponentSize } from "./component/utils/ComponentSize";
+export { IViewer } from "./viewer/interfaces/IViewer";
+export { ICustomRenderer } from "./viewer/interfaces/ICustomRenderer";
+export { PointOfView } from "./viewer/interfaces/PointOfView";
 export { RenderMode } from "./render/RenderMode";
+export { RenderPass } from "./viewer/enums/RenderPass";
 export { TransitionMode } from "./state/TransitionMode";
-export { Alignment } from "./viewer/Alignment";
-export { ImageSize } from "./viewer/ImageSize";
 export { Viewer } from "./viewer/Viewer";
-export { IComponentOptions } from "./viewer/interfaces/IComponentOptions";
-export { ComponentSize } from "./component/utils/ComponentSize";
-export { ICustomRenderer } from "./viewer/interfaces/ICustomRenderer";
-export { IPointOfView } from "./viewer/interfaces/IPointOfView";
-export { IUrlOptions } from "./viewer/interfaces/IUrlOptions";
-export { IViewerEvent } from "./viewer/interfaces/IViewerEvent";
-export { IViewerMouseEvent } from "./viewer/interfaces/IViewerMouseEvent";
-export { IViewerOptions } from "./viewer/interfaces/IViewerOptions";
 
-// Graph types
+// Viewer events
+export { ViewerEvent } from "./viewer/events/ViewerEvent";
+export { ViewerMouseEvent } from "./viewer/events/ViewerMouseEvent";
+export {
+    ViewerBearingEvent,
+    ViewerLoadingEvent,
+    ViewerNavigableEvent,
+    ViewerNavigationEdgeStatusEvent,
+    ViewerNodeEvent,
+    ViewerStateEvent,
+} from "./viewer/events/ViewerStateEvent";
+
+// Viewer options
+export { ComponentOptions } from "./viewer/options/ComponentOptions";
+export { UrlOptions } from "./viewer/options/UrlOptions";
+export { ViewerOptions } from "./viewer/options/ViewerOptions";
+
+// Graph
 export { Node } from "./graph/Node";
-export { EdgeDirection } from "./graph/edge/EdgeDirection";
-export { IEdge } from "./graph/edge/interfaces/IEdge";
-export { IEdgeData } from "./graph/edge/interfaces/IEdgeData";
-export { IEdgeStatus } from "./graph/interfaces/IEdgeStatus";
+export { NavigationDirection } from "./graph/edge/NavigationDirection";
+export { NavigationEdge } from "./graph/edge/interfaces/NavigationEdge";
+export { NavigationEdgeData } from "./graph/edge/interfaces/NavigationEdgeData";
+export { NavigationEdgeStatus } from "./graph/interfaces/NavigationEdgeStatus";
 export {
     FilterExpression,
     FilterOperation,
@@ -89,7 +107,7 @@ export {
     FilterValue,
 } from "./graph/FilterExpression";
 
-// Error types
+// Error
 export { AbortMapillaryError } from "./error/AbortMapillaryError";
 export { MapillaryError } from "./error/MapillaryError";
 
diff --git a/src/api/APIWrapper.ts b/src/api/APIWrapper.ts
index 2517323ea..7b1f2554a 100644
--- a/src/api/APIWrapper.ts
+++ b/src/api/APIWrapper.ts
@@ -3,11 +3,10 @@ import {
     Subscriber,
 } from "rxjs";
 import { DataProviderBase } from "./DataProviderBase";
-
-import { ICoreNode } from "./interfaces/ICoreNode";
-import { IFillNode } from "./interfaces/IFillNode";
-import { IFullNode } from "./interfaces/IFullNode";
-import { ISequence } from "./interfaces/ISequence";
+import { CoreImagesContract } from "./contracts/CoreImagesContract";
+import { ImagesContract } from "./contracts/ImagesContract";
+import { SpatialImagesContract } from "./contracts/SpatialImagesContract";
+import { SequencesContract } from "./contracts/SequencesContract";
 
 /**
  * @class API
@@ -15,45 +14,44 @@ import { ISequence } from "./interfaces/ISequence";
  * @classdesc Provides methods for access to the API.
  */
 export class APIWrapper {
-    constructor(private _data: DataProviderBase) { }
+    constructor(private readonly _data: DataProviderBase) { }
 
     public get data(): DataProviderBase {
         return this._data;
     }
 
-    public imageByKeyFill$(keys: string[]): Observable<{ [key: string]: IFillNode }> {
-        return this._wrapPromise$(this._data.getFillImages(keys));
+    public getSpatialImages$(
+        imageIds: string[]): Observable<SpatialImagesContract> {
+        return this._wrap$(this._data.getSpatialImages(imageIds));
     }
 
-    public imageByKeyFull$(keys: string[]): Observable<{ [key: string]: IFullNode }> {
-        return this._wrapPromise$(this._data.getFullImages(keys));
+    public getImages$(imageIds: string[]): Observable<ImagesContract> {
+        return this._wrap$(this._data.getImages(imageIds));
     }
 
-    public imagesByH$(h: string): Observable<{ [h: string]: { [index: string]: ICoreNode } }> {
-        return this._wrapPromise$(this._data.getCoreImages(h));
+    public getCoreImages$(cellId: string): Observable<CoreImagesContract> {
+        return this._wrap$(this._data.getCoreImages(cellId));
     }
 
-    public sequenceByKey$(sequenceKeys: string[]): Observable<{ [sequenceKey: string]: ISequence }> {
-        return this._wrapPromise$(this._data.getSequences(sequenceKeys));
+    public getSequences$(sequenceIds: string[]): Observable<SequencesContract> {
+        return this._wrap$(this._data.getSequences(sequenceIds));
     }
 
     public setUserToken(userToken?: string): void {
         this._data.setUserToken(userToken);
     }
 
-    private _wrapPromise$<T>(promise: Promise<T>): Observable<T> {
-        return Observable
-            .create(
-                (subscriber: Subscriber<T>): void => {
-                    promise
-                        .then(
-                            (value: T): void => {
-                                subscriber.next(value);
-                                subscriber.complete();
-                            },
-                            (error: Error): void => {
-                                subscriber.error(error);
-                            });
-                });
+    private _wrap$<T>(promise: Promise<T>): Observable<T> {
+        return Observable.create(
+            (subscriber: Subscriber<T>): void => {
+                promise.then(
+                    (value: T): void => {
+                        subscriber.next(value);
+                        subscriber.complete();
+                    },
+                    (error: Error): void => {
+                        subscriber.error(error);
+                    });
+            });
     }
 }
diff --git a/src/api/BufferFetcher.ts b/src/api/BufferFetcher.ts
deleted file mode 100644
index 221256063..000000000
--- a/src/api/BufferFetcher.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import { MapillaryError } from "../error/MapillaryError";
-
-/**
- * @class BufferFetcher
- *
- * @classdesc Static helper class used to get static resources as
- * array buffers.
- */
-export class BufferFetcher {
-    /**
-     * Retrieves a resource as an array buffer and returns a promise
-     * to the buffer.
-     *
-     * @description Rejects the promise on request failure.
-     *
-     * @static
-     * @param {string} url - URL for resource to retrieve.
-     * @param {Promise} [abort] - Optional promise for aborting
-     * the request through rejection.
-     *
-     * @returns {Promise<ArrayBuffer>} Promise to the array buffer
-     * resource.
-     */
-    public static getArrayBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer> {
-        const xhr: XMLHttpRequest = new XMLHttpRequest();
-
-        const promise: Promise<ArrayBuffer> = new Promise(
-            (resolve, reject) => {
-                xhr.open("GET", url, true);
-                xhr.responseType = "arraybuffer";
-                xhr.timeout = 15000;
-
-                xhr.onload = () => {
-                    if (xhr.status !== 200) {
-                        reject(new MapillaryError(`Response status error: ${url}`));
-                    }
-
-                    if (!xhr.response) {
-                        reject(new MapillaryError(`Response empty: ${url}`));
-                    }
-
-                    resolve(xhr.response);
-                };
-
-                xhr.onerror = () => {
-                    reject(new MapillaryError(`Request error: ${url}`));
-                };
-
-                xhr.ontimeout = (e: Event) => {
-                    reject(new MapillaryError(`Request timeout: ${url}`));
-                };
-
-                xhr.onabort = (e: Event) => {
-                    reject(new MapillaryError(`Request aborted: ${url}`));
-                };
-
-                xhr.send(null);
-            });
-
-        if (!!abort) { abort.catch((): void => { xhr.abort(); }); }
-
-        return promise;
-    }
-}
diff --git a/src/api/Common.ts b/src/api/Common.ts
new file mode 100644
index 000000000..03e1bea88
--- /dev/null
+++ b/src/api/Common.ts
@@ -0,0 +1,92 @@
+import * as pako from "pako";
+import Pbf from "pbf";
+import { MapillaryError } from "../error/MapillaryError";
+import { MeshContract } from "./contracts/MeshContract";
+
+/**
+ * Decompress and parse an array buffer containing zipped
+ * json data and return as a json object.
+ *
+ * @description Handles array buffers continaing zipped json
+ * data.
+ *
+ * @param {ArrayBuffer} buffer - Array buffer to decompress.
+ * @returns {Object} Parsed object.
+ */
+export function decompress<T>(buffer: ArrayBuffer): T {
+    const inflated: string =
+        pako.inflate(<pako.Data>buffer, { to: "string" });
+
+    return <T>JSON.parse(inflated);
+}
+
+/**
+ * Retrieves a resource as an array buffer and returns a promise
+ * to the buffer.
+ *
+ * @description Rejects the promise on request failure.
+ *
+ * @param {string} url - URL for resource to retrieve.
+ * @param {Promise} [abort] - Optional promise for aborting
+ * the request through rejection.
+ * @returns {Promise<ArrayBuffer>} Promise to the array buffer
+ * resource.
+ */
+export function fetchArrayBuffer(
+    url: string,
+    abort?: Promise<void>): Promise<ArrayBuffer> {
+    const xhr = new XMLHttpRequest();
+    const promise = new Promise<ArrayBuffer>(
+        (resolve, reject) => {
+            xhr.open("GET", url, true);
+            xhr.responseType = "arraybuffer";
+            xhr.timeout = 15000;
+
+            xhr.onload = () => {
+                if (xhr.status !== 200) {
+                    reject(new MapillaryError(`Response status error: ${url}`));
+                }
+
+                if (!xhr.response) {
+                    reject(new MapillaryError(`Response empty: ${url}`));
+                }
+
+                resolve(xhr.response);
+            };
+
+            xhr.onerror = () => {
+                reject(new MapillaryError(`Request error: ${url}`));
+            };
+            xhr.ontimeout = () => {
+                reject(new MapillaryError(`Request timeout: ${url}`));
+            };
+            xhr.onabort = () => {
+                reject(new MapillaryError(`Request aborted: ${url}`));
+            };
+            xhr.send(null);
+        });
+
+    if (!!abort) { abort.catch((): void => { xhr.abort(); }); }
+
+    return promise;
+}
+
+/**
+ * Read the fields of a protobuf array buffer into a mesh
+ * object.
+ *
+ * @param {ArrayBuffer} buffer - Protobuf array buffer
+ * to read from.
+ * @returns {MeshContract} Mesh object.
+ */
+export function readMeshPbf(buffer: ArrayBuffer): MeshContract {
+    const pbf = new Pbf(buffer);
+    const mesh: MeshContract = { faces: [], vertices: [] };
+    return pbf.readFields(readMeshPbfField, mesh);
+}
+
+function readMeshPbfField(tag: number, mesh: MeshContract, pbf: Pbf): void {
+    if (tag === 1) { mesh.vertices.push(pbf.readFloat()); }
+    else if (tag === 2) { mesh.faces.push(pbf.readVarint()); }
+    else { console.warn(`Unsupported pbf tag (${tag})`); }
+}
diff --git a/src/api/DataProviderBase.ts b/src/api/DataProviderBase.ts
index dcf754fd3..7f02d5af3 100644
--- a/src/api/DataProviderBase.ts
+++ b/src/api/DataProviderBase.ts
@@ -1,12 +1,12 @@
 import { MapillaryError } from "../error/MapillaryError";
 import { EventEmitter } from "../utils/EventEmitter";
-import { IClusterReconstruction } from "./interfaces/IClusterReconstruction";
-import { ICoreNode } from "./interfaces/ICoreNode";
-import { IFillNode } from "./interfaces/IFillNode";
-import { IFullNode } from "./interfaces/IFullNode";
-import { IMesh } from "./interfaces/IMesh";
-import { ISequence } from "./interfaces/ISequence";
+import { ClusterReconstructionContract } from "./contracts/ClusterReconstructionContract";
+import { MeshContract } from "./contracts/MeshContract";
 import { GeometryProviderBase } from "./GeometryProviderBase";
+import { CoreImagesContract } from "./contracts/CoreImagesContract";
+import { SpatialImagesContract } from "./contracts/SpatialImagesContract";
+import { ImagesContract } from "./contracts/ImagesContract";
+import { SequencesContract } from "./contracts/SequencesContract";
 
 /**
  * @class DataProviderBase
@@ -54,12 +54,12 @@ export abstract class DataProviderBase extends EventEmitter {
      * Get core properties for images in a geometry cell.
      *
      * @param {string} cellId - The id of the geometry cell.
-     * @returns {Promise} Promise to the core nodes of the
+     * @returns {Promise} Promise to the core images of the
      * requested cell id.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getCoreImages(cellId: string):
-        Promise<{ [cellId: string]: { [imageKey: string]: ICoreNode } }> {
+    public getCoreImages(
+        cellId: string): Promise<CoreImagesContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
@@ -70,40 +70,41 @@ export abstract class DataProviderBase extends EventEmitter {
      * to retrieve.
      * @param {Promise} [abort] - Optional promise for aborting
      * the request through rejection.
-     * @returns {Promise<IClusterReconstruction>} Promise to the
+     * @returns {Promise<ClusterReconstructionContract>} Promise to the
      * cluster reconstruction.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getClusterReconstruction(url: string, abort?: Promise<void>):
-        Promise<IClusterReconstruction> {
+    public getClusterReconstruction(
+        url: string,
+        abort?: Promise<void>): Promise<ClusterReconstructionContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
     /**
      * Get fill properties for images.
      *
-     * @param {Array<string>} imageKeys - The keys for the
+     * @param {Array<string>} imageIds - The ids for the
      * images to retrieve.
-     * @returns {Promise} Promise to the fill nodes of the
-     * requested image keys.
+     * @returns {Promise} Promise to the spatial images of the
+     * requested image ids.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getFillImages(imageKeys: string[]):
-        Promise<{ [imageKey: string]: IFillNode }> {
+    public getSpatialImages(
+        imageIds: string[]): Promise<SpatialImagesContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
     /**
      * Get all properties for images.
      *
-     * @param {Array<string>} imageKeys - The keys for the
+     * @param {Array<string>} imageIds - The ids for the
      * images to retrieve.
-     * @returns {Promise} Promise to the full nodes of the
-     * requested image keys.
+     * @returns {Promise} Promise to the images of the
+     * requested image ids.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getFullImages(imageKeys: string[]):
-        Promise<{ [imageKey: string]: IFullNode }> {
+    public getImages(
+        imageIds: string[]): Promise<ImagesContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
@@ -117,15 +118,16 @@ export abstract class DataProviderBase extends EventEmitter {
      * buffer containing the image.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getImage(url: string, abort?: Promise<void>):
-        Promise<ArrayBuffer> {
+    public getImageBuffer(
+        url: string,
+        abort?: Promise<void>): Promise<ArrayBuffer> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
     /**
      * Get an image tile as an array buffer.
      *
-     * @param {string} imageKey - Image key.
+     * @param {string} imageId - Image id.
      * @param {number} x - Pixel coordinate.
      * @param {number} y - Pixel coordinate.
      * @param {number} w - Pixel width.
@@ -138,8 +140,8 @@ export abstract class DataProviderBase extends EventEmitter {
      * buffer containing the image.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getImageTile(
-        imageKey: string,
+    public getImageTileBuffer(
+        imageId: string,
         x: number,
         y: number,
         w: number,
@@ -156,24 +158,26 @@ export abstract class DataProviderBase extends EventEmitter {
      * @param {string} url - URL for mesh to retrieve.
      * @param {Promise} [abort] - Optional promise for aborting
      * the request through rejection.
-     * @returns {Promise<IMesh>} Promise to the mesh.
+     * @returns {Promise<MeshContract>} Promise to the mesh.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getMesh(url: string, abort?: Promise<void>): Promise<IMesh> {
+    public getMesh(
+        url: string,
+        abort?: Promise<void>): Promise<MeshContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
     /**
      * Get sequences.
      *
-     * @param {Array<string>} sequenceKeys - The keys for the
+     * @param {Array<string>} sequenceIds - The ids for the
      * sequences to retrieve.
      * @returns {Promise} Promise to the sequences of the
-     * requested image keys.
+     * requested image ids.
      * @throws {Error} Rejects the promise on errors.
      */
-    public getSequences(sequenceKeys: string[]):
-        Promise<{ [sequenceKey: string]: ISequence }> {
+    public getSequences(
+        sequenceIds: string[]): Promise<SequencesContract> {
         return Promise.reject(new MapillaryError("Not implemented"));
     }
 
diff --git a/src/api/FalcorDataProvider.ts b/src/api/FalcorDataProvider.ts
deleted file mode 100644
index 426819e57..000000000
--- a/src/api/FalcorDataProvider.ts
+++ /dev/null
@@ -1,453 +0,0 @@
-import {
-    JSONEnvelope,
-    Model,
-} from "falcor";
-
-import { BufferFetcher } from "./BufferFetcher";
-import { DataProviderBase } from "./DataProviderBase";
-import { GeohashGeometryProvider } from "./GeohashGeometryProvider";
-import { JsonInflator } from "./JsonInflator";
-import { ModelCreator } from "./ModelCreator";
-import { PbfMeshReader } from "./PbfMeshReader";
-import { IClusterReconstruction } from "./interfaces/IClusterReconstruction";
-import { ICoreNode } from "./interfaces/ICoreNode";
-import { IFalcorDataProviderOptions } from "./interfaces/IFalcorDataProviderOptions";
-import { IFillNode } from "./interfaces/IFillNode";
-import { IFullNode } from "./interfaces/IFullNode";
-import { IMesh } from "./interfaces/IMesh";
-import { ISequence } from "./interfaces/ISequence";
-
-import { MapillaryError } from "../error/MapillaryError";
-import { ImageSize } from "../viewer/ImageSize";
-import { GeometryProviderBase } from "./GeometryProviderBase";
-
-
-interface IImageByKey<T> {
-    imageByKey: { [key: string]: T };
-}
-
-interface IImagesByH<T> {
-    imagesByH: { [key: string]: { [index: string]: T } };
-}
-
-interface ISequenceByKey<T> {
-    sequenceByKey: { [sequenceKey: string]: T };
-}
-
-type APIPath =
-    "imageByKey" |
-    "imagesByH" |
-    "sequenceByKey";
-
-/**
- * @class PointsGeometry
- *
- * @classdesc Represents a point set in the 2D basic image coordinate system.
- *
- * @example
- * ```
- * var points = [[0.5, 0.3], [0.7, 0.3], [0.6, 0.5]];
- * var pointsGeometry = new Mapillary.TagComponent.PointsGeometry(points);
- * ```
- */
-export class FalcorDataProviderUrls {
-    private _apiHost: string = "a.mapillary.com";
-    private _clientToken: string;
-    private _clusterReconstructionHost: string =
-        "cluster-reconstructions.mapillary.com";
-    private _imageHost: string = "images.mapillary.com";
-    private _imageTileHost: string = "loris.mapillary.com";
-    private _meshHost: string = "meshes.mapillary.com";
-    private _origin: string = "mapillary.webgl";
-    private _scheme: string = "https";
-
-    /**
-     * Create a new Falcor data provider URLs instance.
-     *
-     * @param {IFalcorDataProviderOptions} options - Options struct.
-     */
-    constructor(options: IFalcorDataProviderOptions) {
-        this._clientToken = options.clientToken;
-
-        if (!!options.apiHost) {
-            this._apiHost = options.apiHost;
-        }
-
-        if (!!options.clusterReconstructionHost) {
-            this._clusterReconstructionHost = options.clusterReconstructionHost;
-        }
-
-        if (!!options.imageHost) {
-            this._imageHost = options.imageHost;
-        }
-
-        if (!!options.imageTileHost) {
-            this._imageTileHost = options.imageTileHost;
-        }
-
-        if (!!options.meshHost) {
-            this._meshHost = options.meshHost;
-        }
-
-        if (!!options.scheme) {
-            this._scheme = options.scheme;
-        }
-    }
-
-    public get falcorModel(): string {
-        return `${this._scheme}://${this._apiHost}/v3/model.json?client_id=${this._clientToken}`;
-    }
-
-    public get origin(): string {
-        return this._origin;
-    }
-
-    public get tileScheme(): string {
-        return this._scheme;
-    }
-
-    public get tileDomain(): string {
-        return this._imageTileHost;
-    }
-
-    public clusterReconstruction(key: string): string {
-        return `${this._scheme}://${this._clusterReconstructionHost}/${key}/v1.0/aligned.jsonz`;
-    }
-
-    public imageTile(imageKey: string, coords: string, size: string): string {
-        return `${this.tileScheme}://${this.tileDomain}/${imageKey}/${coords}/${size}/0/default.jpg`;
-    }
-
-    public protoMesh(key: string): string {
-        return `${this._scheme}://${this._meshHost}/v2/mesh/${key}`;
-    }
-
-    public thumbnail(key: string, size: number, origin?: string): string {
-        const query: string = !!origin ? `?origin=${origin}` : "";
-
-        return `${this._scheme}://${this._imageHost}/${key}/thumb-${size}.jpg${query}`;
-    }
-}
-
-/**
- * @class FalcorDataProvider
- *
- * @classdesc Provides data through Falcor API calls.
- */
-export class FalcorDataProvider extends DataProviderBase {
-    private _urls: FalcorDataProviderUrls;
-
-    private _model: Model;
-    private _modelCreator: ModelCreator;
-
-    private _pageCount: number;
-
-    private _pathImageByKey: APIPath;
-    private _pathImagesByH: APIPath;
-    private _pathSequenceByKey: APIPath;
-
-    private _propertiesCore: string[];
-    private _propertiesFill: string[];
-    private _propertiesKey: string[];
-    private _propertiesSequence: string[];
-    private _propertiesSpatial: string[];
-    private _propertiesUser: string[];
-
-    /**
-     * Create a new Falcor data provider instance.
-     *
-     * @param {IFalcorDataProviderOptions} options - Options struct.
-     * @param {GeometryProviderBase} [geometry] - Optional geometry
-     * provider instance.
-     */
-    constructor(
-        options: IFalcorDataProviderOptions,
-        geometry?: GeometryProviderBase) {
-
-        super(!!geometry ? geometry : new GeohashGeometryProvider());
-
-        if (!(this._geometry instanceof GeohashGeometryProvider)) {
-            throw new MapillaryError(
-                "The falcor data provider requires the geohash geometry provider.");
-        }
-
-        this._urls = new FalcorDataProviderUrls(options);
-
-        this._modelCreator = options.creator != null ?
-            options.creator : new ModelCreator();
-        this._model = this._modelCreator.createModel(
-            this._urls.falcorModel, options.userToken);
-
-        this._pageCount = 999;
-
-        this._pathImageByKey = "imageByKey";
-        this._pathImagesByH = "imagesByH";
-        this._pathSequenceByKey = "sequenceByKey";
-
-        this._propertiesCore = [
-            "cl",
-            "l",
-            "sequence_key",
-        ];
-
-        this._propertiesFill = [
-            "captured_at",
-            "captured_with_camera_uuid",
-            "organization_key",
-            "private",
-            "project",
-            "quality_score",
-            "user",
-        ];
-
-        this._propertiesKey = [
-            "key",
-        ];
-
-        this._propertiesSequence = [
-            "keys",
-        ];
-
-        this._propertiesSpatial = [
-            "altitude",
-            "atomic_scale",
-            "cluster_key",
-            "c_rotation",
-            "ca",
-            "calt",
-            "camera_projection_type",
-            "cca",
-            "cfocal",
-            "ck1",
-            "ck2",
-            "height",
-            "merge_cc",
-            "merge_version",
-            "orientation",
-            "width",
-        ];
-
-        this._propertiesUser = [
-            "username",
-        ];
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getCoreImages(cellId: string):
-        Promise<{ [cellId: string]: { [imageKey: string]: ICoreNode } }> {
-        return Promise.resolve(<PromiseLike<JSONEnvelope<IImagesByH<ICoreNode>>>>this._model
-            .get([
-                this._pathImagesByH,
-                [cellId],
-                { from: 0, to: this._pageCount },
-                this._propertiesKey
-                    .concat(this._propertiesCore)]))
-            .then(
-                (value: JSONEnvelope<IImagesByH<ICoreNode>>): { [h: string]: { [index: string]: ICoreNode } } => {
-                    if (!value) {
-                        value = { json: { imagesByH: {} } };
-                        for (const h of [cellId]) {
-                            value.json.imagesByH[h] = {};
-                            for (let i: number = 0; i <= this._pageCount; i++) {
-                                value.json.imagesByH[h][i] = null;
-                            }
-                        }
-                    }
-
-                    return value.json.imagesByH;
-                },
-                (error: Error) => {
-                    this._invalidateGet(this._pathImagesByH, [cellId]);
-                    throw error;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getClusterReconstruction(url: string, abort?: Promise<void>): Promise<IClusterReconstruction> {
-        return BufferFetcher.getArrayBuffer(url, abort)
-            .then(
-                (buffer: ArrayBuffer): IClusterReconstruction => {
-                    const reconstructions: IClusterReconstruction[] =
-                        JsonInflator.decompress(buffer);
-
-                    if (reconstructions.length < 1) {
-                        throw new MapillaryError("Cluster reconstruction is empty.");
-                    }
-
-                    return reconstructions[0];
-                },
-                (reason: Error): IClusterReconstruction => {
-                    throw reason;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getFillImages(keys: string[]): Promise<{ [key: string]: IFillNode }> {
-        return Promise.resolve(<PromiseLike<JSONEnvelope<IImageByKey<IFillNode>>>>this._model
-            .get([
-                this._pathImageByKey,
-                keys,
-                this._propertiesKey
-                    .concat(this._propertiesFill)
-                    .concat(this._propertiesSpatial),
-                this._propertiesKey
-                    .concat(this._propertiesUser)]))
-            .then(
-                (value: JSONEnvelope<IImageByKey<IFillNode>>): { [key: string]: IFillNode } => {
-                    if (!value) {
-                        this._invalidateGet(this._pathImageByKey, keys);
-                        throw new Error(`Images (${keys.join(", ")}) could not be found.`);
-                    }
-
-                    return this._populateUrls(value.json.imageByKey);
-                },
-                (error: Error) => {
-                    this._invalidateGet(this._pathImageByKey, keys);
-                    throw error;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getFullImages(keys: string[]): Promise<{ [key: string]: IFullNode }> {
-        return Promise.resolve(<PromiseLike<JSONEnvelope<IImageByKey<IFullNode>>>>this._model
-            .get([
-                this._pathImageByKey,
-                keys,
-                this._propertiesKey
-                    .concat(this._propertiesCore)
-                    .concat(this._propertiesFill)
-                    .concat(this._propertiesSpatial),
-                this._propertiesKey
-                    .concat(this._propertiesUser)]))
-            .then(
-                (value: JSONEnvelope<IImageByKey<IFullNode>>): { [key: string]: IFullNode } => {
-                    if (!value) {
-                        this._invalidateGet(this._pathImageByKey, keys);
-                        throw new Error(`Images (${keys.join(", ")}) could not be found.`);
-                    }
-
-                    return this._populateUrls(value.json.imageByKey);
-                },
-                (error: Error) => {
-                    this._invalidateGet(this._pathImageByKey, keys);
-                    throw error;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getImage(url: string, abort?: Promise<void>): Promise<ArrayBuffer> {
-        return BufferFetcher.getArrayBuffer(url, abort);
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getImageTile(
-        imageKey: string,
-        x: number,
-        y: number,
-        w: number,
-        h: number,
-        scaledW: number,
-        scaledH: number,
-        abort?: Promise<void>): Promise<ArrayBuffer> {
-        const coords: string = `${x},${y},${w},${h}`
-        const size: string = `${scaledW},${scaledH}`;
-        return BufferFetcher.getArrayBuffer(
-            this._urls.imageTile(imageKey, coords, size),
-            abort);
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getMesh(url: string, abort?: Promise<void>): Promise<IMesh> {
-        return BufferFetcher.getArrayBuffer(url, abort)
-            .then(
-                (buffer: ArrayBuffer): IMesh => {
-                    return PbfMeshReader.read(buffer);
-                },
-                (reason: Error): IMesh => {
-                    throw reason;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public getSequences(sequenceKeys: string[]):
-        Promise<{ [sequenceKey: string]: ISequence }> {
-        return Promise.resolve(<PromiseLike<JSONEnvelope<ISequenceByKey<ISequence>>>>this._model
-            .get([
-                this._pathSequenceByKey,
-                sequenceKeys,
-                this._propertiesKey
-                    .concat(this._propertiesSequence)]))
-            .then(
-                (value: JSONEnvelope<ISequenceByKey<ISequence>>): { [sequenceKey: string]: ISequence } => {
-                    if (!value) {
-                        value = { json: { sequenceByKey: {} } };
-                    }
-
-                    for (const sequenceKey of sequenceKeys) {
-                        if (!(sequenceKey in value.json.sequenceByKey)) {
-                            console.warn(`Sequence data missing (${sequenceKey})`);
-
-                            value.json.sequenceByKey[sequenceKey] = { key: sequenceKey, keys: [] };
-                        }
-                    }
-
-                    return value.json.sequenceByKey;
-                },
-                (error: Error) => {
-                    this._invalidateGet(this._pathSequenceByKey, sequenceKeys);
-                    throw error;
-                });
-    }
-
-    /**
-     * @inheritdoc
-     */
-    public setUserToken(userToken?: string): void {
-        this._model.invalidate([]);
-        this._model = null;
-        this._model = this._modelCreator.createModel(
-            this._urls.falcorModel, userToken);
-    }
-
-    private _invalidateGet(path: APIPath, paths: string[]): void {
-        this._model.invalidate([path, paths]);
-    }
-
-    private _populateUrls<T extends IFillNode>(ibk: { [key: string]: T }): { [key: string]: T } {
-        for (let key in ibk) {
-            if (!ibk.hasOwnProperty(key)) {
-                continue;
-            }
-
-            const image: T = ibk[key];
-            image.cluster_url = this._urls.clusterReconstruction(image.cluster_key);
-            image.mesh_url = this._urls.protoMesh(key);
-            image.thumb320_url = this._urls.thumbnail(
-                key, ImageSize.Size320, this._urls.origin);
-            image.thumb640_url = this._urls.thumbnail(
-                key, ImageSize.Size640, this._urls.origin);
-            image.thumb1024_url = this._urls.thumbnail(
-                key, ImageSize.Size1024, this._urls.origin);
-            image.thumb2048_url = this._urls.thumbnail(
-                key, ImageSize.Size2048, this._urls.origin);
-        }
-
-        return ibk;
-    }
-}
diff --git a/src/api/GeohashGeometryProvider.ts b/src/api/GeohashGeometryProvider.ts
index 5868b4dd4..cc7412be7 100644
--- a/src/api/GeohashGeometryProvider.ts
+++ b/src/api/GeohashGeometryProvider.ts
@@ -1,8 +1,8 @@
 import * as geohash from "latlon-geohash";
 
 import { GeometryProviderBase } from "./GeometryProviderBase";
-import { ICellCorners, ICellNeighbors } from "./interfaces/ICellCorners";
-import { ILatLon } from "./interfaces/ILatLon";
+import { CellCorners, CellNeighbors } from "./interfaces/CellCorners";
+import { LatLon } from "./interfaces/LatLon";
 
 import { GeoCoords } from "../geo/GeoCoords";
 
@@ -44,40 +44,40 @@ export class GeohashGeometryProvider extends GeometryProviderBase {
      * The method currently uses the largest side as the threshold leading to
      * more tiles being returned than needed in edge cases.
      *
-     * @param {ILatLon} sw - South west corner of bounding box.
-     * @param {ILatLon} ne - North east corner of bounding box.
+     * @param {LatLon} sw - South west corner of bounding box.
+     * @param {LatLon} ne - North east corner of bounding box.
      *
      * @returns {string} The geohash tiles containing the bounding box.
      */
-    public bboxToCellIds(sw: ILatLon, ne: ILatLon): string[] {
+    public bboxToCellIds(sw: LatLon, ne: LatLon): string[] {
         return this._bboxSquareToCellIds(sw, ne);
     }
 
     /** @inheritdoc */
-    public getCorners(cellId: string): ICellCorners {
+    public getCorners(cellId: string): CellCorners {
         const bounds: geohash.Bounds = geohash.bounds(cellId);
-        const nw: ILatLon = { lat: bounds.ne.lat, lon: bounds.sw.lon };
-        const ne: ILatLon = { lat: bounds.ne.lat, lon: bounds.ne.lon };
-        const se: ILatLon = { lat: bounds.ne.lat, lon: bounds.sw.lon };
-        const sw: ILatLon = { lat: bounds.sw.lat, lon: bounds.sw.lon };
+        const nw: LatLon = { lat: bounds.ne.lat, lon: bounds.sw.lon };
+        const ne: LatLon = { lat: bounds.ne.lat, lon: bounds.ne.lon };
+        const se: LatLon = { lat: bounds.ne.lat, lon: bounds.sw.lon };
+        const sw: LatLon = { lat: bounds.sw.lat, lon: bounds.sw.lon };
         return { nw, ne, se, sw };
     }
 
     /** @inheritdoc */
-    public getNeighbors(cellId: string): ICellNeighbors {
+    public getNeighbors(cellId: string): CellNeighbors {
         return geohash.neighbours(cellId);
     }
 
     /**
      * Encode the geohash tile for geodetic coordinates.
      *
-     * @param {ILatLon} latlon - Latitude and longitude to encode.
+     * @param {LatLon} latlon - Latitude and longitude to encode.
      * @param {number} precision - Precision of the encoding.
      *
      * @returns {string} The geohash tile for the lat, lon and precision.
      */
     public latLonToCellId(
-        latLon: ILatLon,
+        latLon: LatLon,
         relativeLevel: number = 0): string {
 
         return geohash.encode(
@@ -90,7 +90,7 @@ export class GeohashGeometryProvider extends GeometryProviderBase {
      * Encode the geohash tiles within a threshold from a position
      * using Manhattan distance.
      *
-     * @param {ILatLon} latlon - Latitude and longitude to encode.
+     * @param {LatLon} latlon - Latitude and longitude to encode.
      * @param {number} precision - Precision of the encoding.
      * @param {number} threshold - Threshold of the encoding in meters.
      *
@@ -98,7 +98,7 @@ export class GeohashGeometryProvider extends GeometryProviderBase {
      * threshold.
      */
     public latLonToCellIds(
-        latLon: ILatLon,
+        latLon: LatLon,
         threshold: number,
         relativeLevel: number = 0): string[] {
 
@@ -106,14 +106,14 @@ export class GeohashGeometryProvider extends GeometryProviderBase {
             latLon.lat, latLon.lon, this._level + relativeLevel);
 
         const bounds: geohash.Bounds = geohash.bounds(h);
-        const corners: ICellCorners = {
+        const corners: CellCorners = {
             ne: { lat: bounds.ne.lat, lon: bounds.ne.lon },
             nw: { lat: bounds.ne.lat, lon: bounds.sw.lon },
             se: { lat: bounds.sw.lat, lon: bounds.ne.lon },
             sw: { lat: bounds.sw.lat, lon: bounds.sw.lon },
         };
 
-        const neighbours: ICellNeighbors = this.getNeighbors(h);
+        const neighbours: CellNeighbors = this.getNeighbors(h);
 
         return this._filterNeighbors(
             latLon,
@@ -124,11 +124,11 @@ export class GeohashGeometryProvider extends GeometryProviderBase {
     }
 
     private _filterNeighbors(
-        latLon: ILatLon,
+        latLon: LatLon,
         threshold: number,
         cellId: string,
-        corners: ICellCorners,
-        neighbors: ICellNeighbors): string[] {
+        corners: CellCorners,
+        neighbors: CellNeighbors): string[] {
 
         const bl: number[] = [0, 0, 0];
         const tr: number[] =
diff --git a/src/api/GeometryProviderBase.ts b/src/api/GeometryProviderBase.ts
index 5fc0bc55f..816f73852 100644
--- a/src/api/GeometryProviderBase.ts
+++ b/src/api/GeometryProviderBase.ts
@@ -1,5 +1,5 @@
-import { ICellCorners, ICellNeighbors } from "./interfaces/ICellCorners";
-import { ILatLon } from "./interfaces/ILatLon";
+import { CellCorners, CellNeighbors } from "./interfaces/CellCorners";
+import { LatLon } from "./interfaces/LatLon";
 
 import { MapillaryError } from "../error/MapillaryError";
 import { GeoCoords } from "../geo/GeoCoords";
@@ -36,12 +36,12 @@ export abstract class GeometryProviderBase {
      * to be sufficiently small to be contained in an area with the size
      * of maximally four tiles. Up to nine adjacent tiles may be returned.
      *
-     * @param {ILatLon} sw - South west corner of bounding box.
-     * @param {ILatLon} ne - North east corner of bounding box.
+     * @param {LatLon} sw - South west corner of bounding box.
+     * @param {LatLon} ne - North east corner of bounding box.
      *
      * @returns {Array<string>} Array of cell ids.
      */
-    public bboxToCellIds(sw: ILatLon, ne: ILatLon): string[] {
+    public bboxToCellIds(sw: LatLon, ne: LatLon): string[] {
         throw new MapillaryError("Not implemented");
     }
 
@@ -49,30 +49,30 @@ export abstract class GeometryProviderBase {
      * Get the corners of a cell.
      *
      * @param {string} cellId - Id of cell.
-     * @returns {ICellCorners} Cell corners struct.
+     * @returns {CellCorners} Cell corners struct.
      */
-    public getCorners(cellId: string): ICellCorners {
+    public getCorners(cellId: string): CellCorners {
         throw new MapillaryError("Not implemented");
     }
 
     /**
      * Get the neighbors of a cell.
      *
-     * @param {ILatLon} sw - South west corner of the bounding box.
-     * @param {ILatLon} ne - North east corner of the bounding box.
-     * @returns {ICellCorners} Cell corners struct.
+     * @param {LatLon} sw - South west corner of the bounding box.
+     * @param {LatLon} ne - North east corner of the bounding box.
+     * @returns {CellCorners} Cell corners struct.
      */
-    public getNeighbors(cellId: string): ICellNeighbors {
+    public getNeighbors(cellId: string): CellNeighbors {
         throw new MapillaryError("Not implemented");
     }
 
     /**
      * Convert geodetic coordinates to a cell id.
      *
-     * @param {ILatLon} latlon - Latitude and longitude to convert.
+     * @param {LatLon} latlon - Latitude and longitude to convert.
      * @returns {string} Cell id for the latitude, longitude.
      */
-    public latLonToCellId(latLon: ILatLon, relativeLevel?: number): string {
+    public latLonToCellId(latLon: LatLon, relativeLevel?: number): string {
         throw new MapillaryError("Not implemented");
     }
 
@@ -82,17 +82,17 @@ export abstract class GeometryProviderBase {
      * The square is specified as a latitude, longitude
      * and a threshold from the position using Manhattan distance.
      *
-     * @param {ILatLon} latlon - Latitude and longitude.
+     * @param {LatLon} latlon - Latitude and longitude.
      * @param {number} threshold - Threshold of the conversion in meters.
      *
      * @returns {Array<string>} Array of cell ids reachable within
      * the threshold.
      */
-    public latLonToCellIds(latLon: ILatLon, threshold: number, relativeLevel?: number): string[] {
+    public latLonToCellIds(latLon: LatLon, threshold: number, relativeLevel?: number): string[] {
         throw new MapillaryError("Not implemented");
     }
 
-    protected _bboxSquareToCellIds(sw: ILatLon, ne: ILatLon): string[] {
+    protected _bboxSquareToCellIds(sw: LatLon, ne: LatLon): string[] {
         if (ne.lat <= sw.lat || ne.lon <= sw.lon) {
             throw new MapillaryError("North east needs to be top right of south west");
         }
diff --git a/src/api/JsonInflator.ts b/src/api/JsonInflator.ts
deleted file mode 100644
index 0bf0b5805..000000000
--- a/src/api/JsonInflator.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as pako from "pako";
-
-/**
- * @class JsonInflator
- *
- * @classdesc Static helper class used to decompress array
- * buffers containing zipped json data.
- */
-export class JsonInflator {
-    /**
-     * Decompress and parse an array buffer and return as a json
-     * object.
-     *
-     * @description Handles array buffers continaing zipped json
-     * data.
-     *
-     * @static
-     * @param {ArrayBuffer} buffer - Array buffer to decompress.
-     *
-     * @returns {Object} Parsed object.
-     */
-    public static decompress<T>(buffer: ArrayBuffer): T {
-        const inflated: string =
-            pako.inflate(<pako.Data>buffer, { to: "string" });
-
-        return <T>JSON.parse(inflated);
-    }
-}
diff --git a/src/api/PbfMeshReader.ts b/src/api/PbfMeshReader.ts
deleted file mode 100644
index d583a39dc..000000000
--- a/src/api/PbfMeshReader.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import Pbf from "pbf";
-
-import { IMesh } from "./interfaces/IMesh";
-
-/**
- * @class PbfMeshReader
- *
- * @classdesc Static helper class used to get read an array buffer
- * containing protobuf fields into a mesh object.
- */
-export class PbfMeshReader {
-    /**
-     * Read the fields of a protobuf array buffer into a mesh
-     * object.
-     *
-     * @static
-     * @param {ArrayBuffer} buffer - Array buffer to read.
-     *
-     * @returns {IMesh} Mesh object.
-     */
-    public static read(buffer: ArrayBuffer): IMesh {
-        const pbf = new Pbf(buffer);
-        return pbf.readFields(
-            PbfMeshReader._readMeshField,
-            { faces: [], vertices: [] });
-    }
-
-    private static _readMeshField(tag: number, mesh: IMesh, pbf: Pbf): void {
-        if (tag === 1) {
-            mesh.vertices.push(pbf.readFloat());
-        } else if (tag === 2) {
-            mesh.faces.push(pbf.readVarint());
-        }
-    }
-}
diff --git a/src/api/S2GeometryProvider.ts b/src/api/S2GeometryProvider.ts
index 46d0d5240..398c379eb 100644
--- a/src/api/S2GeometryProvider.ts
+++ b/src/api/S2GeometryProvider.ts
@@ -1,8 +1,8 @@
 import { S2 } from "s2-geometry";
 
 import { GeometryProviderBase } from "./GeometryProviderBase";
-import { ICellCorners, ICellNeighbors } from "./interfaces/ICellCorners";
-import { ILatLon } from "./interfaces/ILatLon";
+import { CellCorners, CellNeighbors } from "./interfaces/CellCorners";
+import { LatLon } from "./interfaces/LatLon";
 
 import { GeoCoords } from "../geo/GeoCoords";
 
@@ -36,17 +36,17 @@ export class S2GeometryProvider extends GeometryProviderBase {
     }
 
     /** @inheritdoc */
-    public bboxToCellIds(sw: ILatLon, ne: ILatLon): string[] {
+    public bboxToCellIds(sw: LatLon, ne: LatLon): string[] {
         return this._bboxSquareToCellIds(sw, ne);
     }
 
     /** @inheritdoc */
-    public getNeighbors(cellId: string): ICellNeighbors {
-        const key: string = S2.idToKey(cellId);
-        const position: string = key.split('/')[1];
+    public getNeighbors(cellId: string): CellNeighbors {
+        const s2key: string = S2.idToKey(cellId);
+        const position: string = s2key.split('/')[1];
         const level: number = position.length;
 
-        const [w, n, e, s]: string[] = this._getNeighbors(key, level);
+        const [w, n, e, s]: string[] = this._getNeighbors(s2key, level);
         const [, nw, , sw]: string[] = this._getNeighbors(w, level);
         const [, ne, , se]: string[] = this._getNeighbors(e, level);
 
@@ -63,7 +63,7 @@ export class S2GeometryProvider extends GeometryProviderBase {
     }
 
     /** @inheritdoc */
-    public getCorners(cellId: string): ICellCorners {
+    public getCorners(cellId: string): CellCorners {
         const key: string = S2.idToKey(cellId);
         const cell: S2.S2Cell = S2.S2Cell.FromHilbertQuadKey(key);
         const corners: S2.ILatLng[] = cell.getCornerLatLngs();
@@ -89,15 +89,15 @@ export class S2GeometryProvider extends GeometryProviderBase {
     }
 
     /** @inheritdoc */
-    public latLonToCellId(latLon: ILatLon): string {
+    public latLonToCellId(latLon: LatLon): string {
         return this._latLonToId(latLon, this._level);
     }
 
     /** @inheritdoc */
-    public latLonToCellIds(latLon: ILatLon, threshold: number): string[] {
+    public latLonToCellIds(latLon: LatLon, threshold: number): string[] {
         const cellId: string = this._latLonToId(latLon, this._level);
-        const neighbors: ICellNeighbors = this.getNeighbors(cellId);
-        const corners: ILatLon[] =
+        const neighbors: CellNeighbors = this.getNeighbors(cellId);
+        const corners: LatLon[] =
             this._getLatLonBoundingBoxCorners(latLon, threshold);
 
         for (let corner of corners) {
@@ -119,7 +119,7 @@ export class S2GeometryProvider extends GeometryProviderBase {
         return [cellId];
     }
 
-    private _enuToGeodetic(point: number[], reference: ILatLon): ILatLon {
+    private _enuToGeodetic(point: number[], reference: LatLon): LatLon {
         const [lat, lon]: number[] = this._geoCoords.enuToGeodetic(
             point[0],
             point[1],
@@ -132,20 +132,20 @@ export class S2GeometryProvider extends GeometryProviderBase {
     }
 
     private _getLatLonBoundingBoxCorners(
-        latLon: ILatLon, threshold: number): ILatLon[] {
+        latLon: LatLon, threshold: number): LatLon[] {
         return [
             [-threshold, threshold, 0],
             [threshold, threshold, 0],
             [threshold, -threshold, 0],
             [-threshold, -threshold, 0],
         ].map(
-            (point: number[]): ILatLon => {
+            (point: number[]): LatLon => {
                 return this._enuToGeodetic(point, latLon);
             });
     }
 
-    private _getNeighbors(key: string, level: number): string[] {
-        const latlng: S2.ILatLng = S2.keyToLatLng(key);
+    private _getNeighbors(s2key: string, level: number): string[] {
+        const latlng: S2.ILatLng = S2.keyToLatLng(s2key);
         const neighbors: string[] = S2.latLngToNeighborKeys(
             latlng.lat,
             latlng.lng,
@@ -154,12 +154,12 @@ export class S2GeometryProvider extends GeometryProviderBase {
         return neighbors;
     }
 
-    private _latLonToId(latLon: ILatLon, level: number): string {
-        const key: string = S2.latLngToKey(
+    private _latLonToId(latLon: LatLon, level: number): string {
+        const s2key: string = S2.latLngToKey(
             latLon.lat,
             latLon.lon,
             level);
 
-        return S2.keyToId(key);
+        return S2.keyToId(s2key);
     }
 }
diff --git a/src/api/contracts/CameraContract.ts b/src/api/contracts/CameraContract.ts
new file mode 100644
index 000000000..84cb592c9
--- /dev/null
+++ b/src/api/contracts/CameraContract.ts
@@ -0,0 +1,9 @@
+import { CameraEnt } from "../ents/CameraEnt";
+
+/**
+ * Interface that represents a camera type in a
+ * reconstruction.
+ *
+ * @interface CameraContract
+ */
+export interface CameraContract extends CameraEnt { }
diff --git a/src/api/contracts/CameraShotContract.ts b/src/api/contracts/CameraShotContract.ts
new file mode 100644
index 000000000..2a8e95f91
--- /dev/null
+++ b/src/api/contracts/CameraShotContract.ts
@@ -0,0 +1,23 @@
+/**
+ * Interface that represents a camera shot
+ * (or camera frame) in a reconstruction.
+ *
+ * @interface CameraShotContract
+ */
+export interface CameraShotContract {
+    /**
+     * Id of the camera for the shot.
+     */
+    camera: string;
+
+    /**
+     * Rotation vector in angle axis representation.
+     */
+    rotation: number[];
+
+    /**
+     * The translation in meters in topocentric ENU
+     * reference frame.
+     */
+    translation: number[];
+}
diff --git a/src/api/contracts/ClusterReconstructionContract.ts b/src/api/contracts/ClusterReconstructionContract.ts
new file mode 100644
index 000000000..d8e77a5ad
--- /dev/null
+++ b/src/api/contracts/ClusterReconstructionContract.ts
@@ -0,0 +1,34 @@
+import { CameraContract } from "./CameraContract";
+import { CameraShotContract } from "./CameraShotContract";
+import { LatLonAlt } from "../interfaces/LatLonAlt";
+import { PointContract } from "./PointContract";
+
+export interface ClusterReconstructionContract {
+    /**
+     * The unique id of the reconstruction.
+     */
+    id: string;
+
+    /**
+     * The cameras of the reconstruction.
+     */
+    cameras: { [cameraId: string]: CameraContract };
+
+    /**
+     * The points of the reconstruction.
+     */
+    points: { [pointId: string]: PointContract };
+
+    /**
+     * The reference latitude, longitue, altitude of
+     * the reconstruction. Determines the
+     * position of the reconstruction in world reference
+     * frame.
+     */
+    reference: LatLonAlt;
+
+    /**
+     * The shots of the reconstruction.
+     */
+    shots: { [imageId: string]: CameraShotContract };
+}
diff --git a/src/api/contracts/CoreImagesContract.ts b/src/api/contracts/CoreImagesContract.ts
new file mode 100644
index 000000000..9352a6936
--- /dev/null
+++ b/src/api/contracts/CoreImagesContract.ts
@@ -0,0 +1,6 @@
+import { CoreImageEnt } from "../ents/CoreImageEnt";
+
+export interface CoreImagesContract {
+    cell_id: string;
+    images: CoreImageEnt[];
+}
diff --git a/src/api/contracts/EntContract.ts b/src/api/contracts/EntContract.ts
new file mode 100644
index 000000000..869bd965b
--- /dev/null
+++ b/src/api/contracts/EntContract.ts
@@ -0,0 +1,4 @@
+export interface EntContract<T> {
+    node: T;
+    node_id: string;
+}
diff --git a/src/api/contracts/ImagesContract.ts b/src/api/contracts/ImagesContract.ts
new file mode 100644
index 000000000..4899ee868
--- /dev/null
+++ b/src/api/contracts/ImagesContract.ts
@@ -0,0 +1,4 @@
+import { ImageEnt } from "../ents/ImageEnt";
+import { EntContract } from "./EntContract";
+
+export type ImagesContract = EntContract<ImageEnt>[];
diff --git a/src/api/interfaces/IMesh.ts b/src/api/contracts/MeshContract.ts
similarity index 86%
rename from src/api/interfaces/IMesh.ts
rename to src/api/contracts/MeshContract.ts
index ce5cfea49..f640f9b2a 100644
--- a/src/api/interfaces/IMesh.ts
+++ b/src/api/contracts/MeshContract.ts
@@ -1,9 +1,9 @@
 /**
  * Interface that describes SfM triangulated meshes.
  *
- * @interface IMesh
+ * @interface MeshContract
  */
-export interface IMesh {
+export interface MeshContract {
     /**
      * Flattened array of faces for the mesh. Each face consist
      * three vertex indices.
diff --git a/src/api/contracts/PointContract.ts b/src/api/contracts/PointContract.ts
new file mode 100644
index 000000000..6ac59161f
--- /dev/null
+++ b/src/api/contracts/PointContract.ts
@@ -0,0 +1,17 @@
+/**
+ * Interface that represents a reconstruction point.
+ *
+ * @interface PointContract
+ */
+export interface PointContract {
+    /**
+     * RGB color vector of the point.
+     */
+    color: number[];
+
+    /**
+     * Coordinates in metric scale in topocentric ENU
+     * reference frame with respect to a geo reference.
+     */
+    coordinates: number[];
+}
diff --git a/src/api/contracts/SequencesContract.ts b/src/api/contracts/SequencesContract.ts
new file mode 100644
index 000000000..79d66488e
--- /dev/null
+++ b/src/api/contracts/SequencesContract.ts
@@ -0,0 +1,4 @@
+import { SequenceEnt } from "../ents/SequenceEnt";
+import { EntContract } from "./EntContract";
+
+export type SequencesContract = EntContract<SequenceEnt>[];
diff --git a/src/api/contracts/SpatialImagesContract.ts b/src/api/contracts/SpatialImagesContract.ts
new file mode 100644
index 000000000..51b0a5391
--- /dev/null
+++ b/src/api/contracts/SpatialImagesContract.ts
@@ -0,0 +1,4 @@
+import { SpatialImageEnt } from "../ents/SpatialImageEnt";
+import { EntContract } from "./EntContract";
+
+export type SpatialImagesContract = EntContract<SpatialImageEnt>[];
diff --git a/src/api/ents/CameraEnt.ts b/src/api/ents/CameraEnt.ts
new file mode 100644
index 000000000..bb13133e9
--- /dev/null
+++ b/src/api/ents/CameraEnt.ts
@@ -0,0 +1,39 @@
+/**
+ * Interface that represents camera properties.
+ *
+ * @interface CameraEnt
+ */
+export interface CameraEnt {
+    /**
+     * Camera type dependent camera parameters.
+     *
+     * For perspective and fisheye camera types,
+     * the camera parameters array should be
+     * constructed according to
+     *
+     * `[focal, k1, k2]`
+     *
+     * where focal is the camera focal length,
+     * and k1, k2 are radial distortion parameters.
+     *
+     * For spherical camera type the camera
+     * parameters should be an emtpy array.
+     */
+    camera_parameters: number[];
+
+    /**
+     * Projection type of the camera.
+     *
+     * @description Supported camera types are:
+     *
+     * ```
+     *   'spherical'
+     *   'fisheye'
+     *   'perspective'
+     * ```
+     *
+     * Other camera types will be treated as
+     * perspective images.
+     */
+    camera_type: string;
+}
diff --git a/src/api/ents/CoreImageEnt.ts b/src/api/ents/CoreImageEnt.ts
new file mode 100644
index 000000000..ec38247ef
--- /dev/null
+++ b/src/api/ents/CoreImageEnt.ts
@@ -0,0 +1,27 @@
+import { IDEnt } from "./IDEnt";
+import { LatLon } from "../interfaces/LatLon";
+
+/**
+ * Interface that describes the raw core node properties.
+ *
+ * @interface CoreImageEnt
+ */
+export interface CoreImageEnt extends IDEnt {
+    /**
+     * SfM computed latitude longitude in WGS84 datum, measured in degrees.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    computed_geometry?: LatLon;
+
+    /**
+     * Original EXIF latitude longitude in WGS84 datum, measured in degrees.
+     */
+    geometry: LatLon;
+
+    /**
+     * Sequence that the node is part of.
+     */
+    sequence: IDEnt;
+}
diff --git a/src/api/ents/CreatorEnt.ts b/src/api/ents/CreatorEnt.ts
new file mode 100644
index 000000000..6c4cfa457
--- /dev/null
+++ b/src/api/ents/CreatorEnt.ts
@@ -0,0 +1,13 @@
+import { IDEnt } from "./IDEnt";
+
+/**
+ * Interface that describes the raw image creator properties.
+ *
+ * @interface CreatorEnt
+ */
+export interface CreatorEnt extends IDEnt {
+    /**
+     * The username of the user.
+     */
+    username: string;
+}
diff --git a/src/api/ents/IDEnt.ts b/src/api/ents/IDEnt.ts
new file mode 100644
index 000000000..4180fe4b0
--- /dev/null
+++ b/src/api/ents/IDEnt.ts
@@ -0,0 +1,11 @@
+/**
+ * Interface that describes an entity with a unique id.
+ *
+ * @interface IDEnt
+ */
+export interface IDEnt {
+    /**
+     * Unique id.
+     */
+    id: string;
+}
diff --git a/src/api/ents/ImageEnt.ts b/src/api/ents/ImageEnt.ts
new file mode 100644
index 000000000..2319186ed
--- /dev/null
+++ b/src/api/ents/ImageEnt.ts
@@ -0,0 +1,9 @@
+import { SpatialImageEnt } from "./SpatialImageEnt";
+import { CoreImageEnt } from "./CoreImageEnt";
+
+/**
+ * Interface that describes the raw image properties.
+ *
+ * @interface ImageEnt
+ */
+export interface ImageEnt extends CoreImageEnt, SpatialImageEnt { }
diff --git a/src/api/ents/SequenceEnt.ts b/src/api/ents/SequenceEnt.ts
new file mode 100644
index 000000000..8f2a9d8a7
--- /dev/null
+++ b/src/api/ents/SequenceEnt.ts
@@ -0,0 +1,14 @@
+import { IDEnt } from "./IDEnt";
+
+/**
+ * Interface that describes the raw image sequence properties.
+ *
+ * @interface SequenceEnt
+ */
+export interface SequenceEnt extends IDEnt {
+    /**
+     * The image IDs of the sequence sorted in
+     * acsending order based on capture time.
+     */
+    image_ids: string[];
+}
diff --git a/src/api/ents/SpatialImageEnt.ts b/src/api/ents/SpatialImageEnt.ts
new file mode 100644
index 000000000..57a2ea6b6
--- /dev/null
+++ b/src/api/ents/SpatialImageEnt.ts
@@ -0,0 +1,125 @@
+import { CameraEnt } from "./CameraEnt";
+import { URLEnt } from "./URLEnt";
+import { IDEnt } from "./IDEnt";
+import { CreatorEnt } from "./CreatorEnt";
+
+/**
+ * Interface that describes the raw spatial image properties.
+ *
+ * @interface SpatialImageEnt
+ */
+export interface SpatialImageEnt extends CameraEnt, IDEnt {
+    /**
+     * Original EXIF altitude above sea level, in meters.
+     */
+    altitude: number;
+
+    /**
+     * Scale of atomic reconstruction.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    atomic_scale?: number;
+
+    /**
+     * Rotation vector in angle axis representation.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    computed_rotation?: number[];
+
+    /**
+     * Original EXIF compass angle, measured in degrees.
+     */
+    compass_angle: number;
+
+    /**
+     * Computed altitude, in meters.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    computed_altitude?: number;
+
+    /**
+     * Timestamp when the image was captured.
+     */
+    captured_at: number;
+
+    /**
+     * SfM computed compass angle, measured in degrees.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    computed_compass_angle?: number;
+
+    /**
+     * Cluster reconstruction to which the image belongs.
+     */
+    cluster: URLEnt;
+
+    /**
+     * Image creator.
+     */
+    creator: CreatorEnt;
+
+    /**
+     * EXIF orientation of original image.
+     */
+    exif_orientation: number;
+
+    /**
+     * Height of original image, not adjusted for orientation.
+     */
+    height: number;
+
+    /**
+     * SfM connected component id to which the image belongs.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    merge_cc?: number;
+
+    /**
+     * Version for which SfM was run and image was merged.
+     *
+     * @description Optional - no 3D interaction available
+     * if unset.
+     */
+    merge_version?: number;
+
+    /**
+     * 3D mesh resource.
+     */
+    mesh: URLEnt;
+
+    /**
+     * Owner to which the image belongs.
+     */
+    owner: IDEnt;
+
+    /**
+     * Value specifying if image is accessible to organization members only
+     * or to everyone.
+     */
+    private?: boolean;
+
+    /**
+     * Image quality score on the interval [0, 1].
+     */
+    quality_score?: number;
+
+    /**
+     * Image thumbnail resource.
+     */
+    thumb: URLEnt;
+
+    /**
+     * Width of original image, not adjusted for orientation.
+     */
+    width: number;
+}
diff --git a/src/api/ents/URLEnt.ts b/src/api/ents/URLEnt.ts
new file mode 100644
index 000000000..44e719e02
--- /dev/null
+++ b/src/api/ents/URLEnt.ts
@@ -0,0 +1,13 @@
+import { IDEnt } from "./IDEnt";
+
+/**
+ * Interface that describes the raw image cluster properties.
+ *
+ * @interface URLEnt
+ */
+export interface URLEnt extends IDEnt {
+    /**
+     * URL for reconstruction cluster resource.
+     */
+    url: string;
+}
diff --git a/src/api/falcor/FalcorContracts.ts b/src/api/falcor/FalcorContracts.ts
new file mode 100644
index 000000000..4cc53fb53
--- /dev/null
+++ b/src/api/falcor/FalcorContracts.ts
@@ -0,0 +1,62 @@
+import { JSONEnvelope } from "falcor";
+import {
+    FalcorCoreImageEnt,
+    FalcorImageEnt,
+    FalcorSequenceEnt,
+    FalcorSpatialImageEnt,
+} from "./FalcorEnts";
+
+export interface FalcorCameraContract {
+    focal: number;
+    k1: number;
+    k2: number;
+    projection_type: string;
+}
+
+export interface FalcorCameraShotContract {
+    camera: string;
+    rotation: number[];
+    translation: number[];
+}
+
+export interface FalcorReferenceLlaContract {
+    altitude: number;
+    latitude: number;
+    longitude: number;
+}
+
+export interface FalcorPointContract {
+    color: number[];
+    coordinates: number[];
+}
+
+export interface FalcorClusterReconstructionContract {
+    cameras: { [cameraId: string]: FalcorCameraContract };
+    points: { [pointId: string]: FalcorPointContract };
+    reference_lla: FalcorReferenceLlaContract,
+    key: string;
+    shots: { [imageKey: string]: FalcorCameraShotContract };
+}
+
+interface FalcorKey<T> {
+    [key: string]: T
+}
+
+interface FalcorImageByKey<T> {
+    imageByKey: FalcorKey<T>;
+}
+
+interface FalcorImagesByH {
+    imagesByH: FalcorKey<FalcorKey<FalcorCoreImageEnt>>;
+}
+
+interface FalcorSequenceByKey {
+    sequenceByKey: FalcorKey<FalcorSequenceEnt>;
+}
+
+export type FalcorImagesByHContract = JSONEnvelope<FalcorImagesByH>;
+export type FalcorSequenceByKeyContract = JSONEnvelope<FalcorSequenceByKey>;
+export type FalcorImageByKeyContract =
+    JSONEnvelope<FalcorImageByKey<FalcorImageEnt>>;
+export type FalcorSpatialImageByKeyContract =
+    JSONEnvelope<FalcorImageByKey<FalcorSpatialImageEnt>>;
diff --git a/src/api/falcor/FalcorConverter.ts b/src/api/falcor/FalcorConverter.ts
new file mode 100644
index 000000000..1c31205f5
--- /dev/null
+++ b/src/api/falcor/FalcorConverter.ts
@@ -0,0 +1,194 @@
+import { FalcorImageSize } from "./FalcorImageSize";
+import { FalcorDataProviderUrls } from "./FalcorDataProviderUrls";
+import {
+    FalcorCoreImageEnt,
+    FalcorSequenceEnt,
+    FalcorSpatialImageEnt,
+} from "./FalcorEnts";
+import { CoreImageEnt } from "../ents/CoreImageEnt";
+import { IDEnt } from "../ents/IDEnt";
+import { SpatialImageEnt } from "../ents/SpatialImageEnt";
+import { SequenceEnt } from "../ents/SequenceEnt";
+import { ClusterReconstructionContract } from "../contracts/ClusterReconstructionContract";
+import { LatLonAlt } from "../interfaces/LatLonAlt";
+import { CameraEnt } from "../ents/CameraEnt";
+import { FalcorClusterReconstructionContract } from "./FalcorContracts";
+import { isSpherical } from "../../geo/Geo";
+
+function convertCameraType(falcorProjectionType: string): string {
+    return falcorProjectionType === "equirectangular" ?
+        "spherical" : falcorProjectionType;
+}
+
+export class FalcorConverter {
+    public readonly propertiesCore: string[];
+    public readonly propertiesKey: string[];
+    public readonly propertiesSequence: string[];
+    public readonly propertiesSpatial: string[];
+    public readonly propertiesUser: string[];
+
+    constructor(private readonly _urls: FalcorDataProviderUrls) {
+        this.propertiesCore = [
+            "cl",
+            "l",
+            "sequence_key",
+        ];
+
+        this.propertiesKey = [
+            "key",
+        ];
+
+        this.propertiesSequence = [
+            "keys",
+        ];
+
+        this.propertiesSpatial = [
+            "altitude",
+            "atomic_scale",
+            "c_rotation",
+            "ca",
+            "calt",
+            "camera_projection_type",
+            "captured_at",
+            "cca",
+            "cfocal",
+            "cluster_key",
+            "ck1",
+            "ck2",
+            "height",
+            "merge_cc",
+            "merge_version",
+            "organization_key",
+            "orientation",
+            "private",
+            "quality_score",
+            "user",
+            "width",
+        ];
+
+        this.propertiesUser = [
+            "username",
+        ];
+    }
+
+    public clusterReconstruction(
+        item: FalcorClusterReconstructionContract): ClusterReconstructionContract {
+        const cameras: { [cameraId: string]: CameraEnt } = {};
+        for (const cameraId in item.cameras) {
+            if (!item.cameras.hasOwnProperty(cameraId)) { continue; }
+            const falcorCamera = item.cameras[cameraId];
+            const cameraParameters = [
+                falcorCamera.focal,
+                falcorCamera.k1,
+                falcorCamera.k2,
+            ];
+            const cameraType = convertCameraType(falcorCamera.projection_type);
+            cameras[cameraId] = {
+                camera_parameters: cameraParameters,
+                camera_type: cameraType,
+            };
+        }
+
+        const id = item.key;
+        const points = item.points;
+        const lla = item.reference_lla;
+        const reference: LatLonAlt = {
+            alt: lla.altitude,
+            lat: lla.latitude,
+            lon: lla.longitude,
+        };
+        const shots = item.shots;
+        return {
+            cameras,
+            id,
+            points,
+            reference,
+            shots,
+        };
+    }
+
+    public core<T extends FalcorCoreImageEnt>(item: T): CoreImageEnt {
+        const computedGeometry = item.cl;
+        const geometry = item.l;
+        const id = item.key;
+        const sequence: IDEnt = { id: item.sequence_key };
+        return {
+            computed_geometry: computedGeometry,
+            geometry,
+            id,
+            sequence,
+        };
+    }
+
+    public sequence(item: FalcorSequenceEnt): SequenceEnt {
+        const id = item.key;
+        const imageIds = item.keys;
+        return { id, image_ids: imageIds };
+    }
+
+    public spatial<T extends FalcorSpatialImageEnt>(
+        item: T): SpatialImageEnt {
+        const altitude = item.altitude;
+        const atomicScale = item.atomic_scale;
+        const cameraType = convertCameraType(item.camera_projection_type);
+        const cameraParameters = [
+            item.cfocal,
+            item.ck1,
+            item.ck2
+        ];
+        const capturedAt = item.captured_at;
+        const cluster = {
+            id: item.cluster_key,
+            url: this._urls.clusterReconstruction(item.cluster_key),
+        };
+        const compassAngle = item.ca;
+        const computedAltitude = item.calt;
+        const computedCompassAngle = item.cca;
+        const computedRotation = item.c_rotation;
+        const height = item.height;
+        const mergeCc = item.merge_cc;
+        const mergeVersion = item.merge_version;
+        const owner = { id: item.organization_key };
+        const exifOrientation = item.orientation;
+        const priv = item.private;
+        const qualityScore = item.quality_score;
+        const creator = {
+            id: !!item.user ? item.user.key : null,
+            username: !!item.user ? item.user.username : null,
+        };
+        const width = item.width;
+        const id = item.key;
+        const mesh = { id, url: this._urls.protoMesh(id) };
+        const thumbSize = isSpherical(cameraType) ?
+            FalcorImageSize.Size2048 :
+            FalcorImageSize.Size1024;
+        const thumbUrl = this._urls
+            .thumbnail(id, thumbSize, this._urls.origin);
+        const thumb = { id, url: thumbUrl }
+
+        return {
+            altitude,
+            atomic_scale: atomicScale,
+            camera_parameters: cameraParameters,
+            camera_type: cameraType,
+            captured_at: capturedAt,
+            cluster,
+            compass_angle: compassAngle,
+            computed_altitude: computedAltitude,
+            computed_compass_angle: computedCompassAngle,
+            computed_rotation: computedRotation,
+            creator,
+            exif_orientation: exifOrientation,
+            height,
+            merge_cc: mergeCc,
+            merge_version: mergeVersion,
+            mesh,
+            id,
+            owner,
+            private: priv,
+            quality_score: qualityScore,
+            thumb,
+            width,
+        }
+    }
+}
diff --git a/src/api/falcor/FalcorDataProvider.ts b/src/api/falcor/FalcorDataProvider.ts
new file mode 100644
index 000000000..7f5d7db02
--- /dev/null
+++ b/src/api/falcor/FalcorDataProvider.ts
@@ -0,0 +1,322 @@
+import {
+    Model,
+} from "falcor";
+
+import { DataProviderBase } from "../DataProviderBase";
+import { GeometryProviderBase } from "../GeometryProviderBase";
+import { GeohashGeometryProvider } from "../GeohashGeometryProvider";
+import { FalcorModelCreator } from "./FalcorModelCreator";
+import { MapillaryError } from "../../error/MapillaryError";
+
+import { ClusterReconstructionContract } from "../contracts/ClusterReconstructionContract";
+import { MeshContract } from "../contracts/MeshContract";
+import { CoreImagesContract } from "../contracts/CoreImagesContract";
+import { SpatialImagesContract } from "../contracts/SpatialImagesContract";
+import { SequencesContract } from "../contracts/SequencesContract";
+import { ImagesContract } from "../contracts/ImagesContract";
+import { CoreImageEnt } from "../ents/CoreImageEnt";
+import {
+    decompress,
+    fetchArrayBuffer,
+    readMeshPbf,
+} from "../Common";
+
+import { FalcorDataProviderOptions } from "./FalcorDataProviderOptions";
+import { FalcorDataProviderUrls } from "./FalcorDataProviderUrls";
+import { FalcorConverter } from "./FalcorConverter";
+import {
+    FalcorClusterReconstructionContract,
+    FalcorImageByKeyContract,
+    FalcorImagesByHContract,
+    FalcorSequenceByKeyContract,
+    FalcorSpatialImageByKeyContract,
+} from "./FalcorContracts";
+
+type APIPath =
+    "imageByKey" |
+    "imagesByH" |
+    "sequenceByKey";
+
+/**
+ * @class FalcorDataProvider
+ *
+ * @classdesc Provides data through Falcor API calls.
+ */
+export class FalcorDataProvider extends DataProviderBase {
+    private _urls: FalcorDataProviderUrls;
+    private _convert: FalcorConverter;
+
+    private _model: Model;
+    private _modelCreator: FalcorModelCreator;
+
+    private _pageCount: number;
+
+    private _pathImageByKey: APIPath;
+    private _pathImagesByH: APIPath;
+    private _pathSequenceByKey: APIPath;
+
+    /**
+     * Create a new Falcor data provider instance.
+     *
+     * @param {FalcorDataProviderOptions} options - Options struct.
+     * @param {GeometryProviderBase} [geometry] - Optional geometry
+     * provider instance.
+     */
+    constructor(
+        options: FalcorDataProviderOptions,
+        geometry?: GeometryProviderBase) {
+
+        super(!!geometry ? geometry : new GeohashGeometryProvider());
+
+        if (!(this._geometry instanceof GeohashGeometryProvider)) {
+            throw new MapillaryError(
+                "The falcor data provider requires the geohash geometry provider.");
+        }
+
+        this._urls = new FalcorDataProviderUrls(options);
+        this._convert = new FalcorConverter(this._urls);
+
+        this._modelCreator = options.creator != null ?
+            options.creator : new FalcorModelCreator();
+        this._model = this._modelCreator.createModel(
+            this._urls.falcorModel, options.userToken);
+
+        this._pageCount = 999;
+
+        this._pathImageByKey = "imageByKey";
+        this._pathImagesByH = "imagesByH";
+        this._pathSequenceByKey = "sequenceByKey";
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getCoreImages(cellId: string): Promise<CoreImagesContract> {
+        return Promise
+            .resolve(<PromiseLike<FalcorImagesByHContract>>this._model
+                .get([
+                    this._pathImagesByH,
+                    [cellId],
+                    { from: 0, to: this._pageCount },
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesCore)]))
+            .then(
+                (value: FalcorImagesByHContract): CoreImagesContract => {
+                    if (!value) {
+                        value = { json: { imagesByH: {} } };
+                        for (const h of [cellId]) {
+                            value.json.imagesByH[h] = {};
+                            for (let i: number = 0; i <= this._pageCount; i++) {
+                                value.json.imagesByH[h][i] = null;
+                            }
+                        }
+                    }
+                    const ents: CoreImageEnt[] = [];
+                    const imagesByH = value.json.imagesByH;
+                    for (const cid in imagesByH) {
+                        if (!imagesByH.hasOwnProperty(cid)) { continue; }
+                        if (cid !== cellId) { continue; }
+                        for (const index in imagesByH[cid]) {
+                            if (!imagesByH[cid].hasOwnProperty(index)) {
+                                continue;
+                            }
+                            const item = imagesByH[cid][index];
+                            const core = !!item ?
+                                this._convert.core(item) :
+                                null;
+                            ents.push(core)
+                        }
+                    }
+                    return { cell_id: cellId, images: ents };
+                },
+                (error: Error) => {
+                    this._invalidateGet(this._pathImagesByH, [cellId]);
+                    throw error;
+                });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getClusterReconstruction(
+        url: string,
+        abort?: Promise<void>): Promise<ClusterReconstructionContract> {
+        return fetchArrayBuffer(url, abort)
+            .then(
+                (buffer: ArrayBuffer): ClusterReconstructionContract => {
+                    const reconstructions =
+                        <FalcorClusterReconstructionContract[]>
+                        decompress(buffer);
+                    if (reconstructions.length < 1) {
+                        throw new MapillaryError("Cluster reconstruction is empty.");
+                    }
+                    const item = reconstructions[0];
+                    return this._convert.clusterReconstruction(item);
+                },
+                (reason: Error) => { throw reason; });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getSpatialImages(keys: string[]): Promise<SpatialImagesContract> {
+        return Promise
+            .resolve(<PromiseLike<FalcorSpatialImageByKeyContract>>this._model
+                .get([
+                    this._pathImageByKey,
+                    keys,
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesSpatial),
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesUser)]))
+            .then(
+                (value: FalcorSpatialImageByKeyContract): SpatialImagesContract => {
+                    if (!value) {
+                        this._invalidateGet(this._pathImageByKey, keys);
+                        throw new Error(
+                            `Images (${keys.join(", ")}) ` +
+                            `could not be found.`);
+                    }
+                    const result: SpatialImagesContract = [];
+                    const imageByKey = value.json.imageByKey;
+                    for (const key in imageByKey) {
+                        if (!imageByKey.hasOwnProperty(key)) { continue; }
+                        const item = imageByKey[key];
+                        const spatial = this._convert.spatial(item);
+                        result.push({ node: spatial, node_id: spatial.id });
+                    }
+                    return result;
+                },
+                (error: Error) => {
+                    this._invalidateGet(this._pathImageByKey, keys);
+                    throw error;
+                });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getImages(keys: string[]): Promise<ImagesContract> {
+        return Promise
+            .resolve(<PromiseLike<FalcorImageByKeyContract>>this._model
+                .get([
+                    this._pathImageByKey,
+                    keys,
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesCore)
+                        .concat(this._convert.propertiesSpatial),
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesUser)]))
+            .then(
+                (value: FalcorImageByKeyContract): ImagesContract => {
+                    if (!value) {
+                        this._invalidateGet(this._pathImageByKey, keys);
+                        throw new Error(`Images (${keys.join(", ")}) could not be found.`);
+                    }
+
+                    const result: ImagesContract = [];
+                    const imageByKey = value.json.imageByKey;
+                    for (const key in imageByKey) {
+                        if (!imageByKey.hasOwnProperty(key)) { continue; }
+                        const item = imageByKey[key];
+                        const core = this._convert.core(item);
+                        const spatial = this._convert.spatial(item);
+                        const image = Object.assign({}, core, spatial);
+                        result.push({ node: image, node_id: image.id });
+                    }
+                    return result;
+                },
+                (error: Error) => {
+                    this._invalidateGet(this._pathImageByKey, keys);
+                    throw error;
+                });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getImageBuffer(url: string, abort?: Promise<void>): Promise<ArrayBuffer> {
+        return fetchArrayBuffer(url, abort);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getImageTileBuffer(
+        imageKey: string,
+        x: number,
+        y: number,
+        w: number,
+        h: number,
+        scaledW: number,
+        scaledH: number,
+        abort?: Promise<void>): Promise<ArrayBuffer> {
+        const coords: string = `${x},${y},${w},${h}`
+        const size: string = `${scaledW},${scaledH}`;
+        return fetchArrayBuffer(
+            this._urls.imageTile(imageKey, coords, size),
+            abort);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getMesh(url: string, abort?: Promise<void>): Promise<MeshContract> {
+        return fetchArrayBuffer(url, abort)
+            .then(
+                (buffer: ArrayBuffer): MeshContract => {
+                    return readMeshPbf(buffer);
+                },
+                (reason: Error) => { throw reason; });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public getSequences(sequenceIds: string[]): Promise<SequencesContract> {
+        return Promise
+            .resolve(<PromiseLike<FalcorSequenceByKeyContract>>this._model
+                .get([
+                    this._pathSequenceByKey,
+                    sequenceIds,
+                    this._convert.propertiesKey
+                        .concat(this._convert.propertiesSequence)]))
+            .then(
+                (value: FalcorSequenceByKeyContract): SequencesContract => {
+                    if (!value) { value = { json: { sequenceByKey: {} } }; }
+                    const result: SequencesContract = [];
+                    for (const sequenceId of sequenceIds) {
+                        const exists = sequenceId in value.json.sequenceByKey;
+                        if (!exists) {
+                            console
+                                .warn(`Sequence data missing (${sequenceId})`);
+                        }
+                        const sequence = exists ?
+                            this._convert.sequence(
+                                value.json.sequenceByKey[sequenceId]) :
+                            this._convert.sequence(
+                                { key: sequenceId, keys: [] });
+                        result.push({ node: sequence, node_id: sequenceId });
+                    }
+                    return result;
+                },
+                (error: Error) => {
+                    this._invalidateGet(this._pathSequenceByKey, sequenceIds);
+                    throw error;
+                });
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public setUserToken(userToken?: string): void {
+        this._model.invalidate([]);
+        this._model = null;
+        this._model = this._modelCreator.createModel(
+            this._urls.falcorModel, userToken);
+    }
+
+    private _invalidateGet(path: APIPath, paths: string[]): void {
+        this._model.invalidate([path, paths]);
+    }
+}
diff --git a/src/api/interfaces/IFalcorDataProviderOptions.ts b/src/api/falcor/FalcorDataProviderOptions.ts
similarity index 82%
rename from src/api/interfaces/IFalcorDataProviderOptions.ts
rename to src/api/falcor/FalcorDataProviderOptions.ts
index cefd9ee3a..b3d33aeef 100644
--- a/src/api/interfaces/IFalcorDataProviderOptions.ts
+++ b/src/api/falcor/FalcorDataProviderOptions.ts
@@ -1,11 +1,12 @@
-import { ModelCreator } from "../ModelCreator";
+import { FalcorModelCreator } from "./FalcorModelCreator";
 
 /**
- * Interface for the options that can be provided to the {@link FalcorDataProvider}.
+ * Interface for the options that can be provided to
+ * the {@link FalcorDataProvider}.
  *
- * @interface IFalcorDataProviderOptions
+ * @interface FalcorDataProviderOptions
  */
-export interface IFalcorDataProviderOptions {
+export interface FalcorDataProviderOptions {
     /**
      * API v3 host.
      *
@@ -28,12 +29,12 @@ export interface IFalcorDataProviderOptions {
      *
      * @default {"cluster-reconstructions.mapillary.com"}
      */
-    clusterReconstructionHost?: string;
+    reconstructionHost?: string;
 
     /**
      * Optional model creator instance.
      */
-    creator?: ModelCreator;
+    creator?: FalcorModelCreator;
 
     /**
      * Image host.
diff --git a/src/api/falcor/FalcorDataProviderUrls.ts b/src/api/falcor/FalcorDataProviderUrls.ts
new file mode 100644
index 000000000..275f68c5f
--- /dev/null
+++ b/src/api/falcor/FalcorDataProviderUrls.ts
@@ -0,0 +1,80 @@
+import { FalcorDataProviderOptions } from "./FalcorDataProviderOptions";
+
+export class FalcorDataProviderUrls {
+    private _apiHost: string = "a.mapillary.com";
+    private _clientToken: string;
+    private _clusterReconstructionHost: string =
+        "cluster-reconstructions.mapillary.com";
+    private _imageHost: string = "images.mapillary.com";
+    private _imageTileHost: string = "loris.mapillary.com";
+    private _meshHost: string = "meshes.mapillary.com";
+    private _origin: string = "mapillary.webgl";
+    private _scheme: string = "https";
+
+    /**
+     * Create a new Falcor data provider URLs instance.
+     *
+     * @param {FalcorDataProviderOptions} options - Options struct.
+     */
+    constructor(options: FalcorDataProviderOptions) {
+        this._clientToken = options.clientToken;
+
+        if (!!options.apiHost) {
+            this._apiHost = options.apiHost;
+        }
+
+        if (!!options.reconstructionHost) {
+            this._clusterReconstructionHost = options.reconstructionHost;
+        }
+
+        if (!!options.imageHost) {
+            this._imageHost = options.imageHost;
+        }
+
+        if (!!options.imageTileHost) {
+            this._imageTileHost = options.imageTileHost;
+        }
+
+        if (!!options.meshHost) {
+            this._meshHost = options.meshHost;
+        }
+
+        if (!!options.scheme) {
+            this._scheme = options.scheme;
+        }
+    }
+
+    public get falcorModel(): string {
+        return `${this._scheme}://${this._apiHost}/v3/model.json?client_id=${this._clientToken}`;
+    }
+
+    public get origin(): string {
+        return this._origin;
+    }
+
+    public get tileScheme(): string {
+        return this._scheme;
+    }
+
+    public get tileDomain(): string {
+        return this._imageTileHost;
+    }
+
+    public clusterReconstruction(key: string): string {
+        return `${this._scheme}://${this._clusterReconstructionHost}/${key}/v1.0/aligned.jsonz`;
+    }
+
+    public imageTile(imageKey: string, coords: string, size: string): string {
+        return `${this.tileScheme}://${this.tileDomain}/${imageKey}/${coords}/${size}/0/default.jpg`;
+    }
+
+    public protoMesh(key: string): string {
+        return `${this._scheme}://${this._meshHost}/v2/mesh/${key}`;
+    }
+
+    public thumbnail(key: string, size: number, origin?: string): string {
+        const query: string = !!origin ? `?origin=${origin}` : "";
+
+        return `${this._scheme}://${this._imageHost}/${key}/thumb-${size}.jpg${query}`;
+    }
+}
diff --git a/src/api/falcor/FalcorEnts.ts b/src/api/falcor/FalcorEnts.ts
new file mode 100644
index 000000000..cdb07c1a1
--- /dev/null
+++ b/src/api/falcor/FalcorEnts.ts
@@ -0,0 +1,51 @@
+export interface FalcorLatLon {
+    lat: number;
+    lon: number;
+}
+
+interface FalcorKeyEnt {
+    key: string;
+}
+
+export interface FalcorUserEnt extends FalcorKeyEnt {
+    username: string;
+}
+
+export interface FalcorCoreImageEnt extends FalcorKeyEnt {
+    cl: FalcorLatLon,
+    l: FalcorLatLon,
+    sequence_key: string;
+}
+
+export interface FalcorSpatialImageEnt extends FalcorKeyEnt {
+    altitude: number;
+    atomic_scale: number;
+    c_rotation: number[];
+    ca: number;
+    calt: number;
+    camera_projection_type: string;
+    captured_at: number;
+    cca: number;
+    cfocal: number;
+    cluster_key: string;
+    ck1: number;
+    ck2: number;
+    height: number;
+    merge_cc: number;
+    merge_version: number;
+    organization_key: string;
+    orientation: number;
+    private: boolean;
+    quality_score: number;
+    user: FalcorUserEnt;
+    width: number;
+}
+
+export interface FalcorImageEnt extends
+    FalcorSpatialImageEnt,
+    FalcorCoreImageEnt { }
+
+export interface FalcorSequenceEnt {
+    key?: string;
+    keys?: string[];
+}
diff --git a/src/api/falcor/FalcorImageSize.ts b/src/api/falcor/FalcorImageSize.ts
new file mode 100644
index 000000000..d89ad6324
--- /dev/null
+++ b/src/api/falcor/FalcorImageSize.ts
@@ -0,0 +1,17 @@
+/**
+ * Enumeration for image sizes
+ * @enum {number}
+ * @readonly
+ * @description Image sizes in pixels for the largest side of the image.
+ */
+export enum FalcorImageSize {
+    /**
+     * 1024 pixels image size
+     */
+    Size1024 = 1024,
+
+    /**
+     * 2048 pixels image size
+     */
+    Size2048 = 2048,
+}
diff --git a/src/api/ModelCreator.ts b/src/api/falcor/FalcorModelCreator.ts
similarity index 97%
rename from src/api/ModelCreator.ts
rename to src/api/falcor/FalcorModelCreator.ts
index 2411bebf9..e670f4659 100644
--- a/src/api/ModelCreator.ts
+++ b/src/api/falcor/FalcorModelCreator.ts
@@ -12,7 +12,7 @@ type HttpDataSourceConfiguration = {
  *
  * @classdesc Creates API models.
  */
-export class ModelCreator {
+export class FalcorModelCreator {
     /**
      * Creates a Falcor model.
      *
diff --git a/src/api/interfaces/CameraProjectionType.ts b/src/api/interfaces/CameraProjectionType.ts
deleted file mode 100644
index bcd625c1c..000000000
--- a/src/api/interfaces/CameraProjectionType.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type CameraProjectionType =
-    "equirectangular" |
-    "fisheye" |
-    "perspective";
diff --git a/src/api/interfaces/ICellCorners.ts b/src/api/interfaces/CellCorners.ts
similarity index 77%
rename from src/api/interfaces/ICellCorners.ts
rename to src/api/interfaces/CellCorners.ts
index aa356912a..ae0ed6f81 100644
--- a/src/api/interfaces/ICellCorners.ts
+++ b/src/api/interfaces/CellCorners.ts
@@ -1,11 +1,11 @@
-import { ILatLon } from "./ILatLon";
+import { LatLon } from "./LatLon";
 
 /**
  * Interface that describes a cell neighbors object.
  *
- * @interface ICellNeighbors
+ * @interface CellNeighbors
  */
-export interface ICellNeighbors {
+export interface CellNeighbors {
     /**
      * East neighbor.
      */
@@ -50,26 +50,26 @@ export interface ICellNeighbors {
 /**
  * Interface that describes a cell corners object.
  *
- * @interface ICellCorners
+ * @interface CellCorners
  */
-export interface ICellCorners {
+export interface CellCorners {
     /**
      * North east corner.
      */
-    ne: ILatLon;
+    ne: LatLon;
 
     /**
      * North west corner.
      */
-    nw: ILatLon;
+    nw: LatLon;
 
     /**
      * South east corner.
      */
-    se: ILatLon;
+    se: LatLon;
 
     /**
      * South west corner.
      */
-    sw: ILatLon;
+    sw: LatLon;
 }
diff --git a/src/api/interfaces/IDataAddedEvent.ts b/src/api/interfaces/DataAddedProviderEvent.ts
similarity index 78%
rename from src/api/interfaces/IDataAddedEvent.ts
rename to src/api/interfaces/DataAddedProviderEvent.ts
index 9fe1d2cc9..5f9b643fe 100644
--- a/src/api/interfaces/IDataAddedEvent.ts
+++ b/src/api/interfaces/DataAddedProviderEvent.ts
@@ -6,14 +6,13 @@ import { DataProviderBase } from "../DataProviderBase";
  * @description Emitted when data has been added to a
  * data provider after initial load.
  *
- * @event IDataAddedEvent
- * @type {IDataAddedEvent}
+ * @event DataAddedProviderEvent
  */
-export interface IDataAddedEvent {
+export interface DataAddedProviderEvent {
     /**
      * Event type.
      */
-    type: string;
+    type: "dataadded";
 
     /**
      * Data provider target that emitted the event.
diff --git a/src/api/interfaces/IClusterReconstruction.ts b/src/api/interfaces/IClusterReconstruction.ts
deleted file mode 100644
index 0aad47cd4..000000000
--- a/src/api/interfaces/IClusterReconstruction.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { CameraProjectionType } from "./CameraProjectionType";
-
-/**
- * Interface that represents a camera type in a cluster
- * reconstruction.
- *
- * @interface ICamera
- */
-export interface ICamera {
-    /**
-     * SfM computed focal length.
-     */
-    focal: number;
-
-    /**
-     * SfM computed radial distortion parameter.
-     */
-    k1: number;
-
-    /**
-     * SfM computed radial distortion parameter.
-     */
-    k2: number;
-
-    /**
-     * Projection type of the camera.
-     */
-    projection_type: CameraProjectionType;
-}
-
-/**
- * Interface that represents a latitude-longitude reference
- * of a cluster reconstruction, measured in degrees and an
- * altitude in meters. Coordinates are defined in the WGS84 datum.
- *
- * @interface IGeoReference
- */
-export interface IGeoReference {
-    /**
-     * Altitude, measured in meters.
-     */
-    altitude: number;
-
-    /**
-     * Latitude, measured in degrees.
-     */
-    latitude: number;
-
-    /**
-     * Longitude, measured in degrees.
-     */
-    longitude: number;
-}
-
-/**
- * Interface that represents a cluster reconstruction point.
- *
- * @interface IReconstructionPoint
- */
-export interface IReconstructionPoint {
-    /**
-     * RGB color vector of the point.
-     */
-    color: number[];
-
-    /**
-     * Coordinates in metric scale in topocentric ENU
-     * reference frame with respect to a geo reference.
-     */
-    coordinates: number[];
-}
-
-/**
- * Interface that represents a shot (a camera frame) in a cluster
- * reconstruction.
- *
- * @interface IShot
- */
-export interface IShot {
-    /**
-     * Key of the camera for the shot.
-     */
-    camera: string;
-
-    /**
-     * Rotation vector in angle axis representation.
-     */
-    rotation: number[];
-
-    /**
-     * The translation in meters in topocentric ENU
-     * reference frame.
-     */
-    translation: number[];
-}
-
-export interface IClusterReconstruction {
-    /**
-     * The unique key of the reconstruction.
-     */
-    key: string;
-
-    /**
-     * The cameras of the reconstruction.
-     */
-    cameras: { [key: string]: ICamera };
-
-    /**
-     * The points of the reconstruction.
-     */
-    points: { [id: string]: IReconstructionPoint };
-
-    /**
-     * The reference of the reconstruction. Determines the
-     * position of the reconstruction in world reference
-     * frame.
-     */
-    reference_lla: IGeoReference;
-
-    /**
-     * The shots of the reconstruction.
-     */
-    shots: { [key: string]: IShot };
-}
diff --git a/src/api/interfaces/ICoreNode.ts b/src/api/interfaces/ICoreNode.ts
deleted file mode 100644
index 00ecb8110..000000000
--- a/src/api/interfaces/ICoreNode.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IKey } from "./IKey";
-import { ILatLon } from "./ILatLon";
-
-/**
- * Interface that describes the raw core node properties.
- *
- * @interface ICoreNode
- */
-export interface ICoreNode extends IKey {
-    /**
-     * SfM computed latitude longitude in WGS84 datum, measured in degrees.
-     */
-    cl?: ILatLon;
-
-    /**
-     * Original EXIF latitude longitude in WGS84 datum, measured in degrees.
-     */
-    l: ILatLon;
-
-    /**
-     * Key of sequence that the node is part of.
-     */
-    sequence_key?: string;
-}
diff --git a/src/api/interfaces/IFillNode.ts b/src/api/interfaces/IFillNode.ts
deleted file mode 100644
index 3c49b3cda..000000000
--- a/src/api/interfaces/IFillNode.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { CameraProjectionType } from "./CameraProjectionType";
-import { INodeUrls } from "./INodeUrls";
-import { IProject } from "./IProject";
-import { IUser } from "./IUser";
-
-/**
- * Interface that describes the raw filling node properties.
- *
- * @interface ISpatialNode
- */
-export interface IFillNode extends INodeUrls {
-    /**
-     * Original EXIF altitude above sea level, in meters.
-     */
-    altitude?: number;
-
-    /**
-     * Scale of atomic reconstruction.
-     */
-    atomic_scale?: number;
-
-    /**
-     * Rotation vector in angle axis representation.
-     */
-    c_rotation?: number[];
-
-    /**
-     * Original EXIF compass angle, measured in degrees.
-     */
-    ca: number;
-
-    /**
-     * SfM computed altitude, in meters.
-     *
-     * @description If SfM has not been run the computed altitude is
-     * set to two meters.
-     */
-    calt?: number;
-
-    /**
-     * Timestamp when the image was captured.
-     */
-    captured_at: number;
-
-    /**
-     * Universally unique id for camera used when capturing
-     * image.
-     */
-    captured_with_camera_uuid?: string;
-
-    /**
-     * SfM computed compass angle, measured in degrees.
-     */
-    cca?: number;
-
-    /**
-     * SfM computed focal length.
-     */
-    cfocal?: number;
-
-    /**
-     * SfM computed radial distortion parameter.
-     */
-    ck1?: number;
-
-    /**
-     * SfM computed radial distortion parameter.
-     */
-    ck2?: number;
-
-    /**
-     * Key of SfM cluster that the node is part of.
-     */
-    cluster_key?: string;
-
-    /**
-     * Height of original image, not adjusted for orientation.
-     */
-    height: number;
-
-    /**
-     * SfM connected component key to which the image belongs.
-     */
-    merge_cc?: number;
-
-    /**
-     * Version for which SfM was run and image was merged.
-     */
-    merge_version?: number;
-
-    /**
-     * Key of the organization to which the image belongs.
-     */
-    organization_key?: string;
-
-    /**
-     * EXIF orientation of original image.
-     */
-    orientation?: number;
-
-    /**
-     * Value specifying if image is accessible to organization members only
-     * or to everyone.
-     */
-    private: boolean;
-
-    /**
-     * Project the image belongs to.
-     */
-    project?: IProject;
-
-    /**
-     * Image quality score.
-     */
-    quality_score?: number;
-
-    /**
-     * Projection type of captured image.
-     */
-    camera_projection_type?: CameraProjectionType;
-
-    /**
-     * User who uploaded the image.
-     */
-    user: IUser;
-
-    /**
-     * Width of original image, not adjusted for orientation.
-     */
-    width: number;
-}
diff --git a/src/api/interfaces/IFullNode.ts b/src/api/interfaces/IFullNode.ts
deleted file mode 100644
index 94d05c449..000000000
--- a/src/api/interfaces/IFullNode.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { IFillNode } from "./IFillNode";
-import { ICoreNode } from "./ICoreNode";
-
-/**
- * Interface that describes the raw full image properties.
- *
- * @interface IFullNode
- */
-export interface IFullNode extends ICoreNode, IFillNode { }
diff --git a/src/api/interfaces/IKey.ts b/src/api/interfaces/IKey.ts
deleted file mode 100644
index 0cf78df96..000000000
--- a/src/api/interfaces/IKey.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Interface that describes an object with a unique key.
- *
- * @interface IKey
- */
-export interface IKey {
-    /**
-     * Unique key.
-     */
-    key: string;
-}
diff --git a/src/api/interfaces/INodeUrls.ts b/src/api/interfaces/INodeUrls.ts
deleted file mode 100644
index 0f31a44ca..000000000
--- a/src/api/interfaces/INodeUrls.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Interface that describes an object with image thumb URLs.
- *
- * @interface INodeUrls
- */
-export interface INodeUrls {
-  /**
-   * URL for cluster reconstruction resource.
-   */
-  cluster_url?: string;
-
-  /**
-   * URL for 3D mesh resource.
-   */
-  mesh_url?: string;
-
-  /**
-   * URL for 320 pixel thumbnail resource.
-   */
-  thumb320_url?: string;
-
-  /**
-   * URL for 640 pixel thumbnail resource.
-   */
-  thumb640_url?: string;
-
-  /**
-   * URL for 1024 pixel thumbnail resource.
-   */
-  thumb1024_url?: string;
-
-  /**
-   * URL for 2048 pixel thumbnail resource.
-   */
-  thumb2048_url?: string;
-}
diff --git a/src/api/interfaces/IProject.ts b/src/api/interfaces/IProject.ts
deleted file mode 100644
index 7a667f49d..000000000
--- a/src/api/interfaces/IProject.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { IKey } from "./IKey";
-
-/**
- * Interface that describes the raw image project properties.
- *
- * @interface IProject
- */
-export interface IProject extends IKey { }
diff --git a/src/api/interfaces/ISequence.ts b/src/api/interfaces/ISequence.ts
deleted file mode 100644
index 07c8d3e28..000000000
--- a/src/api/interfaces/ISequence.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { IKey } from "./IKey";
-
-/**
- * Interface that describes the raw image sequence properties.
- *
- * @interface ISequence
- */
-export interface ISequence extends IKey {
-    /**
-     * The ordered image keys of the sequence.
-     */
-    keys: string[];
-}
diff --git a/src/api/interfaces/IUser.ts b/src/api/interfaces/IUser.ts
deleted file mode 100644
index 7e26f4475..000000000
--- a/src/api/interfaces/IUser.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { IKey } from "./IKey";
-
-/**
- * Interface that describes the raw image user properties.
- *
- * @interface IUser
- */
-export interface IUser extends IKey {
-    /**
-     * The username of the user.
-     */
-    username: string;
-}
diff --git a/src/api/interfaces/ILatLon.ts b/src/api/interfaces/LatLon.ts
similarity index 85%
rename from src/api/interfaces/ILatLon.ts
rename to src/api/interfaces/LatLon.ts
index 56a3133f2..3e6a7a278 100644
--- a/src/api/interfaces/ILatLon.ts
+++ b/src/api/interfaces/LatLon.ts
@@ -2,9 +2,9 @@
  * Interface that represents a latitude and longitude coordinate,
  * measured in degrees. Coordinates are defined in the WGS84 datum.
  *
- * @interface ILatLon
+ * @interface LatLon
  */
-export interface ILatLon {
+export interface LatLon {
     /**
      * Latitude, measured in degrees.
      */
diff --git a/src/api/interfaces/LatLonAlt.ts b/src/api/interfaces/LatLonAlt.ts
new file mode 100644
index 000000000..1d7ec0cb2
--- /dev/null
+++ b/src/api/interfaces/LatLonAlt.ts
@@ -0,0 +1,15 @@
+import { LatLon } from "./LatLon";
+
+/**
+ * Interface that represents a latitude-longitude reference
+ * of a reconstruction, measured in degrees and an
+ * altitude in meters. Coordinates are defined in the WGS84 datum.
+ *
+ * @interface LatLonAlt
+ */
+export interface LatLonAlt extends LatLon {
+    /**
+     * Altitude, measured in meters.
+     */
+    alt: number;
+}
diff --git a/src/component/Component.ts b/src/component/Component.ts
index 5b172e3d4..3f61315e7 100644
--- a/src/component/Component.ts
+++ b/src/component/Component.ts
@@ -11,13 +11,13 @@ import {
     Subject,
 } from "rxjs";
 
-import { IComponentConfiguration } from "./interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "./interfaces/ComponentConfiguration";
 
 import { Container } from "../viewer/Container";
 import { Navigator } from "../viewer/Navigator";
 import { EventEmitter } from "../utils/EventEmitter";
 
-export abstract class Component<TConfiguration extends IComponentConfiguration> extends EventEmitter {
+export abstract class Component<TConfiguration extends ComponentConfiguration> extends EventEmitter {
     public static componentName: string = "not_worthy";
 
     protected _activated: boolean;
diff --git a/src/component/ComponentService.ts b/src/component/ComponentService.ts
index ea5901ebc..c6cf225dd 100644
--- a/src/component/ComponentService.ts
+++ b/src/component/ComponentService.ts
@@ -1,23 +1,23 @@
 import { Component } from "./Component";
-import { CoverComponent } from "./CoverComponent";
-import { IComponentConfiguration } from "./interfaces/IComponentConfiguration";
+import { CoverComponent } from "./cover/CoverComponent";
+import { ComponentConfiguration } from "./interfaces/ComponentConfiguration";
 
 import { ArgumentMapillaryError } from "../error/ArgumentMapillaryError";
 import { Container } from "../viewer/Container";
 import { Navigator } from "../viewer/Navigator";
 
-interface IActiveComponent {
+interface ActiveComponent {
     active: boolean;
-    component: Component<IComponentConfiguration>;
+    component: Component<ComponentConfiguration>;
 }
 
 export class ComponentService {
     public static registeredCoverComponent: typeof CoverComponent;
-    public static registeredComponents: { [key: string]: { new(...args: any[]): Component<IComponentConfiguration>; } } = {};
+    public static registeredComponents: { [key: string]: { new(...args: any[]): Component<ComponentConfiguration>; } } = {};
 
     private _coverActivated: boolean;
     private _coverComponent: CoverComponent;
-    private _components: { [key: string]: IActiveComponent } = {};
+    private _components: { [key: string]: ActiveComponent } = {};
 
     constructor(container: Container, navigator: Navigator) {
         for (const componentName in ComponentService.registeredComponents) {
@@ -25,7 +25,7 @@ export class ComponentService {
                 continue;
             }
 
-            const component: new (...args: any[]) => Component<IComponentConfiguration> =
+            const component: new (...args: any[]) => Component<ComponentConfiguration> =
                 ComponentService.registeredComponents[componentName];
 
             this._components[componentName] = {
@@ -39,7 +39,7 @@ export class ComponentService {
         this._coverActivated = true;
     }
 
-    public static register<T extends Component<IComponentConfiguration>>(
+    public static register<T extends Component<ComponentConfiguration>>(
         component: { componentName: string, new(...args: any[]): T; }): void {
         if (ComponentService.registeredComponents[component.componentName] === undefined) {
             ComponentService.registeredComponents[component.componentName] = component;
@@ -66,7 +66,7 @@ export class ComponentService {
                 continue;
             }
 
-            const component: IActiveComponent = this._components[componentName];
+            const component: ActiveComponent = this._components[componentName];
 
             if (component.active) {
                 component.component.deactivate();
@@ -86,7 +86,7 @@ export class ComponentService {
                 continue;
             }
 
-            const component: IActiveComponent = this._components[componentName];
+            const component: ActiveComponent = this._components[componentName];
 
             if (component.active) {
                 component.component.activate();
@@ -103,7 +103,7 @@ export class ComponentService {
         }
     }
 
-    public configure<TConfiguration extends IComponentConfiguration>(name: string, conf: TConfiguration): void {
+    public configure<TConfiguration extends ComponentConfiguration>(name: string, conf: TConfiguration): void {
         this._checkName(name);
         this.get(name).configure(conf);
     }
@@ -117,7 +117,7 @@ export class ComponentService {
         }
     }
 
-    public get<TComponent extends Component<IComponentConfiguration>>(name: string): TComponent {
+    public get<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent {
         return <TComponent>this._components[name].component;
     }
 
diff --git a/src/component/AttributionComponent.ts b/src/component/attribution/AttributionComponent.ts
similarity index 70%
rename from src/component/AttributionComponent.ts
rename to src/component/attribution/AttributionComponent.ts
index 12a7a5607..8ca48a048 100644
--- a/src/component/AttributionComponent.ts
+++ b/src/component/attribution/AttributionComponent.ts
@@ -7,17 +7,17 @@ import {
 
 import { map } from "rxjs/operators";
 
-import { Component } from "./Component";
-import { IComponentConfiguration } from "./interfaces/IComponentConfiguration";
+import { Component } from "../Component";
+import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
 
-import { Node } from "../graph/Node";
-import { ISize } from "../render/interfaces/ISize";
-import { IVNodeHash } from "../render/interfaces/IVNodeHash";
-import { Urls } from "../utils/Urls";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
+import { Node } from "../../graph/Node";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
+import { Urls } from "../../utils/Urls";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
 
-export class AttributionComponent extends Component<IComponentConfiguration> {
+export class AttributionComponent extends Component<ComponentConfiguration> {
     public static componentName: string = "attribution";
     private _disposable: Subscription;
 
@@ -30,10 +30,10 @@ export class AttributionComponent extends Component<IComponentConfiguration> {
             this._navigator.stateService.currentNode$,
             this._container.renderService.size$).pipe(
                 map(
-                    ([node, size]: [Node, ISize]): IVNodeHash => {
+                    ([node, size]: [Node, ViewportSize]): VirtualNodeHash => {
                         return {
                             name: this._name,
-                            vnode: this._getAttributionNode(node.username, node.key, node.capturedAt, size.width),
+                            vnode: this._getAttributionNode(node.creatorUsername, node.id, node.capturedAt, size.width),
                         };
                     }))
             .subscribe(this._container.domRenderer.render$);
@@ -43,11 +43,11 @@ export class AttributionComponent extends Component<IComponentConfiguration> {
         this._disposable.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 
-    private _getAttributionNode(username: string, key: string, capturedAt: number, width: number): vd.VNode {
+    private _getAttributionNode(username: string, id: string, capturedAt: number, width: number): vd.VNode {
         const compact: boolean = width <= 640;
 
         const mapillaryIcon: vd.VNode = vd.h("div.AttributionMapillaryLogo", []);
@@ -71,7 +71,7 @@ export class AttributionComponent extends Component<IComponentConfiguration> {
         const imageLink: vd.VNode =
             vd.h(
                 "a.mapillary-attribution-image-container",
-                { href: Urls.exploreImage(key), target: "_blank" },
+                { href: Urls.exploreImage(id), target: "_blank" },
                 [imageByContent, dateContent]);
 
         const compactClass: string = compact ? ".mapillary-attribution-compact" : "";
diff --git a/src/component/BearingComponent.ts b/src/component/bearing/BearingComponent.ts
similarity index 89%
rename from src/component/BearingComponent.ts
rename to src/component/bearing/BearingComponent.ts
index 6c3f870ee..6b77fce98 100644
--- a/src/component/BearingComponent.ts
+++ b/src/component/bearing/BearingComponent.ts
@@ -17,23 +17,23 @@ import {
     takeWhile,
 } from "rxjs/operators";
 
-import * as Geo from "../geo/Geo";
-
-import { Component } from "./Component";
-import { IBearingConfiguration } from "./interfaces/IBearingConfiguration";
-
-import { Spatial } from "../geo/Spatial";
-import { Transform } from "../geo/Transform";
-import { ViewportCoords } from "../geo/ViewportCoords";
-import { Node } from "../graph/Node";
-import { RenderCamera } from "../render/RenderCamera";
-import { ISize } from "../render/interfaces/ISize";
-import { IVNodeHash } from "../render/interfaces/IVNodeHash";
-import { IFrame } from "../state/interfaces/IFrame";
-import { ComponentSize } from "./utils/ComponentSize";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
-import { isSpherical } from "../geo/Geo";
+import * as Geo from "../../geo/Geo";
+
+import { Component } from "../Component";
+import { BearingConfiguration } from "../interfaces/BearingConfiguration";
+
+import { Spatial } from "../../geo/Spatial";
+import { Transform } from "../../geo/Transform";
+import { ViewportCoords } from "../../geo/ViewportCoords";
+import { Node } from "../../graph/Node";
+import { RenderCamera } from "../../render/RenderCamera";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
+import { ComponentSize } from "../utils/ComponentSize";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
+import { isSpherical } from "../../geo/Geo";
 
 type NodeFov = [number, number];
 
@@ -45,7 +45,7 @@ type NodeFovState = {
     prev: NodeFov,
 };
 
-interface INodeFovOperation {
+interface NodeFovOperation {
     (state: NodeFovState): NodeFovState;
 }
 
@@ -56,16 +56,12 @@ interface INodeFovOperation {
  *
  * @example
  * ```
- * var viewer = new Mapillary.Viewer(
- *     "<element-id>",
- *     "<client-id>",
- *     "<my key>");
- *
+ * var viewer = new Mapillary.Viewer({ ... });
  * var bearingComponent = viewer.getComponent("bearing");
  * bearingComponent.configure({ size: Mapillary.ComponentSize.Small });
  * ```
  */
-export class BearingComponent extends Component<IBearingConfiguration> {
+export class BearingComponent extends Component<BearingConfiguration> {
     public static componentName: string = "bearing";
 
     private _spatial: Spatial;
@@ -115,17 +111,17 @@ export class BearingComponent extends Component<IBearingConfiguration> {
             this._navigator.stateService.currentState$.pipe(
                 distinctUntilChanged(
                     undefined,
-                    (frame: IFrame): string => {
-                        return frame.state.currentNode.key;
+                    (frame: AnimationFrame): string => {
+                        return frame.state.currentNode.id;
                     })),
             this._navigator.panService.panNodes$).pipe(
                 map(
-                    ([frame, panNodes]: [IFrame, [Node, Transform, number][]]): NodeFov => {
+                    ([frame, panNodes]: [AnimationFrame, [Node, Transform, number][]]): NodeFov => {
                         const node: Node = frame.state.currentNode;
                         const transform: Transform = frame.state.currentTransform;
 
                         if (isSpherical(node.cameraType)) {
-                            return [Math.PI / 2, Math.PI / 2];
+                            return [Math.PI, Math.PI];
                         }
 
                         const currentProjectedPoints: number[][] = this._computeProjectedPoints(transform);
@@ -135,7 +131,7 @@ export class BearingComponent extends Component<IBearingConfiguration> {
                         let hFovRight: number = hFov / 2;
 
                         for (const [n, , f] of panNodes) {
-                            const diff: number = this._spatial.wrap(n.ca - node.ca, -180, 180);
+                            const diff: number = this._spatial.wrap(n.compassAngle - node.compassAngle, -180, 180);
                             if (diff < 0) {
                                 hFovLeft = this._spatial.degToRad(Math.abs(diff)) + f / 2;
                             } else {
@@ -158,22 +154,22 @@ export class BearingComponent extends Component<IBearingConfiguration> {
             this._navigator.stateService.currentState$.pipe(
                 distinctUntilChanged(
                     undefined,
-                    (frame: IFrame): string => {
-                        return frame.state.currentNode.key;
+                    (frame: AnimationFrame): string => {
+                        return frame.state.currentNode.id;
                     })),
             this._container.renderService.bearing$).pipe(
                 map(
-                    ([frame, bearing]: [IFrame, number]): number => {
-                        const offset: number = this._spatial.degToRad(frame.state.currentNode.ca - bearing);
+                    ([frame, bearing]: [AnimationFrame, number]): number => {
+                        const offset: number = this._spatial.degToRad(frame.state.currentNode.compassAngle - bearing);
 
                         return offset;
                     }));
 
-        const nodeFovOperation$: Subject<INodeFovOperation> = new Subject<INodeFovOperation>();
+        const nodeFovOperation$: Subject<NodeFovOperation> = new Subject<NodeFovOperation>();
 
         const smoothNodeFov$: Observable<NodeFov> = nodeFovOperation$.pipe(
             scan(
-                (state: NodeFovState, operation: INodeFovOperation): NodeFovState => {
+                (state: NodeFovState, operation: NodeFovOperation): NodeFovState => {
                     return operation(state);
                 },
                 { alpha: 0, curr: [0, 0, 0], prev: [0, 0, 0] }),
@@ -191,7 +187,7 @@ export class BearingComponent extends Component<IBearingConfiguration> {
 
         this._fovSubscription = nodeFov$.pipe(
             map(
-                (nbf: NodeFov): INodeFovOperation => {
+                (nbf: NodeFov): NodeFovOperation => {
                     return (state: NodeFovState): NodeFovState => {
                         const a: number = this._unitBezier.solve(state.alpha);
                         const c: NodeFov = state.curr;
@@ -233,7 +229,7 @@ export class BearingComponent extends Component<IBearingConfiguration> {
                             }));
                 }),
             map(
-                (alpha: number): INodeFovOperation => {
+                (alpha: number): NodeFovOperation => {
                     return (nbfState: NodeFovState): NodeFovState => {
                         return {
                             alpha: alpha,
@@ -259,7 +255,7 @@ export class BearingComponent extends Component<IBearingConfiguration> {
             this._container.renderService.size$).pipe(
                 map(
                     ([[cb, cf], [no, nfl, nfr], configuration, size]:
-                        [[number, number], [number, number, number], IBearingConfiguration, ISize]): IVNodeHash => {
+                        [[number, number], [number, number, number], BearingConfiguration, ViewportSize]): VirtualNodeHash => {
 
                         const background: vd.VNode = this._createBackground(cb);
                         const fovIndicator: vd.VNode = this._createFovIndicator(nfl, nfr, no);
@@ -293,7 +289,7 @@ export class BearingComponent extends Component<IBearingConfiguration> {
         this._fovAnimationSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IBearingConfiguration {
+    protected _getDefaultConfiguration(): BearingConfiguration {
         return { size: ComponentSize.Automatic };
     }
 
diff --git a/src/component/CacheComponent.ts b/src/component/cache/CacheComponent.ts
similarity index 62%
rename from src/component/CacheComponent.ts
rename to src/component/cache/CacheComponent.ts
index 757f97888..5db1d9d29 100644
--- a/src/component/CacheComponent.ts
+++ b/src/component/cache/CacheComponent.ts
@@ -21,20 +21,20 @@ import {
     switchMap,
 } from "rxjs/operators";
 
-import { Component } from "./Component";
-import { ICacheConfiguration, ICacheDepth } from "./interfaces/ICacheConfiguration";
+import { Component } from "../Component";
+import { CacheConfiguration, CacheDepthConfiguration } from "../interfaces/CacheConfiguration";
 
-import { Node } from "../graph/Node";
-import { IEdge } from "../graph/edge/interfaces/IEdge";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
-import { EdgeDirection } from "../graph/edge/EdgeDirection";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
-import { isSpherical } from "../geo/Geo";
+import { Node } from "../../graph/Node";
+import { NavigationEdge } from "../../graph/edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
+import { isSpherical } from "../../geo/Geo";
 
-type EdgesDepth = [IEdge[], number];
+type EdgesDepth = [NavigationEdge[], number];
 
-export class CacheComponent extends Component<ICacheConfiguration> {
+export class CacheComponent extends Component<CacheConfiguration> {
     public static componentName: string = "cache";
 
     private _sequenceSubscription: Subscription;
@@ -50,9 +50,9 @@ export class CacheComponent extends Component<ICacheConfiguration> {
      * Configures the cache depth. The cache depth can be different for
      * different edge direction types.
      *
-     * @param {ICacheDepth} depth - Cache depth structure.
+     * @param {CacheDepthConfiguration} depth - Cache depth structure.
      */
-    public setDepth(depth: ICacheDepth): void {
+    public setDepth(depth: CacheDepthConfiguration): void {
         this.configure({ depth: depth });
     }
 
@@ -60,23 +60,23 @@ export class CacheComponent extends Component<ICacheConfiguration> {
         this._sequenceSubscription = observableCombineLatest(
             this._navigator.stateService.currentNode$.pipe(
                 switchMap(
-                    (node: Node): Observable<IEdgeStatus> => {
+                    (node: Node): Observable<NavigationEdgeStatus> => {
                         return node.sequenceEdges$;
                     }),
                 filter(
-                    (status: IEdgeStatus): boolean => {
+                    (status: NavigationEdgeStatus): boolean => {
                         return status.cached;
                     })),
             this._configuration$).pipe(
                 switchMap(
-                    (nc: [IEdgeStatus, ICacheConfiguration]): Observable<EdgesDepth> => {
-                        let status: IEdgeStatus = nc[0];
-                        let configuration: ICacheConfiguration = nc[1];
+                    (nc: [NavigationEdgeStatus, CacheConfiguration]): Observable<EdgesDepth> => {
+                        let status: NavigationEdgeStatus = nc[0];
+                        let configuration: CacheConfiguration = nc[1];
 
                         let sequenceDepth = Math.max(0, Math.min(4, configuration.depth.sequence));
 
-                        let next$ = this._cache$(status.edges, EdgeDirection.Next, sequenceDepth);
-                        let prev$ = this._cache$(status.edges, EdgeDirection.Prev, sequenceDepth);
+                        let next$ = this._cache$(status.edges, NavigationDirection.Next, sequenceDepth);
+                        let prev$ = this._cache$(status.edges, NavigationDirection.Prev, sequenceDepth);
 
                         return observableMerge<EdgesDepth>(
                             next$,
@@ -93,20 +93,20 @@ export class CacheComponent extends Component<ICacheConfiguration> {
         this._spatialSubscription = observableCombineLatest(
             this._navigator.stateService.currentNode$.pipe(
                 switchMap(
-                    (node: Node): Observable<[Node, IEdgeStatus]> => {
+                    (node: Node): Observable<[Node, NavigationEdgeStatus]> => {
                         return observableCombineLatest(
                             observableOf<Node>(node),
                             node.spatialEdges$.pipe(
                                 filter(
-                                    (status: IEdgeStatus): boolean => {
+                                    (status: NavigationEdgeStatus): boolean => {
                                         return status.cached;
                                     })));
                     })),
             this._configuration$).pipe(
                 switchMap(
-                    ([[node, edgeStatus], configuration]: [[Node, IEdgeStatus], ICacheConfiguration]): Observable<EdgesDepth> => {
-                        let edges: IEdge[] = edgeStatus.edges;
-                        let depth: ICacheDepth = configuration.depth;
+                    ([[node, edgeStatus], configuration]: [[Node, NavigationEdgeStatus], CacheConfiguration]): Observable<EdgesDepth> => {
+                        let edges: NavigationEdge[] = edgeStatus.edges;
+                        let depth: CacheDepthConfiguration = configuration.depth;
 
                         let sphericalDepth =
                             Math.max(0, Math.min(2, depth.spherical));
@@ -115,16 +115,16 @@ export class CacheComponent extends Component<ICacheConfiguration> {
                         let turnDepth = isSpherical(node.cameraType) ?
                             0 : Math.max(0, Math.min(1, depth.turn));
 
-                        let spherical$ = this._cache$(edges, EdgeDirection.Spherical, sphericalDepth);
+                        let spherical$ = this._cache$(edges, NavigationDirection.Spherical, sphericalDepth);
 
-                        let forward$ = this._cache$(edges, EdgeDirection.StepForward, stepDepth);
-                        let backward$ = this._cache$(edges, EdgeDirection.StepBackward, stepDepth);
-                        let left$ = this._cache$(edges, EdgeDirection.StepLeft, stepDepth);
-                        let right$ = this._cache$(edges, EdgeDirection.StepRight, stepDepth);
+                        let forward$ = this._cache$(edges, NavigationDirection.StepForward, stepDepth);
+                        let backward$ = this._cache$(edges, NavigationDirection.StepBackward, stepDepth);
+                        let left$ = this._cache$(edges, NavigationDirection.StepLeft, stepDepth);
+                        let right$ = this._cache$(edges, NavigationDirection.StepRight, stepDepth);
 
-                        let turnLeft$ = this._cache$(edges, EdgeDirection.TurnLeft, turnDepth);
-                        let turnRight$ = this._cache$(edges, EdgeDirection.TurnRight, turnDepth);
-                        let turnU$ = this._cache$(edges, EdgeDirection.TurnU, turnDepth);
+                        let turnLeft$ = this._cache$(edges, NavigationDirection.TurnLeft, turnDepth);
+                        let turnRight$ = this._cache$(edges, NavigationDirection.TurnRight, turnDepth);
+                        let turnU$ = this._cache$(edges, NavigationDirection.TurnU, turnDepth);
 
                         return observableMerge<EdgesDepth>(
                             forward$,
@@ -150,17 +150,17 @@ export class CacheComponent extends Component<ICacheConfiguration> {
         this._spatialSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): ICacheConfiguration {
+    protected _getDefaultConfiguration(): CacheConfiguration {
         return { depth: { spherical: 1, sequence: 2, step: 1, turn: 0 } };
     }
 
-    private _cache$(edges: IEdge[], direction: EdgeDirection, depth: number): Observable<EdgesDepth> {
+    private _cache$(edges: NavigationEdge[], direction: NavigationDirection, depth: number): Observable<EdgesDepth> {
         return observableZip(
-            observableOf<IEdge[]>(edges),
+            observableOf<NavigationEdge[]>(edges),
             observableOf<number>(depth)).pipe(
                 expand(
                     (ed: EdgesDepth): Observable<EdgesDepth> => {
-                        let es: IEdge[] = ed[0];
+                        let es: NavigationEdge[] = ed[0];
                         let d = ed[1];
 
                         let edgesDepths$: Observable<EdgesDepth>[] = [];
@@ -170,9 +170,9 @@ export class CacheComponent extends Component<ICacheConfiguration> {
                                 if (edge.data.direction === direction) {
                                     edgesDepths$.push(
                                         observableZip(
-                                            this._navigator.graphService.cacheNode$(edge.to).pipe(
+                                            this._navigator.graphService.cacheNode$(edge.target).pipe(
                                                 mergeMap(
-                                                    (n: Node): Observable<IEdge[]> => {
+                                                    (n: Node): Observable<NavigationEdge[]> => {
                                                         return this._nodeToEdges$(n, direction);
                                                     })),
                                             observableOf<number>(d - 1)));
@@ -186,16 +186,16 @@ export class CacheComponent extends Component<ICacheConfiguration> {
                 skip(1));
     }
 
-    private _nodeToEdges$(node: Node, direction: EdgeDirection): Observable<IEdge[]> {
-        return ([EdgeDirection.Next, EdgeDirection.Prev].indexOf(direction) > -1 ?
+    private _nodeToEdges$(node: Node, direction: NavigationDirection): Observable<NavigationEdge[]> {
+        return ([NavigationDirection.Next, NavigationDirection.Prev].indexOf(direction) > -1 ?
             node.sequenceEdges$ :
             node.spatialEdges$).pipe(
                 first(
-                    (status: IEdgeStatus): boolean => {
+                    (status: NavigationEdgeStatus): boolean => {
                         return status.cached;
                     }),
                 map(
-                    (status: IEdgeStatus): IEdge[] => {
+                    (status: NavigationEdgeStatus): NavigationEdge[] => {
                         return status.edges;
                     }));
     }
diff --git a/src/component/CoverComponent.ts b/src/component/cover/CoverComponent.ts
similarity index 63%
rename from src/component/CoverComponent.ts
rename to src/component/cover/CoverComponent.ts
index afd03c349..0459a951f 100644
--- a/src/component/CoverComponent.ts
+++ b/src/component/cover/CoverComponent.ts
@@ -20,19 +20,20 @@ import {
     switchMap,
 } from "rxjs/operators";
 
-import { Component } from "./Component";
-import { CoverState, ICoverConfiguration } from "./interfaces/ICoverConfiguration";
-
-import { IFullNode } from "../api/interfaces/IFullNode";
-import { MapillaryError } from "../error/MapillaryError";
-import { Node } from "../graph/Node";
-import { ISize } from "../render/interfaces/ISize";
-import { IVNodeHash } from "../render/interfaces/IVNodeHash";
-import { Urls } from "../utils/Urls";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
-
-export class CoverComponent extends Component<ICoverConfiguration> {
+import { Component } from "../Component";
+import { CoverConfiguration } from "../interfaces/CoverConfiguration";
+
+import { MapillaryError } from "../../error/MapillaryError";
+import { Node } from "../../graph/Node";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
+import { Urls } from "../../utils/Urls";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
+import { ImagesContract } from "../../api/contracts/ImagesContract";
+import { CoverState } from "./CoverState";
+
+export class CoverComponent extends Component<CoverConfiguration> {
     public static componentName: string = "cover";
 
     private _renderSubscription: Subscription;
@@ -47,16 +48,16 @@ export class CoverComponent extends Component<ICoverConfiguration> {
     protected _activate(): void {
         const originalSrc$: Observable<string> = this.configuration$.pipe(
             first(
-                (c: ICoverConfiguration): boolean => {
-                    return !!c.key;
+                (c: CoverConfiguration): boolean => {
+                    return !!c.id;
                 }),
             filter(
-                (c: ICoverConfiguration): boolean => {
+                (c: CoverConfiguration): boolean => {
                     return !c.src;
                 }),
             switchMap(
-                (c: ICoverConfiguration): Observable<string> => {
-                    return this._getImageSrc$(c.key).pipe(
+                (c: CoverConfiguration): Observable<string> => {
+                    return this._getImageSrc$(c.id).pipe(
                         catchError(
                             (error: Error): Observable<string> => {
                                 console.error(error);
@@ -69,11 +70,11 @@ export class CoverComponent extends Component<ICoverConfiguration> {
 
         this._configureSrcSubscription = originalSrc$.pipe(
             map(
-                (src: string): ICoverConfiguration => {
+                (src: string): CoverConfiguration => {
                     return { src: src };
                 }))
             .subscribe(
-                (c: ICoverConfiguration): void => {
+                (c: CoverConfiguration): void => {
                     this._configurationSubject$.next(c);
                 });
 
@@ -81,23 +82,23 @@ export class CoverComponent extends Component<ICoverConfiguration> {
             this.configuration$,
             originalSrc$).pipe(
                 filter(
-                    ([c, src]: [ICoverConfiguration, string]): boolean => {
+                    ([c, src]: [CoverConfiguration, string]): boolean => {
                         return !!c.src && c.src !== src;
                     }),
                 first())
             .subscribe(
-                ([, src]: [ICoverConfiguration, string]): void => {
+                ([, src]: [CoverConfiguration, string]): void => {
                     window.URL.revokeObjectURL(src);
                 });
 
         this._keySubscription = this._configuration$.pipe(
             distinctUntilChanged(
                 undefined,
-                (configuration: ICoverConfiguration): CoverState => {
+                (configuration: CoverConfiguration): CoverState => {
                     return configuration.state;
                 }),
             switchMap(
-                (configuration: ICoverConfiguration): Observable<[CoverState, Node]> => {
+                (configuration: CoverConfiguration): Observable<[CoverState, Node]> => {
                     return observableCombineLatest(
                         observableOf(configuration.state),
                         this._navigator.stateService.currentNode$);
@@ -105,7 +106,7 @@ export class CoverComponent extends Component<ICoverConfiguration> {
             switchMap(
                 ([state, node]: [CoverState, Node]): Observable<[string, string]> => {
                     const keySrc$: Observable<[string, string]> = observableCombineLatest(
-                        observableOf(node.key),
+                        observableOf(node.id),
                         node.image$.pipe(
                             filter(
                                 (image: HTMLImageElement): boolean => {
@@ -123,8 +124,8 @@ export class CoverComponent extends Component<ICoverConfiguration> {
                     return k1 === k2 && s1 === s2;
                 }),
             map(
-                ([key, src]: [string, string]): ICoverConfiguration => {
-                    return { key: key, src: src };
+                ([key, src]: [string, string]): CoverConfiguration => {
+                    return { id: key, src: src };
                 }))
             .subscribe(this._configurationSubject$);
 
@@ -132,7 +133,7 @@ export class CoverComponent extends Component<ICoverConfiguration> {
             this._configuration$,
             this._container.renderService.size$).pipe(
                 map(
-                    ([configuration, size]: [ICoverConfiguration, ISize]): IVNodeHash => {
+                    ([configuration, size]: [CoverConfiguration, ViewportSize]): VirtualNodeHash => {
                         if (!configuration.src) {
                             return { name: this._name, vnode: vd.h("div", []) };
                         }
@@ -163,11 +164,11 @@ export class CoverComponent extends Component<ICoverConfiguration> {
         this._revokeUrlSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): ICoverConfiguration {
+    protected _getDefaultConfiguration(): CoverConfiguration {
         return { state: CoverState.Visible };
     }
 
-    private _getCoverButtonVNode(configuration: ICoverConfiguration): vd.VNode {
+    private _getCoverButtonVNode(configuration: CoverConfiguration): vd.VNode {
         const cover: string = configuration.state === CoverState.Loading ? "div.mapillary-cover.mapillary-cover-loading" : "div.mapillary-cover";
         const coverButton: vd.VNode = vd.h(
             "div.mapillary-cover-button",
@@ -189,7 +190,7 @@ export class CoverComponent extends Component<ICoverConfiguration> {
             ]);
     }
 
-    private _getCoverBackgroundVNode(conf: ICoverConfiguration): vd.VNode {
+    private _getCoverBackgroundVNode(conf: CoverConfiguration): vd.VNode {
         const properties: vd.createProperties = {
             style: { backgroundImage: `url(${conf.src})` },
         };
@@ -202,39 +203,48 @@ export class CoverComponent extends Component<ICoverConfiguration> {
         return vd.h("div.mapillary-cover-background", properties, children);
     }
 
-    private _getImageSrc$(key: string): Observable<string> {
+    private _getImageSrc$(id: string): Observable<string> {
         return Observable.create(
             (subscriber: Subscriber<string>): void => {
-                this._navigator.api.imageByKeyFull$([key])
+                this._navigator.api.getImages$([id])
                     .subscribe(
-                        (fullNodes: { [key: string]: IFullNode; }): void => {
-                            if (!fullNodes[key]) {
-                                subscriber.error(new MapillaryError(`Non existent cover key: ${key}`));
+                        (items: ImagesContract): void => {
+                            for (const item of items) {
+                                if (item.node_id !== id) {
+                                    continue;
+                                }
+
+                                this._navigator.api.data
+                                    .getImageBuffer(item.node.thumb.url)
+                                    .then(
+                                        (buffer: ArrayBuffer): void => {
+                                            const image = new Image();
+                                            image.crossOrigin = "Anonymous";
+
+                                            image.onload = () => {
+                                                subscriber.next(image.src);
+                                                subscriber.complete();
+                                            };
+
+                                            image.onerror = () => {
+                                                subscriber.error(new Error(
+                                                    `Failed to load cover ` +
+                                                    `image (${id})`));
+                                            };
+
+                                            const blob = new Blob([buffer]);
+                                            image.src = window.URL
+                                                .createObjectURL(blob);
+                                        },
+                                        (error: Error): void => {
+                                            subscriber.error(error);
+                                        });
                                 return;
                             }
 
-                            this._navigator.api.data
-                                .getImage(fullNodes[key].thumb640_url)
-                                .then(
-                                    (buffer: ArrayBuffer): void => {
-                                        const image: HTMLImageElement = new Image();
-                                        image.crossOrigin = "Anonymous";
-
-                                        image.onload = () => {
-                                            subscriber.next(image.src);
-                                            subscriber.complete();
-                                        };
-
-                                        image.onerror = () => {
-                                            subscriber.error(new Error(`Failed to load cover image (${key})`));
-                                        };
-
-                                        const blob: Blob = new Blob([buffer]);
-                                        image.src = window.URL.createObjectURL(blob);
-                                    },
-                                    (error: Error): void => {
-                                        subscriber.error(error);
-                                    });
+                            subscriber.error(
+                                new MapillaryError(
+                                    `Non existent cover key: ${id}`));
                         },
                         (error: Error): void => {
                             subscriber.error(error);
diff --git a/src/component/cover/CoverState.ts b/src/component/cover/CoverState.ts
new file mode 100644
index 000000000..7c24e73bd
--- /dev/null
+++ b/src/component/cover/CoverState.ts
@@ -0,0 +1,5 @@
+export enum CoverState {
+    Hidden,
+    Loading,
+    Visible,
+}
diff --git a/src/component/direction/DirectionComponent.ts b/src/component/direction/DirectionComponent.ts
index 781d9fb5d..483331162 100644
--- a/src/component/direction/DirectionComponent.ts
+++ b/src/component/direction/DirectionComponent.ts
@@ -25,42 +25,42 @@ import { Component } from "../Component";
 import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
 import { Sequence } from "../../graph/Sequence";
-import { ISize } from "../../render/interfaces/ISize";
-import { IVNodeHash } from "../../render/interfaces/IVNodeHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IDirectionConfiguration } from "../interfaces/IDirectionConfiguration";
+import { DirectionConfiguration } from "../interfaces/DirectionConfiguration";
 import { DirectionDOMRenderer } from "./DirectionDOMRenderer";
 
 /**
  * @class DirectionComponent
  * @classdesc Component showing navigation arrows for steps and turns.
  */
-export class DirectionComponent extends Component<IDirectionConfiguration> {
+export class DirectionComponent extends Component<DirectionConfiguration> {
     /** @inheritdoc */
     public static componentName: string = "direction";
 
     /**
-     * Event fired when the hovered key changes.
+     * Event fired when the hovered id changes.
      *
-     * @description Emits the key of the node for the direction
+     * @description Emits the id of the node for the direction
      * arrow that is being hovered. When the mouse leaves a
      * direction arrow null is emitted.
      *
-     * @event DirectionComponent#hoveredkeychanged
-     * @type {string} The hovered key, null if no key is hovered.
+     * @event DirectionComponent#hoveredidchanged
+     * @type {string} The hovered id, null if no id is hovered.
      */
-    public static hoveredkeychanged: string = "hoveredkeychanged";
+    public static hoveredidchanged: string = "hoveredidchanged";
 
     private _renderer: DirectionDOMRenderer;
 
-    private _hoveredKeySubject$: Subject<string>;
-    private _hoveredKey$: Observable<string>;
+    private _hoveredIdSubject$: Subject<string>;
+    private _hoveredId$: Observable<string>;
 
     private _configurationSubscription: Subscription;
-    private _emitHoveredKeySubscription: Subscription;
-    private _hoveredKeySubscription: Subscription;
+    private _emitHoveredIdSubscription: Subscription;
+    private _hoveredIdSubscription: Subscription;
     private _nodeSubscription: Subscription;
     private _renderCameraSubscription: Subscription;
     private _resizeSubscription: Subscription;
@@ -74,35 +74,35 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                 this.defaultConfiguration,
                 { height: container.container.offsetHeight, width: container.container.offsetWidth });
 
-        this._hoveredKeySubject$ = new Subject<string>();
+        this._hoveredIdSubject$ = new Subject<string>();
 
-        this._hoveredKey$ = this._hoveredKeySubject$.pipe(share());
+        this._hoveredId$ = this._hoveredIdSubject$.pipe(share());
     }
 
     /**
-     * Get hovered key observable.
+     * Get hovered id observable.
      *
-     * @description An observable emitting the key of the node for the direction
+     * @description An observable emitting the id of the node for the direction
      * arrow that is being hovered. When the mouse leaves a direction arrow null
      * is emitted.
      *
      * @returns {Observable<string>}
      */
-    public get hoveredKey$(): Observable<string> {
-        return this._hoveredKey$;
+    public get hoveredId$(): Observable<string> {
+        return this._hoveredId$;
     }
 
     /**
-     * Set highlight key.
+     * Set highlight id.
      *
      * @description The arrow pointing towards the node corresponding to the
-     * highlight key will be highlighted.
+     * highlight id will be highlighted.
      *
-     * @param {string} highlightKey Key of node to be highlighted if existing
+     * @param {string} highlightId id of node to be highlighted if existing
      * among arrows.
      */
-    public setHighlightKey(highlightKey: string): void {
-        this.configure({ highlightKey: highlightKey });
+    public setHighlightId(highlightId: string): void {
+        this.configure({ highlightId: highlightId });
     }
 
     /**
@@ -140,13 +140,13 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
     protected _activate(): void {
         this._configurationSubscription = this._configuration$
             .subscribe(
-                (configuration: IDirectionConfiguration): void => {
+                (configuration: DirectionConfiguration): void => {
                     this._renderer.setConfiguration(configuration);
                 });
 
         this._resizeSubscription = this._container.renderService.size$
             .subscribe(
-                (size: ISize): void => {
+                (size: ViewportSize): void => {
                     this._renderer.resize(size);
                 });
 
@@ -158,22 +158,22 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                 }),
             withLatestFrom(this._configuration$),
             switchMap(
-                ([node, configuration]: [Node, IDirectionConfiguration]): Observable<[IEdgeStatus, Sequence]> => {
+                ([node, configuration]: [Node, DirectionConfiguration]): Observable<[NavigationEdgeStatus, Sequence]> => {
                     return observableCombineLatest(
                         node.spatialEdges$,
                         configuration.distinguishSequence ?
                             this._navigator.graphService
-                                .cacheSequence$(node.sequenceKey).pipe(
+                                .cacheSequence$(node.sequenceId).pipe(
                                     catchError(
                                         (error: Error): Observable<Sequence> => {
-                                            console.error(`Failed to cache sequence (${node.sequenceKey})`, error);
+                                            console.error(`Failed to cache sequence (${node.sequenceId})`, error);
 
                                             return observableOf<Sequence>(null);
                                         })) :
                             observableOf<Sequence>(null));
                 }))
             .subscribe(
-                ([edgeStatus, sequence]: [IEdgeStatus, Sequence]): void => {
+                ([edgeStatus, sequence]: [NavigationEdgeStatus, Sequence]): void => {
                     this._renderer.setEdges(edgeStatus, sequence);
                 });
 
@@ -191,12 +191,12 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                     return renderer.needsRender;
                 }),
             map(
-                (renderer: DirectionDOMRenderer): IVNodeHash => {
+                (renderer: DirectionDOMRenderer): VirtualNodeHash => {
                     return { name: this._name, vnode: renderer.render(this._navigator) };
                 }))
             .subscribe(this._container.domRenderer.render$);
 
-        this._hoveredKeySubscription = observableCombineLatest(
+        this._hoveredIdSubscription = observableCombineLatest(
             this._container.domRenderer.element$,
             this._container.renderService.renderCamera$,
             this._container.mouseService.mouseMove$.pipe(startWith(null)),
@@ -209,33 +209,33 @@ export class DirectionComponent extends Component<IDirectionConfiguration> {
                         for (let i: number = 0; i < elements.length; i++) {
                             let hovered: Element = elements.item(i).querySelector(":hover");
 
-                            if (hovered != null && hovered.hasAttribute("data-key")) {
-                                return hovered.getAttribute("data-key");
+                            if (hovered != null && hovered.hasAttribute("data-id")) {
+                                return hovered.getAttribute("data-id");
                             }
                         }
 
                         return null;
                     }),
                 distinctUntilChanged())
-            .subscribe(this._hoveredKeySubject$);
+            .subscribe(this._hoveredIdSubject$);
 
-        this._emitHoveredKeySubscription = this._hoveredKey$
+        this._emitHoveredIdSubscription = this._hoveredId$
             .subscribe(
-                (key: string): void => {
-                    this.fire(DirectionComponent.hoveredkeychanged, key);
+                (id: string): void => {
+                    this.fire(DirectionComponent.hoveredidchanged, id);
                 });
     }
 
     protected _deactivate(): void {
         this._configurationSubscription.unsubscribe();
-        this._emitHoveredKeySubscription.unsubscribe();
-        this._hoveredKeySubscription.unsubscribe();
+        this._emitHoveredIdSubscription.unsubscribe();
+        this._hoveredIdSubscription.unsubscribe();
         this._nodeSubscription.unsubscribe();
         this._renderCameraSubscription.unsubscribe();
         this._resizeSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IDirectionConfiguration {
+    protected _getDefaultConfiguration(): DirectionConfiguration {
         return {
             distinguishSequence: false,
             maxWidth: 460,
diff --git a/src/component/direction/DirectionDOMCalculator.ts b/src/component/direction/DirectionDOMCalculator.ts
index 7cb2286d6..41004a060 100644
--- a/src/component/direction/DirectionDOMCalculator.ts
+++ b/src/component/direction/DirectionDOMCalculator.ts
@@ -1,6 +1,6 @@
 import { Spatial } from "../../geo/Spatial";
-import { ISize } from "../../render/interfaces/ISize";
-import { IDirectionConfiguration } from "../interfaces/IDirectionConfiguration";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { DirectionConfiguration } from "../interfaces/DirectionConfiguration";
 
 /**
  * @class DirectionDOMCalculator
@@ -40,7 +40,7 @@ export class DirectionDOMCalculator {
 
     private _shadowOffset: number;
 
-    constructor(configuration: IDirectionConfiguration, size: ISize) {
+    constructor(configuration: DirectionConfiguration, size: ViewportSize) {
         this._spatial = new Spatial();
 
         this._minThresholdWidth = 320;
@@ -124,10 +124,10 @@ export class DirectionDOMCalculator {
     /**
      * Configures the min and max width values.
      *
-     * @param {IDirectionConfiguration} configuration Configuration
+     * @param {DirectionConfiguration} configuration Configuration
      * with min and max width values.
      */
-    public configure(configuration: IDirectionConfiguration): void {
+    public configure(configuration: DirectionConfiguration): void {
         this._configure(configuration);
         this._reset();
     }
@@ -136,9 +136,9 @@ export class DirectionDOMCalculator {
      * Resizes all properties according to the width and height
      * of the size object.
      *
-     * @param {ISize} size The size of the container element.
+     * @param {ViewportSize} size The size of the container element.
      */
-    public resize(size: ISize): void {
+    public resize(size: ViewportSize): void {
         this._resize(size);
         this._reset();
     }
@@ -168,12 +168,12 @@ export class DirectionDOMCalculator {
         return this.angleToCoordinates(relativeAngle);
     }
 
-    private _configure(configuration: IDirectionConfiguration): void {
+    private _configure(configuration: DirectionConfiguration): void {
         this._minWidth = configuration.minWidth;
         this._maxWidth = this._getMaxWidth(configuration.minWidth, configuration.maxWidth);
     }
 
-    private _resize(size: ISize): void {
+    private _resize(size: ViewportSize): void {
         this._elementWidth = size.width;
         this._elementHeight = size.height;
     }
diff --git a/src/component/direction/DirectionDOMRenderer.ts b/src/component/direction/DirectionDOMRenderer.ts
index 72c791032..dcc758562 100644
--- a/src/component/direction/DirectionDOMRenderer.ts
+++ b/src/component/direction/DirectionDOMRenderer.ts
@@ -4,14 +4,14 @@ import { AbortMapillaryError } from "../../error/AbortMapillaryError";
 import { Spatial } from "../../geo/Spatial";
 import { Node } from "../../graph/Node";
 import { Navigator } from "../../viewer/Navigator";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
-import { IEdge } from "../../graph/edge/interfaces/IEdge";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../graph/edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
 import { Sequence } from "../../graph/Sequence";
-import { ISize } from "../../render/interfaces/ISize";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IRotation } from "../../state/interfaces/IRotation";
-import { IDirectionConfiguration } from "../interfaces/IDirectionConfiguration";
+import { EulerRotation } from "../../state/interfaces/EulerRotation";
+import { DirectionConfiguration } from "../interfaces/DirectionConfiguration";
 import { DirectionDOMCalculator } from "./DirectionDOMCalculator";
 import { isSpherical } from "../../geo/Geo";
 
@@ -25,7 +25,7 @@ export class DirectionDOMRenderer {
 
     private _node: Node;
 
-    private _rotation: IRotation;
+    private _rotation: EulerRotation;
     private _epsilon: number;
 
     private _highlightKey: string;
@@ -33,18 +33,18 @@ export class DirectionDOMRenderer {
 
     private _needsRender: boolean;
 
-    private _stepEdges: IEdge[];
-    private _turnEdges: IEdge[];
-    private _sphericalEdges: IEdge[];
+    private _stepEdges: NavigationEdge[];
+    private _turnEdges: NavigationEdge[];
+    private _sphericalEdges: NavigationEdge[];
     private _sequenceEdgeKeys: string[];
 
-    private _stepDirections: EdgeDirection[];
-    private _turnDirections: EdgeDirection[];
+    private _stepDirections: NavigationDirection[];
+    private _turnDirections: NavigationDirection[];
     private _turnNames: { [dir: number]: string };
 
     private _isEdge: boolean = false;
 
-    constructor(configuration: IDirectionConfiguration, size: ISize) {
+    constructor(configuration: DirectionConfiguration, size: ViewportSize) {
         this._spatial = new Spatial();
         this._calculator = new DirectionDOMCalculator(configuration, size);
 
@@ -64,22 +64,22 @@ export class DirectionDOMRenderer {
         this._sequenceEdgeKeys = [];
 
         this._stepDirections = [
-            EdgeDirection.StepForward,
-            EdgeDirection.StepBackward,
-            EdgeDirection.StepLeft,
-            EdgeDirection.StepRight,
+            NavigationDirection.StepForward,
+            NavigationDirection.StepBackward,
+            NavigationDirection.StepLeft,
+            NavigationDirection.StepRight,
         ];
 
         this._turnDirections = [
-            EdgeDirection.TurnLeft,
-            EdgeDirection.TurnRight,
-            EdgeDirection.TurnU,
+            NavigationDirection.TurnLeft,
+            NavigationDirection.TurnRight,
+            NavigationDirection.TurnU,
         ];
 
         this._turnNames = {};
-        this._turnNames[EdgeDirection.TurnLeft] = "mapillary-direction-turn-left";
-        this._turnNames[EdgeDirection.TurnRight] = "mapillary-direction-turn-right";
-        this._turnNames[EdgeDirection.TurnU] = "mapillary-direction-turn-around";
+        this._turnNames[NavigationDirection.TurnLeft] = "mapillary-direction-turn-left";
+        this._turnNames[NavigationDirection.TurnRight] = "mapillary-direction-turn-right";
+        this._turnNames[NavigationDirection.TurnU] = "mapillary-direction-turn-around";
 
         // detects IE 8-11, then Edge 20+.
         let isIE: boolean = !!(<any>document).documentMode;
@@ -103,7 +103,7 @@ export class DirectionDOMRenderer {
     public render(navigator: Navigator): vd.VNode {
         this._needsRender = false;
 
-        let rotation: IRotation = this._rotation;
+        let rotation: EulerRotation = this._rotation;
 
         let steps: vd.VNode[] = [];
         let turns: vd.VNode[] = [];
@@ -120,7 +120,7 @@ export class DirectionDOMRenderer {
         return this._getContainer(steps, turns, rotation);
     }
 
-    public setEdges(edgeStatus: IEdgeStatus, sequence: Sequence): void {
+    public setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void {
         this._setEdges(edgeStatus, sequence);
 
         this._setNeedsRender();
@@ -144,7 +144,7 @@ export class DirectionDOMRenderer {
      * @param {RenderCamera} renderCamera
      */
     public setRenderCamera(renderCamera: RenderCamera): void {
-        let rotation: IRotation = renderCamera.rotation;
+        let rotation: EulerRotation = renderCamera.rotation;
 
         if (Math.abs(rotation.phi - this._rotation.phi) < this._epsilon) {
             return;
@@ -158,13 +158,13 @@ export class DirectionDOMRenderer {
     /**
      * Set configuration values.
      *
-     * @param {IDirectionConfiguration} configuration
+     * @param {DirectionConfiguration} configuration
      */
-    public setConfiguration(configuration: IDirectionConfiguration): void {
+    public setConfiguration(configuration: DirectionConfiguration): void {
         let needsRender: boolean = false;
-        if (this._highlightKey !== configuration.highlightKey ||
+        if (this._highlightKey !== configuration.highlightId ||
             this._distinguishSequence !== configuration.distinguishSequence) {
-            this._highlightKey = configuration.highlightKey;
+            this._highlightKey = configuration.highlightId;
             this._distinguishSequence = configuration.distinguishSequence;
 
             needsRender = true;
@@ -185,9 +185,9 @@ export class DirectionDOMRenderer {
      * Detect the element's width and height and resize
      * elements accordingly.
      *
-     * @param {ISize} size Size of vßiewer container element.
+     * @param {ViewportSize} size Size of vßiewer container element.
      */
-    public resize(size: ISize): void {
+    public resize(size: ViewportSize): void {
         this._calculator.resize(size);
 
         this._setNeedsRender();
@@ -206,14 +206,14 @@ export class DirectionDOMRenderer {
         this._sequenceEdgeKeys = [];
     }
 
-    private _setEdges(edgeStatus: IEdgeStatus, sequence: Sequence): void {
+    private _setEdges(edgeStatus: NavigationEdgeStatus, sequence: Sequence): void {
         this._stepEdges = [];
         this._turnEdges = [];
         this._sphericalEdges = [];
         this._sequenceEdgeKeys = [];
 
         for (let edge of edgeStatus.edges) {
-            let direction: EdgeDirection = edge.data.direction;
+            let direction: NavigationDirection = edge.data.direction;
 
             if (this._stepDirections.indexOf(direction) > -1) {
                 this._stepEdges.push(edge);
@@ -225,20 +225,20 @@ export class DirectionDOMRenderer {
                 continue;
             }
 
-            if (edge.data.direction === EdgeDirection.Spherical) {
+            if (edge.data.direction === NavigationDirection.Spherical) {
                 this._sphericalEdges.push(edge);
             }
         }
 
         if (this._distinguishSequence && sequence != null) {
-            let edges: IEdge[] = this._sphericalEdges
+            let edges: NavigationEdge[] = this._sphericalEdges
                 .concat(this._stepEdges)
                 .concat(this._turnEdges);
 
             for (let edge of edges) {
-                let edgeKey: string = edge.to;
+                let edgeKey: string = edge.target;
 
-                for (let sequenceKey of sequence.keys) {
+                for (let sequenceKey of sequence.imageIds) {
                     if (sequenceKey === edgeKey) {
                         this._sequenceEdgeKeys.push(edgeKey);
                         break;
@@ -248,14 +248,14 @@ export class DirectionDOMRenderer {
         }
     }
 
-    private _createSphericalArrows(navigator: Navigator, rotation: IRotation): vd.VNode[] {
+    private _createSphericalArrows(navigator: Navigator, rotation: EulerRotation): vd.VNode[] {
         let arrows: vd.VNode[] = [];
 
         for (let sphericalEdge of this._sphericalEdges) {
             arrows.push(
                 this._createVNodeByKey(
                     navigator,
-                    sphericalEdge.to,
+                    sphericalEdge.target,
                     sphericalEdge.data.worldMotionAzimuth,
                     rotation,
                     this._calculator.outerRadius,
@@ -266,7 +266,7 @@ export class DirectionDOMRenderer {
             arrows.push(
                 this._createSphericalToPerspectiveArrow(
                     navigator,
-                    stepEdge.to,
+                    stepEdge.target,
                     stepEdge.data.worldMotionAzimuth,
                     rotation,
                     stepEdge.data.direction));
@@ -279,21 +279,21 @@ export class DirectionDOMRenderer {
         navigator: Navigator,
         key: string,
         azimuth: number,
-        rotation: IRotation,
-        direction: EdgeDirection): vd.VNode {
+        rotation: EulerRotation,
+        direction: NavigationDirection): vd.VNode {
 
         let threshold: number = Math.PI / 8;
 
         let relativePhi: number = rotation.phi;
 
         switch (direction) {
-            case EdgeDirection.StepBackward:
+            case NavigationDirection.StepBackward:
                 relativePhi = rotation.phi - Math.PI;
                 break;
-            case EdgeDirection.StepLeft:
+            case NavigationDirection.StepLeft:
                 relativePhi = rotation.phi + Math.PI / 2;
                 break;
-            case EdgeDirection.StepRight:
+            case NavigationDirection.StepRight:
                 relativePhi = rotation.phi - Math.PI / 2;
                 break;
             default:
@@ -313,14 +313,14 @@ export class DirectionDOMRenderer {
         return this._createVNodeInactive(key, azimuth, rotation);
     }
 
-    private _createPerspectiveToSphericalArrows(navigator: Navigator, rotation: IRotation): vd.VNode[] {
+    private _createPerspectiveToSphericalArrows(navigator: Navigator, rotation: EulerRotation): vd.VNode[] {
         let arrows: vd.VNode[] = [];
 
         for (let sphericalEdge of this._sphericalEdges) {
             arrows.push(
                 this._createVNodeByKey(
                     navigator,
-                    sphericalEdge.to,
+                    sphericalEdge.target,
                     sphericalEdge.data.worldMotionAzimuth,
                     rotation,
                     this._calculator.innerRadius,
@@ -331,14 +331,14 @@ export class DirectionDOMRenderer {
         return arrows;
     }
 
-    private _createStepArrows(navigator: Navigator, rotation: IRotation): vd.VNode[] {
+    private _createStepArrows(navigator: Navigator, rotation: EulerRotation): vd.VNode[] {
         let arrows: vd.VNode[] = [];
 
         for (let stepEdge of this._stepEdges) {
             arrows.push(
                 this._createVNodeByDirection(
                     navigator,
-                    stepEdge.to,
+                    stepEdge.target,
                     stepEdge.data.worldMotionAzimuth,
                     rotation,
                     stepEdge.data.direction));
@@ -351,13 +351,13 @@ export class DirectionDOMRenderer {
         let turns: vd.VNode[] = [];
 
         for (let turnEdge of this._turnEdges) {
-            let direction: EdgeDirection = turnEdge.data.direction;
+            let direction: NavigationDirection = turnEdge.data.direction;
             let name: string = this._turnNames[direction];
 
             turns.push(
                 this._createVNodeByTurn(
                     navigator,
-                    turnEdge.to,
+                    turnEdge.target,
                     name,
                     direction));
         }
@@ -369,14 +369,14 @@ export class DirectionDOMRenderer {
         navigator: Navigator,
         key: string,
         azimuth: number,
-        rotation: IRotation,
+        rotation: EulerRotation,
         offset: number,
         className: string,
         shiftVertically?: boolean): vd.VNode {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
-                navigator.moveToKey$(key)
+                navigator.moveTo$(key)
                     .subscribe(
                         undefined,
                         (error: Error): void => {
@@ -401,8 +401,8 @@ export class DirectionDOMRenderer {
         navigator: Navigator,
         key: string,
         azimuth: number,
-        rotation: IRotation,
-        direction: EdgeDirection): vd.VNode {
+        rotation: EulerRotation,
+        direction: NavigationDirection): vd.VNode {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
@@ -430,7 +430,7 @@ export class DirectionDOMRenderer {
         navigator: Navigator,
         key: string,
         className: string,
-        direction: EdgeDirection): vd.VNode {
+        direction: NavigationDirection): vd.VNode {
 
         let onClick: (e: Event) => void =
             (e: Event): void => {
@@ -451,15 +451,15 @@ export class DirectionDOMRenderer {
         };
 
         switch (direction) {
-            case EdgeDirection.TurnLeft:
+            case NavigationDirection.TurnLeft:
                 style.left = "5px";
                 style.top = "5px";
                 break;
-            case EdgeDirection.TurnRight:
+            case NavigationDirection.TurnRight:
                 style.right = "5px";
                 style.top = "5px";
                 break;
-            case EdgeDirection.TurnU:
+            case NavigationDirection.TurnU:
                 style.left = "5px";
                 style.bottom = "5px";
                 break;
@@ -469,7 +469,7 @@ export class DirectionDOMRenderer {
 
         let circleProperties: vd.createProperties = {
             attributes: {
-                "data-key": key,
+                "data-id": key,
             },
             onclick: onClick,
             style: style,
@@ -490,7 +490,7 @@ export class DirectionDOMRenderer {
         return vd.h("div." + circleClassName, circleProperties, [turn]);
     }
 
-    private _createVNodeInactive(key: string, azimuth: number, rotation: IRotation): vd.VNode {
+    private _createVNodeInactive(key: string, azimuth: number, rotation: EulerRotation): vd.VNode {
         return this._createVNode(
             key,
             azimuth,
@@ -503,7 +503,7 @@ export class DirectionDOMRenderer {
     private _createVNode(
         key: string,
         azimuth: number,
-        rotation: IRotation,
+        rotation: EulerRotation,
         radius: number,
         className: string,
         circleClassName: string,
@@ -538,7 +538,7 @@ export class DirectionDOMRenderer {
             `translate(${translationX}px, ${translationY}px) rotate(${azimuthDeg}deg)`;
 
         let circleProperties: vd.createProperties = {
-            attributes: { "data-key": key },
+            attributes: { "data-id": key },
             onclick: onClick,
             style: {
                 height: this._calculator.stepCircleSizeCss,
@@ -563,7 +563,7 @@ export class DirectionDOMRenderer {
     private _getContainer(
         steps: vd.VNode[],
         turns: vd.VNode[],
-        rotation: IRotation): vd.VNode {
+        rotation: EulerRotation): vd.VNode {
 
         // edge does not handle hover on perspective transforms.
         let transform: string = this._isEdge ?
diff --git a/src/component/ImageComponent.ts b/src/component/image/ImageComponent.ts
similarity index 71%
rename from src/component/ImageComponent.ts
rename to src/component/image/ImageComponent.ts
index 9bed77333..6f4192dae 100644
--- a/src/component/ImageComponent.ts
+++ b/src/component/image/ImageComponent.ts
@@ -12,16 +12,16 @@ import {
     map,
 } from "rxjs/operators";
 
-import { Component } from "./Component";
-import { IComponentConfiguration } from "./interfaces/IComponentConfiguration";
+import { Component } from "../Component";
+import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
 
-import { Node } from "../graph/Node";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
-import { ISize } from "../render/interfaces/ISize";
-import { DOM } from "../utils/DOM";
+import { Node } from "../../graph/Node";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { DOM } from "../../utils/DOM";
 
-export class ImageComponent extends Component<IComponentConfiguration> {
+export class ImageComponent extends Component<ComponentConfiguration> {
     public static componentName: string = "image";
 
     private _canvasId: string;
@@ -36,7 +36,7 @@ export class ImageComponent extends Component<IComponentConfiguration> {
     }
 
     protected _activate(): void {
-        const canvasSize$: Observable<[HTMLCanvasElement, ISize]> = this._container.domRenderer.element$.pipe(
+        const canvasSize$: Observable<[HTMLCanvasElement, ViewportSize]> = this._container.domRenderer.element$.pipe(
             map(
                 (): HTMLCanvasElement => {
                     return <HTMLCanvasElement>this._dom.document.getElementById(this._canvasId);
@@ -46,7 +46,7 @@ export class ImageComponent extends Component<IComponentConfiguration> {
                     return !!canvas;
                 }),
             map(
-                (canvas: HTMLCanvasElement): [HTMLCanvasElement, ISize] => {
+                (canvas: HTMLCanvasElement): [HTMLCanvasElement, ViewportSize] => {
                     const adaptableDomRenderer: HTMLElement = canvas.parentElement;
                     const width: number = adaptableDomRenderer.offsetWidth;
                     const height: number = adaptableDomRenderer.offsetHeight;
@@ -54,10 +54,10 @@ export class ImageComponent extends Component<IComponentConfiguration> {
                     return [canvas, { height: height, width: width }];
                 }),
             distinctUntilChanged(
-                (s1: ISize, s2: ISize): boolean => {
+                (s1: ViewportSize, s2: ViewportSize): boolean => {
                     return s1.height === s2.height && s1.width === s2.width;
                 },
-                ([, size]: [HTMLCanvasElement, ISize]): ISize => {
+                ([, size]: [HTMLCanvasElement, ViewportSize]): ViewportSize => {
                     return size;
                 }));
 
@@ -65,7 +65,7 @@ export class ImageComponent extends Component<IComponentConfiguration> {
             canvasSize$,
             this._navigator.stateService.currentNode$)
             .subscribe(
-                ([[canvas, size], node]: [[HTMLCanvasElement, ISize], Node]): void => {
+                ([[canvas, size], node]: [[HTMLCanvasElement, ViewportSize], Node]): void => {
                     canvas.width = size.width;
                     canvas.height = size.height;
                     canvas
@@ -80,7 +80,7 @@ export class ImageComponent extends Component<IComponentConfiguration> {
         this.drawSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 }
diff --git a/src/component/imageplane/ImagePlaneComponent.ts b/src/component/imageplane/ImagePlaneComponent.ts
index 53948e721..9affb8479 100644
--- a/src/component/imageplane/ImagePlaneComponent.ts
+++ b/src/component/imageplane/ImagePlaneComponent.ts
@@ -6,7 +6,6 @@ import {
     from as observableFrom,
     of as observableOf,
     Observable,
-    Subscription,
     Subject,
 } from "rxjs";
 
@@ -19,7 +18,6 @@ import {
     map,
     mergeMap,
     pairwise,
-    publish,
     publishReplay,
     refCount,
     scan,
@@ -27,7 +25,6 @@ import {
     skipWhile,
     startWith,
     switchMap,
-    takeUntil,
     withLatestFrom,
 } from "rxjs/operators";
 
@@ -38,53 +35,36 @@ import { Navigator } from "../../viewer/Navigator";
 import { ImagePlaneGLRenderer } from "./ImagePlaneGLRenderer";
 import { Spatial } from "../../geo/Spatial";
 import { ViewportCoords } from "../../geo/ViewportCoords";
-import { GLRenderStage } from "../../render/GLRenderStage";
-import { IGLRenderHash } from "../../render/interfaces/IGLRenderHash";
-import { ISize } from "../../render/interfaces/ISize";
+import { RenderPass } from "../../render/RenderPass";
+import { GLRenderHash } from "../../render/interfaces/IGLRenderHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
 import { RenderCamera } from "../../render/RenderCamera";
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { ImageTileLoader } from "../../tiles/ImageTileLoader";
 import { ImageTileStore } from "../../tiles/ImageTileStore";
-import { IRegionOfInterest } from "../../tiles/interfaces/IRegionOfInterest";
+import { TileRegionOfInterest } from "../../tiles/interfaces/TileRegionOfInterest";
 import { RegionOfInterestCalculator } from "../../tiles/RegionOfInterestCalculator";
 import { TextureProvider } from "../../tiles/TextureProvider";
-import { Settings } from "../../utils/Settings";
-import { IComponentConfiguration } from "../interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
 import { Transform } from "../../geo/Transform";
-import { ImageSize } from "../../viewer/ImageSize";
-import { isSpherical } from "../../geo/Geo";
+import { SubscriptionHolder } from "../../utils/SubscriptionHolder";
 
-
-interface IImagePlaneGLRendererOperation {
+interface ImagePlaneGLRendererOperation {
     (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer;
 }
 
 type PositionLookat = [THREE.Vector3, THREE.Vector3, number, number, number];
 
-export class ImagePlaneComponent extends Component<IComponentConfiguration> {
+export class ImagePlaneComponent extends Component<ComponentConfiguration> {
     public static componentName: string = "imagePlane";
 
-    private _rendererOperation$: Subject<IImagePlaneGLRendererOperation>;
+    private _rendererOperation$: Subject<ImagePlaneGLRendererOperation>;
     private _renderer$: Observable<ImagePlaneGLRenderer>;
     private _rendererCreator$: Subject<void>;
     private _rendererDisposer$: Subject<void>;
 
-    private _abortTextureProviderSubscription: Subscription;
-    private _hasTextureSubscription: Subscription;
-    private _rendererSubscription: Subscription;
-    private _setRegionOfInterestSubscription: Subscription;
-    private _setTextureProviderSubscription: Subscription;
-    private _setTileSizeSubscription: Subscription;
-    private _stateSubscription: Subscription;
-    private _textureProviderSubscription: Subscription;
-    private _updateBackgroundSubscription: Subscription;
-    private _updateTextureImageSubscription: Subscription;
-
-    private _clearPeripheryPlaneSubscription: Subscription;
-    private _addPeripheryPlaneSubscription: Subscription;
-    private _updatePeripheryPlaneTextureSubscription: Subscription;
-    private _moveToPeripheryNodeSubscription: Subscription;
+    private _subsciptions: SubscriptionHolder = new SubscriptionHolder();
 
     private _imageTileLoader: ImageTileLoader;
     private _roiCalculator: RegionOfInterestCalculator;
@@ -95,13 +75,13 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
         this._imageTileLoader = new ImageTileLoader(navigator.api.data);
         this._roiCalculator = new RegionOfInterestCalculator();
 
-        this._rendererOperation$ = new Subject<IImagePlaneGLRendererOperation>();
+        this._rendererOperation$ = new Subject<ImagePlaneGLRendererOperation>();
         this._rendererCreator$ = new Subject<void>();
         this._rendererDisposer$ = new Subject<void>();
 
         this._renderer$ = this._rendererOperation$.pipe(
             scan(
-                (renderer: ImagePlaneGLRenderer, operation: IImagePlaneGLRendererOperation): ImagePlaneGLRenderer => {
+                (renderer: ImagePlaneGLRenderer, operation: ImagePlaneGLRendererOperation): ImagePlaneGLRenderer => {
                     return operation(renderer);
                 },
                 null),
@@ -117,7 +97,7 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
 
         this._rendererCreator$.pipe(
             map(
-                (): IImagePlaneGLRendererOperation => {
+                (): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         if (renderer != null) {
                             throw new Error("Multiple image plane states can not be created at the same time");
@@ -130,7 +110,7 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
 
         this._rendererDisposer$.pipe(
             map(
-                (): IImagePlaneGLRendererOperation => {
+                (): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         renderer.dispose();
 
@@ -141,16 +121,17 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
     }
 
     protected _activate(): void {
-        this._rendererSubscription = this._renderer$.pipe(
+        const subs = this._subsciptions;
+        subs.push(this._renderer$.pipe(
             map(
-                (renderer: ImagePlaneGLRenderer): IGLRenderHash => {
-                    let renderHash: IGLRenderHash = {
+                (renderer: ImagePlaneGLRenderer): GLRenderHash => {
+                    let renderHash: GLRenderHash = {
                         name: this._name,
-                        render: {
+                        renderer: {
                             frameId: renderer.frameId,
                             needsRender: renderer.needsRender,
                             render: renderer.render.bind(renderer),
-                            stage: GLRenderStage.Background,
+                            pass: RenderPass.Background,
                         },
                     };
 
@@ -158,33 +139,33 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
 
                     return renderHash;
                 }))
-            .subscribe(this._container.glRenderer.render$);
+            .subscribe(this._container.glRenderer.render$));
 
         this._rendererCreator$.next(null);
 
-        this._stateSubscription = this._navigator.stateService.currentState$.pipe(
+        subs.push(this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): IImagePlaneGLRendererOperation => {
+                (frame: AnimationFrame): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         renderer.updateFrame(frame);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._rendererOperation$);
+            .subscribe(this._rendererOperation$));
 
-        let textureProvider$: Observable<TextureProvider> = this._navigator.stateService.currentState$.pipe(
+        const textureProvider$ = this._navigator.stateService.currentState$.pipe(
             distinctUntilChanged(
                 undefined,
-                (frame: IFrame): string => {
-                    return frame.state.currentNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.currentNode.id;
                 }),
             withLatestFrom(
                 this._container.glRenderer.webGLRenderer$,
                 this._container.renderService.size$),
             map(
-                ([frame, renderer, size]: [IFrame, THREE.WebGLRenderer, ISize]): TextureProvider => {
-                    let state: ICurrentState = frame.state;
+                ([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
+                    let state: IAnimationState = frame.state;
                     let viewportSize: number = Math.max(size.width, size.height);
 
                     let currentNode: GraphNode = state.currentNode;
@@ -192,7 +173,7 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                     let tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     return new TextureProvider(
-                        currentNode.key,
+                        currentNode.id,
                         currentTransform.basicWidth,
                         currentTransform.basicHeight,
                         tileSize,
@@ -204,48 +185,48 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
             publishReplay(1),
             refCount());
 
-        this._textureProviderSubscription = textureProvider$.subscribe(() => { /*noop*/ });
+        subs.push(textureProvider$.subscribe(() => { /*noop*/ }));
 
-        this._setTextureProviderSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             map(
-                (provider: TextureProvider): IImagePlaneGLRendererOperation => {
+                (provider: TextureProvider): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
-                        renderer.setTextureProvider(provider.key, provider);
+                        renderer.setTextureProvider(provider.id, provider);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._rendererOperation$);
+            .subscribe(this._rendererOperation$));
 
-        this._setTileSizeSubscription = this._container.renderService.size$.pipe(
+        subs.push(this._container.renderService.size$.pipe(
             switchMap(
-                (size: ISize): Observable<[TextureProvider, ISize]> => {
+                (size: ViewportSize): Observable<[TextureProvider, ViewportSize]> => {
                     return observableCombineLatest(
                         textureProvider$,
-                        observableOf<ISize>(size)).pipe(
+                        observableOf<ViewportSize>(size)).pipe(
                             first());
                 }))
             .subscribe(
-                ([provider, size]: [TextureProvider, ISize]): void => {
+                ([provider, size]: [TextureProvider, ViewportSize]): void => {
                     let viewportSize: number = Math.max(size.width, size.height);
                     let tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     provider.setTileSize(tileSize);
-                });
+                }));
 
-        this._abortTextureProviderSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             pairwise())
             .subscribe(
                 (pair: [TextureProvider, TextureProvider]): void => {
                     let previous: TextureProvider = pair[0];
                     previous.abort();
-                });
+                }));
 
-        let roiTrigger$: Observable<[RenderCamera, ISize, Transform]> = observableCombineLatest(
+        const roiTrigger$ = observableCombineLatest(
             this._container.renderService.renderCameraFrame$,
             this._container.renderService.size$.pipe(debounceTime(250))).pipe(
                 map(
-                    ([camera, size]: [RenderCamera, ISize]): PositionLookat => {
+                    ([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
                         return [
                             camera.camera.position.clone(),
                             camera.camera.lookat.clone(),
@@ -282,13 +263,13 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                     this._container.renderService.size$,
                     this._navigator.stateService.currentTransform$));
 
-        this._setRegionOfInterestSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             switchMap(
-                (provider: TextureProvider): Observable<[IRegionOfInterest, TextureProvider]> => {
+                (provider: TextureProvider): Observable<[TileRegionOfInterest, TextureProvider]> => {
                     return roiTrigger$.pipe(
                         map(
-                            ([camera, size, transform]: [RenderCamera, ISize, Transform]):
-                                [IRegionOfInterest, TextureProvider] => {
+                            ([camera, size, transform]: [RenderCamera, ViewportSize, Transform]):
+                                [TileRegionOfInterest, TextureProvider] => {
                                 const basic: number[] = new ViewportCoords().viewportToBasic(0, 0, transform, camera.perspective);
 
                                 if (basic[0] < 0 || basic[1] < 0 || basic[0] > 1 || basic[1] > 1) {
@@ -301,148 +282,60 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                                 ];
                             }),
                         filter(
-                            (args: [IRegionOfInterest, TextureProvider]): boolean => {
+                            (args: [TileRegionOfInterest, TextureProvider]): boolean => {
                                 return !!args;
                             }));
                 }),
             filter(
-                (args: [IRegionOfInterest, TextureProvider]): boolean => {
+                (args: [TileRegionOfInterest, TextureProvider]): boolean => {
                     return !args[1].disposed;
                 }))
             .subscribe(
-                (args: [IRegionOfInterest, TextureProvider]): void => {
-                    let roi: IRegionOfInterest = args[0];
+                (args: [TileRegionOfInterest, TextureProvider]): void => {
+                    let roi: TileRegionOfInterest = args[0];
                     let provider: TextureProvider = args[1];
 
                     provider.setRegionOfInterest(roi);
-                });
-
-        let hasTexture$: Observable<boolean> = textureProvider$.pipe(
-            switchMap(
-                (provider: TextureProvider): Observable<boolean> => {
-                    return provider.hasTexture$;
-                }),
-            startWith(false),
-            publishReplay(1),
-            refCount());
-
-        this._hasTextureSubscription = hasTexture$.subscribe(() => { /*noop*/ });
-
-        let nodeImage$: Observable<[HTMLImageElement, GraphNode]> = this._navigator.stateService.currentState$.pipe(
-            filter(
-                (frame: IFrame): boolean => {
-                    return frame.state.nodesAhead === 0;
-                }),
-            map(
-                (frame: IFrame): GraphNode => {
-                    return frame.state.currentNode;
-                }),
-            distinctUntilChanged(
-                undefined,
-                (node: GraphNode): string => {
-                    return node.key;
-                }),
-            debounceTime(1000),
-            withLatestFrom(hasTexture$),
-            filter(
-                (args: [GraphNode, boolean]): boolean => {
-                    return !args[1];
-                }),
-            map(
-                (args: [GraphNode, boolean]): GraphNode => {
-                    return args[0];
-                }),
-            filter(
-                (node: GraphNode): boolean => {
-                    return isSpherical(node.cameraType) ?
-                        Settings.maxImageSize > Settings.baseSphericalSize :
-                        Settings.maxImageSize > Settings.baseImageSize;
-                }),
-            switchMap(
-                (node: GraphNode): Observable<[HTMLImageElement, GraphNode]> => {
-                    let baseImageSize = isSpherical(node.cameraType) ?
-                        Settings.baseSphericalSize :
-                        Settings.baseImageSize;
-
-                    if (Math.max(node.image.width, node.image.height) > baseImageSize) {
-                        return observableEmpty();
-                    }
-
-                    let image$: Observable<[HTMLImageElement, GraphNode]> = node
-                        .cacheImage$(Settings.maxImageSize).pipe(
-                            map(
-                                (n: GraphNode): [HTMLImageElement, GraphNode] => {
-                                    return [n.image, n];
-                                }));
-
-                    return image$.pipe(
-                        takeUntil(
-                            hasTexture$.pipe(
-                                filter(
-                                    (hasTexture: boolean): boolean => {
-
-                                        return hasTexture;
-                                    }))),
-                        catchError(
-                            (error: Error):
-                                Observable<[HTMLImageElement, GraphNode]> => {
-                                console.error(`Failed to fetch high res image (${node.key})`, error);
-
-                                return observableEmpty();
-                            }));
-                })).pipe(
-                    publish(),
-                    refCount());
-
-        this._updateBackgroundSubscription = nodeImage$.pipe(
-            withLatestFrom(textureProvider$))
-            .subscribe(
-                (args: [[HTMLImageElement, GraphNode], TextureProvider]): void => {
-                    if (args[0][1].key !== args[1].key ||
-                        args[1].disposed) {
-                        return;
-                    }
-
-                    args[1].updateBackground(args[0][0]);
-                });
+                }));
 
-        this._updateTextureImageSubscription = nodeImage$.pipe(
-            map(
-                (imn: [HTMLImageElement, GraphNode]): IImagePlaneGLRendererOperation => {
-                    return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
-                        renderer.updateTextureImage(imn[0], imn[1]);
+        const hasTexture$ = textureProvider$
+            .pipe(
+                switchMap(
+                    (provider: TextureProvider): Observable<boolean> => {
+                        return provider.hasTexture$;
+                    }),
+                startWith(false),
+                publishReplay(1),
+                refCount());
 
-                        return renderer;
-                    };
-                }))
-            .subscribe(this._rendererOperation$);
+        subs.push(hasTexture$.subscribe(() => { /*noop*/ }));
 
-        this._clearPeripheryPlaneSubscription = this._navigator.panService.panNodes$.pipe(
+        subs.push(this._navigator.panService.panNodes$.pipe(
             filter(
                 (panNodes: []): boolean => {
                     return panNodes.length === 0;
                 }),
             map(
-                (): IImagePlaneGLRendererOperation => {
+                (): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         renderer.clearPeripheryPlanes();
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._rendererOperation$);
+            .subscribe(this._rendererOperation$));
 
-        const cachedPanNodes$: Observable<[GraphNode, Transform]> = this._navigator.panService.panNodes$.pipe(
+        const cachedPanNodes$ = this._navigator.panService.panNodes$.pipe(
             switchMap(
                 (nts: [GraphNode, Transform, number][]): Observable<[GraphNode, Transform]> => {
                     return observableFrom(nts).pipe(
                         mergeMap(
                             ([n, t]: [GraphNode, Transform, number]): Observable<[GraphNode, Transform]> => {
                                 return observableCombineLatest(
-                                    this._navigator.graphService.cacheNode$(n.key).pipe(
+                                    this._navigator.graphService.cacheNode$(n.id).pipe(
                                         catchError(
                                             (error: Error): Observable<GraphNode> => {
-                                                console.error(`Failed to cache periphery node (${n.key})`, error);
+                                                console.error(`Failed to cache periphery node (${n.id})`, error);
 
                                                 return observableEmpty();
                                             })),
@@ -451,46 +344,44 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                 }),
             share());
 
-        this._addPeripheryPlaneSubscription = cachedPanNodes$.pipe(
+        subs.push(cachedPanNodes$.pipe(
             map(
-                ([n, t]: [GraphNode, Transform]): IImagePlaneGLRendererOperation => {
+                ([n, t]: [GraphNode, Transform]): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         renderer.addPeripheryPlane(n, t);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._rendererOperation$);
+            .subscribe(this._rendererOperation$));
 
-        this._updatePeripheryPlaneTextureSubscription = cachedPanNodes$.pipe(
+        subs.push(cachedPanNodes$.pipe(
             mergeMap(
                 ([n]: [GraphNode, Transform]): Observable<GraphNode> => {
-                    return ImageSize.Size2048 > Math.max(n.image.width, n.image.height) ?
-                        n.cacheImage$(ImageSize.Size2048).pipe(
-                            catchError(
-                                (): Observable<GraphNode> => {
-                                    return observableEmpty();
-                                })) :
-                        observableEmpty();
+                    return n.cacheImage$().pipe(
+                        catchError(
+                            (): Observable<GraphNode> => {
+                                return observableEmpty();
+                            }));
                 }),
             map(
-                (n: GraphNode): IImagePlaneGLRendererOperation => {
+                (n: GraphNode): ImagePlaneGLRendererOperation => {
                     return (renderer: ImagePlaneGLRenderer): ImagePlaneGLRenderer => {
                         renderer.updateTextureImage(n.image, n);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._rendererOperation$);
+            .subscribe(this._rendererOperation$));
 
-        const inTransition$: Observable<boolean> = this._navigator.stateService.currentState$.pipe(
+        const inTransition$ = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.alpha < 1;
                 }),
             distinctUntilChanged());
 
-        const panTrigger$: Observable<boolean> = observableCombineLatest(
+        const panTrigger$ = observableCombineLatest(
             this._container.mouseService.active$,
             this._container.touchService.active$,
             this._navigator.stateService.inMotion$,
@@ -504,7 +395,7 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                         return trigger;
                     }));
 
-        this._moveToPeripheryNodeSubscription = this._navigator.panService.panNodes$.pipe(
+        subs.push(this._navigator.panService.panNodes$.pipe(
             switchMap(
                 (nts: [GraphNode, Transform, number][]):
                     Observable<[RenderCamera, GraphNode, Transform, [GraphNode, Transform, number][]]> => {
@@ -545,7 +436,7 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
 
                         if (a < closest[0]) {
                             closest[0] = a;
-                            closest[1] = n.key;
+                            closest[1] = n.id;
                         }
                     }
 
@@ -553,36 +444,21 @@ export class ImagePlaneComponent extends Component<IComponentConfiguration> {
                         return observableEmpty();
                     }
 
-                    return this._navigator.moveToKey$(closest[1]).pipe(
+                    return this._navigator.moveTo$(closest[1]).pipe(
                         catchError(
                             (): Observable<GraphNode> => {
                                 return observableEmpty();
                             }));
                 }))
-            .subscribe();
+            .subscribe());
     }
 
     protected _deactivate(): void {
         this._rendererDisposer$.next(null);
-
-        this._abortTextureProviderSubscription.unsubscribe();
-        this._hasTextureSubscription.unsubscribe();
-        this._rendererSubscription.unsubscribe();
-        this._setRegionOfInterestSubscription.unsubscribe();
-        this._setTextureProviderSubscription.unsubscribe();
-        this._setTileSizeSubscription.unsubscribe();
-        this._stateSubscription.unsubscribe();
-        this._textureProviderSubscription.unsubscribe();
-        this._updateBackgroundSubscription.unsubscribe();
-        this._updateTextureImageSubscription.unsubscribe();
-
-        this._clearPeripheryPlaneSubscription.unsubscribe();
-        this._addPeripheryPlaneSubscription.unsubscribe();
-        this._updatePeripheryPlaneTextureSubscription.unsubscribe();
-        this._moveToPeripheryNodeSubscription.unsubscribe();
+        this._subsciptions.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 }
diff --git a/src/component/imageplane/ImagePlaneGLRenderer.ts b/src/component/imageplane/ImagePlaneGLRenderer.ts
index 86b94ddac..9611eb787 100644
--- a/src/component/imageplane/ImagePlaneGLRenderer.ts
+++ b/src/component/imageplane/ImagePlaneGLRenderer.ts
@@ -1,14 +1,14 @@
 import * as THREE from "three";
 import { Subscription } from "rxjs";
 
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Node } from "../../graph/Node";
 import { Transform } from "../../geo/Transform";
 import { TextureProvider } from "../../tiles/TextureProvider";
 import { MeshFactory } from "../utils/MeshFactory";
 import { MeshScene } from "../utils/MeshScene";
-import { IShaderMaterial } from "./interfaces/IShaderMaterial";
+import { ProjectorShaderMaterial } from "./interfaces/ProjectorShaderMaterial";
 
 export class ImagePlaneGLRenderer {
     private _factory: MeshFactory;
@@ -56,7 +56,7 @@ export class ImagePlaneGLRenderer {
     public addPeripheryPlane(node: Node, transform: Transform): void {
         const mesh: THREE.Mesh = this._factory.createMesh(node, transform);
         const planes: { [key: string]: THREE.Mesh } = {};
-        planes[node.key] = mesh;
+        planes[node.id] = mesh;
         this._scene.addPeripheryPlanes(planes);
 
         this._needsRender = true;
@@ -68,7 +68,7 @@ export class ImagePlaneGLRenderer {
         this._needsRender = true;
     }
 
-    public updateFrame(frame: IFrame): void {
+    public updateFrame(frame: AnimationFrame): void {
         this._updateFrameId(frame.id);
         this._needsRender = this._updateAlpha(frame.state.alpha) || this._needsRender;
         this._needsRender = this._updateAlphaOld(frame.state.alpha) || this._needsRender;
@@ -119,13 +119,13 @@ export class ImagePlaneGLRenderer {
                 continue;
             }
 
-            if (key !== node.key) {
+            if (key !== node.id) {
                 continue;
             }
 
             const plane: THREE.Mesh = planes[key];
 
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
             let texture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
 
             texture.image = image;
@@ -150,7 +150,7 @@ export class ImagePlaneGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            (<IShaderMaterial>plane.material).uniforms.opacity.value = planeAlpha;
+            (<ProjectorShaderMaterial>plane.material).uniforms.opacity.value = planeAlpha;
         }
 
         for (const key in planesOld) {
@@ -159,7 +159,7 @@ export class ImagePlaneGLRenderer {
             }
 
             const plane: THREE.Mesh = planesOld[key];
-            (<IShaderMaterial>plane.material).uniforms.opacity.value = this._alphaOld;
+            (<ProjectorShaderMaterial>plane.material).uniforms.opacity.value = this._alphaOld;
         }
 
         for (const key in planesPeriphery) {
@@ -168,7 +168,7 @@ export class ImagePlaneGLRenderer {
             }
 
             const plane: THREE.Mesh = planesPeriphery[key];
-            (<IShaderMaterial>plane.material).uniforms.opacity.value = peripheryAlpha;
+            (<ProjectorShaderMaterial>plane.material).uniforms.opacity.value = peripheryAlpha;
         }
 
         renderer.render(this._scene.scenePeriphery, perspectiveCamera);
@@ -181,7 +181,7 @@ export class ImagePlaneGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            (<IShaderMaterial>plane.material).uniforms.opacity.value = this._alpha;
+            (<ProjectorShaderMaterial>plane.material).uniforms.opacity.value = this._alpha;
         }
 
         renderer.render(this._scene.scene, perspectiveCamera);
@@ -219,13 +219,13 @@ export class ImagePlaneGLRenderer {
         return true;
     }
 
-    private _updateImagePlanes(state: ICurrentState): boolean {
-        if (state.currentNode == null || state.currentNode.key === this._currentKey) {
+    private _updateImagePlanes(state: IAnimationState): boolean {
+        if (state.currentNode == null || state.currentNode.id === this._currentKey) {
             return false;
         }
 
-        let previousKey: string = state.previousNode != null ? state.previousNode.key : null;
-        let currentKey: string = state.currentNode.key;
+        let previousKey: string = state.previousNode != null ? state.previousNode.id : null;
+        let currentKey: string = state.currentNode.id;
 
         if (this._previousKey !== previousKey &&
             this._previousKey !== currentKey &&
@@ -274,7 +274,7 @@ export class ImagePlaneGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
 
             let oldTexture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
             material.uniforms.projectorTex.value = null;
diff --git a/src/component/imageplane/interfaces/IBBoxShaderMaterial.ts b/src/component/imageplane/interfaces/BBoxProjectorShaderMaterial.ts
similarity index 53%
rename from src/component/imageplane/interfaces/IBBoxShaderMaterial.ts
rename to src/component/imageplane/interfaces/BBoxProjectorShaderMaterial.ts
index d6ff7d36c..abb98fa7b 100644
--- a/src/component/imageplane/interfaces/IBBoxShaderMaterial.ts
+++ b/src/component/imageplane/interfaces/BBoxProjectorShaderMaterial.ts
@@ -1,6 +1,6 @@
-import { IShaderMaterial } from "./IShaderMaterial";
+import { ProjectorShaderMaterial } from "./ProjectorShaderMaterial";
 
-export interface IBBoxShaderMaterial extends IShaderMaterial {
+export interface BBoxProjectorShaderMaterial extends ProjectorShaderMaterial {
     uniforms: {
         [uniform: string]: THREE.IUniform;
         opacity: THREE.IUniform;
diff --git a/src/component/imageplane/interfaces/IShaderMaterial.ts b/src/component/imageplane/interfaces/ProjectorShaderMaterial.ts
similarity index 70%
rename from src/component/imageplane/interfaces/IShaderMaterial.ts
rename to src/component/imageplane/interfaces/ProjectorShaderMaterial.ts
index 5b8de4518..28f7da91a 100644
--- a/src/component/imageplane/interfaces/IShaderMaterial.ts
+++ b/src/component/imageplane/interfaces/ProjectorShaderMaterial.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 
-export interface IShaderMaterial extends THREE.ShaderMaterial {
+export interface ProjectorShaderMaterial extends THREE.ShaderMaterial {
     uniforms: {
         [uniform: string]: THREE.IUniform;
         opacity: THREE.IUniform;
diff --git a/src/component/interfaces/IZoomConfiguration.ts b/src/component/interfaces/BearingConfiguration.ts
similarity index 56%
rename from src/component/interfaces/IZoomConfiguration.ts
rename to src/component/interfaces/BearingConfiguration.ts
index d5e2176a9..618290d8e 100644
--- a/src/component/interfaces/IZoomConfiguration.ts
+++ b/src/component/interfaces/BearingConfiguration.ts
@@ -1,7 +1,7 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 import { ComponentSize } from "../utils/ComponentSize";
 
-export interface IZoomConfiguration extends IComponentConfiguration {
+export interface BearingConfiguration extends ComponentConfiguration {
     /**
      * The size of the ui elements.
      *
diff --git a/src/component/interfaces/ICacheConfiguration.ts b/src/component/interfaces/CacheConfiguration.ts
similarity index 85%
rename from src/component/interfaces/ICacheConfiguration.ts
rename to src/component/interfaces/CacheConfiguration.ts
index a48e3cac4..58a1ea3b4 100644
--- a/src/component/interfaces/ICacheConfiguration.ts
+++ b/src/component/interfaces/CacheConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of cache depth.
@@ -20,7 +20,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface ICacheDepth {
+export interface CacheDepthConfiguration {
     /**
      * Cache depth in the sequence directions.
      *
@@ -63,9 +63,9 @@ export interface ICacheDepth {
  *
  * @interface
  */
-export interface ICacheConfiguration extends IComponentConfiguration {
+export interface CacheConfiguration extends ComponentConfiguration {
     /**
      * Cache depth struct.
      */
-    depth?: ICacheDepth;
+    depth?: CacheDepthConfiguration;
 }
diff --git a/src/component/interfaces/ComponentConfiguration.ts b/src/component/interfaces/ComponentConfiguration.ts
new file mode 100644
index 000000000..c047fc105
--- /dev/null
+++ b/src/component/interfaces/ComponentConfiguration.ts
@@ -0,0 +1,3 @@
+export interface ComponentConfiguration {
+    [index: string]: any;
+}
diff --git a/src/component/interfaces/CoverConfiguration.ts b/src/component/interfaces/CoverConfiguration.ts
new file mode 100644
index 000000000..06c39f6da
--- /dev/null
+++ b/src/component/interfaces/CoverConfiguration.ts
@@ -0,0 +1,8 @@
+import { CoverState } from "../cover/CoverState";
+import { ComponentConfiguration } from "./ComponentConfiguration";
+
+export interface CoverConfiguration extends ComponentConfiguration {
+    id?: string;
+    src?: string;
+    state?: CoverState;
+}
diff --git a/src/component/interfaces/IDirectionConfiguration.ts b/src/component/interfaces/DirectionConfiguration.ts
similarity index 84%
rename from src/component/interfaces/IDirectionConfiguration.ts
rename to src/component/interfaces/DirectionConfiguration.ts
index c07b9627f..16c2eff40 100644
--- a/src/component/interfaces/IDirectionConfiguration.ts
+++ b/src/component/interfaces/DirectionConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of direction component.
@@ -18,7 +18,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface IDirectionConfiguration extends IComponentConfiguration {
+export interface DirectionConfiguration extends ComponentConfiguration {
     /**
      * Determines if the sequence arrow appearance should be different from
      * the non sequence arrows.
@@ -32,11 +32,11 @@ export interface IDirectionConfiguration extends IComponentConfiguration {
     distinguishSequence?: boolean;
 
     /**
-     * The node key representing the direction arrow to be highlighted.
+     * The node id representing the direction arrow to be highlighted.
      *
      * @default undefined
      */
-    highlightKey?: string;
+    highlightId?: string;
 
     /**
      * The min width of the non transformed container element holding
diff --git a/src/component/interfaces/IComponentConfiguration.ts b/src/component/interfaces/IComponentConfiguration.ts
deleted file mode 100644
index f4a5ed848..000000000
--- a/src/component/interfaces/IComponentConfiguration.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface IComponentConfiguration {
-    [index: string]: any;
-}
diff --git a/src/component/interfaces/ICoverConfiguration.ts b/src/component/interfaces/ICoverConfiguration.ts
deleted file mode 100644
index fc0846efa..000000000
--- a/src/component/interfaces/ICoverConfiguration.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
-
-export enum CoverState {
-    Hidden,
-    Loading,
-    Visible,
-}
-
-export interface ICoverConfiguration extends IComponentConfiguration {
-    key?: string;
-    src?: string;
-    state?: CoverState;
-}
diff --git a/src/component/interfaces/IRouteConfiguration.ts b/src/component/interfaces/IRouteConfiguration.ts
deleted file mode 100644
index 3527afb1c..000000000
--- a/src/component/interfaces/IRouteConfiguration.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
-
-export interface IRouteInfoKey {
-    key: string;
-    description: string;
-}
-
-export interface IRoutePath {
-    sequenceKey: string;
-    startKey: string;
-    stopKey: string;
-    infoKeys: IRouteInfoKey[];
-}
-
-export interface IRouteConfiguration extends IComponentConfiguration {
-    paths?: IRoutePath[];
-    playing?: boolean;
-}
diff --git a/src/component/interfaces/IKeyboardConfiguration.ts b/src/component/interfaces/KeyboardConfiguration.ts
similarity index 85%
rename from src/component/interfaces/IKeyboardConfiguration.ts
rename to src/component/interfaces/KeyboardConfiguration.ts
index 9c47946cc..388ec5e59 100644
--- a/src/component/interfaces/IKeyboardConfiguration.ts
+++ b/src/component/interfaces/KeyboardConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of keyboard component.
@@ -19,7 +19,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface IKeyboardConfiguration extends IComponentConfiguration {
+export interface KeyboardConfiguration extends ComponentConfiguration {
     /**
      * Enable or disable the `KeyPlayHandler`.
      *
diff --git a/src/component/interfaces/IMarkerConfiguration.ts b/src/component/interfaces/MarkerConfiguration.ts
similarity index 78%
rename from src/component/interfaces/IMarkerConfiguration.ts
rename to src/component/interfaces/MarkerConfiguration.ts
index af388e564..c8371f641 100644
--- a/src/component/interfaces/IMarkerConfiguration.ts
+++ b/src/component/interfaces/MarkerConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of marker component.
@@ -17,7 +17,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface IMarkerConfiguration extends IComponentConfiguration {
+export interface MarkerConfiguration extends ComponentConfiguration {
     /**
      * The size of the bounding box for which markers will be visible.
      *
diff --git a/src/component/interfaces/IMouseConfiguration.ts b/src/component/interfaces/MouseConfiguration.ts
similarity index 86%
rename from src/component/interfaces/IMouseConfiguration.ts
rename to src/component/interfaces/MouseConfiguration.ts
index 4b6d292f8..96075fc34 100644
--- a/src/component/interfaces/IMouseConfiguration.ts
+++ b/src/component/interfaces/MouseConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of mouse component.
@@ -20,7 +20,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface IMouseConfiguration extends IComponentConfiguration {
+export interface MouseConfiguration extends ComponentConfiguration {
     /**
      * Enable or disable the `DoubleClickZoomHandler`.
      *
diff --git a/src/component/interfaces/INavigationConfiguration.ts b/src/component/interfaces/NavigationConfiguration.ts
similarity index 77%
rename from src/component/interfaces/INavigationConfiguration.ts
rename to src/component/interfaces/NavigationConfiguration.ts
index 09470ed06..ecbea2d77 100644
--- a/src/component/interfaces/INavigationConfiguration.ts
+++ b/src/component/interfaces/NavigationConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Interface for configuration of navigation component.
@@ -17,7 +17,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * });
  * ```
  */
-export interface INavigationConfiguration extends IComponentConfiguration {
+export interface NavigationConfiguration extends ComponentConfiguration {
     /**
      * Enable or disable the sequence arrows.
      *
diff --git a/src/component/interfaces/ISequenceConfiguration.ts b/src/component/interfaces/SequenceConfiguration.ts
similarity index 78%
rename from src/component/interfaces/ISequenceConfiguration.ts
rename to src/component/interfaces/SequenceConfiguration.ts
index d96b46cd6..2756276bc 100644
--- a/src/component/interfaces/ISequenceConfiguration.ts
+++ b/src/component/interfaces/SequenceConfiguration.ts
@@ -1,5 +1,5 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
+import { ComponentConfiguration } from "./ComponentConfiguration";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
 
 /**
  * Interface for configuration of sequence component.
@@ -20,22 +20,22 @@ import { EdgeDirection } from "../../graph/edge/EdgeDirection";
  * });
  * ```
  */
-export interface ISequenceConfiguration extends IComponentConfiguration {
+export interface SequenceConfiguration extends ComponentConfiguration {
     /**
      * Set the direction to follow when playing.
      *
      * @default EdgeDirection.Next
      */
-    direction?: EdgeDirection;
+    direction?: NavigationDirection;
 
     /**
-     * The node key representing the direction arrow to be highlighted.
+     * The node id representing the direction arrow to be highlighted.
      *
      * @description When set to null no direction will be highlighted.
      *
      * @default undefined
      */
-    highlightKey?: string;
+    highlightId?: string;
 
     /**
      * The max width of the sequence container.
diff --git a/src/component/interfaces/IShader.ts b/src/component/interfaces/Shader.ts
similarity index 61%
rename from src/component/interfaces/IShader.ts
rename to src/component/interfaces/Shader.ts
index 421a4547c..e5645f71f 100644
--- a/src/component/interfaces/IShader.ts
+++ b/src/component/interfaces/Shader.ts
@@ -1,4 +1,4 @@
-export interface IShader {
+export interface Shader {
     fragment: string;
     vertex: string;
 }
diff --git a/src/component/interfaces/ISliderConfiguration.ts b/src/component/interfaces/SliderConfiguration.ts
similarity index 74%
rename from src/component/interfaces/ISliderConfiguration.ts
rename to src/component/interfaces/SliderConfiguration.ts
index 89f6fa118..fd1e3500c 100644
--- a/src/component/interfaces/ISliderConfiguration.ts
+++ b/src/component/interfaces/SliderConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 
 /**
  * Enumeration for slider mode.
@@ -12,7 +12,7 @@ import { IComponentConfiguration } from "./IComponentConfiguration";
  * that transitions with motion is possilble. When it
  * is not, the stationary mode will be applied.
  */
-export enum SliderMode {
+export enum SliderConfigurationMode {
     /**
      * Transitions with motion.
      *
@@ -38,18 +38,18 @@ export enum SliderMode {
 }
 
 /**
- * Interface for configuration of slider keys.
+ * Interface for configuration of slider ids.
  *
  * @interface
  */
-export interface ISliderKeys {
+export interface SliderConfigurationIds {
     /**
-     * Key for the image plane in the background.
+     * Id for the image plane in the background.
      */
     background: string;
 
     /**
-     * Key for the image plane in the foreground.
+     * Id for the image plane in the foreground.
      */
     foreground: string;
 }
@@ -64,9 +64,9 @@ export interface ISliderKeys {
  *     component: {
  *         slider: {
  *             initialPosition: 0.5,
- *             keys: {
- *                 background: '<background-key>',
- *                 foreground: '<foreground-key>',
+ *             ids: {
+ *                 background: '<background-id>',
+ *                 foreground: '<foreground-id>',
  *             },
  *             sliderVisible: true,
  *         },
@@ -75,7 +75,7 @@ export interface ISliderKeys {
  * });
  * ```
  */
-export interface ISliderConfiguration extends IComponentConfiguration {
+export interface SliderConfiguration extends ComponentConfiguration {
     /**
      * Initial position of the slider on the interval [0, 1].
      *
@@ -84,9 +84,9 @@ export interface ISliderConfiguration extends IComponentConfiguration {
     initialPosition?: number;
 
     /**
-     * Slider keys.
+     * Slider ids.
      */
-    keys?: ISliderKeys;
+    ids?: SliderConfigurationIds;
 
     /**
      * Value indicating whether the slider should be visible.
@@ -98,5 +98,5 @@ export interface ISliderConfiguration extends IComponentConfiguration {
     /**
      * Mode used for image pair transitions.
      */
-    mode?: SliderMode;
+    mode?: SliderConfigurationMode;
 }
diff --git a/src/component/interfaces/ISpatialDataConfiguration.ts b/src/component/interfaces/SpatialDataConfiguration.ts
similarity index 93%
rename from src/component/interfaces/ISpatialDataConfiguration.ts
rename to src/component/interfaces/SpatialDataConfiguration.ts
index cb1e7a307..af7bb9c07 100644
--- a/src/component/interfaces/ISpatialDataConfiguration.ts
+++ b/src/component/interfaces/SpatialDataConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 import { CameraVisualizationMode } from "../spatialdata/CameraVisualizationMode";
 import { OriginalPositionMode } from "../spatialdata/OriginalPositionMode";
 
@@ -27,7 +27,7 @@ import { OriginalPositionMode } from "../spatialdata/OriginalPositionMode";
  * });
  * ```
  */
-export interface ISpatialDataConfiguration extends IComponentConfiguration {
+export interface SpatialDataConfiguration extends ComponentConfiguration {
     /**
      * The camera size on the interval [0.01, 1].
      *
diff --git a/src/component/interfaces/ITagConfiguration.ts b/src/component/interfaces/TagConfiguration.ts
similarity index 85%
rename from src/component/interfaces/ITagConfiguration.ts
rename to src/component/interfaces/TagConfiguration.ts
index f058329f9..8d296edd2 100644
--- a/src/component/interfaces/ITagConfiguration.ts
+++ b/src/component/interfaces/TagConfiguration.ts
@@ -1,4 +1,4 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 import { TagMode } from "../tag/TagMode";
 
 /**
@@ -19,7 +19,7 @@ import { TagMode } from "../tag/TagMode";
  * });
  * ```
  */
-export interface ITagConfiguration extends IComponentConfiguration {
+export interface TagConfiguration extends ComponentConfiguration {
     /**
      * The color of vertices and edges for tags that
      * are being created.
diff --git a/src/component/interfaces/IBearingConfiguration.ts b/src/component/interfaces/ZoomConfiguration.ts
similarity index 56%
rename from src/component/interfaces/IBearingConfiguration.ts
rename to src/component/interfaces/ZoomConfiguration.ts
index ad72d9371..0074a2978 100644
--- a/src/component/interfaces/IBearingConfiguration.ts
+++ b/src/component/interfaces/ZoomConfiguration.ts
@@ -1,7 +1,7 @@
-import { IComponentConfiguration } from "./IComponentConfiguration";
+import { ComponentConfiguration } from "./ComponentConfiguration";
 import { ComponentSize } from "../utils/ComponentSize";
 
-export interface IBearingConfiguration extends IComponentConfiguration {
+export interface ZoomConfiguration extends ComponentConfiguration {
     /**
      * The size of the ui elements.
      *
diff --git a/src/component/keyboard/KeyPlayHandler.ts b/src/component/keyboard/KeyPlayHandler.ts
index 24f0c6b48..9169177c2 100644
--- a/src/component/keyboard/KeyPlayHandler.ts
+++ b/src/component/keyboard/KeyPlayHandler.ts
@@ -9,11 +9,11 @@ import {
     withLatestFrom,
 } from "rxjs/operators";
 
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
 import { Node } from "../../graph/Node";
 import { State } from "../../state/State";
-import { IKeyboardConfiguration } from "../interfaces/IKeyboardConfiguration";
+import { KeyboardConfiguration } from "../interfaces/KeyboardConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 
 /**
@@ -35,7 +35,7 @@ import { HandlerBase } from "../utils/HandlerBase";
  * var isEnabled = keyboardComponent.keyPlay.isEnabled;
  * ```
  */
-export class KeyPlayHandler extends HandlerBase<IKeyboardConfiguration> {
+export class KeyPlayHandler extends HandlerBase<KeyboardConfiguration> {
     private _keyDownSubscription: Subscription;
 
     protected _enable(): void {
@@ -46,7 +46,7 @@ export class KeyPlayHandler extends HandlerBase<IKeyboardConfiguration> {
                 this._navigator.playService.speed$,
                 this._navigator.stateService.currentNode$.pipe(
                     switchMap(
-                        (node: Node): Observable<IEdgeStatus> => {
+                        (node: Node): Observable<NavigationEdgeStatus> => {
                             return node.sequenceEdges$;
                         })),
                 this._navigator.stateService.state$.pipe(
@@ -58,7 +58,7 @@ export class KeyPlayHandler extends HandlerBase<IKeyboardConfiguration> {
             .subscribe(
                 (
                     [event, playing, direction, speed, status, earth]:
-                        [KeyboardEvent, boolean, EdgeDirection, number, IEdgeStatus, boolean]): void => {
+                        [KeyboardEvent, boolean, NavigationDirection, number, NavigationEdgeStatus, boolean]): void => {
 
                     if (event.altKey || event.ctrlKey || event.metaKey) {
                         return;
@@ -70,10 +70,10 @@ export class KeyPlayHandler extends HandlerBase<IKeyboardConfiguration> {
                                 return;
                             }
 
-                            const newDirection: EdgeDirection = playing ?
-                                null : direction === EdgeDirection.Next ?
-                                    EdgeDirection.Prev : direction === EdgeDirection.Prev ?
-                                        EdgeDirection.Next : null;
+                            const newDirection: NavigationDirection = playing ?
+                                null : direction === NavigationDirection.Next ?
+                                    NavigationDirection.Prev : direction === NavigationDirection.Prev ?
+                                        NavigationDirection.Next : null;
 
                             if (newDirection != null) {
                                 this._navigator.playService.setDirection(newDirection);
@@ -116,7 +116,7 @@ export class KeyPlayHandler extends HandlerBase<IKeyboardConfiguration> {
         this._keyDownSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(enable: boolean): IKeyboardConfiguration {
+    protected _getConfiguration(enable: boolean): KeyboardConfiguration {
         return { keyZoom: enable };
     }
 }
diff --git a/src/component/keyboard/KeySequenceNavigationHandler.ts b/src/component/keyboard/KeySequenceNavigationHandler.ts
index 9e7c058e1..cfd726466 100644
--- a/src/component/keyboard/KeySequenceNavigationHandler.ts
+++ b/src/component/keyboard/KeySequenceNavigationHandler.ts
@@ -8,10 +8,10 @@ import {
 } from "rxjs/operators";
 
 import { Node } from "../../graph/Node";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
-import { IKeyboardConfiguration } from "../interfaces/IKeyboardConfiguration";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { KeyboardConfiguration } from "../interfaces/KeyboardConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
 import { AbortMapillaryError } from "../../error/AbortMapillaryError";
 
 /**
@@ -31,27 +31,27 @@ import { AbortMapillaryError } from "../../error/AbortMapillaryError";
  * var isEnabled = keyboardComponent.keySequenceNavigation.isEnabled;
  * ```
  */
-export class KeySequenceNavigationHandler extends HandlerBase<IKeyboardConfiguration> {
+export class KeySequenceNavigationHandler extends HandlerBase<KeyboardConfiguration> {
     private _keyDownSubscription: Subscription;
 
     protected _enable(): void {
-        const sequenceEdges$: Observable<IEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
+        const sequenceEdges$: Observable<NavigationEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
             switchMap(
-                (node: Node): Observable<IEdgeStatus> => {
+                (node: Node): Observable<NavigationEdgeStatus> => {
                     return node.sequenceEdges$;
                 }));
 
         this._keyDownSubscription = this._container.keyboardService.keyDown$.pipe(
             withLatestFrom(sequenceEdges$))
             .subscribe(
-                ([event, edgeStatus]: [KeyboardEvent, IEdgeStatus]): void => {
-                    let direction: EdgeDirection = null;
+                ([event, edgeStatus]: [KeyboardEvent, NavigationEdgeStatus]): void => {
+                    let direction: NavigationDirection = null;
                     switch (event.keyCode) {
                         case 38: // up
-                            direction = EdgeDirection.Next;
+                            direction = NavigationDirection.Next;
                             break;
                         case 40: // down
-                            direction = EdgeDirection.Prev;
+                            direction = NavigationDirection.Prev;
                             break;
                         default:
                             return;
@@ -65,7 +65,7 @@ export class KeySequenceNavigationHandler extends HandlerBase<IKeyboardConfigura
 
                     for (const edge of edgeStatus.edges) {
                         if (edge.data.direction === direction) {
-                            this._navigator.moveToKey$(edge.to)
+                            this._navigator.moveTo$(edge.target)
                                 .subscribe(
                                     undefined,
                                     (error: Error): void => {
@@ -84,7 +84,7 @@ export class KeySequenceNavigationHandler extends HandlerBase<IKeyboardConfigura
         this._keyDownSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(enable: boolean): IKeyboardConfiguration {
+    protected _getConfiguration(enable: boolean): KeyboardConfiguration {
         return { keySequenceNavigation: enable };
     }
 }
diff --git a/src/component/keyboard/KeySpatialNavigationHandler.ts b/src/component/keyboard/KeySpatialNavigationHandler.ts
index ae7b2fad0..8fc53ee6c 100644
--- a/src/component/keyboard/KeySpatialNavigationHandler.ts
+++ b/src/component/keyboard/KeySpatialNavigationHandler.ts
@@ -14,15 +14,15 @@ import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IKeyboardConfiguration } from "../interfaces/IKeyboardConfiguration";
+import { KeyboardConfiguration } from "../interfaces/KeyboardConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { Spatial } from "../../geo/Spatial";
-import { IEdge } from "../../graph/edge/interfaces/IEdge";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
-import { IFrame } from "../../state/interfaces/IFrame";
-import { IRotation } from "../../state/interfaces/IRotation";
+import { NavigationEdge } from "../../graph/edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
+import { EulerRotation } from "../../state/interfaces/EulerRotation";
 import { Camera } from "../../geo/Camera";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
 import { AbortMapillaryError } from "../../error/AbortMapillaryError";
 import { isSpherical } from "../../geo/Geo";
 
@@ -49,14 +49,14 @@ import { isSpherical } from "../../geo/Geo";
  * var isEnabled = keyboardComponent.keySpatialNavigation.isEnabled;
  * ```
  */
-export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfiguration> {
+export class KeySpatialNavigationHandler extends HandlerBase<KeyboardConfiguration> {
     private _spatial: Spatial;
 
     private _keyDownSubscription: Subscription;
 
     /** @ignore */
     constructor(
-        component: Component<IKeyboardConfiguration>,
+        component: Component<KeyboardConfiguration>,
         container: Container,
         navigator: Navigator,
         spatial: Spatial) {
@@ -66,9 +66,9 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
     }
 
     protected _enable(): void {
-        const spatialEdges$: Observable<IEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
+        const spatialEdges$: Observable<NavigationEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
             switchMap(
-                (node: Node): Observable<IEdgeStatus> => {
+                (node: Node): Observable<NavigationEdgeStatus> => {
                     return node.spatialEdges$;
                 }));
 
@@ -76,21 +76,21 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
             withLatestFrom(
                 spatialEdges$,
                 this._navigator.stateService.currentState$))
-            .subscribe(([event, edgeStatus, frame]: [KeyboardEvent, IEdgeStatus, IFrame]): void => {
+            .subscribe(([event, edgeStatus, frame]: [KeyboardEvent, NavigationEdgeStatus, AnimationFrame]): void => {
                 let spherical = isSpherical(frame.state.currentNode.cameraType);
-                let direction: EdgeDirection = null;
+                let direction: NavigationDirection = null;
                 switch (event.keyCode) {
                     case 37: // left
-                        direction = event.shiftKey && !spherical ? EdgeDirection.TurnLeft : EdgeDirection.StepLeft;
+                        direction = event.shiftKey && !spherical ? NavigationDirection.TurnLeft : NavigationDirection.StepLeft;
                         break;
                     case 38: // up
-                        direction = event.shiftKey && !spherical ? EdgeDirection.Spherical : EdgeDirection.StepForward;
+                        direction = event.shiftKey && !spherical ? NavigationDirection.Spherical : NavigationDirection.StepForward;
                         break;
                     case 39: // right
-                        direction = event.shiftKey && !spherical ? EdgeDirection.TurnRight : EdgeDirection.StepRight;
+                        direction = event.shiftKey && !spherical ? NavigationDirection.TurnRight : NavigationDirection.StepRight;
                         break;
                     case 40: // down
-                        direction = event.shiftKey && !spherical ? EdgeDirection.TurnU : EdgeDirection.StepBackward;
+                        direction = event.shiftKey && !spherical ? NavigationDirection.TurnU : NavigationDirection.StepBackward;
                         break;
                     default:
                         return;
@@ -108,17 +108,17 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
                 } else {
                     const shifts: { [dir: number]: number } = {};
 
-                    shifts[EdgeDirection.StepBackward] = Math.PI;
-                    shifts[EdgeDirection.StepForward] = 0;
-                    shifts[EdgeDirection.StepLeft] = Math.PI / 2;
-                    shifts[EdgeDirection.StepRight] = -Math.PI / 2;
+                    shifts[NavigationDirection.StepBackward] = Math.PI;
+                    shifts[NavigationDirection.StepForward] = 0;
+                    shifts[NavigationDirection.StepLeft] = Math.PI / 2;
+                    shifts[NavigationDirection.StepRight] = -Math.PI / 2;
 
                     const phi: number = this._rotationFromCamera(frame.state.camera).phi;
                     const navigationAngle: number = this._spatial.wrapAngle(phi + shifts[direction]);
                     const threshold: number = Math.PI / 4;
-                    const edges: IEdge[] = edgeStatus.edges.filter(
-                        (e: IEdge): boolean => {
-                            return e.data.direction === EdgeDirection.Spherical || e.data.direction === direction;
+                    const edges: NavigationEdge[] = edgeStatus.edges.filter(
+                        (e: NavigationEdge): boolean => {
+                            return e.data.direction === NavigationDirection.Spherical || e.data.direction === direction;
                         });
 
                     let smallestAngle: number = Number.MAX_VALUE;
@@ -128,7 +128,7 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
 
                         if (angle < Math.min(smallestAngle, threshold)) {
                             smallestAngle = angle;
-                            toKey = edge.to;
+                            toKey = edge.target;
                         }
                     }
 
@@ -136,7 +136,7 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
                         return;
                     }
 
-                    this._moveToKey(toKey);
+                    this._moveTo(toKey);
                 }
             });
     }
@@ -145,21 +145,21 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
         this._keyDownSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(enable: boolean): IKeyboardConfiguration {
+    protected _getConfiguration(enable: boolean): KeyboardConfiguration {
         return { keySpatialNavigation: enable };
     }
 
-    private _moveDir(direction: EdgeDirection, edgeStatus: IEdgeStatus): void {
+    private _moveDir(direction: NavigationDirection, edgeStatus: NavigationEdgeStatus): void {
         for (const edge of edgeStatus.edges) {
             if (edge.data.direction === direction) {
-                this._moveToKey(edge.to);
+                this._moveTo(edge.target);
                 return;
             }
         }
     }
 
-    private _moveToKey(key: string): void {
-        this._navigator.moveToKey$(key)
+    private _moveTo(id: string): void {
+        this._navigator.moveTo$(id)
             .subscribe(
                 undefined,
                 (error: Error): void => {
@@ -169,7 +169,7 @@ export class KeySpatialNavigationHandler extends HandlerBase<IKeyboardConfigurat
                 });
     }
 
-    private _rotationFromCamera(camera: Camera): IRotation {
+    private _rotationFromCamera(camera: Camera): EulerRotation {
         let direction: THREE.Vector3 = camera.lookat.clone().sub(camera.position);
 
         let upProjection: number = direction.clone().dot(camera.up);
diff --git a/src/component/keyboard/KeyZoomHandler.ts b/src/component/keyboard/KeyZoomHandler.ts
index 7f5edaf1d..fb9880e24 100644
--- a/src/component/keyboard/KeyZoomHandler.ts
+++ b/src/component/keyboard/KeyZoomHandler.ts
@@ -7,7 +7,7 @@ import { RenderCamera } from "../../render/RenderCamera";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IKeyboardConfiguration } from "../interfaces/IKeyboardConfiguration";
+import { KeyboardConfiguration } from "../interfaces/KeyboardConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 
 /**
@@ -27,14 +27,14 @@ import { HandlerBase } from "../utils/HandlerBase";
  * var isEnabled = keyboardComponent.keyZoom.isEnabled;
  * ```
  */
-export class KeyZoomHandler extends HandlerBase<IKeyboardConfiguration> {
+export class KeyZoomHandler extends HandlerBase<KeyboardConfiguration> {
     private _keyDownSubscription: Subscription;
 
     private _viewportCoords: ViewportCoords;
 
     /** @ignore */
     constructor(
-        component: Component<IKeyboardConfiguration>,
+        component: Component<KeyboardConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords) {
@@ -79,7 +79,7 @@ export class KeyZoomHandler extends HandlerBase<IKeyboardConfiguration> {
         this._keyDownSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(enable: boolean): IKeyboardConfiguration {
+    protected _getConfiguration(enable: boolean): KeyboardConfiguration {
         return { keyZoom: enable };
     }
 }
diff --git a/src/component/keyboard/KeyboardComponent.ts b/src/component/keyboard/KeyboardComponent.ts
index 23fa68155..7066cf51b 100644
--- a/src/component/keyboard/KeyboardComponent.ts
+++ b/src/component/keyboard/KeyboardComponent.ts
@@ -6,7 +6,7 @@ import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Spatial } from "../../geo/Spatial";
 import { ViewportCoords } from "../../geo/ViewportCoords";
-import { IKeyboardConfiguration } from "../interfaces/IKeyboardConfiguration";
+import { KeyboardConfiguration } from "../interfaces/KeyboardConfiguration";
 import { KeySequenceNavigationHandler } from "./KeySequenceNavigationHandler";
 import { KeySpatialNavigationHandler } from "./KeySpatialNavigationHandler";
 import { KeyZoomHandler } from "./KeyZoomHandler";
@@ -26,7 +26,7 @@ import { KeyPlayHandler } from "./KeyPlayHandler";
  * var keyboardComponent = viewer.getComponent("keyboard");
  * ```
  */
-export class KeyboardComponent extends Component<IKeyboardConfiguration> {
+export class KeyboardComponent extends Component<KeyboardConfiguration> {
     public static componentName: string = "keyboard";
 
     private _keyPlayHandler: KeyPlayHandler;
@@ -85,7 +85,7 @@ export class KeyboardComponent extends Component<IKeyboardConfiguration> {
     protected _activate(): void {
         this._configurationSubscription = this._configuration$
             .subscribe(
-                (configuration: IKeyboardConfiguration): void => {
+                (configuration: KeyboardConfiguration): void => {
                     if (configuration.keyPlay) {
                         this._keyPlayHandler.enable();
                     } else {
@@ -121,7 +121,7 @@ export class KeyboardComponent extends Component<IKeyboardConfiguration> {
         this._keyZoomHandler.disable();
     }
 
-    protected _getDefaultConfiguration(): IKeyboardConfiguration {
+    protected _getDefaultConfiguration(): KeyboardConfiguration {
         return { keyPlay: true, keySequenceNavigation: true, keySpatialNavigation: true, keyZoom: true };
     }
 }
diff --git a/src/component/marker/MarkerComponent.ts b/src/component/marker/MarkerComponent.ts
index f80be7ee8..cc0afcdb5 100644
--- a/src/component/marker/MarkerComponent.ts
+++ b/src/component/marker/MarkerComponent.ts
@@ -26,17 +26,17 @@ import { Component } from "../Component";
 import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
-import { ILatLon } from "../../api/interfaces/ILatLon";
+import { LatLon } from "../../api/interfaces/LatLon";
 import { GeoCoords } from "../../geo/GeoCoords";
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { GraphCalculator } from "../../graph/GraphCalculator";
-import { GLRenderStage } from "../../render/GLRenderStage";
-import { IGLRenderHash } from "../../render/interfaces/IGLRenderHash";
+import { RenderPass } from "../../render/RenderPass";
+import { GLRenderHash } from "../../render/interfaces/IGLRenderHash";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IFrame } from "../../state/interfaces/IFrame";
-import { IMarkerConfiguration } from "../interfaces/IMarkerConfiguration";
-import { IMarkerEvent } from "./interfaces/IMarkerEvent";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
+import { MarkerConfiguration } from "../interfaces/MarkerConfiguration";
+import { MarkerEvent } from "./interfaces/MarkerEvent";
 import { Marker } from "./marker/Marker";
 import { MarkerSet } from "./MarkerSet";
 import { MarkerScene } from "./MarkerScene";
@@ -73,13 +73,13 @@ import { MarkerScene } from "./MarkerScene";
  * var markerComponent = viewer.getComponent("marker");
  * ```
  */
-export class MarkerComponent extends Component<IMarkerConfiguration> {
+export class MarkerComponent extends Component<MarkerConfiguration> {
     public static componentName: string = "marker";
 
     /**
      * Fired when the position of a marker is changed.
      * @event
-     * @type {IMarkerEvent} markerEvent - Marker event data.
+     * @type {MarkerEvent} markerEvent - Marker event data.
      * @example
      * ```
      * markerComponent.on("changed", function(e) {
@@ -92,7 +92,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
     /**
      * Fired when a marker drag interaction starts.
      * @event
-     * @type {IMarkerEvent} markerEvent - Marker event data.
+     * @type {MarkerEvent} markerEvent - Marker event data.
      * @example
      * ```
      * markerComponent.on("dragstart", function(e) {
@@ -105,7 +105,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
     /**
      * Fired when a marker drag interaction ends.
      * @event
-     * @type {IMarkerEvent} markerEvent - Marker event data.
+     * @type {MarkerEvent} markerEvent - Marker event data.
      * @example
      * ```
      * markerComponent.on("dragend", function(e) {
@@ -268,7 +268,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
     protected _activate(): void {
         const groundAltitude$: Observable<number> = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): number => {
+                (frame: AnimationFrame): number => {
                     return frame.state.camera.position.z + this._relativeGroundAltitude;
                 }),
             distinctUntilChanged(
@@ -286,22 +286,22 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                 publishReplay(1),
                 refCount());
 
-        const clampedConfiguration$: Observable<IMarkerConfiguration> = this._configuration$.pipe(
+        const clampedConfiguration$: Observable<MarkerConfiguration> = this._configuration$.pipe(
             map(
-                (configuration: IMarkerConfiguration): IMarkerConfiguration => {
+                (configuration: MarkerConfiguration): MarkerConfiguration => {
                     return { visibleBBoxSize: Math.max(1, Math.min(200, configuration.visibleBBoxSize)) };
                 }));
 
-        const currentlatLon$: Observable<ILatLon> = this._navigator.stateService.currentNode$.pipe(
-            map((node: Node): ILatLon => { return node.latLon; }),
+        const currentlatLon$: Observable<LatLon> = this._navigator.stateService.currentNode$.pipe(
+            map((node: Node): LatLon => { return node.latLon; }),
             publishReplay(1),
             refCount());
 
-        const visibleBBox$: Observable<[ILatLon, ILatLon]> = observableCombineLatest(
+        const visibleBBox$: Observable<[LatLon, LatLon]> = observableCombineLatest(
             clampedConfiguration$,
             currentlatLon$).pipe(
                 map(
-                    ([configuration, latLon]: [IMarkerConfiguration, ILatLon]): [ILatLon, ILatLon] => {
+                    ([configuration, latLon]: [MarkerConfiguration, LatLon]): [LatLon, LatLon] => {
                         return this._graphCalculator
                             .boundingBoxCorners(latLon, configuration.visibleBBoxSize / 2);
                     }),
@@ -314,20 +314,20 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                 this._markerSet.changed$),
             visibleBBox$).pipe(
                 map(
-                    ([set, bbox]: [MarkerSet, [ILatLon, ILatLon]]): Marker[] => {
+                    ([set, bbox]: [MarkerSet, [LatLon, LatLon]]): Marker[] => {
                         return set.search(bbox);
                     }));
 
         this._setChangedSubscription = geoInitiated$.pipe(
             switchMap(
-                (): Observable<[Marker[], ILatLonAlt, number]> => {
+                (): Observable<[Marker[], LatLonAlt, number]> => {
                     return visibleMarkers$.pipe(
                         withLatestFrom(
                             this._navigator.stateService.reference$,
                             groundAltitude$));
                 }))
             .subscribe(
-                ([markers, reference, alt]: [Marker[], ILatLonAlt, number]): void => {
+                ([markers, reference, alt]: [Marker[], LatLonAlt, number]): void => {
                     const geoCoords: GeoCoords = this._geoCoords;
                     const markerScene: MarkerScene = this._markerScene;
                     const sceneMarkers: { [id: string]: Marker } = markerScene.markers;
@@ -361,7 +361,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
 
         this._markersUpdatedSubscription = geoInitiated$.pipe(
             switchMap(
-                (): Observable<[Marker[], [ILatLon, ILatLon], ILatLonAlt, number]> => {
+                (): Observable<[Marker[], [LatLon, LatLon], LatLonAlt, number]> => {
                     return this._markerSet.updated$.pipe(
                         withLatestFrom(
                             visibleBBox$,
@@ -369,7 +369,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                             groundAltitude$));
                 }))
             .subscribe(
-                ([markers, [sw, ne], reference, alt]: [Marker[], [ILatLon, ILatLon], ILatLonAlt, number]): void => {
+                ([markers, [sw, ne], reference, alt]: [Marker[], [LatLon, LatLon], LatLonAlt, number]): void => {
                     const geoCoords: GeoCoords = this._geoCoords;
                     const markerScene: MarkerScene = this._markerScene;
 
@@ -401,7 +401,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
             skip(1),
             withLatestFrom(groundAltitude$))
             .subscribe(
-                ([reference, alt]: [ILatLonAlt, number]): void => {
+                ([reference, alt]: [LatLonAlt, number]): void => {
                     const geoCoords: GeoCoords = this._geoCoords;
                     const markerScene: MarkerScene = this._markerScene;
 
@@ -425,7 +425,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                 this._navigator.stateService.reference$,
                 currentlatLon$))
             .subscribe(
-                ([alt, reference, latLon]: [number, ILatLonAlt, ILatLon]): void => {
+                ([alt, reference, latLon]: [number, LatLonAlt, LatLon]): void => {
                     const geoCoords: GeoCoords = this._geoCoords;
                     const markerScene: MarkerScene = this._markerScene;
 
@@ -462,16 +462,16 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
 
         this._renderSubscription = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): IGLRenderHash => {
+                (frame: AnimationFrame): GLRenderHash => {
                     const scene: MarkerScene = this._markerScene;
 
                     return {
                         name: this._name,
-                        render: {
+                        renderer: {
                             frameId: frame.id,
                             needsRender: scene.needsRender,
                             render: scene.render.bind(scene),
-                            stage: GLRenderStage.Foreground,
+                            pass: RenderPass.Opaque,
                         },
                     };
                 }))
@@ -531,7 +531,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                     const eventType: string = dragging ? MarkerComponent.dragstart : MarkerComponent.dragend;
                     const id: string = dragging ? current[1] : previous[1];
                     const marker: Marker = this._markerScene.get(id);
-                    const markerEvent: IMarkerEvent = { marker: marker, target: this, type: eventType };
+                    const markerEvent: MarkerEvent = { marker: marker, target: this, type: eventType };
 
                     this.fire(eventType, markerEvent);
                 });
@@ -597,7 +597,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                     clampedConfiguration$))
             .subscribe(
                 ([event, [marker, offset, render], reference, configuration]:
-                    [MouseEvent, [Marker, number[], RenderCamera], ILatLonAlt, IMarkerConfiguration]): void => {
+                    [MouseEvent, [Marker, number[], RenderCamera], LatLonAlt, MarkerConfiguration]): void => {
                     if (!this._markerScene.has(marker.id)) {
                         return;
                     }
@@ -646,7 +646,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
                     this._markerScene.update(marker.id, intersection.toArray(), { lat: lat, lon: lon });
                     this._markerSet.update(marker);
 
-                    const markerEvent: IMarkerEvent = { marker: marker, target: this, type: MarkerComponent.changed };
+                    const markerEvent: MarkerEvent = { marker: marker, target: this, type: MarkerComponent.changed };
                     this.fire(MarkerComponent.changed, markerEvent);
                 });
     }
@@ -664,7 +664,7 @@ export class MarkerComponent extends Component<IMarkerConfiguration> {
         this._markerScene.clear();
     }
 
-    protected _getDefaultConfiguration(): IMarkerConfiguration {
+    protected _getDefaultConfiguration(): MarkerConfiguration {
         return { visibleBBoxSize: 100 };
     }
 }
diff --git a/src/component/marker/MarkerScene.ts b/src/component/marker/MarkerScene.ts
index 182bcb031..495e80653 100644
--- a/src/component/marker/MarkerScene.ts
+++ b/src/component/marker/MarkerScene.ts
@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { ILatLon } from "../../api/interfaces/ILatLon";
+import { LatLon } from "../../api/interfaces/LatLon";
 import { Marker } from "./marker/Marker";
 
 export class MarkerScene {
@@ -111,7 +111,7 @@ export class MarkerScene {
         this._needsRender = false;
     }
 
-    public update(id: string, position: number[], latLon?: ILatLon): void {
+    public update(id: string, position: number[], latLon?: LatLon): void {
         if (!(id in this._markers)) {
             return;
         }
diff --git a/src/component/marker/MarkerSet.ts b/src/component/marker/MarkerSet.ts
index bee932972..367b237f9 100644
--- a/src/component/marker/MarkerSet.ts
+++ b/src/component/marker/MarkerSet.ts
@@ -2,7 +2,7 @@ import {
     Observable,
     Subject,
 } from "rxjs";
-import { ILatLon } from "../../api/interfaces/ILatLon";
+import { LatLon } from "../../api/interfaces/LatLon";
 import { Marker } from "./marker/Marker";
 
 type MarkerIndexItem = {
@@ -117,7 +117,7 @@ export class MarkerSet {
         this._indexChanged$.next(this);
     }
 
-    public search([sw, ne]: [ILatLon, ILatLon]): Marker[] {
+    public search([sw, ne]: [LatLon, LatLon]): Marker[] {
         return this._index
             .search({
                 maxX: ne.lat,
diff --git a/src/component/marker/interfaces/ICircleMarkerOptions.ts b/src/component/marker/interfaces/CircleMarkerOptions.ts
similarity index 84%
rename from src/component/marker/interfaces/ICircleMarkerOptions.ts
rename to src/component/marker/interfaces/CircleMarkerOptions.ts
index 94393fb16..46488b200 100644
--- a/src/component/marker/interfaces/ICircleMarkerOptions.ts
+++ b/src/component/marker/interfaces/CircleMarkerOptions.ts
@@ -1,9 +1,9 @@
 /**
- * @interface ICircleMarkerOptions
+ * @interface CircleMarkerOptions
  *
  * Interface that represents the options for configuring a `CircleMarker`.
  */
-export interface ICircleMarkerOptions {
+export interface CircleMarkerOptions {
     /**
      * The color of the marker.
      *
diff --git a/src/component/marker/interfaces/IMarkerEvent.ts b/src/component/marker/interfaces/MarkerEvent.ts
similarity index 88%
rename from src/component/marker/interfaces/IMarkerEvent.ts
rename to src/component/marker/interfaces/MarkerEvent.ts
index 80abab2f2..4239391f0 100644
--- a/src/component/marker/interfaces/IMarkerEvent.ts
+++ b/src/component/marker/interfaces/MarkerEvent.ts
@@ -2,11 +2,11 @@ import { Marker } from "../marker/Marker";
 import { MarkerComponent } from "../MarkerComponent";
 
 /**
- * @interface IMarkerEvent
+ * @interface MarkerEvent
  *
  * Interface that represents a marker event occuring in the viewer target element.
  */
-export interface IMarkerEvent {
+export interface MarkerEvent {
     /**
      * The marker that was affected by the event.
      */
diff --git a/src/component/marker/interfaces/ISimpleMarkerOptions.ts b/src/component/marker/interfaces/SimpleMarkerOptions.ts
similarity index 93%
rename from src/component/marker/interfaces/ISimpleMarkerOptions.ts
rename to src/component/marker/interfaces/SimpleMarkerOptions.ts
index 7cf0494cf..bfb22e5f9 100644
--- a/src/component/marker/interfaces/ISimpleMarkerOptions.ts
+++ b/src/component/marker/interfaces/SimpleMarkerOptions.ts
@@ -1,9 +1,9 @@
 /**
- * @interface ISimpleMarkerOptions
+ * @interface SimpleMarkerOptions
  *
  * Interface that represents the options for configuring a `SimpleMarker`.
  */
-export interface ISimpleMarkerOptions {
+export interface SimpleMarkerOptions {
     /**
      * The color of the ball inside the marker.
      *
diff --git a/src/component/marker/marker/CircleMarker.ts b/src/component/marker/marker/CircleMarker.ts
index c4dacf525..dac60f5e6 100644
--- a/src/component/marker/marker/CircleMarker.ts
+++ b/src/component/marker/marker/CircleMarker.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import { ILatLon } from "../../../api/interfaces/ILatLon";
-import { ICircleMarkerOptions } from "../interfaces/ICircleMarkerOptions";
+import { LatLon } from "../../../api/interfaces/LatLon";
+import { CircleMarkerOptions } from "../interfaces/CircleMarkerOptions";
 import { Marker } from "./Marker";
 
 /**
@@ -37,7 +37,7 @@ export class CircleMarker extends Marker {
     private _opacity: number;
     private _radius: number;
 
-    constructor(id: string, latLon: ILatLon, options?: ICircleMarkerOptions) {
+    constructor(id: string, latLon: LatLon, options?: CircleMarkerOptions) {
         super(id, latLon);
 
         options = !!options ? options : {};
diff --git a/src/component/marker/marker/Marker.ts b/src/component/marker/marker/Marker.ts
index 5bac1c707..52cdc7a21 100644
--- a/src/component/marker/marker/Marker.ts
+++ b/src/component/marker/marker/Marker.ts
@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { ILatLon } from "../../../api/interfaces/ILatLon";
+import { LatLon } from "../../../api/interfaces/LatLon";
 
 /**
  * @class Marker
@@ -10,9 +10,9 @@ import { ILatLon } from "../../../api/interfaces/ILatLon";
 export abstract class Marker {
     protected _id: string;
     protected _geometry: THREE.Object3D;
-    protected _latLon: ILatLon;
+    protected _latLon: LatLon;
 
-    constructor(id: string, latLon: ILatLon) {
+    constructor(id: string, latLon: LatLon) {
         this._id = id;
         this._latLon = latLon;
     }
@@ -36,9 +36,9 @@ export abstract class Marker {
 
     /**
      * Get lat lon.
-     * @returns {ILatLon} The geographic coordinates of the marker.
+     * @returns {LatLon} The geographic coordinates of the marker.
      */
-    public get latLon(): ILatLon {
+    public get latLon(): LatLon {
         return this._latLon;
     }
 
@@ -84,7 +84,7 @@ export abstract class Marker {
     }
 
     /** @ignore */
-    public updatePosition(position: number[], latLon?: ILatLon): void {
+    public updatePosition(position: number[], latLon?: LatLon): void {
         if (!!latLon) {
             this._latLon.lat = latLon.lat;
             this._latLon.lon = latLon.lon;
diff --git a/src/component/marker/marker/SimpleMarker.ts b/src/component/marker/marker/SimpleMarker.ts
index e943b8e23..486a838c5 100644
--- a/src/component/marker/marker/SimpleMarker.ts
+++ b/src/component/marker/marker/SimpleMarker.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
-import { ILatLon } from "../../../api/interfaces/ILatLon";
-import { ISimpleMarkerOptions } from "../interfaces/ISimpleMarkerOptions";
+import { LatLon } from "../../../api/interfaces/LatLon";
+import { SimpleMarkerOptions } from "../interfaces/SimpleMarkerOptions";
 import { Marker } from "./Marker";
 
 /**
@@ -44,7 +44,7 @@ export class SimpleMarker extends Marker {
     private _opacity: number;
     private _radius: number;
 
-    constructor(id: string, latLon: ILatLon, options?: ISimpleMarkerOptions) {
+    constructor(id: string, latLon: LatLon, options?: SimpleMarkerOptions) {
         super(id, latLon);
 
         options = !!options ? options : {};
diff --git a/src/component/mouse/BounceHandler.ts b/src/component/mouse/BounceHandler.ts
index f080f4285..60ed90379 100644
--- a/src/component/mouse/BounceHandler.ts
+++ b/src/component/mouse/BounceHandler.ts
@@ -19,11 +19,11 @@ import { Transform } from "../../geo/Transform";
 import { Node } from "../../graph/Node";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { Spatial } from "../../geo/Spatial";
 import * as ImageBoundary from "./ImageBoundary";
@@ -32,14 +32,14 @@ import * as ImageBoundary from "./ImageBoundary";
  * The `BounceHandler` ensures that the viewer bounces back to the image
  * when drag panning outside of the image edge.
  */
-export class BounceHandler extends HandlerBase<IMouseConfiguration> {
+export class BounceHandler extends HandlerBase<MouseConfiguration> {
     private _spatial: Spatial;
     private _viewportCoords: ViewportCoords;
 
     private _bounceSubscription: Subscription;
 
     constructor(
-        component: Component<IMouseConfiguration>,
+        component: Component<MouseConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords,
@@ -53,7 +53,7 @@ export class BounceHandler extends HandlerBase<IMouseConfiguration> {
     protected _enable(): void {
         const inTransition$: Observable<boolean> = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.alpha < 1;
                 }),
             distinctUntilChanged());
@@ -141,7 +141,7 @@ export class BounceHandler extends HandlerBase<IMouseConfiguration> {
         this._bounceSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(): IMouseConfiguration {
+    protected _getConfiguration(): MouseConfiguration {
         return {};
     }
 }
diff --git a/src/component/mouse/DragPanHandler.ts b/src/component/mouse/DragPanHandler.ts
index 350b18f53..7d2534b7d 100644
--- a/src/component/mouse/DragPanHandler.ts
+++ b/src/component/mouse/DragPanHandler.ts
@@ -23,14 +23,14 @@ import { Transform } from "../../geo/Transform";
 import { Node } from "../../graph/Node";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { Spatial } from "../../geo/Spatial";
-import { IRotation } from "../../state/interfaces/IRotation";
+import { EulerRotation } from "../../state/interfaces/EulerRotation";
 import { MouseTouchPair } from "./HandlerTypes";
 import { MouseOperator } from "../utils/MouseOperator";
 import * as ImageBoundary from "./ImageBoundary";
@@ -49,7 +49,7 @@ import { isSpherical } from "../../geo/Geo";
  * var isEnabled = mouseComponent.dragPan.isEnabled;
  * ```
  */
-export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
+export class DragPanHandler extends HandlerBase<MouseConfiguration> {
     private _spatial: Spatial;
     private _viewportCoords: ViewportCoords;
 
@@ -61,7 +61,7 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
 
     /** @ignore */
     constructor(
-        component: Component<IMouseConfiguration>,
+        component: Component<MouseConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords,
@@ -133,9 +133,9 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
             touchMovingStopped$)
             .subscribe(this._container.touchService.activate$);
 
-        const rotation$: Observable<IRotation> = this._navigator.stateService.currentState$.pipe(
+        const rotation$: Observable<EulerRotation> = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return isSpherical(frame.state.currentNode.cameraType) ||
                         frame.state.nodesAhead < 1;
                 }),
@@ -174,7 +174,13 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
                 this._navigator.stateService.currentTransform$,
                 this._navigator.panService.panNodes$),
             map(
-                ([events, render, transform, nts]: [MouseTouchPair, RenderCamera, Transform, [Node, Transform, number][]]): IRotation => {
+                ([events, render, transform, nts]:
+                    [
+                        MouseTouchPair,
+                        RenderCamera,
+                        Transform,
+                        [Node, Transform, number][],
+                    ]): EulerRotation => {
                     let previousEvent: MouseEvent | Touch = events[0];
                     let event: MouseEvent | Touch = events[1];
 
@@ -246,13 +252,13 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
 
         this._rotateWithoutInertiaSubscription = rotation$
             .subscribe(
-                (rotation: IRotation): void => {
+                (rotation: EulerRotation): void => {
                     this._navigator.stateService.rotateWithoutInertia(rotation);
                 });
 
         this._rotateSubscription = rotation$.pipe(
             scan(
-                (rotationBuffer: [number, IRotation][], rotation: IRotation): [number, IRotation][] => {
+                (rotationBuffer: [number, EulerRotation][], rotation: EulerRotation): [number, EulerRotation][] => {
                     this._drainBuffer(rotationBuffer);
 
                     rotationBuffer.push([Date.now(), rotation]);
@@ -267,9 +273,9 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
                         this._container.mouseService.mouseDragEnd$),
                     this._container.touchService.singleTouchDragEnd$)),
             map(
-                (rotationBuffer: [number, IRotation][]): IRotation => {
-                    const drainedBuffer: [number, IRotation][] = this._drainBuffer(rotationBuffer.slice());
-                    const rotation: IRotation = { phi: 0, theta: 0 };
+                (rotationBuffer: [number, EulerRotation][]): EulerRotation => {
+                    const drainedBuffer: [number, EulerRotation][] = this._drainBuffer(rotationBuffer.slice());
+                    const rotation: EulerRotation = { phi: 0, theta: 0 };
 
                     for (const bufferedRotation of drainedBuffer) {
                         rotation.phi += bufferedRotation[1].phi;
@@ -290,7 +296,7 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
                     return rotation;
                 }))
             .subscribe(
-                (rotation: IRotation): void => {
+                (rotation: EulerRotation): void => {
                     this._navigator.stateService.rotate(rotation);
                 });
     }
@@ -308,7 +314,7 @@ export class DragPanHandler extends HandlerBase<IMouseConfiguration> {
         this._rotateSubscription = null;
     }
 
-    protected _getConfiguration(enable: boolean): IMouseConfiguration {
+    protected _getConfiguration(enable: boolean): MouseConfiguration {
         return { dragPan: enable };
     }
 
diff --git a/src/component/mouse/EarthControlHandler.ts b/src/component/mouse/EarthControlHandler.ts
index 362aaead5..65e00f812 100644
--- a/src/component/mouse/EarthControlHandler.ts
+++ b/src/component/mouse/EarthControlHandler.ts
@@ -16,19 +16,19 @@ import {
 
 import { Transform } from "../../geo/Transform";
 import { Spatial } from "../../geo/Spatial";
-import { IRotation } from "../../state/interfaces/IRotation";
+import { EulerRotation } from "../../state/interfaces/EulerRotation";
 import { State } from "../../state/State";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { MouseOperator } from "../utils/MouseOperator";
 
 
-export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
+export class EarthControlHandler extends HandlerBase<MouseConfiguration> {
     private _viewportCoords: ViewportCoords;
     private _spatial: Spatial;
 
@@ -39,7 +39,7 @@ export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
     private _truckSubscription: Subscription;
 
     constructor(
-        component: Component<IMouseConfiguration>,
+        component: Component<MouseConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords,
@@ -140,11 +140,11 @@ export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
                             }));
                 }),
             map(
-                ([previous, current]: [MouseEvent, MouseEvent]): IRotation => {
+                ([previous, current]: [MouseEvent, MouseEvent]): EulerRotation => {
                     return this._mousePairToRotation(previous, current);
                 }))
             .subscribe(
-                (rotation: IRotation): void => {
+                (rotation: EulerRotation): void => {
                     this._navigator.stateService.orbit(rotation);
                 });
 
@@ -162,11 +162,11 @@ export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
                             }));
                 }),
             map(
-                ([previous, current]: [MouseEvent, MouseEvent]): IRotation => {
+                ([previous, current]: [MouseEvent, MouseEvent]): EulerRotation => {
                     return this._mousePairToRotation(previous, current);
                 }))
             .subscribe(
-                (rotation: IRotation): void => {
+                (rotation: EulerRotation): void => {
                     this._navigator.stateService.orbit(rotation);
                 });
 
@@ -208,7 +208,7 @@ export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
         this._truckSubscription.unsubscribe();
     }
 
-    protected _getConfiguration(): IMouseConfiguration {
+    protected _getConfiguration(): MouseConfiguration {
         return {};
     }
 
@@ -219,7 +219,7 @@ export class EarthControlHandler extends HandlerBase<IMouseConfiguration> {
     }
 
     private _mousePairToRotation(
-        previous: MouseEvent, current: MouseEvent): IRotation {
+        previous: MouseEvent, current: MouseEvent): EulerRotation {
         const [currentX, currentY] =
             this._eventToViewport(current, this._container.container);
         const [previousX, previousY]: number[] =
diff --git a/src/component/mouse/MouseComponent.ts b/src/component/mouse/MouseComponent.ts
index 8d19ce45a..9f714f2b9 100644
--- a/src/component/mouse/MouseComponent.ts
+++ b/src/component/mouse/MouseComponent.ts
@@ -4,7 +4,7 @@ import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Spatial } from "../../geo/Spatial";
 import { ViewportCoords } from "../../geo/ViewportCoords";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { BounceHandler } from "./BounceHandler";
 import { DragPanHandler } from "./DragPanHandler";
 import { EarthControlHandler } from "./EarthControlHandler";
@@ -25,7 +25,7 @@ import { TouchZoomHandler } from "./TouchZoomHandler";
  * var mouseComponent = viewer.getComponent("mouse");
  * ```
  */
-export class MouseComponent extends Component<IMouseConfiguration> {
+export class MouseComponent extends Component<MouseConfiguration> {
     /** @inheritdoc */
     public static componentName: string = "mouse";
 
@@ -84,7 +84,7 @@ export class MouseComponent extends Component<IMouseConfiguration> {
 
         this._configurationSubscription = this._configuration$
             .subscribe(
-                (configuration: IMouseConfiguration): void => {
+                (configuration: MouseConfiguration): void => {
                     if (configuration.dragPan) {
                         this._dragPanHandler.enable();
                     } else {
@@ -119,7 +119,7 @@ export class MouseComponent extends Component<IMouseConfiguration> {
         this._touchZoomHandler.disable();
     }
 
-    protected _getDefaultConfiguration(): IMouseConfiguration {
+    protected _getDefaultConfiguration(): MouseConfiguration {
         return {
             dragPan: true,
             scrollZoom: true,
diff --git a/src/component/mouse/ScrollZoomHandler.ts b/src/component/mouse/ScrollZoomHandler.ts
index 123fc2d40..ed5be68ce 100644
--- a/src/component/mouse/ScrollZoomHandler.ts
+++ b/src/component/mouse/ScrollZoomHandler.ts
@@ -8,12 +8,12 @@ import { Subscription } from "rxjs";
 import { Transform } from "../../geo/Transform";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Component } from "../Component";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { isSpherical } from "../../geo/Geo";
 
@@ -30,7 +30,7 @@ import { isSpherical } from "../../geo/Geo";
  * var isEnabled = mouseComponent.scrollZoom.isEnabled;
  * ```
  */
-export class ScrollZoomHandler extends HandlerBase<IMouseConfiguration> {
+export class ScrollZoomHandler extends HandlerBase<MouseConfiguration> {
     private _viewportCoords: ViewportCoords;
 
     private _preventDefaultSubscription: Subscription;
@@ -38,7 +38,7 @@ export class ScrollZoomHandler extends HandlerBase<IMouseConfiguration> {
 
     /** @ignore */
     constructor(
-        component: Component<IMouseConfiguration>,
+        component: Component<MouseConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords) {
@@ -60,17 +60,17 @@ export class ScrollZoomHandler extends HandlerBase<IMouseConfiguration> {
             .filteredWheel$(this._component.name, this._container.mouseService.mouseWheel$).pipe(
                 withLatestFrom(
                     this._navigator.stateService.currentState$,
-                    (w: WheelEvent, f: IFrame): [WheelEvent, IFrame] => {
+                    (w: WheelEvent, f: AnimationFrame): [WheelEvent, AnimationFrame] => {
                         return [w, f];
                     }),
                 filter(
-                    (args: [WheelEvent, IFrame]): boolean => {
-                        let state: ICurrentState = args[1].state;
+                    (args: [WheelEvent, AnimationFrame]): boolean => {
+                        let state: IAnimationState = args[1].state;
                         return isSpherical(state.currentNode.cameraType) ||
                             state.nodesAhead < 1;
                     }),
                 map(
-                    (args: [WheelEvent, IFrame]): WheelEvent => {
+                    (args: [WheelEvent, AnimationFrame]): WheelEvent => {
                         return args[0];
                     }),
                 withLatestFrom(
@@ -123,7 +123,7 @@ export class ScrollZoomHandler extends HandlerBase<IMouseConfiguration> {
         this._zoomSubscription = null;
     }
 
-    protected _getConfiguration(enable: boolean): IMouseConfiguration {
+    protected _getConfiguration(enable: boolean): MouseConfiguration {
         return { scrollZoom: enable };
     }
 }
diff --git a/src/component/mouse/TouchZoomHandler.ts b/src/component/mouse/TouchZoomHandler.ts
index 57bf5332c..50d6d44e9 100644
--- a/src/component/mouse/TouchZoomHandler.ts
+++ b/src/component/mouse/TouchZoomHandler.ts
@@ -15,13 +15,13 @@ import {
 import { Transform } from "../../geo/Transform";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
-import { IPinch } from "../../viewer/interfaces/IPinch";
+import { TouchPinch } from "../../viewer/interfaces/TouchPinch";
 import { Component } from "../Component";
-import { IMouseConfiguration } from "../interfaces/IMouseConfiguration";
+import { MouseConfiguration } from "../interfaces/MouseConfiguration";
 import { HandlerBase } from "../utils/HandlerBase";
 import { isSpherical } from "../../geo/Geo";
 
@@ -38,7 +38,7 @@ import { isSpherical } from "../../geo/Geo";
  * var isEnabled = mouseComponent.touchZoom.isEnabled;
  * ```
  */
-export class TouchZoomHandler extends HandlerBase<IMouseConfiguration> {
+export class TouchZoomHandler extends HandlerBase<MouseConfiguration> {
     private _viewportCoords: ViewportCoords;
 
     private _activeSubscription: Subscription;
@@ -47,7 +47,7 @@ export class TouchZoomHandler extends HandlerBase<IMouseConfiguration> {
 
     /** @ignore */
     constructor(
-        component: Component<IMouseConfiguration>,
+        component: Component<MouseConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords) {
@@ -59,7 +59,7 @@ export class TouchZoomHandler extends HandlerBase<IMouseConfiguration> {
     protected _enable(): void {
         this._preventDefaultSubscription = this._container.touchService.pinch$
             .subscribe(
-                (pinch: IPinch): void => {
+                (pinch: TouchPinch): void => {
                     pinch.originalEvent.preventDefault();
                 });
 
@@ -85,20 +85,20 @@ export class TouchZoomHandler extends HandlerBase<IMouseConfiguration> {
         this._zoomSubscription = this._container.touchService.pinch$.pipe(
             withLatestFrom(this._navigator.stateService.currentState$),
             filter(
-                (args: [IPinch, IFrame]): boolean => {
-                    let state: ICurrentState = args[1].state;
+                (args: [TouchPinch, AnimationFrame]): boolean => {
+                    let state: IAnimationState = args[1].state;
                     return isSpherical(state.currentNode.cameraType) ||
                         state.nodesAhead < 1;
                 }),
             map(
-                (args: [IPinch, IFrame]): IPinch => {
+                (args: [TouchPinch, AnimationFrame]): TouchPinch => {
                     return args[0];
                 }),
             withLatestFrom(
                 this._container.renderService.renderCamera$,
                 this._navigator.stateService.currentTransform$))
             .subscribe(
-                ([pinch, render, transform]: [IPinch, RenderCamera, Transform]): void => {
+                ([pinch, render, transform]: [TouchPinch, RenderCamera, Transform]): void => {
                     let element: HTMLElement = this._container.container;
 
                     let [canvasX, canvasY]: number[] = this._viewportCoords.canvasPosition(pinch, element);
@@ -128,7 +128,7 @@ export class TouchZoomHandler extends HandlerBase<IMouseConfiguration> {
         this._zoomSubscription = null;
     }
 
-    protected _getConfiguration(enable: boolean): IMouseConfiguration {
+    protected _getConfiguration(enable: boolean): MouseConfiguration {
         return { touchZoom: enable };
     }
 }
diff --git a/src/component/NavigationComponent.ts b/src/component/navigation/NavigationComponent.ts
similarity index 61%
rename from src/component/NavigationComponent.ts
rename to src/component/navigation/NavigationComponent.ts
index 03fa3faba..c888ad830 100644
--- a/src/component/NavigationComponent.ts
+++ b/src/component/navigation/NavigationComponent.ts
@@ -12,18 +12,18 @@ import {
     switchMap,
 } from "rxjs/operators";
 
-import { Component } from "./Component";
-import { INavigationConfiguration } from "./interfaces/INavigationConfiguration";
-
-import { AbortMapillaryError } from "../error/AbortMapillaryError";
-import { Node } from "../graph/Node";
-import { EdgeDirection } from "../graph/edge/EdgeDirection";
-import { IEdge } from "../graph/edge/interfaces/IEdge";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
-import { IVNodeHash } from "../render/interfaces/IVNodeHash";
-import { Container } from "../viewer/Container";
-import { Navigator } from "../viewer/Navigator";
-import { isSpherical } from "../geo/Geo";
+import { Component } from "../Component";
+import { NavigationConfiguration } from "../interfaces/NavigationConfiguration";
+
+import { AbortMapillaryError } from "../../error/AbortMapillaryError";
+import { Node } from "../../graph/Node";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { NavigationEdge } from "../../graph/edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
+import { Container } from "../../viewer/Container";
+import { Navigator } from "../../viewer/Navigator";
+import { isSpherical } from "../../geo/Geo";
 
 /**
  * @class NavigationComponent
@@ -32,7 +32,7 @@ import { isSpherical } from "../geo/Geo";
  *
  * Replaces the functionality in the Direction and Sequence components.
  */
-export class NavigationComponent extends Component<INavigationConfiguration> {
+export class NavigationComponent extends Component<NavigationConfiguration> {
     public static componentName: string = "navigation";
 
     private _renderSubscription: Subscription;
@@ -46,18 +46,18 @@ export class NavigationComponent extends Component<INavigationConfiguration> {
         super(name, container, navigator);
 
         this._seqNames = {};
-        this._seqNames[EdgeDirection[EdgeDirection.Prev]] = "-prev";
-        this._seqNames[EdgeDirection[EdgeDirection.Next]] = "-next";
+        this._seqNames[NavigationDirection[NavigationDirection.Prev]] = "-prev";
+        this._seqNames[NavigationDirection[NavigationDirection.Next]] = "-next";
 
         this._spaTopNames = {};
-        this._spaTopNames[EdgeDirection[EdgeDirection.TurnLeft]] = "-turn-left";
-        this._spaTopNames[EdgeDirection[EdgeDirection.StepLeft]] = "-left";
-        this._spaTopNames[EdgeDirection[EdgeDirection.StepForward]] = "-forward";
-        this._spaTopNames[EdgeDirection[EdgeDirection.StepRight]] = "-right";
-        this._spaTopNames[EdgeDirection[EdgeDirection.TurnRight]] = "-turn-right";
+        this._spaTopNames[NavigationDirection[NavigationDirection.TurnLeft]] = "-turn-left";
+        this._spaTopNames[NavigationDirection[NavigationDirection.StepLeft]] = "-left";
+        this._spaTopNames[NavigationDirection[NavigationDirection.StepForward]] = "-forward";
+        this._spaTopNames[NavigationDirection[NavigationDirection.StepRight]] = "-right";
+        this._spaTopNames[NavigationDirection[NavigationDirection.TurnRight]] = "-turn-right";
         this._spaBottomNames = {};
-        this._spaBottomNames[EdgeDirection[EdgeDirection.TurnU]] = "-turn-around";
-        this._spaBottomNames[EdgeDirection[EdgeDirection.StepBackward]] = "-backward";
+        this._spaBottomNames[NavigationDirection[NavigationDirection.TurnU]] = "-turn-around";
+        this._spaBottomNames[NavigationDirection[NavigationDirection.StepBackward]] = "-backward";
     }
 
     protected _activate(): void {
@@ -65,42 +65,42 @@ export class NavigationComponent extends Component<INavigationConfiguration> {
             this._navigator.stateService.currentNode$,
             this._configuration$).pipe(
                 switchMap(
-                    ([node, configuration]: [Node, INavigationConfiguration]): Observable<EdgeDirection[]> => {
-                        const sequenceEdges$: Observable<EdgeDirection[]> = configuration.sequence ?
+                    ([node, configuration]: [Node, NavigationConfiguration]): Observable<NavigationDirection[]> => {
+                        const sequenceEdges$: Observable<NavigationDirection[]> = configuration.sequence ?
                             node.sequenceEdges$.pipe(
                                 map(
-                                    (status: IEdgeStatus): EdgeDirection[] => {
+                                    (status: NavigationEdgeStatus): NavigationDirection[] => {
                                         return status.edges
                                             .map(
-                                                (edge: IEdge): EdgeDirection => {
+                                                (edge: NavigationEdge): NavigationDirection => {
                                                     return edge.data.direction;
                                                 });
                                     })) :
-                            observableOf<EdgeDirection[]>([]);
+                            observableOf<NavigationDirection[]>([]);
 
-                        const spatialEdges$: Observable<EdgeDirection[]> = !isSpherical(node.cameraType) &&
+                        const spatialEdges$: Observable<NavigationDirection[]> = !isSpherical(node.cameraType) &&
                             configuration.spatial ?
                             node.spatialEdges$.pipe(
                                 map(
-                                    (status: IEdgeStatus): EdgeDirection[] => {
+                                    (status: NavigationEdgeStatus): NavigationDirection[] => {
                                         return status.edges
                                             .map(
-                                                (edge: IEdge): EdgeDirection => {
+                                                (edge: NavigationEdge): NavigationDirection => {
                                                     return edge.data.direction;
                                                 });
                                     })) :
-                            observableOf<EdgeDirection[]>([]);
+                            observableOf<NavigationDirection[]>([]);
 
                         return observableCombineLatest(
                             sequenceEdges$,
                             spatialEdges$).pipe(
                                 map(
-                                    ([seq, spa]: [EdgeDirection[], EdgeDirection[]]): EdgeDirection[] => {
+                                    ([seq, spa]: [NavigationDirection[], NavigationDirection[]]): NavigationDirection[] => {
                                         return seq.concat(spa);
                                     }));
                     }),
                 map(
-                    (edgeDirections: EdgeDirection[]): IVNodeHash => {
+                    (edgeDirections: NavigationDirection[]): VirtualNodeHash => {
                         const seqs: vd.VNode[] = this._createArrowRow(this._seqNames, edgeDirections);
                         const spaTops: vd.VNode[] = this._createArrowRow(this._spaTopNames, edgeDirections);
                         const spaBottoms: vd.VNode[] = this._createArrowRow(this._spaBottomNames, edgeDirections);
@@ -119,11 +119,11 @@ export class NavigationComponent extends Component<INavigationConfiguration> {
         this._renderSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): INavigationConfiguration {
+    protected _getDefaultConfiguration(): NavigationConfiguration {
         return { sequence: true, spatial: true };
     }
 
-    private _createArrowRow(arrowNames: { [dir: string]: string }, edgeDirections: EdgeDirection[]): vd.VNode[] {
+    private _createArrowRow(arrowNames: { [dir: string]: string }, edgeDirections: NavigationDirection[]): vd.VNode[] {
         const arrows: vd.VNode[] = [];
 
         for (const arrowName in arrowNames) {
@@ -131,7 +131,7 @@ export class NavigationComponent extends Component<INavigationConfiguration> {
                 continue;
             }
 
-            const direction: EdgeDirection = EdgeDirection[<keyof typeof EdgeDirection>arrowName];
+            const direction: NavigationDirection = NavigationDirection[<keyof typeof NavigationDirection>arrowName];
             if (edgeDirections.indexOf(direction) !== -1) {
                 arrows.push(this._createVNode(direction, arrowNames[arrowName], "visible"));
             } else {
@@ -142,7 +142,7 @@ export class NavigationComponent extends Component<INavigationConfiguration> {
         return arrows;
     }
 
-    private _createVNode(direction: EdgeDirection, name: string, visibility: string): vd.VNode {
+    private _createVNode(direction: NavigationDirection, name: string, visibility: string): vd.VNode {
         return vd.h(
             `span.mapillary-navigation-button.mapillary-navigation${name}`,
             {
diff --git a/src/component/popup/PopupComponent.ts b/src/component/popup/PopupComponent.ts
index 463564ecc..ab2388884 100644
--- a/src/component/popup/PopupComponent.ts
+++ b/src/component/popup/PopupComponent.ts
@@ -18,10 +18,10 @@ import {
 import { Transform } from "../../geo/Transform";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
-import { ISize } from "../../render/interfaces/ISize";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
 import { RenderCamera } from "../../render/RenderCamera";
 import { DOM } from "../../utils/DOM";
-import { IComponentConfiguration } from "../interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
 import { Component } from "../Component";
 import { Popup } from "./popup/Popup";
 
@@ -50,7 +50,7 @@ import { Popup } from "./popup/Popup";
  * var popupComponent = viewer.getComponent("popup");
  * ```
  */
-export class PopupComponent extends Component<IComponentConfiguration> {
+export class PopupComponent extends Component<ComponentConfiguration> {
     public static componentName: string = "popup";
 
     private _dom: DOM;
@@ -153,7 +153,7 @@ export class PopupComponent extends Component<IComponentConfiguration> {
             this._container.renderService.size$,
             this._navigator.stateService.currentTransform$)
             .subscribe(
-                ([renderCamera, size, transform]: [RenderCamera, ISize, Transform]): void => {
+                ([renderCamera, size, transform]: [RenderCamera, ViewportSize, Transform]): void => {
                     for (const popup of this._popups) {
                         popup.update(renderCamera, size, transform);
                     }
@@ -180,7 +180,7 @@ export class PopupComponent extends Component<IComponentConfiguration> {
                 this._container.renderService.size$,
                 this._navigator.stateService.currentTransform$))
             .subscribe(
-                ([popups, renderCamera, size, transform]: [Popup[], RenderCamera, ISize, Transform]): void => {
+                ([popups, renderCamera, size, transform]: [Popup[], RenderCamera, ViewportSize, Transform]): void => {
                     for (const popup of popups) {
                         popup.update(renderCamera, size, transform);
                     }
@@ -199,7 +199,7 @@ export class PopupComponent extends Component<IComponentConfiguration> {
         delete this._popupContainer;
     }
 
-    protected _getDefaultConfiguration(): IComponentConfiguration {
+    protected _getDefaultConfiguration(): ComponentConfiguration {
         return {};
     }
 
diff --git a/src/component/popup/interfaces/IPopupOffset.ts b/src/component/popup/interfaces/PopupOffset.ts
similarity index 96%
rename from src/component/popup/interfaces/IPopupOffset.ts
rename to src/component/popup/interfaces/PopupOffset.ts
index a43fef473..2359b9489 100644
--- a/src/component/popup/interfaces/IPopupOffset.ts
+++ b/src/component/popup/interfaces/PopupOffset.ts
@@ -23,7 +23,7 @@
  * var popup = new Mapillary.PopupComponent.Popup({ offset: offset });
  * ```
  */
-export interface IPopupOffset {
+export interface PopupOffset {
     bottom: number[];
     bottomLeft: number[];
     bottomRight: number[];
diff --git a/src/component/popup/interfaces/IPopupOptions.ts b/src/component/popup/interfaces/PopupOptions.ts
similarity index 92%
rename from src/component/popup/interfaces/IPopupOptions.ts
rename to src/component/popup/interfaces/PopupOptions.ts
index 09110917a..e4f6a14d6 100644
--- a/src/component/popup/interfaces/IPopupOptions.ts
+++ b/src/component/popup/interfaces/PopupOptions.ts
@@ -1,5 +1,5 @@
-import { Alignment } from "../../../viewer/Alignment";
-import { IPopupOffset } from "./IPopupOffset";
+import { Alignment } from "../../../viewer/enums/Alignment";
+import { PopupOffset } from "./PopupOffset";
 
 /**
  * Interface for the options that define behavior and
@@ -7,7 +7,7 @@ import { IPopupOffset } from "./IPopupOffset";
  *
  * @interface
  */
-export interface IPopupOptions {
+export interface PopupOptions {
     /**
      * Specify if the popup should capture pointer events.
      *
@@ -58,7 +58,7 @@ export interface IPopupOptions {
      *
      * @default 0
      */
-    offset?: number | IPopupOffset;
+    offset?: number | PopupOffset;
 
     /**
      * Opacity of the popup visuals.
diff --git a/src/component/popup/popup/Popup.ts b/src/component/popup/popup/Popup.ts
index cb7d869c7..78d1b67f6 100644
--- a/src/component/popup/popup/Popup.ts
+++ b/src/component/popup/popup/Popup.ts
@@ -5,12 +5,12 @@ import {
 
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 import { RenderCamera } from "../../../render/RenderCamera";
 import { DOM } from "../../../utils/DOM";
-import { Alignment } from "../../../viewer/Alignment";
-import { IPopupOffset } from "../interfaces/IPopupOffset";
-import { IPopupOptions } from "../interfaces/IPopupOptions";
+import { Alignment } from "../../../viewer/enums/Alignment";
+import { PopupOffset } from "../interfaces/PopupOffset";
+import { PopupOptions } from "../interfaces/PopupOptions";
 import { PopupAlignment } from "./PopupAlignment";
 
 /**
@@ -66,7 +66,7 @@ export class Popup {
     private _container: HTMLDivElement;
     private _content: HTMLDivElement;
     private _parentContainer: HTMLElement;
-    private _options: IPopupOptions;
+    private _options: PopupOptions;
     private _tip: HTMLDivElement;
 
     private _point: number[];
@@ -75,7 +75,7 @@ export class Popup {
     private _dom: DOM;
     private _viewportCoords: ViewportCoords;
 
-    constructor(options?: IPopupOptions, viewportCoords?: ViewportCoords, dom?: DOM) {
+    constructor(options?: PopupOptions, viewportCoords?: ViewportCoords, dom?: DOM) {
         this._options = {};
 
         options = !!options ? options : {};
@@ -277,7 +277,7 @@ export class Popup {
      * position of the popup called by the popup component.
      * @ignore
      */
-    public update(renderCamera: RenderCamera, size: ISize, transform: Transform): void {
+    public update(renderCamera: RenderCamera, size: ViewportSize, transform: Transform): void {
         if (!this._parentContainer || !this._content) {
             return;
         }
@@ -393,7 +393,7 @@ export class Popup {
         position: PopupAlignment,
         appliedPosition: PopupAlignment,
         renderCamera: RenderCamera,
-        size: ISize,
+        size: ViewportSize,
         transform: Transform): [number[], PopupAlignment] {
 
         if (!position) {
@@ -504,7 +504,7 @@ export class Popup {
         }
     }
 
-    private _normalizeOffset(offset: number | IPopupOffset): { [key in PopupAlignment]: number[] } {
+    private _normalizeOffset(offset: number | PopupOffset): { [key in PopupAlignment]: number[] } {
         if (offset == null) {
             return this._normalizeOffset(0);
         }
@@ -541,7 +541,7 @@ export class Popup {
         }
     }
 
-    private _pixelToFloats(pointPixel: number[], size: ISize, width: number, height: number): PopupAlignment[] {
+    private _pixelToFloats(pointPixel: number[], size: ViewportSize, width: number, height: number): PopupAlignment[] {
         const floats: PopupAlignment[] = [];
 
         if (pointPixel[1] < height) {
diff --git a/src/component/sequence/SequenceComponent.ts b/src/component/sequence/SequenceComponent.ts
index 9999d3417..0b438a186 100644
--- a/src/component/sequence/SequenceComponent.ts
+++ b/src/component/sequence/SequenceComponent.ts
@@ -36,14 +36,14 @@ import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { GraphMode } from "../../graph/GraphMode";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
 import { Sequence } from "../../graph/Sequence";
-import { ISize } from "../../render/interfaces/ISize";
-import { IVNodeHash } from "../../render/interfaces/IVNodeHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
 import { State } from "../../state/State";
-import { ISequenceConfiguration } from "../interfaces/ISequenceConfiguration";
+import { SequenceConfiguration } from "../interfaces/SequenceConfiguration";
 import { SequenceDOMRenderer } from "./SequenceDOMRenderer";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
 import { Component } from "../Component";
 
 /**
@@ -51,7 +51,7 @@ import { Component } from "../Component";
  * @classdesc Component showing navigation arrows for sequence directions
  * as well as playing button. Exposes an API to start and stop play.
  */
-export class SequenceComponent extends Component<ISequenceConfiguration> {
+export class SequenceComponent extends Component<SequenceConfiguration> {
     /** @inheritdoc */
     public static componentName: string = "sequence";
 
@@ -64,29 +64,29 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
     public static playingchanged: string = "playingchanged";
 
     /**
-     * Event fired when the hovered key changes.
+     * Event fired when the hovered id changes.
      *
-     * @description Emits the key of the node for the direction
+     * @description Emits the id of the node for the direction
      * arrow that is being hovered. When the mouse leaves a
      * direction arrow null is emitted.
      *
-     * @event SequenceComponent#hoveredkeychanged
-     * @type {string} The hovered key, null if no key is hovered.
+     * @event SequenceComponent#hoveredidchanged
+     * @type {string} The hovered id, null if no id is hovered.
      */
-    public static hoveredkeychanged: string = "hoveredkeychanged";
+    public static hoveredidchanged: string = "hoveredidchanged";
 
     private _sequenceDOMRenderer: SequenceDOMRenderer;
     private _scheduler: Scheduler;
 
-    private _hoveredKeySubject$: Subject<string>;
-    private _hoveredKey$: Observable<string>;
+    private _hoveredIdSubject$: Subject<string>;
+    private _hoveredId$: Observable<string>;
     private _containerWidth$: Subject<number>;
 
-    private _emitHoveredKeySubscription: Subscription;
+    private _emitHoveredSubscription: Subscription;
     private _renderSubscription: Subscription;
     private _playingSubscription: Subscription;
     private _containerWidthSubscription: Subscription;
-    private _hoveredKeySubscription: Subscription;
+    private _hoveredSubscription: Subscription;
     private _setSpeedSubscription: Subscription;
     private _setDirectionSubscription: Subscription;
     private _setSequenceGraphModeSubscription: Subscription;
@@ -109,15 +109,15 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
         this._scheduler = scheduler;
 
         this._containerWidth$ = new Subject<number>();
-        this._hoveredKeySubject$ = new Subject<string>();
+        this._hoveredIdSubject$ = new Subject<string>();
 
-        this._hoveredKey$ = this._hoveredKeySubject$.pipe(share());
+        this._hoveredId$ = this._hoveredIdSubject$.pipe(share());
 
         this._navigator.playService.playing$.pipe(
             skip(1),
             withLatestFrom(this._configuration$))
             .subscribe(
-                ([playing, configuration]: [boolean, ISequenceConfiguration]): void => {
+                ([playing, configuration]: [boolean, SequenceConfiguration]): void => {
                     this.fire(SequenceComponent.playingchanged, playing);
 
                     if (playing === configuration.playing) {
@@ -135,7 +135,7 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
             skip(1),
             withLatestFrom(this._configuration$))
             .subscribe(
-                ([direction, configuration]: [EdgeDirection, ISequenceConfiguration]): void => {
+                ([direction, configuration]: [NavigationDirection, SequenceConfiguration]): void => {
                     if (direction !== configuration.direction) {
                         this.setDirection(direction);
                     }
@@ -143,16 +143,16 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
     }
 
     /**
-     * Get hovered key observable.
+     * Get hovered id observable.
      *
-     * @description An observable emitting the key of the node for the direction
+     * @description An observable emitting the id of the node for the direction
      * arrow that is being hovered. When the mouse leaves a direction arrow null
      * is emitted.
      *
      * @returns {Observable<string>}
      */
-    public get hoveredKey$(): Observable<string> {
-        return this._hoveredKey$;
+    public get hoveredId$(): Observable<string> {
+        return this._hoveredId$;
     }
 
     /**
@@ -176,22 +176,22 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
     /**
      * Set the direction to follow when playing.
      *
-     * @param {EdgeDirection} direction - The direction that will be followed when playing.
+     * @param {NavigationDirection} direction - The direction that will be followed when playing.
      */
-    public setDirection(direction: EdgeDirection): void {
+    public setDirection(direction: NavigationDirection): void {
         this.configure({ direction: direction });
     }
 
     /**
-     * Set highlight key.
+     * Set highlight id.
      *
      * @description The arrow pointing towards the node corresponding to the
-     * highlight key will be highlighted.
+     * highlight id will be highlighted.
      *
-     * @param {string} highlightKey Key of node to be highlighted if existing.
+     * @param {string} highlightId id of node to be highlighted if existing.
      */
-    public setHighlightKey(highlightKey: string): void {
-        this.configure({ highlightKey: highlightKey });
+    public setHighlightId(highlightId: string): void {
+        this.configure({ highlightId });
     }
 
     /**
@@ -238,9 +238,9 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
     protected _activate(): void {
         this._sequenceDOMRenderer.activate();
 
-        const edgeStatus$: Observable<IEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
+        const edgeStatus$: Observable<NavigationEdgeStatus> = this._navigator.stateService.currentNode$.pipe(
             switchMap(
-                (node: Node): Observable<IEdgeStatus> => {
+                (node: Node): Observable<NavigationEdgeStatus> => {
                     return node.sequenceEdges$;
                 }),
             publishReplay(1),
@@ -250,13 +250,13 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
             distinctUntilChanged(
                 undefined,
                 (node: Node): string => {
-                    return node.sequenceKey;
+                    return node.sequenceId;
                 }),
             switchMap(
                 (node: Node): Observable<Sequence> => {
                     return observableConcat(
                         observableOf(null),
-                        this._navigator.graphService.cacheSequence$(node.sequenceKey).pipe(
+                        this._navigator.graphService.cacheSequence$(node.sequenceId).pipe(
                             retry(3),
                             catchError(
                                 (e: Error): Observable<Sequence> => {
@@ -271,27 +271,27 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
 
         this._sequenceSubscription = sequence$.subscribe();
 
-        const rendererKey$: Observable<string> = this._sequenceDOMRenderer.index$.pipe(
+        const rendererId$: Observable<string> = this._sequenceDOMRenderer.index$.pipe(
             withLatestFrom(sequence$),
             map(
                 ([index, sequence]: [number, Sequence]): string => {
-                    return sequence != null ? sequence.keys[index] : null;
+                    return sequence != null ? sequence.imageIds[index] : null;
                 }),
             filter(
-                (key: string): boolean => {
-                    return !!key;
+                (id: string): boolean => {
+                    return !!id;
                 }),
             distinctUntilChanged(),
             publish(),
             refCount());
 
         this._moveSubscription = observableMerge(
-            rendererKey$.pipe(debounceTime(100, this._scheduler)),
-            rendererKey$.pipe(auditTime(400, this._scheduler))).pipe(
+            rendererId$.pipe(debounceTime(100, this._scheduler)),
+            rendererId$.pipe(auditTime(400, this._scheduler))).pipe(
                 distinctUntilChanged(),
                 switchMap(
-                    (key: string): Observable<Node> => {
-                        return this._navigator.moveToKey$(key).pipe(
+                    (id: string): Observable<Node> => {
+                        return this._navigator.moveTo$(id).pipe(
                             catchError(
                                 (): Observable<Node> => {
                                     return observableEmpty();
@@ -333,7 +333,7 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                 }),
             switchMap(
                 (node: Node): Observable<Node> => {
-                    return this._navigator.graphService.cacheNode$(node.key).pipe(
+                    return this._navigator.graphService.cacheNode$(node.id).pipe(
                         catchError(
                             (): Observable<Node> => {
                                 return observableEmpty();
@@ -360,7 +360,7 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     switchMap(
                         ([[mode, changing], node]: [[GraphMode, boolean], Node]): Observable<Sequence> => {
                             return changing && mode === GraphMode.Sequence ?
-                                this._navigator.graphService.cacheSequenceNodes$(node.sequenceKey, node.key).pipe(
+                                this._navigator.graphService.cacheSequenceNodes$(node.sequenceId, node.id).pipe(
                                     retry(3),
                                     catchError(
                                         (error: Error): Observable<Sequence> => {
@@ -379,35 +379,38 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                         return observableOf({ index: null, max: null });
                     }
 
-                    let firstCurrentKey: boolean = true;
+                    let firstCurrentId: boolean = true;
 
                     return this._sequenceDOMRenderer.changingPositionChanged$.pipe(
                         startWith(false),
                         distinctUntilChanged(),
                         switchMap(
                             (changingPosition: boolean): Observable<string> => {
-                                const skipCount: number = !changingPosition && firstCurrentKey ? 0 : 1;
-                                firstCurrentKey = false;
+                                const skipCount: number =
+                                    !changingPosition &&
+                                        firstCurrentId ?
+                                        0 : 1;
+                                firstCurrentId = false;
 
                                 return changingPosition ?
-                                    rendererKey$ :
+                                    rendererId$ :
                                     this._navigator.stateService.currentNode$.pipe(
                                         map(
                                             (node: Node): string => {
-                                                return node.key;
+                                                return node.id;
                                             }),
                                         distinctUntilChanged(),
                                         skip(skipCount));
                             }),
                         map(
-                            (key: string): { index: number, max: number } => {
-                                const index: number = sequence.keys.indexOf(key);
+                            (imageId: string): { index: number, max: number } => {
+                                const index: number = sequence.imageIds.indexOf(imageId);
 
                                 if (index === -1) {
                                     return { index: null, max: null };
                                 }
 
-                                return { index: index, max: sequence.keys.length - 1 };
+                                return { index: index, max: sequence.imageIds.length - 1 };
                             }));
                 }));
 
@@ -430,14 +433,14 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     (
                         [edgeStatus, configuration, containerWidth, , speed, position, earth]:
                             [
-                                IEdgeStatus,
-                                ISequenceConfiguration,
+                                NavigationEdgeStatus,
+                                SequenceConfiguration,
                                 number,
                                 SequenceDOMRenderer,
                                 number,
                                 { index: number, max: number },
                                 boolean,
-                            ]): IVNodeHash => {
+                            ]): VirtualNodeHash => {
 
                         const vNode: vd.VNode = this._sequenceDOMRenderer
                             .render(
@@ -463,12 +466,12 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
 
         this._setDirectionSubscription = this._configuration$.pipe(
             map(
-                (configuration: ISequenceConfiguration): EdgeDirection => {
+                (configuration: SequenceConfiguration): NavigationDirection => {
                     return configuration.direction;
                 }),
             distinctUntilChanged())
             .subscribe(
-                (direction: EdgeDirection): void => {
+                (direction: NavigationDirection): void => {
                     this._navigator.playService.setDirection(direction);
                 });
 
@@ -479,11 +482,11 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     (value1: [number, number], value2: [number, number]): boolean => {
                         return value1[0] === value2[0] && value1[1] === value2[1];
                     },
-                    (configuration: ISequenceConfiguration) => {
+                    (configuration: SequenceConfiguration) => {
                         return [configuration.minWidth, configuration.maxWidth];
                     }))).pipe(
                         map(
-                            ([size, configuration]: [ISize, ISequenceConfiguration]): number => {
+                            ([size, configuration]: [ViewportSize, SequenceConfiguration]): number => {
                                 return this._sequenceDOMRenderer.getContainerWidth(
                                     size,
                                     configuration);
@@ -492,7 +495,7 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
 
         this._playingSubscription = this._configuration$.pipe(
             map(
-                (configuration: ISequenceConfiguration): boolean => {
+                (configuration: SequenceConfiguration): boolean => {
                     return configuration.playing;
                 }),
             distinctUntilChanged())
@@ -505,15 +508,15 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     }
                 });
 
-        this._hoveredKeySubscription = this._sequenceDOMRenderer.mouseEnterDirection$.pipe(
+        this._hoveredSubscription = this._sequenceDOMRenderer.mouseEnterDirection$.pipe(
             switchMap(
-                (direction: EdgeDirection): Observable<string> => {
+                (direction: NavigationDirection): Observable<string> => {
                     const edgeTo$: Observable<string> = edgeStatus$.pipe(
                         map(
-                            (edgeStatus: IEdgeStatus): string => {
+                            (edgeStatus: NavigationEdgeStatus): string => {
                                 for (let edge of edgeStatus.edges) {
                                     if (edge.data.direction === direction) {
-                                        return edge.to;
+                                        return edge.target;
                                     }
                                 }
 
@@ -524,21 +527,21 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
                     return observableConcat(edgeTo$, observableOf<string>(null));
                 }),
             distinctUntilChanged())
-            .subscribe(this._hoveredKeySubject$);
+            .subscribe(this._hoveredIdSubject$);
 
-        this._emitHoveredKeySubscription = this._hoveredKey$
+        this._emitHoveredSubscription = this._hoveredId$
             .subscribe(
-                (key: string): void => {
-                    this.fire(SequenceComponent.hoveredkeychanged, key);
+                (id: string): void => {
+                    this.fire(SequenceComponent.hoveredidchanged, id);
                 });
     }
 
     protected _deactivate(): void {
-        this._emitHoveredKeySubscription.unsubscribe();
+        this._emitHoveredSubscription.unsubscribe();
         this._renderSubscription.unsubscribe();
         this._playingSubscription.unsubscribe();
         this._containerWidthSubscription.unsubscribe();
-        this._hoveredKeySubscription.unsubscribe();
+        this._hoveredSubscription.unsubscribe();
         this._setSpeedSubscription.unsubscribe();
         this._setDirectionSubscription.unsubscribe();
         this._setSequenceGraphModeSubscription.unsubscribe();
@@ -551,9 +554,9 @@ export class SequenceComponent extends Component<ISequenceConfiguration> {
         this._sequenceDOMRenderer.deactivate();
     }
 
-    protected _getDefaultConfiguration(): ISequenceConfiguration {
+    protected _getDefaultConfiguration(): SequenceConfiguration {
         return {
-            direction: EdgeDirection.Next,
+            direction: NavigationDirection.Next,
             maxWidth: 108,
             minWidth: 70,
             playing: false,
diff --git a/src/component/sequence/SequenceDOMRenderer.ts b/src/component/sequence/SequenceDOMRenderer.ts
index 5862a3de7..58f23522f 100644
--- a/src/component/sequence/SequenceDOMRenderer.ts
+++ b/src/component/sequence/SequenceDOMRenderer.ts
@@ -9,12 +9,12 @@ import {
 import { filter } from "rxjs/operators";
 
 import { AbortMapillaryError } from "../../error/AbortMapillaryError";
-import { EdgeDirection } from "../../graph/edge/EdgeDirection";
-import { IEdgeStatus } from "../../graph/interfaces/IEdgeStatus";
-import { ISize } from "../../render/interfaces/ISize";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
-import { ISequenceConfiguration } from "../interfaces/ISequenceConfiguration";
+import { SequenceConfiguration } from "../interfaces/SequenceConfiguration";
 import { SequenceMode } from "./SequenceMode";
 import { SequenceComponent } from "./SequenceComponent";
 
@@ -35,8 +35,8 @@ export class SequenceDOMRenderer {
     private _index: number;
     private _changingPosition: boolean;
 
-    private _mouseEnterDirection$: Subject<EdgeDirection>;
-    private _mouseLeaveDirection$: Subject<EdgeDirection>;
+    private _mouseEnterDirection$: Subject<NavigationDirection>;
+    private _mouseLeaveDirection$: Subject<NavigationDirection>;
     private _notifyChanged$: Subject<SequenceDOMRenderer>;
     private _notifyChangingPositionChanged$: Subject<boolean>;
     private _notifySpeedChanged$: Subject<number>;
@@ -62,8 +62,8 @@ export class SequenceDOMRenderer {
         this._index = null;
         this._changingPosition = false;
 
-        this._mouseEnterDirection$ = new Subject<EdgeDirection>();
-        this._mouseLeaveDirection$ = new Subject<EdgeDirection>();
+        this._mouseEnterDirection$ = new Subject<NavigationDirection>();
+        this._mouseLeaveDirection$ = new Subject<NavigationDirection>();
         this._notifyChanged$ = new Subject<SequenceDOMRenderer>();
         this._notifyChangingPositionChanged$ = new Subject<boolean>();
         this._notifySpeedChanged$ = new Subject<number>();
@@ -86,11 +86,11 @@ export class SequenceDOMRenderer {
         return this._notifyIndexChanged$;
     }
 
-    public get mouseEnterDirection$(): Observable<EdgeDirection> {
+    public get mouseEnterDirection$(): Observable<NavigationDirection> {
         return this._mouseEnterDirection$;
     }
 
-    public get mouseLeaveDirection$(): Observable<EdgeDirection> {
+    public get mouseLeaveDirection$(): Observable<NavigationDirection> {
         return this._mouseLeaveDirection$;
     }
 
@@ -133,8 +133,8 @@ export class SequenceDOMRenderer {
     }
 
     public render(
-        edgeStatus: IEdgeStatus,
-        configuration: ISequenceConfiguration,
+        edgeStatus: NavigationEdgeStatus,
+        configuration: SequenceConfiguration,
         containerWidth: number,
         speed: number,
         index: number,
@@ -162,7 +162,7 @@ export class SequenceDOMRenderer {
         return vd.h("div.mapillary-sequence-container", [stepper, controls, playback, timeline]);
     }
 
-    public getContainerWidth(size: ISize, configuration: ISequenceConfiguration): number {
+    public getContainerWidth(size: ViewportSize, configuration: SequenceConfiguration): number {
         let minWidth: number = configuration.minWidth;
         let maxWidth: number = configuration.maxWidth;
         if (maxWidth < minWidth) {
@@ -294,15 +294,15 @@ export class SequenceDOMRenderer {
         containerWidth: number,
         speed: number,
         component: SequenceComponent,
-        configuration: ISequenceConfiguration): vd.VNode {
+        configuration: SequenceConfiguration): vd.VNode {
 
         if (this._mode !== SequenceMode.Playback) {
             return vd.h("div.mapillary-sequence-playback", []);
         }
 
         const switchIcon: vd.VNode = vd.h("div.mapillary-sequence-switch-icon.mapillary-sequence-icon-visible", []);
-        const direction: EdgeDirection = configuration.direction === EdgeDirection.Next ?
-            EdgeDirection.Prev : EdgeDirection.Next;
+        const direction: NavigationDirection = configuration.direction === NavigationDirection.Next ?
+            NavigationDirection.Prev : NavigationDirection.Next;
 
         const playing: boolean = configuration.playing;
         const switchButtonProperties: vd.createProperties = {
@@ -337,15 +337,15 @@ export class SequenceDOMRenderer {
     }
 
     private _createPlayingButton(
-        nextKey: string,
-        prevKey: string,
+        nextId: string,
+        prevId: string,
         playEnabled: boolean,
-        configuration: ISequenceConfiguration,
+        configuration: SequenceConfiguration,
         component: SequenceComponent): vd.VNode {
 
         let canPlay: boolean =
-            (configuration.direction === EdgeDirection.Next && nextKey != null) ||
-            (configuration.direction === EdgeDirection.Prev && prevKey != null);
+            (configuration.direction === NavigationDirection.Next && nextId != null) ||
+            (configuration.direction === NavigationDirection.Prev && prevId != null);
         canPlay = canPlay && playEnabled;
 
         let onclick: (e: Event) => void = configuration.playing ?
@@ -359,7 +359,7 @@ export class SequenceDOMRenderer {
             canPlay ? "mapillary-sequence-icon-play" : "mapillary-sequence-icon-play-inactive";
 
         let iconProperties: vd.createProperties = { className: iconClass };
-        if (configuration.direction === EdgeDirection.Prev) {
+        if (configuration.direction === NavigationDirection.Prev) {
             iconProperties.style = {
                 transform: "rotate(180deg) translate(50%, 50%)",
             };
@@ -431,16 +431,16 @@ export class SequenceDOMRenderer {
     }
 
     private _createSequenceArrows(
-        nextKey: string,
-        prevKey: string,
+        nextId: string,
+        prevId: string,
         containerWidth: number,
-        configuration: ISequenceConfiguration,
+        configuration: SequenceConfiguration,
         navigator: Navigator): vd.VNode[] {
 
         let nextProperties: vd.createProperties = {
-            onclick: nextKey != null ?
+            onclick: nextId != null ?
                 (): void => {
-                    navigator.moveDir$(EdgeDirection.Next)
+                    navigator.moveDir$(NavigationDirection.Next)
                         .subscribe(
                             undefined,
                             (error: Error): void => {
@@ -450,15 +450,15 @@ export class SequenceDOMRenderer {
                             });
                 } :
                 null,
-            onmouseenter: (): void => { this._mouseEnterDirection$.next(EdgeDirection.Next); },
-            onmouseleave: (): void => { this._mouseLeaveDirection$.next(EdgeDirection.Next); },
+            onmouseenter: (): void => { this._mouseEnterDirection$.next(NavigationDirection.Next); },
+            onmouseleave: (): void => { this._mouseLeaveDirection$.next(NavigationDirection.Next); },
         };
 
         const borderRadius: number = Math.round(8 / this._stepperDefaultWidth * containerWidth);
         let prevProperties: vd.createProperties = {
-            onclick: prevKey != null ?
+            onclick: prevId != null ?
                 (): void => {
-                    navigator.moveDir$(EdgeDirection.Prev)
+                    navigator.moveDir$(NavigationDirection.Prev)
                         .subscribe(
                             undefined,
                             (error: Error): void => {
@@ -468,16 +468,16 @@ export class SequenceDOMRenderer {
                             });
                 } :
                 null,
-            onmouseenter: (): void => { this._mouseEnterDirection$.next(EdgeDirection.Prev); },
-            onmouseleave: (): void => { this._mouseLeaveDirection$.next(EdgeDirection.Prev); },
+            onmouseenter: (): void => { this._mouseEnterDirection$.next(NavigationDirection.Prev); },
+            onmouseleave: (): void => { this._mouseLeaveDirection$.next(NavigationDirection.Prev); },
             style: {
                 "border-bottom-left-radius": `${borderRadius}px`,
                 "border-top-left-radius": `${borderRadius}px`,
             },
         };
 
-        let nextClass: string = this._getStepClassName(EdgeDirection.Next, nextKey, configuration.highlightKey);
-        let prevClass: string = this._getStepClassName(EdgeDirection.Prev, prevKey, configuration.highlightKey);
+        let nextClass: string = this._getStepClassName(NavigationDirection.Next, nextId, configuration.highlightId);
+        let prevClass: string = this._getStepClassName(NavigationDirection.Prev, prevId, configuration.highlightId);
 
         let nextIcon: vd.VNode = vd.h("div.mapillary-sequence-icon", []);
         let prevIcon: vd.VNode = vd.h("div.mapillary-sequence-icon", []);
@@ -489,30 +489,30 @@ export class SequenceDOMRenderer {
     }
 
     private _createStepper(
-        edgeStatus: IEdgeStatus,
-        configuration: ISequenceConfiguration,
+        edgeStatus: NavigationEdgeStatus,
+        configuration: SequenceConfiguration,
         playEnabled: boolean,
         containerWidth: number,
         component: SequenceComponent,
         navigator: Navigator,
     ): vd.VNode {
 
-        let nextKey: string = null;
-        let prevKey: string = null;
+        let nextId: string = null;
+        let prevId: string = null;
 
         for (let edge of edgeStatus.edges) {
-            if (edge.data.direction === EdgeDirection.Next) {
-                nextKey = edge.to;
+            if (edge.data.direction === NavigationDirection.Next) {
+                nextId = edge.target;
             }
 
-            if (edge.data.direction === EdgeDirection.Prev) {
-                prevKey = edge.to;
+            if (edge.data.direction === NavigationDirection.Prev) {
+                prevId = edge.target;
             }
         }
 
         const playingButton: vd.VNode = this._createPlayingButton(
-            nextKey, prevKey, playEnabled, configuration, component);
-        const buttons: vd.VNode[] = this._createSequenceArrows(nextKey, prevKey, containerWidth, configuration, navigator);
+            nextId, prevId, playEnabled, configuration, component);
+        const buttons: vd.VNode[] = this._createSequenceArrows(nextId, prevId, containerWidth, configuration, navigator);
         buttons.splice(1, 0, playingButton);
 
         const containerProperties: vd.createProperties = {
@@ -549,15 +549,15 @@ export class SequenceDOMRenderer {
         return vd.h("div.mapillary-sequence-timeline", playbackProperties, [positionInput, closeButton]);
     }
 
-    private _getStepClassName(direction: EdgeDirection, key: string, highlightKey: string): string {
-        let className: string = direction === EdgeDirection.Next ?
+    private _getStepClassName(direction: NavigationDirection, imageId: string, highlightId: string): string {
+        let className: string = direction === NavigationDirection.Next ?
             "mapillary-sequence-step-next" :
             "mapillary-sequence-step-prev";
 
-        if (key == null) {
+        if (imageId == null) {
             className += "-inactive";
         } else {
-            if (highlightKey === key) {
+            if (highlightId === imageId) {
                 className += "-highlight";
             }
         }
diff --git a/src/component/shaders/Shaders.ts b/src/component/shaders/Shaders.ts
index 19ef640b8..84eaf4c83 100644
--- a/src/component/shaders/Shaders.ts
+++ b/src/component/shaders/Shaders.ts
@@ -1,9 +1,9 @@
-import { IShader } from "../interfaces/IShader";
+import { Shader } from "../interfaces/Shader";
 
-import { equirectangularFrag } from "./equirectangular.fragment.glsl";
-import { equirectangularVert } from "./equirectangular.vertex.glsl";
-import { equirectangularCurtainFrag } from "./equirectangular_curtain.fragment.glsl";
-import { equirectangularCurtainVert } from "./equirectangular_curtain.vertex.glsl";
+import { sphericalFrag } from "./spherical.fragment.glsl";
+import { sphericalVert } from "./spherical.vertex.glsl";
+import { sphericalCurtainFrag } from "./spherical_curtain.fragment.glsl";
+import { sphericalCurtainVert } from "./spherical_curtain.vertex.glsl";
 import { fisheyeFrag } from "./fisheye.fragment.glsl";
 import { fisheyeVert } from "./fisheye.vertex.glsl";
 import { fisheyeCurtainFrag } from "./fisheye_curtain.fragment.glsl";
@@ -19,43 +19,43 @@ import { perspectiveDistortedCurtainVert } from "./perspective_distorted_curtain
 
 
 export class Shaders {
-    public static equirectangular: IShader = {
-        fragment: equirectangularFrag,
-        vertex: equirectangularVert,
-    };
-
-    public static equirectangularCurtain: IShader = {
-        fragment: equirectangularCurtainFrag,
-        vertex: equirectangularCurtainVert,
-    };
-
-    public static fisheye: IShader = {
+    public static fisheye: Shader = {
         fragment: fisheyeFrag,
         vertex: fisheyeVert,
     };
 
-    public static fisheyeCurtain: IShader = {
+    public static fisheyeCurtain: Shader = {
         fragment: fisheyeCurtainFrag,
         vertex: fisheyeCurtainVert,
     };
 
-    public static perspective: IShader = {
+    public static perspective: Shader = {
         fragment: perspectiveFrag,
         vertex: perspectiveVert,
     };
 
-    public static perspectiveCurtain: IShader = {
+    public static perspectiveCurtain: Shader = {
         fragment: perspectiveCurtainFrag,
         vertex: perspectiveCurtainVert,
     };
 
-    public static perspectiveDistorted: IShader = {
+    public static perspectiveDistorted: Shader = {
         fragment: perspectiveDistortedFrag,
         vertex: perspectiveDistortedVert,
     };
 
-    public static perspectiveDistortedCurtain: IShader = {
+    public static perspectiveDistortedCurtain: Shader = {
         fragment: perspectiveDistortedCurtainFrag,
         vertex: perspectiveDistortedCurtainVert,
     };
+
+    public static spherical: Shader = {
+        fragment: sphericalFrag,
+        vertex: sphericalVert,
+    };
+
+    public static sphericalCurtain: Shader = {
+        fragment: sphericalCurtainFrag,
+        vertex: sphericalCurtainVert,
+    };
 }
diff --git a/src/component/shaders/equirectangular.fragment.glsl.ts b/src/component/shaders/spherical.fragment.glsl.ts
similarity index 93%
rename from src/component/shaders/equirectangular.fragment.glsl.ts
rename to src/component/shaders/spherical.fragment.glsl.ts
index 210d28a0b..9fb815996 100644
--- a/src/component/shaders/equirectangular.fragment.glsl.ts
+++ b/src/component/shaders/spherical.fragment.glsl.ts
@@ -1,4 +1,4 @@
-export const equirectangularFrag = `
+export const sphericalFrag = `
 #ifdef GL_FRAGMENT_PRECISION_HIGH
 precision highp float;
 #else
diff --git a/src/component/shaders/equirectangular.vertex.glsl.ts b/src/component/shaders/spherical.vertex.glsl.ts
similarity index 86%
rename from src/component/shaders/equirectangular.vertex.glsl.ts
rename to src/component/shaders/spherical.vertex.glsl.ts
index f28d0fa85..a1f8b9874 100644
--- a/src/component/shaders/equirectangular.vertex.glsl.ts
+++ b/src/component/shaders/spherical.vertex.glsl.ts
@@ -1,4 +1,4 @@
-export const equirectangularVert = `
+export const sphericalVert = `
 #ifdef GL_ES
 precision highp float;
 #endif
diff --git a/src/component/shaders/equirectangular_curtain.fragment.glsl.ts b/src/component/shaders/spherical_curtain.fragment.glsl.ts
similarity index 95%
rename from src/component/shaders/equirectangular_curtain.fragment.glsl.ts
rename to src/component/shaders/spherical_curtain.fragment.glsl.ts
index fdc91f550..b36b54d09 100644
--- a/src/component/shaders/equirectangular_curtain.fragment.glsl.ts
+++ b/src/component/shaders/spherical_curtain.fragment.glsl.ts
@@ -1,4 +1,4 @@
-export const equirectangularCurtainFrag = `
+export const sphericalCurtainFrag = `
 #ifdef GL_FRAGMENT_PRECISION_HIGH
 precision highp float;
 #else
diff --git a/src/component/shaders/equirectangular_curtain.vertex.glsl.ts b/src/component/shaders/spherical_curtain.vertex.glsl.ts
similarity index 84%
rename from src/component/shaders/equirectangular_curtain.vertex.glsl.ts
rename to src/component/shaders/spherical_curtain.vertex.glsl.ts
index 997cdbcb6..88f4e5106 100644
--- a/src/component/shaders/equirectangular_curtain.vertex.glsl.ts
+++ b/src/component/shaders/spherical_curtain.vertex.glsl.ts
@@ -1,4 +1,4 @@
-export const equirectangularCurtainVert = `
+export const sphericalCurtainVert = `
 #ifdef GL_ES
 precision highp float;
 #endif
diff --git a/src/component/slider/SliderComponent.ts b/src/component/slider/SliderComponent.ts
index 516a352da..b6f467009 100644
--- a/src/component/slider/SliderComponent.ts
+++ b/src/component/slider/SliderComponent.ts
@@ -19,51 +19,48 @@ import {
     first,
     map,
     pairwise,
-    publish,
     publishReplay,
     refCount,
     scan,
     skipWhile,
     startWith,
     switchMap,
-    takeUntil,
     withLatestFrom,
 } from "rxjs/operators";
 
 import {
-    ISliderNodes,
-    ISliderCombination,
-    IGLRendererOperation,
+    SliderNodes,
+    SliderCombination,
+    GLRendererOperation,
     PositionLookat,
-} from "./interfaces/interfaces";
+} from "./interfaces/SliderInterfaces";
 
 import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import { Spatial } from "../../geo/Spatial";
 import { ViewportCoords } from "../../geo/ViewportCoords";
-import { GLRenderStage } from "../../render/GLRenderStage";
-import { IGLRenderHash } from "../../render/interfaces/IGLRenderHash";
-import { ISize } from "../../render/interfaces/ISize";
-import { IVNodeHash } from "../../render/interfaces/IVNodeHash";
+import { RenderPass } from "../../render/RenderPass";
+import { GLRenderHash } from "../../render/interfaces/IGLRenderHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
 import { RenderCamera } from "../../render/RenderCamera";
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { State } from "../../state/State";
 import { ImageTileLoader } from "../../tiles/ImageTileLoader";
 import { ImageTileStore } from "../../tiles/ImageTileStore";
-import { IBoundingBox } from "../../tiles/interfaces/IBoundingBox";
-import { IRegionOfInterest } from "../../tiles/interfaces/IRegionOfInterest";
+import { TileBoundingBox } from "../../tiles/interfaces/TileBoundingBox";
+import { TileRegionOfInterest } from "../../tiles/interfaces/TileRegionOfInterest";
 import { RegionOfInterestCalculator } from "../../tiles/RegionOfInterestCalculator";
 import { TextureProvider } from "../../tiles/TextureProvider";
-import { Settings } from "../../utils/Settings";
 import { Component } from "../Component";
-import { ISliderConfiguration, ISliderKeys, SliderMode } from "../interfaces/ISliderConfiguration";
+import { SliderConfiguration, SliderConfigurationIds, SliderConfigurationMode } from "../interfaces/SliderConfiguration";
 import { SliderGLRenderer } from "./SliderGLRenderer";
 import { Transform } from "../../geo/Transform";
-import { ImageSize } from "../../viewer/ImageSize";
 import { SliderDOMRenderer } from "./SliderDOMRenderer";
 import { isSpherical } from "../../geo/Geo";
+import { SubscriptionHolder } from "../../utils/SubscriptionHolder";
 
 /**
  * @class SliderComponent
@@ -90,7 +87,7 @@ import { isSpherical } from "../../geo/Geo";
  * var sliderComponent = viewer.getComponent("slider");
  * ```
  */
-export class SliderComponent extends Component<ISliderConfiguration> {
+export class SliderComponent extends Component<SliderConfiguration> {
     public static componentName: string = "slider";
 
     private _viewportCoords: ViewportCoords;
@@ -99,41 +96,20 @@ export class SliderComponent extends Component<ISliderConfiguration> {
     private _roiCalculator: RegionOfInterestCalculator;
     private _spatial: Spatial;
 
-    private _glRendererOperation$: Subject<IGLRendererOperation>;
+    private _glRendererOperation$: Subject<GLRendererOperation>;
     private _glRenderer$: Observable<SliderGLRenderer>;
     private _glRendererCreator$: Subject<void>;
     private _glRendererDisposer$: Subject<void>;
 
-    private _setKeysSubscription: Subscription;
-
-    private _modeSubcription: Subscription;
-    private _stateSubscription: Subscription;
-    private _glRenderSubscription: Subscription;
-    private _domRenderSubscription: Subscription;
-    private _moveSubscription: Subscription;
-    private _updateCurtainSubscription: Subscription;
     private _waitSubscription: Subscription;
-
-    private _textureProviderSubscription: Subscription;
-    private _setTextureProviderSubscription: Subscription;
-    private _setTileSizeSubscription: Subscription;
-    private _abortTextureProviderSubscription: Subscription;
-    private _setRegionOfInterestSubscription: Subscription;
-    private _hasTextureSubscription: Subscription;
-    private _updateBackgroundSubscription: Subscription;
-    private _updateTextureImageSubscription: Subscription;
-
-    private _textureProviderSubscriptionPrev: Subscription;
-    private _setTextureProviderSubscriptionPrev: Subscription;
-    private _setTileSizeSubscriptionPrev: Subscription;
-    private _abortTextureProviderSubscriptionPrev: Subscription;
-    private _setRegionOfInterestSubscriptionPrev: Subscription;
-    private _hasTextureSubscriptionPrev: Subscription;
-    private _updateBackgroundSubscriptionPrev: Subscription;
-    private _updateTextureImageSubscriptionPrev: Subscription;
+    private _subscriptions: SubscriptionHolder = new SubscriptionHolder();
 
     /** @ignore */
-    constructor(name: string, container: Container, navigator: Navigator, viewportCoords?: ViewportCoords) {
+    constructor(
+        name: string,
+        container: Container,
+        navigator: Navigator,
+        viewportCoords?: ViewportCoords) {
         super(name, container, navigator);
 
         this._viewportCoords = !!viewportCoords ? viewportCoords : new ViewportCoords();
@@ -142,13 +118,13 @@ export class SliderComponent extends Component<ISliderConfiguration> {
         this._roiCalculator = new RegionOfInterestCalculator();
         this._spatial = new Spatial();
 
-        this._glRendererOperation$ = new Subject<IGLRendererOperation>();
+        this._glRendererOperation$ = new Subject<GLRendererOperation>();
         this._glRendererCreator$ = new Subject<void>();
         this._glRendererDisposer$ = new Subject<void>();
 
         this._glRenderer$ = this._glRendererOperation$.pipe(
             scan(
-                (glRenderer: SliderGLRenderer, operation: IGLRendererOperation): SliderGLRenderer => {
+                (glRenderer: SliderGLRenderer, operation: GLRendererOperation): SliderGLRenderer => {
                     return operation(glRenderer);
                 },
                 null),
@@ -164,7 +140,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
 
         this._glRendererCreator$.pipe(
             map(
-                (): IGLRendererOperation => {
+                (): GLRendererOperation => {
                     return (glRenderer: SliderGLRenderer): SliderGLRenderer => {
                         if (glRenderer != null) {
                             throw new Error("Multiple slider states can not be created at the same time");
@@ -177,7 +153,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
 
         this._glRendererDisposer$.pipe(
             map(
-                (): IGLRendererOperation => {
+                (): GLRendererOperation => {
                     return (glRenderer: SliderGLRenderer): SliderGLRenderer => {
                         glRenderer.dispose();
 
@@ -201,16 +177,16 @@ export class SliderComponent extends Component<ISliderConfiguration> {
     }
 
     /**
-     * Set the image keys.
+     * Set the image ids.
      *
      * @description Configures the component to show the image
-     * planes for the supplied image keys.
+     * planes for the supplied image idss.
      *
-     * @param {ISliderKeys} keys - Slider keys object specifying
+     * @param {SliderConfigurationIds} ids - Slider ids object specifying
      * the images to be shown in the foreground and the background.
      */
-    public setKeys(keys: ISliderKeys): void {
-        this.configure({ keys: keys });
+    public setIds(ids: SliderConfigurationIds): void {
+        this.configure({ ids: ids });
     }
 
     /**
@@ -219,9 +195,9 @@ export class SliderComponent extends Component<ISliderConfiguration> {
      * @description Configures the mode for transitions between
      * image pairs.
      *
-     * @param {SliderMode} mode - Slider mode to be set.
+     * @param {SliderConfigurationMode} mode - Slider mode to be set.
      */
-    public setSliderMode(mode: SliderMode): void {
+    public setSliderMode(mode: SliderConfigurationMode): void {
         this.configure({ mode: mode });
     }
 
@@ -236,56 +212,57 @@ export class SliderComponent extends Component<ISliderConfiguration> {
     }
 
     protected _activate(): void {
-        this._modeSubcription = this._domRenderer.mode$
+        const subs = this._subscriptions;
+        subs.push(this._domRenderer.mode$
             .subscribe(
-                (mode: SliderMode): void => {
+                (mode: SliderConfigurationMode): void => {
                     this.setSliderMode(mode);
-                });
+                }));
 
-        this._glRenderSubscription = this._glRenderer$.pipe(
+        subs.push(this._glRenderer$.pipe(
             map(
-                (glRenderer: SliderGLRenderer): IGLRenderHash => {
-                    let renderHash: IGLRenderHash = {
+                (glRenderer: SliderGLRenderer): GLRenderHash => {
+                    let renderHash: GLRenderHash = {
                         name: this._name,
-                        render: {
+                        renderer: {
                             frameId: glRenderer.frameId,
                             needsRender: glRenderer.needsRender,
                             render: glRenderer.render.bind(glRenderer),
-                            stage: GLRenderStage.Background,
+                            pass: RenderPass.Background,
                         },
                     };
 
                     return renderHash;
                 }))
-            .subscribe(this._container.glRenderer.render$);
+            .subscribe(this._container.glRenderer.render$));
 
         const position$: Observable<number> = observableConcat(
             this.configuration$.pipe(
                 map(
-                    (configuration: ISliderConfiguration): number => {
+                    (configuration: SliderConfiguration): number => {
                         return configuration.initialPosition != null ?
                             configuration.initialPosition : 1;
                     }),
                 first()),
             this._domRenderer.position$);
 
-        const mode$: Observable<SliderMode> = this.configuration$.pipe(
+        const mode$: Observable<SliderConfigurationMode> = this.configuration$.pipe(
             map(
-                (configuration: ISliderConfiguration): SliderMode => {
+                (configuration: SliderConfiguration): SliderConfigurationMode => {
                     return configuration.mode;
                 }),
             distinctUntilChanged());
 
         const motionless$: Observable<boolean> = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.motionless;
                 }),
             distinctUntilChanged());
 
         const spherical$: Observable<boolean> = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return isSpherical(frame.state.currentNode.cameraType);
                 }),
             distinctUntilChanged());
@@ -293,12 +270,12 @@ export class SliderComponent extends Component<ISliderConfiguration> {
         const sliderVisible$: Observable<boolean> = observableCombineLatest(
             this._configuration$.pipe(
                 map(
-                    (configuration: ISliderConfiguration): boolean => {
+                    (configuration: SliderConfiguration): boolean => {
                         return configuration.sliderVisible;
                     })),
             this._navigator.stateService.currentState$.pipe(
                 map(
-                    (frame: IFrame): boolean => {
+                    (frame: AnimationFrame): boolean => {
                         return !(frame.state.currentNode == null ||
                             frame.state.previousNode == null ||
                             (isSpherical(
@@ -320,9 +297,12 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             sliderVisible$).pipe(
                 withLatestFrom(this._navigator.stateService.state$))
             .subscribe(
-                ([[mode, motionless, spherical, sliderVisible], state]: [[SliderMode, boolean, boolean, boolean], State]): void => {
+                ([[mode, motionless, spherical, sliderVisible], state]:
+                    [[SliderConfigurationMode, boolean, boolean, boolean], State]): void => {
                     const interactive: boolean = sliderVisible &&
-                        (motionless || mode === SliderMode.Stationary || spherical);
+                        (motionless ||
+                            mode === SliderConfigurationMode.Stationary ||
+                            spherical);
 
                     if (interactive && state !== State.WaitingInteractively) {
                         this._navigator.stateService.waitInteractively();
@@ -331,22 +311,22 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     }
                 });
 
-        this._moveSubscription = observableCombineLatest(
+        subs.push(observableCombineLatest(
             position$,
             mode$,
             motionless$,
             spherical$,
             sliderVisible$)
             .subscribe(
-                ([position, mode, motionless, spherical]: [number, SliderMode, boolean, boolean, boolean]): void => {
-                    if (motionless || mode === SliderMode.Stationary || spherical) {
+                ([position, mode, motionless, spherical]: [number, SliderConfigurationMode, boolean, boolean, boolean]): void => {
+                    if (motionless || mode === SliderConfigurationMode.Stationary || spherical) {
                         this._navigator.stateService.moveTo(1);
                     } else {
                         this._navigator.stateService.moveTo(position);
                     }
-                });
+                }));
 
-        this._domRenderSubscription = observableCombineLatest(
+        subs.push(observableCombineLatest(
             position$,
             mode$,
             motionless$,
@@ -355,17 +335,17 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             this._container.renderService.size$).pipe(
                 map(
                     ([position, mode, motionless, spherical, sliderVisible]:
-                        [number, SliderMode, boolean, boolean, boolean, ISize]): IVNodeHash => {
+                        [number, SliderConfigurationMode, boolean, boolean, boolean, ViewportSize]): VirtualNodeHash => {
                         return {
                             name: this._name,
                             vnode: this._domRenderer.render(position, mode, motionless, spherical, sliderVisible),
                         };
                     }))
-            .subscribe(this._container.domRenderer.render$);
+            .subscribe(this._container.domRenderer.render$));
 
         this._glRendererCreator$.next(null);
 
-        this._updateCurtainSubscription = observableCombineLatest(
+        subs.push(observableCombineLatest(
             position$,
             spherical$,
             sliderVisible$,
@@ -386,64 +366,64 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                         return basicPosition > 1 ? basicPosition - 1 : basicPosition;
                     }),
                 map(
-                    (position: number): IGLRendererOperation => {
+                    (position: number): GLRendererOperation => {
                         return (glRenderer: SliderGLRenderer): SliderGLRenderer => {
                             glRenderer.updateCurtain(position);
 
                             return glRenderer;
                         };
                     }))
-            .subscribe(this._glRendererOperation$);
+            .subscribe(this._glRendererOperation$));
 
-        this._stateSubscription = observableCombineLatest(
+        subs.push(observableCombineLatest(
             this._navigator.stateService.currentState$,
             mode$).pipe(
                 map(
-                    ([frame, mode]: [IFrame, SliderMode]): IGLRendererOperation => {
+                    ([frame, mode]: [AnimationFrame, SliderConfigurationMode]): GLRendererOperation => {
                         return (glRenderer: SliderGLRenderer): SliderGLRenderer => {
                             glRenderer.update(frame, mode);
 
                             return glRenderer;
                         };
                     }))
-            .subscribe(this._glRendererOperation$);
+            .subscribe(this._glRendererOperation$));
 
-        this._setKeysSubscription = this._configuration$.pipe(
+        subs.push(this._configuration$.pipe(
             filter(
-                (configuration: ISliderConfiguration): boolean => {
-                    return configuration.keys != null;
+                (configuration: SliderConfiguration): boolean => {
+                    return configuration.ids != null;
                 }),
             switchMap(
-                (configuration: ISliderConfiguration): Observable<ISliderCombination> => {
+                (configuration: SliderConfiguration): Observable<SliderCombination> => {
                     return observableZip(
                         observableZip(
-                            this._catchCacheNode$(configuration.keys.background),
-                            this._catchCacheNode$(configuration.keys.foreground)).pipe(
+                            this._catchCacheNode$(configuration.ids.background),
+                            this._catchCacheNode$(configuration.ids.foreground)).pipe(
                                 map(
-                                    (nodes: [Node, Node]): ISliderNodes => {
+                                    (nodes: [Node, Node]): SliderNodes => {
                                         return { background: nodes[0], foreground: nodes[1] };
                                     })),
                         this._navigator.stateService.currentState$.pipe(first())).pipe(
                             map(
-                                (nf: [ISliderNodes, IFrame]): ISliderCombination => {
+                                (nf: [SliderNodes, AnimationFrame]): SliderCombination => {
                                     return { nodes: nf[0], state: nf[1].state };
                                 }));
                 }))
             .subscribe(
-                (co: ISliderCombination): void => {
+                (co: SliderCombination): void => {
                     if (co.state.currentNode != null &&
                         co.state.previousNode != null &&
-                        co.state.currentNode.key === co.nodes.foreground.key &&
-                        co.state.previousNode.key === co.nodes.background.key) {
+                        co.state.currentNode.id === co.nodes.foreground.id &&
+                        co.state.previousNode.id === co.nodes.background.id) {
                         return;
                     }
 
-                    if (co.state.currentNode.key === co.nodes.background.key) {
+                    if (co.state.currentNode.id === co.nodes.background.id) {
                         this._navigator.stateService.setNodes([co.nodes.foreground]);
                         return;
                     }
 
-                    if (co.state.currentNode.key === co.nodes.foreground.key &&
+                    if (co.state.currentNode.id === co.nodes.foreground.id &&
                         co.state.trajectory.length === 1) {
                         this._navigator.stateService.prependNodes([co.nodes.background]);
                         return;
@@ -454,21 +434,21 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                 },
                 (e: Error): void => {
                     console.error(e);
-                });
+                }));
 
 
-        const textureProvider$: Observable<TextureProvider> = this._navigator.stateService.currentState$.pipe(
+        const textureProvider$ = this._navigator.stateService.currentState$.pipe(
             distinctUntilChanged(
                 undefined,
-                (frame: IFrame): string => {
-                    return frame.state.currentNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.currentNode.id;
                 }),
             withLatestFrom(
                 this._container.glRenderer.webGLRenderer$,
                 this._container.renderService.size$),
             map(
-                ([frame, renderer, size]: [IFrame, THREE.WebGLRenderer, ISize]): TextureProvider => {
-                    const state: ICurrentState = frame.state;
+                ([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
+                    const state: IAnimationState = frame.state;
                     const viewportSize: number = Math.max(size.width, size.height);
 
                     const currentNode: Node = state.currentNode;
@@ -476,7 +456,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     const tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     return new TextureProvider(
-                        currentNode.key,
+                        currentNode.id,
                         currentTransform.basicWidth,
                         currentTransform.basicHeight,
                         tileSize,
@@ -488,48 +468,48 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             publishReplay(1),
             refCount());
 
-        this._textureProviderSubscription = textureProvider$.subscribe(() => { /*noop*/ });
+        subs.push(textureProvider$.subscribe(() => { /*noop*/ }));
 
-        this._setTextureProviderSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             map(
-                (provider: TextureProvider): IGLRendererOperation => {
+                (provider: TextureProvider): GLRendererOperation => {
                     return (renderer: SliderGLRenderer): SliderGLRenderer => {
-                        renderer.setTextureProvider(provider.key, provider);
+                        renderer.setTextureProvider(provider.id, provider);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._glRendererOperation$);
+            .subscribe(this._glRendererOperation$));
 
-        this._setTileSizeSubscription = this._container.renderService.size$.pipe(
+        subs.push(this._container.renderService.size$.pipe(
             switchMap(
-                (size: ISize): Observable<[TextureProvider, ISize]> => {
+                (size: ViewportSize): Observable<[TextureProvider, ViewportSize]> => {
                     return observableCombineLatest(
                         textureProvider$,
-                        observableOf<ISize>(size)).pipe(
+                        observableOf<ViewportSize>(size)).pipe(
                             first());
                 }))
             .subscribe(
-                ([provider, size]: [TextureProvider, ISize]): void => {
+                ([provider, size]: [TextureProvider, ViewportSize]): void => {
                     let viewportSize: number = Math.max(size.width, size.height);
                     let tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     provider.setTileSize(tileSize);
-                });
+                }));
 
-        this._abortTextureProviderSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             pairwise())
             .subscribe(
                 (pair: [TextureProvider, TextureProvider]): void => {
                     let previous: TextureProvider = pair[0];
                     previous.abort();
-                });
+                }));
 
-        let roiTrigger$: Observable<[RenderCamera, ISize, Transform]> = observableCombineLatest(
+        const roiTrigger$ = observableCombineLatest(
             this._container.renderService.renderCameraFrame$,
             this._container.renderService.size$.pipe(debounceTime(250))).pipe(
                 map(
-                    ([camera, size]: [RenderCamera, ISize]): PositionLookat => {
+                    ([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
                         return [
                             camera.camera.position.clone(),
                             camera.camera.lookat.clone(),
@@ -566,13 +546,13 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     this._container.renderService.size$,
                     this._navigator.stateService.currentTransform$));
 
-        this._setRegionOfInterestSubscription = textureProvider$.pipe(
+        subs.push(textureProvider$.pipe(
             switchMap(
-                (provider: TextureProvider): Observable<[IRegionOfInterest, TextureProvider]> => {
+                (provider: TextureProvider): Observable<[TileRegionOfInterest, TextureProvider]> => {
                     return roiTrigger$.pipe(
                         map(
-                            ([camera, size, transform]: [RenderCamera, ISize, Transform]):
-                                [IRegionOfInterest, TextureProvider] => {
+                            ([camera, size, transform]: [RenderCamera, ViewportSize, Transform]):
+                                [TileRegionOfInterest, TextureProvider] => {
                                 return [
                                     this._roiCalculator.computeRegionOfInterest(camera, size, transform),
                                     provider,
@@ -580,18 +560,18 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                             }));
                 }),
             filter(
-                (args: [IRegionOfInterest, TextureProvider]): boolean => {
+                (args: [TileRegionOfInterest, TextureProvider]): boolean => {
                     return !args[1].disposed;
                 }))
             .subscribe(
-                (args: [IRegionOfInterest, TextureProvider]): void => {
-                    let roi: IRegionOfInterest = args[0];
+                (args: [TileRegionOfInterest, TextureProvider]): void => {
+                    let roi: TileRegionOfInterest = args[0];
                     let provider: TextureProvider = args[1];
 
                     provider.setRegionOfInterest(roi);
-                });
+                }));
 
-        let hasTexture$: Observable<boolean> = textureProvider$.pipe(
+        const hasTexture$ = textureProvider$.pipe(
             switchMap(
                 (provider: TextureProvider): Observable<boolean> => {
                     return provider.hasTexture$;
@@ -600,113 +580,24 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             publishReplay(1),
             refCount());
 
-        this._hasTextureSubscription = hasTexture$.subscribe(() => { /*noop*/ });
-
-        let nodeImage$: Observable<[HTMLImageElement, Node]> = this._navigator.stateService.currentState$.pipe(
-            filter(
-                (frame: IFrame): boolean => {
-                    return frame.state.nodesAhead === 0;
-                }),
-            map(
-                (frame: IFrame): Node => {
-                    return frame.state.currentNode;
-                }),
-            distinctUntilChanged(
-                undefined,
-                (node: Node): string => {
-                    return node.key;
-                }),
-            debounceTime(1000),
-            withLatestFrom(hasTexture$),
-            filter(
-                (args: [Node, boolean]): boolean => {
-                    return !args[1];
-                }),
-            map(
-                (args: [Node, boolean]): Node => {
-                    return args[0];
-                }),
-            filter(
-                (node: Node): boolean => {
-                    return isSpherical(node.cameraType) ?
-                        Settings.maxImageSize > Settings.baseSphericalSize :
-                        Settings.maxImageSize > Settings.baseImageSize;
-                }),
-            switchMap(
-                (node: Node): Observable<[HTMLImageElement, Node]> => {
-                    let baseImageSize: ImageSize = isSpherical(node.cameraType) ?
-                        Settings.baseSphericalSize :
-                        Settings.baseImageSize;
-
-                    if (Math.max(node.image.width, node.image.height) > baseImageSize) {
-                        return observableEmpty();
-                    }
-
-                    let image$: Observable<[HTMLImageElement, Node]> = node
-                        .cacheImage$(Settings.maxImageSize).pipe(
-                            map(
-                                (n: Node): [HTMLImageElement, Node] => {
-                                    return [n.image, n];
-                                }));
-
-                    return image$.pipe(
-                        takeUntil(
-                            hasTexture$.pipe(
-                                filter(
-                                    (hasTexture: boolean): boolean => {
-
-                                        return hasTexture;
-                                    }))),
-                        catchError(
-                            (error: Error):
-                                Observable<[HTMLImageElement, Node]> => {
-                                console.error(`Failed to fetch high res image (${node.key})`, error);
-
-                                return observableEmpty();
-                            }));
-                })).pipe(
-                    publish(),
-                    refCount());
-
-        this._updateBackgroundSubscription = nodeImage$.pipe(
-            withLatestFrom(textureProvider$))
-            .subscribe(
-                (args: [[HTMLImageElement, Node], TextureProvider]): void => {
-                    if (args[0][1].key !== args[1].key ||
-                        args[1].disposed) {
-                        return;
-                    }
-
-                    args[1].updateBackground(args[0][0]);
-                });
-
-        this._updateTextureImageSubscription = nodeImage$.pipe(
-            map(
-                (imn: [HTMLImageElement, Node]): IGLRendererOperation => {
-                    return (renderer: SliderGLRenderer): SliderGLRenderer => {
-                        renderer.updateTextureImage(imn[0], imn[1]);
-
-                        return renderer;
-                    };
-                }))
-            .subscribe(this._glRendererOperation$);
+        subs.push(hasTexture$.subscribe(() => { /*noop*/ }));
 
-        const textureProviderPrev$: Observable<TextureProvider> = this._navigator.stateService.currentState$.pipe(
+        const textureProviderPrev$ = this._navigator.stateService.currentState$.pipe(
             filter(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return !!frame.state.previousNode;
                 }),
             distinctUntilChanged(
                 undefined,
-                (frame: IFrame): string => {
-                    return frame.state.previousNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.previousNode.id;
                 }),
             withLatestFrom(
                 this._container.glRenderer.webGLRenderer$,
                 this._container.renderService.size$),
             map(
-                ([frame, renderer, size]: [IFrame, THREE.WebGLRenderer, ISize]): TextureProvider => {
-                    const state: ICurrentState = frame.state;
+                ([frame, renderer, size]: [AnimationFrame, THREE.WebGLRenderer, ViewportSize]): TextureProvider => {
+                    const state: IAnimationState = frame.state;
                     const viewportSize: number = Math.max(size.width, size.height);
 
                     const previousNode: Node = state.previousNode;
@@ -714,7 +605,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     const tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     return new TextureProvider(
-                        previousNode.key,
+                        previousNode.id,
                         previousTransform.basicWidth,
                         previousTransform.basicHeight,
                         tileSize,
@@ -726,48 +617,48 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             publishReplay(1),
             refCount());
 
-        this._textureProviderSubscriptionPrev = textureProviderPrev$.subscribe(() => { /*noop*/ });
+        subs.push(textureProviderPrev$.subscribe(() => { /*noop*/ }));
 
-        this._setTextureProviderSubscriptionPrev = textureProviderPrev$.pipe(
+        subs.push(textureProviderPrev$.pipe(
             map(
-                (provider: TextureProvider): IGLRendererOperation => {
+                (provider: TextureProvider): GLRendererOperation => {
                     return (renderer: SliderGLRenderer): SliderGLRenderer => {
-                        renderer.setTextureProviderPrev(provider.key, provider);
+                        renderer.setTextureProviderPrev(provider.id, provider);
 
                         return renderer;
                     };
                 }))
-            .subscribe(this._glRendererOperation$);
+            .subscribe(this._glRendererOperation$));
 
-        this._setTileSizeSubscriptionPrev = this._container.renderService.size$.pipe(
+        subs.push(this._container.renderService.size$.pipe(
             switchMap(
-                (size: ISize): Observable<[TextureProvider, ISize]> => {
+                (size: ViewportSize): Observable<[TextureProvider, ViewportSize]> => {
                     return observableCombineLatest(
                         textureProviderPrev$,
-                        observableOf<ISize>(size)).pipe(
+                        observableOf<ViewportSize>(size)).pipe(
                             first());
                 }))
             .subscribe(
-                ([provider, size]: [TextureProvider, ISize]): void => {
+                ([provider, size]: [TextureProvider, ViewportSize]): void => {
                     let viewportSize: number = Math.max(size.width, size.height);
                     let tileSize: number = viewportSize > 2048 ? 2048 : viewportSize > 1024 ? 1024 : 512;
 
                     provider.setTileSize(tileSize);
-                });
+                }));
 
-        this._abortTextureProviderSubscriptionPrev = textureProviderPrev$.pipe(
+        subs.push(textureProviderPrev$.pipe(
             pairwise())
             .subscribe(
                 (pair: [TextureProvider, TextureProvider]): void => {
                     let previous: TextureProvider = pair[0];
                     previous.abort();
-                });
+                }));
 
-        let roiTriggerPrev$: Observable<[RenderCamera, ISize, Transform]> = observableCombineLatest(
+        const roiTriggerPrev$ = observableCombineLatest(
             this._container.renderService.renderCameraFrame$,
             this._container.renderService.size$.pipe(debounceTime(250))).pipe(
                 map(
-                    ([camera, size]: [RenderCamera, ISize]): PositionLookat => {
+                    ([camera, size]: [RenderCamera, ViewportSize]): PositionLookat => {
                         return [
                             camera.camera.position.clone(),
                             camera.camera.lookat.clone(),
@@ -804,13 +695,13 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     this._container.renderService.size$,
                     this._navigator.stateService.currentTransform$));
 
-        this._setRegionOfInterestSubscriptionPrev = textureProviderPrev$.pipe(
+        subs.push(textureProviderPrev$.pipe(
             switchMap(
-                (provider: TextureProvider): Observable<[IRegionOfInterest, TextureProvider]> => {
+                (provider: TextureProvider): Observable<[TileRegionOfInterest, TextureProvider]> => {
                     return roiTriggerPrev$.pipe(
                         map(
-                            ([camera, size, transform]: [RenderCamera, ISize, Transform]):
-                                [IRegionOfInterest, TextureProvider] => {
+                            ([camera, size, transform]: [RenderCamera, ViewportSize, Transform]):
+                                [TileRegionOfInterest, TextureProvider] => {
                                 return [
                                     this._roiCalculator.computeRegionOfInterest(camera, size, transform),
                                     provider,
@@ -818,13 +709,13 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                             }));
                 }),
             filter(
-                (args: [IRegionOfInterest, TextureProvider]): boolean => {
+                (args: [TileRegionOfInterest, TextureProvider]): boolean => {
                     return !args[1].disposed;
                 }),
             withLatestFrom(this._navigator.stateService.currentState$))
             .subscribe(
-                ([[roi, provider], frame]: [[IRegionOfInterest, TextureProvider], IFrame]): void => {
-                    let shiftedRoi: IRegionOfInterest = null;
+                ([[roi, provider], frame]: [[TileRegionOfInterest, TextureProvider], AnimationFrame]): void => {
+                    let shiftedRoi: TileRegionOfInterest = null;
 
                     if (isSpherical(frame.state.previousNode.cameraType)) {
                         if (isSpherical(frame.state.currentNode.cameraType)) {
@@ -841,7 +732,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
 
                             const shift: number = directionDiff / (2 * Math.PI);
 
-                            const bbox: IBoundingBox = {
+                            const bbox: TileBoundingBox = {
                                 maxX: this._spatial.wrap(roi.bbox.maxX + shift, 0, 1),
                                 maxY: roi.bbox.maxY,
                                 minX: this._spatial.wrap(roi.bbox.minX + shift, 0, 1),
@@ -898,7 +789,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                             const minY: number = 0.5 + shiftY + spanningHeight * zoomShiftY - basicHeight / 2;
                             const maxY: number = 0.5 + shiftY + spanningHeight * zoomShiftY + basicHeight / 2;
 
-                            const bbox: IBoundingBox = {
+                            const bbox: TileBoundingBox = {
                                 maxX: this._spatial.wrap(maxX, 0, 1),
                                 maxY: maxY,
                                 minX: this._spatial.wrap(minX, 0, 1),
@@ -929,7 +820,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                         const minY: number = (basicHeight - 1) / (2 * basicHeight) + roi.bbox.minY / basicHeight;
                         const maxY: number = (basicHeight - 1) / (2 * basicHeight) + roi.bbox.maxY / basicHeight;
 
-                        const bbox: IBoundingBox = {
+                        const bbox: TileBoundingBox = {
                             maxX: maxX,
                             maxY: maxY,
                             minX: minX,
@@ -946,9 +837,9 @@ export class SliderComponent extends Component<ISliderConfiguration> {
                     }
 
                     provider.setRegionOfInterest(shiftedRoi);
-                });
+                }));
 
-        let hasTexturePrev$: Observable<boolean> = textureProviderPrev$.pipe(
+        const hasTexturePrev$ = textureProviderPrev$.pipe(
             switchMap(
                 (provider: TextureProvider): Observable<boolean> => {
                     return provider.hasTexture$;
@@ -957,102 +848,11 @@ export class SliderComponent extends Component<ISliderConfiguration> {
             publishReplay(1),
             refCount());
 
-        this._hasTextureSubscriptionPrev = hasTexturePrev$.subscribe(() => { /*noop*/ });
-
-        let nodeImagePrev$: Observable<[HTMLImageElement, Node]> = this._navigator.stateService.currentState$.pipe(
-            filter(
-                (frame: IFrame): boolean => {
-                    return frame.state.nodesAhead === 0 && !!frame.state.previousNode;
-                }),
-            map(
-                (frame: IFrame): Node => {
-                    return frame.state.previousNode;
-                }),
-            distinctUntilChanged(
-                undefined,
-                (node: Node): string => {
-                    return node.key;
-                }),
-            debounceTime(1000),
-            withLatestFrom(hasTexturePrev$),
-            filter(
-                (args: [Node, boolean]): boolean => {
-                    return !args[1];
-                }),
-            map(
-                (args: [Node, boolean]): Node => {
-                    return args[0];
-                }),
-            filter(
-                (node: Node): boolean => {
-                    return isSpherical(node.cameraType) ?
-                        Settings.maxImageSize > Settings.baseSphericalSize :
-                        Settings.maxImageSize > Settings.baseImageSize;
-                }),
-            switchMap(
-                (node: Node): Observable<[HTMLImageElement, Node]> => {
-                    let baseImageSize: ImageSize =
-                        isSpherical(node.cameraType) ?
-                            Settings.baseSphericalSize :
-                            Settings.baseImageSize;
-
-                    if (Math.max(node.image.width, node.image.height) > baseImageSize) {
-                        return observableEmpty();
-                    }
-
-                    let image$: Observable<[HTMLImageElement, Node]> = node
-                        .cacheImage$(Settings.maxImageSize).pipe(
-                            map(
-                                (n: Node): [HTMLImageElement, Node] => {
-                                    return [n.image, n];
-                                }));
-
-                    return image$.pipe(
-                        takeUntil(
-                            hasTexturePrev$.pipe(
-                                filter(
-                                    (hasTexture: boolean): boolean => {
-
-                                        return hasTexture;
-                                    }))),
-                        catchError(
-                            (error: Error):
-                                Observable<[HTMLImageElement, Node]> => {
-                                console.error(`Failed to fetch high res image (${node.key})`, error);
-
-                                return observableEmpty();
-                            }));
-                })).pipe(
-                    publish(),
-                    refCount());
-
-        this._updateBackgroundSubscriptionPrev = nodeImagePrev$.pipe(
-            withLatestFrom(textureProviderPrev$))
-            .subscribe(
-                (args: [[HTMLImageElement, Node], TextureProvider]): void => {
-                    if (args[0][1].key !== args[1].key ||
-                        args[1].disposed) {
-                        return;
-                    }
-
-                    args[1].updateBackground(args[0][0]);
-                });
-
-        this._updateTextureImageSubscriptionPrev = nodeImagePrev$.pipe(
-            map(
-                (imn: [HTMLImageElement, Node]): IGLRendererOperation => {
-                    return (renderer: SliderGLRenderer): SliderGLRenderer => {
-                        renderer.updateTextureImage(imn[0], imn[1]);
-
-                        return renderer;
-                    };
-                }))
-            .subscribe(this._glRendererOperation$);
+        subs.push(hasTexturePrev$.subscribe(() => { /*noop*/ }));
     }
 
     protected _deactivate(): void {
         this._waitSubscription.unsubscribe();
-
         this._navigator.stateService.state$.pipe(
             first())
             .subscribe(
@@ -1064,40 +864,15 @@ export class SliderComponent extends Component<ISliderConfiguration> {
 
         this._glRendererDisposer$.next(null);
         this._domRenderer.deactivate();
+        this._subscriptions.unsubscribe();
 
-        this._modeSubcription.unsubscribe();
-        this._setKeysSubscription.unsubscribe();
-        this._stateSubscription.unsubscribe();
-        this._glRenderSubscription.unsubscribe();
-        this._domRenderSubscription.unsubscribe();
-        this._moveSubscription.unsubscribe();
-        this._updateCurtainSubscription.unsubscribe();
-
-        this._textureProviderSubscription.unsubscribe();
-        this._setTextureProviderSubscription.unsubscribe();
-        this._setTileSizeSubscription.unsubscribe();
-        this._abortTextureProviderSubscription.unsubscribe();
-        this._setRegionOfInterestSubscription.unsubscribe();
-        this._hasTextureSubscription.unsubscribe();
-        this._updateBackgroundSubscription.unsubscribe();
-        this._updateTextureImageSubscription.unsubscribe();
-
-        this._textureProviderSubscriptionPrev.unsubscribe();
-        this._setTextureProviderSubscriptionPrev.unsubscribe();
-        this._setTileSizeSubscriptionPrev.unsubscribe();
-        this._abortTextureProviderSubscriptionPrev.unsubscribe();
-        this._setRegionOfInterestSubscriptionPrev.unsubscribe();
-        this._hasTextureSubscriptionPrev.unsubscribe();
-        this._updateBackgroundSubscriptionPrev.unsubscribe();
-        this._updateTextureImageSubscriptionPrev.unsubscribe();
-
-        this.configure({ keys: null });
+        this.configure({ ids: null });
     }
 
-    protected _getDefaultConfiguration(): ISliderConfiguration {
+    protected _getDefaultConfiguration(): SliderConfiguration {
         return {
             initialPosition: 1,
-            mode: SliderMode.Motion,
+            mode: SliderConfigurationMode.Motion,
             sliderVisible: true,
         };
     }
@@ -1127,7 +902,7 @@ export class SliderComponent extends Component<ISliderConfiguration> {
         return [[0.5 - offsetX, 0.5 - offsetY], [0.5 + offsetX, 0.5 + offsetY]];
     }
 
-    private _clipBoundingBox(bbox: IBoundingBox): void {
+    private _clipBoundingBox(bbox: TileBoundingBox): void {
         bbox.minX = Math.max(0, Math.min(1, bbox.minX));
         bbox.maxX = Math.max(0, Math.min(1, bbox.maxX));
         bbox.minY = Math.max(0, Math.min(1, bbox.minY));
diff --git a/src/component/slider/SliderDOMRenderer.ts b/src/component/slider/SliderDOMRenderer.ts
index 2987732d7..abd8e5108 100644
--- a/src/component/slider/SliderDOMRenderer.ts
+++ b/src/component/slider/SliderDOMRenderer.ts
@@ -4,13 +4,13 @@ import { filter } from "rxjs/operators";
 import * as vd from "virtual-dom";
 
 import { Container } from "../../viewer/Container";
-import { SliderMode } from "../interfaces/ISliderConfiguration";
+import { SliderConfigurationMode } from "../interfaces/SliderConfiguration";
 
 export class SliderDOMRenderer {
     private _container: Container;
 
     private _interacting: boolean;
-    private _notifyModeChanged$: Subject<SliderMode>;
+    private _notifyModeChanged$: Subject<SliderConfigurationMode>;
     private _notifyPositionChanged$: Subject<number>;
     private _stopInteractionSubscription: Subscription;
 
@@ -18,12 +18,12 @@ export class SliderDOMRenderer {
         this._container = container;
 
         this._interacting = false;
-        this._notifyModeChanged$ = new Subject<SliderMode>();
+        this._notifyModeChanged$ = new Subject<SliderConfigurationMode>();
         this._notifyPositionChanged$ = new Subject<number>();
         this._stopInteractionSubscription = null;
     }
 
-    public get mode$(): Observable<SliderMode> {
+    public get mode$(): Observable<SliderConfigurationMode> {
         return this._notifyModeChanged$;
     }
 
@@ -64,7 +64,7 @@ export class SliderDOMRenderer {
 
     public render(
         position: number,
-        mode: SliderMode,
+        mode: SliderConfigurationMode,
         motionless: boolean,
         spherical: boolean,
         visible: boolean): vd.VNode {
@@ -88,36 +88,36 @@ export class SliderDOMRenderer {
         return vd.h("div.mapillary-slider-container", { style: { width: `${width}px` } }, children);
     }
 
-    private _createModeButton(mode: SliderMode): vd.VNode {
+    private _createModeButton(mode: SliderConfigurationMode): vd.VNode {
         const properties: vd.createProperties = {
             onclick: (): void => {
-                if (mode === SliderMode.Motion) {
+                if (mode === SliderConfigurationMode.Motion) {
                     return;
                 }
 
-                this._notifyModeChanged$.next(SliderMode.Motion);
+                this._notifyModeChanged$.next(SliderConfigurationMode.Motion);
             },
         };
 
-        const className: string = mode === SliderMode.Stationary ?
+        const className: string = mode === SliderConfigurationMode.Stationary ?
             "mapillary-slider-mode-button-inactive" :
             "mapillary-slider-mode-button";
 
         return vd.h("div." + className, properties, [vd.h("div.mapillary-slider-mode-icon", [])]);
     }
 
-    private _createModeButton2d(mode: SliderMode): vd.VNode {
+    private _createModeButton2d(mode: SliderConfigurationMode): vd.VNode {
         const properties: vd.createProperties = {
             onclick: (): void => {
-                if (mode === SliderMode.Stationary) {
+                if (mode === SliderConfigurationMode.Stationary) {
                     return;
                 }
 
-                this._notifyModeChanged$.next(SliderMode.Stationary);
+                this._notifyModeChanged$.next(SliderConfigurationMode.Stationary);
             },
         };
 
-        const className: string = mode === SliderMode.Motion ?
+        const className: string = mode === SliderConfigurationMode.Motion ?
             "mapillary-slider-mode-button-2d-inactive" :
             "mapillary-slider-mode-button-2d";
 
diff --git a/src/component/slider/SliderGLRenderer.ts b/src/component/slider/SliderGLRenderer.ts
index e54dccb95..11490846b 100644
--- a/src/component/slider/SliderGLRenderer.ts
+++ b/src/component/slider/SliderGLRenderer.ts
@@ -4,16 +4,16 @@ import { Subscription } from "rxjs";
 import { Spatial } from "../../geo/Spatial";
 import { Transform } from "../../geo/Transform";
 import { Node } from "../../graph/Node";
-import { ICurrentState } from "../../state/interfaces/ICurrentState";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { IAnimationState } from "../../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { TextureProvider } from "../../tiles/TextureProvider";
-import { IBBoxShaderMaterial } from "../imageplane/interfaces/IBBoxShaderMaterial";
-import { IShaderMaterial } from "../imageplane/interfaces/IShaderMaterial";
-import { SliderMode } from "../interfaces/ISliderConfiguration";
+import { BBoxProjectorShaderMaterial } from "../imageplane/interfaces/BBoxProjectorShaderMaterial";
+import { ProjectorShaderMaterial } from "../imageplane/interfaces/ProjectorShaderMaterial";
+import { SliderConfigurationMode } from "../interfaces/SliderConfiguration";
 import { MeshFactory } from "../utils/MeshFactory";
 import { MeshScene } from "../utils/MeshScene";
 import { isSpherical } from "../../geo/Geo";
-import { CameraProjectionType } from "../../api/interfaces/CameraProjectionType";
+import { CameraType } from "../../geo/interfaces/CameraType";
 
 export class SliderGLRenderer {
     private _factory: MeshFactory;
@@ -28,7 +28,7 @@ export class SliderGLRenderer {
     private _frameId: number;
     private _needsRender: boolean;
 
-    private _mode: SliderMode;
+    private _mode: SliderConfigurationMode;
 
     private _currentProviderDisposers: { [key: string]: () => void };
     private _previousProviderDisposers: { [key: string]: () => void };
@@ -82,7 +82,7 @@ export class SliderGLRenderer {
             this._updateTexturePrev.bind(this));
     }
 
-    public update(frame: IFrame, mode: SliderMode): void {
+    public update(frame: AnimationFrame, mode: SliderConfigurationMode): void {
         this._updateFrameId(frame.id);
         this._updateImagePlanes(frame.state, mode);
     }
@@ -99,9 +99,9 @@ export class SliderGLRenderer {
     }
 
     public updateTexture(image: HTMLImageElement, node: Node): void {
-        const planes: { [key: string]: THREE.Mesh } = node.key === this._currentKey ?
+        const planes: { [key: string]: THREE.Mesh } = node.id === this._currentKey ?
             this._scene.planes :
-            node.key === this._previousKey ?
+            node.id === this._previousKey ?
                 this._scene.planesOld :
                 {};
 
@@ -117,7 +117,7 @@ export class SliderGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
             let texture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
 
             texture.image = image;
@@ -126,7 +126,7 @@ export class SliderGLRenderer {
     }
 
     public updateTextureImage(image: HTMLImageElement, node?: Node): void {
-        if (this._currentKey !== node.key) {
+        if (this._currentKey !== node.id) {
             return;
         }
 
@@ -140,7 +140,7 @@ export class SliderGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
             let texture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
 
             texture.image = image;
@@ -199,7 +199,7 @@ export class SliderGLRenderer {
         return [[0.5 - offsetX, 0.5 - offsetY], [0.5 + offsetX, 0.5 + offsetY]];
     }
 
-    private _setDisabled(state: ICurrentState): void {
+    private _setDisabled(state: IAnimationState): void {
         this._disabled = state.currentNode == null ||
             state.previousNode == null ||
             (isSpherical(state.currentNode.cameraType) &&
@@ -251,7 +251,7 @@ export class SliderGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let shaderMaterial = <IBBoxShaderMaterial>plane.material;
+            let shaderMaterial = <BBoxProjectorShaderMaterial>plane.material;
 
             if (!!shaderMaterial.uniforms.curtain) {
                 shaderMaterial.uniforms.curtain.value = this._curtain;
@@ -263,9 +263,9 @@ export class SliderGLRenderer {
         this._frameId = frameId;
     }
 
-    private _updateImagePlanes(state: ICurrentState, mode: SliderMode): void {
-        const currentChanged: boolean = state.currentNode != null && this._currentKey !== state.currentNode.key;
-        const previousChanged: boolean = state.previousNode != null && this._previousKey !== state.previousNode.key;
+    private _updateImagePlanes(state: IAnimationState, mode: SliderConfigurationMode): void {
+        const currentChanged: boolean = state.currentNode != null && this._currentKey !== state.currentNode.id;
+        const previousChanged: boolean = state.previousNode != null && this._previousKey !== state.previousNode.id;
         const modeChanged: boolean = this._mode !== mode;
 
         if (!(currentChanged || previousChanged || modeChanged)) {
@@ -278,7 +278,7 @@ export class SliderGLRenderer {
 
         const motionless =
             state.motionless ||
-            mode === SliderMode.Stationary ||
+            mode === SliderConfigurationMode.Stationary ||
             isSpherical(state.currentNode.cameraType);
 
         if (this.disabled || previousChanged) {
@@ -295,7 +295,7 @@ export class SliderGLRenderer {
             if (previousChanged || modeChanged) {
                 const previousNode: Node = state.previousNode;
 
-                this._previousKey = previousNode.key;
+                this._previousKey = previousNode.id;
 
                 const elements: number[] = state.currentTransform.rt.elements;
                 let translation: number[] = [elements[12], elements[13], elements[14]];
@@ -329,18 +329,16 @@ export class SliderGLRenderer {
                 }
 
                 const transform: Transform = new Transform(
-                    state.currentNode.orientation,
+                    state.currentNode.exifOrientation,
                     width,
                     height,
-                    state.currentNode.focal,
                     state.currentNode.scale,
                     rotation,
                     translation,
                     previousNode.image,
                     textureScale,
-                    null,
-                    null,
-                    <CameraProjectionType>state.currentNode.cameraType);
+                    state.currentNode.cameraParameters,
+                    <CameraType>state.currentNode.cameraType);
 
                 let mesh: THREE.Mesh = undefined;
 
@@ -367,7 +365,7 @@ export class SliderGLRenderer {
                 }
 
                 const previousPlanes: { [key: string]: THREE.Mesh } = {};
-                previousPlanes[previousNode.key] = mesh;
+                previousPlanes[previousNode.id] = mesh;
                 this._scene.setImagePlanesOld(previousPlanes);
             }
         }
@@ -379,20 +377,20 @@ export class SliderGLRenderer {
                 delete this._currentProviderDisposers[this._currentKey];
             }
 
-            this._currentKey = state.currentNode.key;
+            this._currentKey = state.currentNode.id;
 
             const planes: { [key: string]: THREE.Mesh } = {};
 
             if (isSpherical(state.currentNode.cameraType)) {
-                planes[state.currentNode.key] =
+                planes[state.currentNode.id] =
                     this._factory.createCurtainMesh(
                         state.currentNode,
                         state.currentTransform);
             } else {
                 if (motionless) {
-                    planes[state.currentNode.key] = this._factory.createDistortedCurtainMesh(state.currentNode, state.currentTransform);
+                    planes[state.currentNode.id] = this._factory.createDistortedCurtainMesh(state.currentNode, state.currentTransform);
                 } else {
-                    planes[state.currentNode.key] = this._factory.createCurtainMesh(state.currentNode, state.currentTransform);
+                    planes[state.currentNode.id] = this._factory.createCurtainMesh(state.currentNode, state.currentTransform);
                 }
             }
 
@@ -413,7 +411,7 @@ export class SliderGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
 
             let oldTexture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
             material.uniforms.projectorTex.value = null;
@@ -434,7 +432,7 @@ export class SliderGLRenderer {
             }
 
             const plane: THREE.Mesh = planes[key];
-            let material: IShaderMaterial = <IShaderMaterial>plane.material;
+            let material: ProjectorShaderMaterial = <ProjectorShaderMaterial>plane.material;
 
             let oldTexture: THREE.Texture = <THREE.Texture>material.uniforms.projectorTex.value;
             material.uniforms.projectorTex.value = null;
diff --git a/src/component/slider/interfaces/interfaces.ts b/src/component/slider/interfaces/SliderInterfaces.ts
similarity index 58%
rename from src/component/slider/interfaces/interfaces.ts
rename to src/component/slider/interfaces/SliderInterfaces.ts
index 087256ea3..b72c12d17 100644
--- a/src/component/slider/interfaces/interfaces.ts
+++ b/src/component/slider/interfaces/SliderInterfaces.ts
@@ -1,20 +1,20 @@
 import * as THREE from "three";
 
 import { Node } from "../../../graph/Node";
-import { ICurrentState } from "../../../state/interfaces/ICurrentState";
+import { IAnimationState } from "../../../state/interfaces/IAnimationState";
 import { SliderGLRenderer } from "../SliderGLRenderer";
 
-export interface ISliderNodes {
+export interface SliderNodes {
     background: Node;
     foreground: Node;
 }
 
-export interface ISliderCombination {
-    nodes: ISliderNodes;
-    state: ICurrentState;
+export interface SliderCombination {
+    nodes: SliderNodes;
+    state: IAnimationState;
 }
 
-export interface IGLRendererOperation {
+export interface GLRendererOperation {
     (glRenderer: SliderGLRenderer): SliderGLRenderer;
 }
 
diff --git a/src/component/spatialdata/SpatialDataCache.ts b/src/component/spatialdata/SpatialDataCache.ts
index 51b281b8a..d08a9d13f 100644
--- a/src/component/spatialdata/SpatialDataCache.ts
+++ b/src/component/spatialdata/SpatialDataCache.ts
@@ -17,7 +17,7 @@ import {
 } from "rxjs/operators";
 
 import { DataProviderBase } from "../../api/DataProviderBase";
-import { IClusterReconstruction } from "../../api/interfaces/IClusterReconstruction";
+import { ClusterReconstructionContract } from "../../api/contracts/ClusterReconstructionContract";
 import { AbortMapillaryError } from "../../error/AbortMapillaryError";
 import { GraphService } from "../../graph/GraphService";
 import { Node } from "../../graph/Node";
@@ -34,11 +34,11 @@ export class SpatialDataCache {
     private _cacheRequests: { [hash: string]: Function[] };
     private _tiles: { [hash: string]: Node[] };
 
-    private _clusterReconstructions: { [key: string]: IClusterReconstruction };
+    private _clusterReconstructions: { [key: string]: ClusterReconstructionContract };
     private _clusterReconstructionTiles: { [key: string]: string[] };
     private _tileClusters: { [hash: string]: ClusterData[] };
 
-    private _cachingClusterReconstructions$: { [hash: string]: Observable<IClusterReconstruction> };
+    private _cachingClusterReconstructions$: { [hash: string]: Observable<ClusterReconstructionContract> };
     private _cachingTiles$: { [hash: string]: Observable<Node[]> };
 
     constructor(graphService: GraphService, provider: DataProviderBase) {
@@ -56,7 +56,7 @@ export class SpatialDataCache {
         this._cachingClusterReconstructions$ = {};
     }
 
-    public cacheClusterReconstructions$(hash: string): Observable<IClusterReconstruction> {
+    public cacheClusterReconstructions$(hash: string): Observable<ClusterReconstructionContract> {
         if (!this.hasTile(hash)) {
             throw new Error("Cannot cache reconstructions of a non-existing tile.");
         }
@@ -72,11 +72,11 @@ export class SpatialDataCache {
         const duplicatedClusters: ClusterData[] = this.getTile(hash)
             .filter(
                 (n: Node): boolean => {
-                    return !!n.clusterKey && !!n.clusterUrl;
+                    return !!n.clusterId && !!n.clusterUrl;
                 })
             .map(
                 (n: Node): ClusterData => {
-                    return { key: n.clusterKey, url: n.clusterUrl };
+                    return { key: n.clusterId, url: n.clusterUrl };
                 });
 
         const clusters: ClusterData[] = Array
@@ -182,15 +182,15 @@ export class SpatialDataCache {
         return !(hash in this._cachingTiles$) && hash in this._tiles;
     }
 
-    public getClusterReconstructions(hash: string): IClusterReconstruction[] {
+    public getClusterReconstructions(hash: string): ClusterReconstructionContract[] {
         return hash in this._tileClusters ?
             this._tileClusters[hash]
                 .map(
-                    (cd: ClusterData): IClusterReconstruction => {
+                    (cd: ClusterData): ClusterReconstructionContract => {
                         return this._clusterReconstructions[cd.key];
                     })
                 .filter(
-                    (reconstruction: IClusterReconstruction): boolean => {
+                    (reconstruction: ClusterReconstructionContract): boolean => {
                         return !!reconstruction;
                     }) :
             [];
@@ -276,7 +276,7 @@ export class SpatialDataCache {
     }
 
     public updateClusterReconstructions$(hash: string):
-        Observable<IClusterReconstruction> {
+        Observable<ClusterReconstructionContract> {
         if (!this.hasTile(hash)) {
             throw new Error("Cannot update reconstructions of a non-existing tile.");
         }
@@ -288,11 +288,11 @@ export class SpatialDataCache {
         const duplicatedClusters: ClusterData[] = this.getTile(hash)
             .filter(
                 (n: Node): boolean => {
-                    return !!n.clusterKey && !!n.clusterUrl;
+                    return !!n.clusterId && !!n.clusterUrl;
                 })
             .map(
                 (n: Node): ClusterData => {
-                    return { key: n.clusterKey, url: n.clusterUrl };
+                    return { key: n.clusterId, url: n.clusterUrl };
                 });
 
         const clusters: ClusterData[] = Array
@@ -315,10 +315,10 @@ export class SpatialDataCache {
     private _cacheClusterReconstructions$(
         clusters: ClusterData[],
         cellId: string,
-        cancellation: Promise<void>): Observable<IClusterReconstruction> {
+        cancellation: Promise<void>): Observable<ClusterReconstructionContract> {
         return observableFrom(clusters).pipe(
             mergeMap(
-                (cd: ClusterData): Observable<IClusterReconstruction> => {
+                (cd: ClusterData): Observable<ClusterReconstructionContract> => {
                     if (this._hasClusterReconstruction(cd.key)) {
                         return observableOf(
                             this._getClusterReconstruction(cd.key));
@@ -330,7 +330,7 @@ export class SpatialDataCache {
                         cancellation)
                         .pipe(
                             catchError(
-                                (error: Error): Observable<IClusterReconstruction> => {
+                                (error: Error): Observable<ClusterReconstructionContract> => {
                                     if (error instanceof AbortMapillaryError) {
                                         return observableEmpty();
                                     }
@@ -345,32 +345,32 @@ export class SpatialDataCache {
                     return cellId in this._tileClusters;
                 }),
             tap(
-                (reconstruction: IClusterReconstruction): void => {
-                    if (!this._hasClusterReconstruction(reconstruction.key)) {
-                        this._clusterReconstructions[reconstruction.key] = reconstruction;
+                (reconstruction: ClusterReconstructionContract): void => {
+                    if (!this._hasClusterReconstruction(reconstruction.id)) {
+                        this._clusterReconstructions[reconstruction.id] = reconstruction;
                     }
 
-                    if (!(reconstruction.key in this._clusterReconstructionTiles)) {
-                        this._clusterReconstructionTiles[reconstruction.key] = [];
+                    if (!(reconstruction.id in this._clusterReconstructionTiles)) {
+                        this._clusterReconstructionTiles[reconstruction.id] = [];
                     }
 
-                    if (this._clusterReconstructionTiles[reconstruction.key].indexOf(cellId) === -1) {
-                        this._clusterReconstructionTiles[reconstruction.key].push(cellId);
+                    if (this._clusterReconstructionTiles[reconstruction.id].indexOf(cellId) === -1) {
+                        this._clusterReconstructionTiles[reconstruction.id].push(cellId);
                     }
                 }))
     }
 
-    private _getClusterReconstruction(key: string): IClusterReconstruction {
-        return this._clusterReconstructions[key];
+    private _getClusterReconstruction(id: string): ClusterReconstructionContract {
+        return this._clusterReconstructions[id];
     }
 
-    private _getClusterReconstruction$(url: string, clusterKey: string, abort: Promise<void>): Observable<IClusterReconstruction> {
+    private _getClusterReconstruction$(url: string, clusterId: string, abort: Promise<void>): Observable<ClusterReconstructionContract> {
         return Observable.create(
-            (subscriber: Subscriber<IClusterReconstruction>): void => {
+            (subscriber: Subscriber<ClusterReconstructionContract>): void => {
                 this._data.getClusterReconstruction(url, abort)
                     .then(
-                        (reconstruction: IClusterReconstruction): void => {
-                            reconstruction.key = clusterKey;
+                        (reconstruction: ClusterReconstructionContract): void => {
+                            reconstruction.id = clusterId;
                             subscriber.next(reconstruction);
                             subscriber.complete();
                         },
@@ -380,7 +380,7 @@ export class SpatialDataCache {
             });
     }
 
-    private _hasClusterReconstruction(key: string): boolean {
-        return key in this._clusterReconstructions;
+    private _hasClusterReconstruction(id: string): boolean {
+        return id in this._clusterReconstructions;
     }
 }
diff --git a/src/component/spatialdata/SpatialDataComponent.ts b/src/component/spatialdata/SpatialDataComponent.ts
index d334655e7..248e83749 100644
--- a/src/component/spatialdata/SpatialDataComponent.ts
+++ b/src/component/spatialdata/SpatialDataComponent.ts
@@ -30,31 +30,31 @@ import { Node } from "../../graph/Node";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 import {
-    ICellNeighbors,
-    ICellCorners,
-} from "../../api/interfaces/ICellCorners";
-import { IClusterReconstruction } from "../../api/interfaces/IClusterReconstruction";
+    CellNeighbors,
+    CellCorners,
+} from "../../api/interfaces/CellCorners";
+import { ClusterReconstructionContract } from "../../api/contracts/ClusterReconstructionContract";
 import { GeoCoords } from "../../geo/GeoCoords";
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
 import { Spatial } from "../../geo/Spatial";
 import { Transform } from "../../geo/Transform";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { FilterFunction } from "../../graph/FilterCreator";
 import * as Geo from "../../geo/Geo";
-import { GLRenderStage } from "../../render/GLRenderStage";
-import { IGLRenderHash } from "../../render/interfaces/IGLRenderHash";
+import { RenderPass } from "../../render/RenderPass";
+import { GLRenderHash } from "../../render/interfaces/IGLRenderHash";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { State } from "../../state/State";
 import { SubscriptionHolder } from "../../utils/SubscriptionHolder";
 import { PlayService } from "../../viewer/PlayService";
 import { Component } from "../Component";
-import { ISpatialDataConfiguration } from "../interfaces/ISpatialDataConfiguration";
+import { SpatialDataConfiguration } from "../interfaces/SpatialDataConfiguration";
 import { CameraVisualizationMode } from "./CameraVisualizationMode";
 import { OriginalPositionMode } from "./OriginalPositionMode";
 import { SpatialDataScene } from "./SpatialDataScene";
 import { SpatialDataCache } from "./SpatialDataCache";
-import { CameraProjectionType } from "../../api/interfaces/CameraProjectionType";
+import { CameraType } from "../../geo/interfaces/CameraType";
 
 type IntersectEvent = MouseEvent | FocusEvent;
 
@@ -63,7 +63,7 @@ type Cell = {
     nodes: Node[];
 }
 
-export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
+export class SpatialDataComponent extends Component<SpatialDataConfiguration> {
     public static componentName: string = "spatialData";
 
     private _cache: SpatialDataCache;
@@ -91,7 +91,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
 
         subs.push(this._configuration$.pipe(
             map(
-                (configuration: ISpatialDataConfiguration): boolean => {
+                (configuration: SpatialDataConfiguration): boolean => {
                     return configuration.earthControls;
                 }),
             distinctUntilChanged(),
@@ -207,7 +207,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                             observableOf([
                                 hash,
                                 this._navigator.api.data.geometry
-                                    .getNeighbors(hash)[<keyof ICellNeighbors>direction]]) :
+                                    .getNeighbors(hash)[<keyof CellNeighbors>direction]]) :
                             observableOf(this._computeTiles(hash, direction));
                     }),
                 publish<string[]>(),
@@ -234,7 +234,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         subs.push(tile$.pipe(
             withLatestFrom(this._navigator.stateService.reference$))
             .subscribe(
-                ([cell, reference]: [Cell, ILatLonAlt]): void => {
+                ([cell, reference]: [Cell, LatLonAlt]): void => {
                     if (this._scene.hasTile(cell.id)) {
                         return;
                     }
@@ -247,22 +247,22 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         subs.push(tile$.pipe(
             withLatestFrom(this._navigator.stateService.reference$))
             .subscribe(
-                ([cell, reference]: [Cell, ILatLonAlt]): void => {
+                ([cell, reference]: [Cell, LatLonAlt]): void => {
                     this._addSceneNodes(cell, reference);
                 }));
 
         subs.push(tile$.pipe(
             concatMap(
-                (cell: Cell): Observable<[string, IClusterReconstruction]> => {
+                (cell: Cell): Observable<[string, ClusterReconstructionContract]> => {
                     const cellId = cell.id;
-                    let reconstructions$: Observable<IClusterReconstruction>;
+                    let reconstructions$: Observable<ClusterReconstructionContract>;
                     if (this._cache.hasClusterReconstructions(cellId)) {
                         reconstructions$ = observableFrom(this._cache.getClusterReconstructions(cellId));
                     } else if (this._cache.isCachingClusterReconstructions(cellId)) {
                         reconstructions$ = this._cache.cacheClusterReconstructions$(cellId).pipe(
                             last(null, {}),
                             switchMap(
-                                (): Observable<IClusterReconstruction> => {
+                                (): Observable<ClusterReconstructionContract> => {
                                     return observableFrom(this._cache.getClusterReconstructions(cellId));
                                 }));
                     } else if (this._cache.hasTile(cellId)) {
@@ -275,8 +275,8 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                 }),
             withLatestFrom(this._navigator.stateService.reference$))
             .subscribe(
-                ([[hash, reconstruction], reference]: [[string, IClusterReconstruction], ILatLonAlt]): void => {
-                    if (this._scene.hasClusterReconstruction(reconstruction.key, hash)) {
+                ([[hash, reconstruction], reference]: [[string, ClusterReconstructionContract], LatLonAlt]): void => {
+                    if (this._scene.hasClusterReconstruction(reconstruction.id, hash)) {
                         return;
                     }
 
@@ -288,7 +288,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
 
         subs.push(this._configuration$.pipe(
             map(
-                (c: ISpatialDataConfiguration): ISpatialDataConfiguration => {
+                (c: SpatialDataConfiguration): SpatialDataConfiguration => {
                     c.cameraSize = this._spatial.clamp(c.cameraSize, 0.01, 1);
                     c.pointSize = this._spatial.clamp(c.pointSize, 0.01, 1);
                     return {
@@ -302,7 +302,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     }
                 }),
             distinctUntilChanged(
-                (c1: ISpatialDataConfiguration, c2: ISpatialDataConfiguration): boolean => {
+                (c1: SpatialDataConfiguration, c2: SpatialDataConfiguration): boolean => {
                     return c1.cameraSize === c2.cameraSize &&
                         c1.cameraVisualizationMode === c2.cameraVisualizationMode &&
                         c1.camerasVisible === c2.camerasVisible &&
@@ -312,7 +312,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                         c1.tilesVisible === c2.tilesVisible;
                 }))
             .subscribe(
-                (c: ISpatialDataConfiguration): void => {
+                (c: SpatialDataConfiguration): void => {
                     this._scene.setCameraSize(c.cameraSize);
                     this._scene.setCameraVisibility(c.camerasVisible);
                     this._scene.setPointSize(c.pointSize);
@@ -349,11 +349,11 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                         canvasY,
                         element);
 
-                    const key = this._scene.intersection
+                    const id = this._scene.intersection
                         .intersectObjects(viewport, render.perspective);
 
-                    return !!key ?
-                        this._navigator.moveToKey$(key).pipe(
+                    return !!id ?
+                        this._navigator.moveTo$(id).pipe(
                             catchError(
                                 (): Observable<Node> => {
                                     return observableEmpty();
@@ -364,7 +364,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
 
         const intersectChange$ = this._configuration$.pipe(
             map(
-                (c: ISpatialDataConfiguration): ISpatialDataConfiguration => {
+                (c: SpatialDataConfiguration): SpatialDataConfiguration => {
                     c.cameraSize = this._spatial.clamp(c.cameraSize, 0.01, 1);
                     return {
                         cameraSize: c.cameraSize,
@@ -373,7 +373,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     }
                 }),
             distinctUntilChanged(
-                (c1: ISpatialDataConfiguration, c2: ISpatialDataConfiguration): boolean => {
+                (c1: SpatialDataConfiguration, c2: SpatialDataConfiguration): boolean => {
                     return c1.cameraSize === c2.cameraSize &&
                         c1.camerasVisible === c2.camerasVisible &&
                         c1.earthControls === c2.earthControls;
@@ -398,7 +398,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                 switchMap(
                     ([playing, mouseHover]:
                         [boolean, IntersectEvent, boolean, FilterFunction])
-                        : Observable<[IntersectEvent, RenderCamera, ISpatialDataConfiguration]> => {
+                        : Observable<[IntersectEvent, RenderCamera, SpatialDataConfiguration]> => {
                         return !playing && mouseHover.type === "mouseenter" ?
                             observableCombineLatest(
                                 observableConcat(
@@ -413,7 +413,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     }))
             .subscribe(
                 ([event, render]
-                    : [IntersectEvent, RenderCamera, ISpatialDataConfiguration]): void => {
+                    : [IntersectEvent, RenderCamera, SpatialDataConfiguration]): void => {
                     if (event.type !== "mousemove") {
                         this._scene.setHoveredNode(null);
                         return;
@@ -432,24 +432,24 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     this._scene.setHoveredNode(key);
                 }));
 
-        subs.push(this._navigator.stateService.currentKey$
+        subs.push(this._navigator.stateService.currentId$
             .subscribe(
-                (key: string): void => {
-                    this._scene.setSelectedNode(key);
+                (id: string): void => {
+                    this._scene.setSelectedNode(id);
                 }));
 
         subs.push(this._navigator.stateService.currentState$
             .pipe(
-                map((frame: IFrame): IGLRenderHash => {
+                map((frame: AnimationFrame): GLRenderHash => {
                     const scene = this._scene;
 
                     return {
                         name: this._name,
-                        render: {
+                        renderer: {
                             frameId: frame.id,
                             needsRender: scene.needsRender,
                             render: scene.render.bind(scene),
-                            stage: GLRenderStage.Foreground,
+                            pass: RenderPass.Opaque,
                         },
                     };
                 }))
@@ -462,7 +462,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                         return this._cache.hasTile(cellId);
                     }),
                 mergeMap(
-                    (cellId: string): Observable<[Cell, ILatLonAlt]> => {
+                    (cellId: string): Observable<[Cell, LatLonAlt]> => {
                         return this._cache.updateCell$(cellId).pipe(
                             map((nodes: Node[]) => ({ id: cellId, nodes })),
                             withLatestFrom(
@@ -470,22 +470,22 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                             )
                         );
                     }),
-                publish<[Cell, ILatLonAlt]>(),
+                publish<[Cell, LatLonAlt]>(),
                 refCount())
 
         subs.push(updatedCell$
             .subscribe(
-                ([cell, reference]: [Cell, ILatLonAlt]): void => {
+                ([cell, reference]: [Cell, LatLonAlt]): void => {
                     this._addSceneNodes(cell, reference);
                 }));
 
         subs.push(updatedCell$
             .pipe(
                 concatMap(
-                    ([cell]: [Cell, ILatLonAlt]): Observable<[string, IClusterReconstruction]> => {
+                    ([cell]: [Cell, LatLonAlt]): Observable<[string, ClusterReconstructionContract]> => {
                         const cellId = cell.id;
                         const cache = this._cache;
-                        let reconstructions$: Observable<IClusterReconstruction>;
+                        let reconstructions$: Observable<ClusterReconstructionContract>;
                         if (cache.hasClusterReconstructions(cellId)) {
                             reconstructions$ =
                                 cache.updateClusterReconstructions$(cellId);
@@ -493,7 +493,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                             reconstructions$ = this._cache.cacheClusterReconstructions$(cellId).pipe(
                                 last(null, {}),
                                 switchMap(
-                                    (): Observable<IClusterReconstruction> => {
+                                    (): Observable<ClusterReconstructionContract> => {
                                         return observableFrom(
                                             cache.updateClusterReconstructions$(cellId));
                                     }));
@@ -507,8 +507,8 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     }),
                 withLatestFrom(this._navigator.stateService.reference$))
             .subscribe(
-                ([[hash, reconstruction], reference]: [[string, IClusterReconstruction], ILatLonAlt]): void => {
-                    if (this._scene.hasClusterReconstruction(reconstruction.key, hash)) {
+                ([[hash, reconstruction], reference]: [[string, ClusterReconstructionContract], LatLonAlt]): void => {
+                    if (this._scene.hasClusterReconstruction(reconstruction.id, hash)) {
                         return;
                     }
 
@@ -533,7 +533,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                 });
     }
 
-    protected _getDefaultConfiguration(): ISpatialDataConfiguration {
+    protected _getDefaultConfiguration(): SpatialDataConfiguration {
         return {
             cameraSize: 0.1,
             cameraVisualizationMode: CameraVisualizationMode.Default,
@@ -545,11 +545,11 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         };
     }
 
-    private _addSceneNodes(cell: Cell, reference: ILatLonAlt): void {
+    private _addSceneNodes(cell: Cell, reference: LatLonAlt): void {
         const cellId = cell.id;
         const nodes = cell.nodes;
         for (const node of nodes) {
-            if (this._scene.hasNode(node.key, cellId)) { continue; }
+            if (this._scene.hasNode(node.id, cellId)) { continue; }
 
             this._scene.addNode(
                 node,
@@ -581,7 +581,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         const neighbours: string[] = [];
 
         for (const hash of currentHashes) {
-            const hashNeighbours: ICellNeighbors =
+            const hashNeighbours: CellNeighbors =
                 this._navigator.api.data.geometry.getNeighbors(hash);
 
             for (const direction in hashNeighbours) {
@@ -589,7 +589,7 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
                     continue;
                 }
 
-                neighbours.push(hashNeighbours[<keyof ICellNeighbors>direction]);
+                neighbours.push(hashNeighbours[<keyof CellNeighbors>direction]);
             }
         }
 
@@ -604,18 +604,18 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         this._adjacentComponentRecursive(hashSet, newHashes, currentDepth + 1, maxDepth);
     }
 
-    private _computeOriginalPosition(node: Node, reference: ILatLonAlt): number[] {
+    private _computeOriginalPosition(node: Node, reference: LatLonAlt): number[] {
         return this._geoCoords.geodeticToEnu(
             node.originalLatLon.lat,
             node.originalLatLon.lon,
-            node.originalAlt != null ? node.originalAlt : node.alt,
+            node.originalAltitude != null ? node.originalAltitude : node.computedAltitude,
             reference.lat,
             reference.lon,
             reference.alt);
     }
 
-    private _computeTileBBox(hash: string, reference: ILatLonAlt): number[][] {
-        const corners: ICellCorners =
+    private _computeTileBBox(hash: string, reference: LatLonAlt): number[][] {
+        const corners: CellCorners =
             this._navigator.api.data.geometry.getCorners(hash);
 
         const sw: number[] = this._geoCoords.geodeticToEnu(
@@ -637,25 +637,23 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         return [sw, ne];
     }
 
-    private _createTransform(node: Node, reference: ILatLonAlt): Transform {
+    private _createTransform(node: Node, reference: LatLonAlt): Transform {
         const translation: number[] = Geo.computeTranslation(
-            { alt: node.alt, lat: node.latLon.lat, lon: node.latLon.lon },
+            { alt: node.computedAltitude, lat: node.latLon.lat, lon: node.latLon.lon },
             node.rotation,
             reference);
 
         const transform: Transform = new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             translation,
             undefined,
             undefined,
-            node.ck1,
-            node.ck2,
-            <CameraProjectionType>node.cameraType);
+            node.cameraParameters,
+            <CameraType>node.cameraType);
 
         return transform;
     }
@@ -683,15 +681,15 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
             return;
         }
 
-        const neighbours: ICellNeighbors =
+        const neighbours: CellNeighbors =
             this._navigator.api.data.geometry.getNeighbors(currentHash);
         const directionIndex: number = directions.indexOf(direction);
         const length: number = directions.length;
 
         const directionNeighbours: string[] = [
-            neighbours[<keyof ICellNeighbors>directions[this._modulo((directionIndex - 1), length)]],
-            neighbours[<keyof ICellNeighbors>direction],
-            neighbours[<keyof ICellNeighbors>directions[this._modulo((directionIndex + 1), length)]],
+            neighbours[<keyof CellNeighbors>directions[this._modulo((directionIndex - 1), length)]],
+            neighbours[<keyof CellNeighbors>direction],
+            neighbours[<keyof CellNeighbors>directions[this._modulo((directionIndex + 1), length)]],
         ];
 
         for (let directionNeighbour of directionNeighbours) {
@@ -699,11 +697,11 @@ export class SpatialDataComponent extends Component<ISpatialDataConfiguration> {
         }
     }
 
-    private _computeTranslation(reconstruction: IClusterReconstruction, reference: ILatLonAlt): number[] {
+    private _computeTranslation(reconstruction: ClusterReconstructionContract, reference: LatLonAlt): number[] {
         return this._geoCoords.geodeticToEnu(
-            reconstruction.reference_lla.latitude,
-            reconstruction.reference_lla.longitude,
-            reconstruction.reference_lla.altitude,
+            reconstruction.reference.lat,
+            reconstruction.reference.lon,
+            reconstruction.reference.alt,
             reference.lat,
             reference.lon,
             reference.alt);
diff --git a/src/component/spatialdata/SpatialDataScene.ts b/src/component/spatialdata/SpatialDataScene.ts
index 584dc59a2..057d3742e 100644
--- a/src/component/spatialdata/SpatialDataScene.ts
+++ b/src/component/spatialdata/SpatialDataScene.ts
@@ -1,20 +1,17 @@
 import * as THREE from "three";
-
-import {
-    IClusterReconstruction,
-    IReconstructionPoint,
-} from "../../api/interfaces/IClusterReconstruction";
+import { PointContract } from "../../api/contracts/PointContract";
+import { ClusterReconstructionContract } from "../../api/contracts/ClusterReconstructionContract";
 import { MapillaryError } from "../../error/MapillaryError";
 import { isSpherical } from "../../geo/Geo";
 import { Transform } from "../../geo/Transform";
 import { FilterFunction } from "../../graph/FilterCreator";
 import { Node } from "../../graph/Node";
-import { ISpatialDataConfiguration } from "../interfaces/ISpatialDataConfiguration";
+import { SpatialDataConfiguration } from "../interfaces/SpatialDataConfiguration";
 import { CameraVisualizationMode } from "./CameraVisualizationMode";
 import { OriginalPositionMode } from "./OriginalPositionMode";
 
 type ClusterReconstructions = {
-    [key: string]: {
+    [id: string]: {
         tiles: string[];
         points: THREE.Object3D;
     };
@@ -417,7 +414,7 @@ class SphericalCameraFrame extends CameraFrameBase {
 class ClusterPoints extends THREE.Points {
     constructor(
         private readonly _originalSize: number,
-        reconstruction: IClusterReconstruction,
+        reconstruction: ClusterReconstructionContract,
         translation: number[],
         scale: number) {
         super();
@@ -452,12 +449,12 @@ class ClusterPoints extends THREE.Points {
     }
 
     private _getArrays(
-        reconstruction: IClusterReconstruction,
+        reconstruction: ClusterReconstructionContract,
         translation: number[]): [Float32Array, Float32Array] {
         const points = Object
             .keys(reconstruction.points)
             .map(
-                (key: string): IReconstructionPoint => {
+                (key: string): PointContract => {
                     return reconstruction.points[key];
                 });
 
@@ -747,7 +744,7 @@ class NodeCell {
 
     public addNode(props: NodeProps): void {
         const node = props.node;
-        const id = node.key;
+        const id = node.id;
         if (this.hasNode(id)) { throw new Error(`Node exists ${id}`); }
         const ccId = props.idMap.ccId;
         if (!(this._connectedComponents.has(ccId))) {
@@ -787,7 +784,7 @@ class NodeCell {
         for (const props of Object.values(this._props)) {
             const node = props.node;
             const visible = filter(node);
-            const key = node.key;
+            const key = node.id;
             positionLines[key].visible = visible;
             const camera = cameraFrames[key];
             this._setCameraVisibility(camera, visible, interactiveLayer);
@@ -974,7 +971,7 @@ export class SpatialDataScene {
     private _colors: { hover: string, select: string };
 
     constructor(
-        configuration: ISpatialDataConfiguration,
+        configuration: SpatialDataConfiguration,
         scene?: THREE.Scene) {
         this._rayNearScale = 1.1;
         this._originalPointSize = 2;
@@ -1015,15 +1012,15 @@ export class SpatialDataScene {
     public get intersection(): Intersection { return this._intersection; }
 
     public addClusterReconstruction(
-        reconstruction: IClusterReconstruction,
+        reconstruction: ClusterReconstructionContract,
         translation: number[],
         cellId: string): void {
 
-        if (this.hasClusterReconstruction(reconstruction.key, cellId)) {
+        if (this.hasClusterReconstruction(reconstruction.id, cellId)) {
             return;
         }
 
-        const clusterId = reconstruction.key;
+        const clusterId = reconstruction.id;
 
         if (!(clusterId in this._clusters)) {
             this._clusters[clusterId] = {
@@ -1063,14 +1060,14 @@ export class SpatialDataScene {
         originalPosition: number[],
         cellId: string): void {
 
-        const key = node.key;
+        const key = node.id;
         const idMap = {
-            clusterId: !!node.clusterKey ?
-                node.clusterKey : "default_cluster_key",
-            sequenceId: !!node.sequenceKey ?
-                node.sequenceKey : "default_sequence_key",
-            ccId: !!node.mergeCC ?
-                node.mergeCC.toString() : "default_mergecc_key",
+            clusterId: !!node.clusterId ?
+                node.clusterId : "default_cluster_id",
+            sequenceId: !!node.sequenceId ?
+                node.sequenceId : "default_sequence_id",
+            ccId: !!node.mergeConnectedComponent ?
+                node.mergeConnectedComponent.toString() : "default_mergecc_id",
         }
 
         if (!(cellId in this._nodes)) {
@@ -1091,7 +1088,7 @@ export class SpatialDataScene {
         const color = this._assets.getColor(colorId);
         const visible = this._filter(node);
         cell.visualize({
-            id: node.key,
+            id: node.id,
             color,
             positionMode: this._positionMode,
             scale: this._cameraSize,
diff --git a/src/component/tag/TagComponent.ts b/src/component/tag/TagComponent.ts
index da88ad386..e67f7860a 100644
--- a/src/component/tag/TagComponent.ts
+++ b/src/component/tag/TagComponent.ts
@@ -41,17 +41,17 @@ import { RenderTag } from "./tag/RenderTag";
 import { CreateTag } from "./tag/CreateTag";
 
 import { Component } from "../Component";
-import { ITagConfiguration } from "../interfaces/ITagConfiguration";
+import { TagConfiguration } from "../interfaces/TagConfiguration";
 
 import { Transform } from "../../geo/Transform";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { Navigator } from "../../viewer/Navigator";
-import { GLRenderStage } from "../../render/GLRenderStage";
+import { RenderPass } from "../../render/RenderPass";
 import { RenderCamera } from "../../render/RenderCamera";
-import { IGLRenderHash } from "../../render/interfaces/IGLRenderHash";
-import { ISize } from "../../render/interfaces/ISize";
-import { IVNodeHash } from "../../render/interfaces/IVNodeHash";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { GLRenderHash } from "../../render/interfaces/IGLRenderHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { Container } from "../../viewer/Container";
 import { ISpriteAtlas } from "../../viewer/interfaces/ISpriteAtlas";
 
@@ -89,7 +89,7 @@ import { ISpriteAtlas } from "../../viewer/interfaces/ISpriteAtlas";
  * var tagComponent = viewer.getComponent("tag");
  * ```
  */
-export class TagComponent extends Component<ITagConfiguration> {
+export class TagComponent extends Component<TagConfiguration> {
     /** @inheritdoc */
     public static componentName: string = "tag";
 
@@ -181,7 +181,7 @@ export class TagComponent extends Component<ITagConfiguration> {
     private _createGeometryChanged$: Observable<CreateTag<Geometry>>;
     private _createGLObjectsChanged$: Observable<CreateTag<Geometry>>;
 
-    private _creatingConfiguration$: Observable<ITagConfiguration>;
+    private _creatingConfiguration$: Observable<TagConfiguration>;
 
     private _updateGLObjectsSubscription: Subscription;
     private _updateTagSceneSubscription: Subscription;
@@ -295,10 +295,10 @@ export class TagComponent extends Component<ITagConfiguration> {
 
         this._creatingConfiguration$ = this._configuration$.pipe(
             distinctUntilChanged(
-                (c1: ITagConfiguration, c2: ITagConfiguration): boolean => {
+                (c1: TagConfiguration, c2: TagConfiguration): boolean => {
                     return c1.mode === c2.mode;
                 },
-                (configuration: ITagConfiguration): ITagConfiguration => {
+                (configuration: TagConfiguration): TagConfiguration => {
                     return {
                         createColor: configuration.createColor,
                         mode: configuration.mode,
@@ -309,7 +309,7 @@ export class TagComponent extends Component<ITagConfiguration> {
 
         this._creatingConfiguration$
             .subscribe(
-                (configuration: ITagConfiguration): void => {
+                (configuration: TagConfiguration): void => {
                     this.fire(TagComponent.modechanged, configuration.mode);
                 });
     }
@@ -351,8 +351,8 @@ export class TagComponent extends Component<ITagConfiguration> {
      * in the points geometry.
      *
      * @description The result may be different depending on if the
-     * current node is an equirectangular spherical or not. If the
-     * current node is an equirectangular spherical the rectangle may
+     * current node is an spherical or not. If the
+     * current node is an spherical the rectangle may
      * wrap the horizontal border of the image.
      *
      * @returns {Promise<Array<number>>} Promise to the rectangle
@@ -613,7 +613,7 @@ export class TagComponent extends Component<ITagConfiguration> {
 
         this._handlerEnablerSubscription = this._creatingConfiguration$
             .subscribe(
-                (configuration: ITagConfiguration): void => {
+                (configuration: TagConfiguration): void => {
                     this._disableCreateHandlers();
 
                     const mode: keyof typeof TagMode = <keyof typeof TagMode>TagMode[configuration.mode];
@@ -688,8 +688,8 @@ export class TagComponent extends Component<ITagConfiguration> {
                 this._createGeometryChanged$).pipe(startWith(null))).pipe(
                     map(
                         ([renderTags, rc, atlas, size, , ct]:
-                            [RenderTag<Tag>[], RenderCamera, ISpriteAtlas, ISize, Tag, CreateTag<Geometry>]):
-                            IVNodeHash => {
+                            [RenderTag<Tag>[], RenderCamera, ISpriteAtlas, ViewportSize, Tag, CreateTag<Geometry>]):
+                            VirtualNodeHash => {
                             return {
                                 name: this._name,
                                 vnode: this._tagDomRenderer.render(renderTags, ct, atlas, rc.perspective, size),
@@ -699,16 +699,16 @@ export class TagComponent extends Component<ITagConfiguration> {
 
         this._glSubscription = this._navigator.stateService.currentState$.pipe(
             map(
-                (frame: IFrame): IGLRenderHash => {
+                (frame: AnimationFrame): GLRenderHash => {
                     const tagScene: TagScene = this._tagScene;
 
                     return {
                         name: this._name,
-                        render: {
+                        renderer: {
                             frameId: frame.id,
                             needsRender: tagScene.needsRender,
                             render: tagScene.render.bind(tagScene),
-                            stage: GLRenderStage.Foreground,
+                            pass: RenderPass.Opaque,
                         },
                     };
                 }))
@@ -753,7 +753,7 @@ export class TagComponent extends Component<ITagConfiguration> {
         this._container.container.classList.remove("component-tag-create");
     }
 
-    protected _getDefaultConfiguration(): ITagConfiguration {
+    protected _getDefaultConfiguration(): TagConfiguration {
         return {
             createColor: 0xFFFFFF,
             indicatePointsCompleter: true,
diff --git a/src/component/tag/TagCreator.ts b/src/component/tag/TagCreator.ts
index 99b421df3..d3e46bc86 100644
--- a/src/component/tag/TagCreator.ts
+++ b/src/component/tag/TagCreator.ts
@@ -14,7 +14,7 @@ import {
 import { CreateTag } from "./tag/CreateTag";
 import { Geometry } from "./geometry/Geometry";
 import { Component } from "../Component";
-import { ITagConfiguration } from "../interfaces/ITagConfiguration";
+import { TagConfiguration } from "../interfaces/TagConfiguration";
 
 import { Navigator } from "../../viewer/Navigator";
 import { Transform } from "../../geo/Transform";
@@ -24,15 +24,15 @@ import { RectGeometry } from "./geometry/RectGeometry";
 import { OutlineCreateTag } from "./tag/OutlineCreateTag";
 import { PolygonGeometry } from "./geometry/PolygonGeometry";
 
-interface ICreateTagOperation {
+interface CreateTagOperation {
     (tag: CreateTag<Geometry>): CreateTag<Geometry>;
 }
 
 export class TagCreator {
-    private _component: Component<ITagConfiguration>;
+    private _component: Component<TagConfiguration>;
     private _navigator: Navigator;
 
-    private _tagOperation$: Subject<ICreateTagOperation>;
+    private _tagOperation$: Subject<CreateTagOperation>;
     private _tag$: Observable<CreateTag<Geometry>>;
     private _replayedTag$: Observable<CreateTag<Geometry>>;
 
@@ -41,11 +41,11 @@ export class TagCreator {
     private _createRect$: Subject<number[]>;
     private _delete$: Subject<void>;
 
-    constructor(component: Component<ITagConfiguration>, navigator: Navigator) {
+    constructor(component: Component<TagConfiguration>, navigator: Navigator) {
         this._component = component;
         this._navigator = navigator;
 
-        this._tagOperation$ = new Subject<ICreateTagOperation>();
+        this._tagOperation$ = new Subject<CreateTagOperation>();
         this._createPoints$ = new Subject<number[]>();
         this._createPolygon$ = new Subject<number[]>();
         this._createRect$ = new Subject<number[]>();
@@ -53,7 +53,7 @@ export class TagCreator {
 
         this._tag$ = this._tagOperation$.pipe(
             scan(
-                (tag: CreateTag<Geometry>, operation: ICreateTagOperation): CreateTag<Geometry> => {
+                (tag: CreateTag<Geometry>, operation: CreateTagOperation): CreateTag<Geometry> => {
                     return operation(tag);
                 },
                 null),
@@ -70,7 +70,7 @@ export class TagCreator {
                 this._component.configuration$,
                 this._navigator.stateService.currentTransform$),
             map(
-                ([coord, conf, transform]: [number[], ITagConfiguration, Transform]): ICreateTagOperation => {
+                ([coord, conf, transform]: [number[], TagConfiguration, Transform]): CreateTagOperation => {
                     return (): CreateTag<Geometry> => {
                         const geometry: PointsGeometry = new PointsGeometry([
                             [coord[0], coord[1]],
@@ -93,7 +93,7 @@ export class TagCreator {
                 this._component.configuration$,
                 this._navigator.stateService.currentTransform$),
             map(
-                ([coord, conf, transform]: [number[], ITagConfiguration, Transform]): ICreateTagOperation => {
+                ([coord, conf, transform]: [number[], TagConfiguration, Transform]): CreateTagOperation => {
                     return (): CreateTag<Geometry> => {
                         const geometry: RectGeometry = new RectGeometry([
                             coord[0],
@@ -112,7 +112,7 @@ export class TagCreator {
                 this._component.configuration$,
                 this._navigator.stateService.currentTransform$),
             map(
-                ([coord, conf, transform]: [number[], ITagConfiguration, Transform]): ICreateTagOperation => {
+                ([coord, conf, transform]: [number[], TagConfiguration, Transform]): CreateTagOperation => {
                     return (): CreateTag<Geometry> => {
                         const geometry: PolygonGeometry = new PolygonGeometry([
                             [coord[0], coord[1]],
@@ -127,7 +127,7 @@ export class TagCreator {
 
         this._delete$.pipe(
             map(
-                (): ICreateTagOperation => {
+                (): CreateTagOperation => {
                     return (): CreateTag<Geometry> => {
                         return null;
                     };
diff --git a/src/component/tag/TagDOMRenderer.ts b/src/component/tag/TagDOMRenderer.ts
index cc48eb937..349a2d6b6 100644
--- a/src/component/tag/TagDOMRenderer.ts
+++ b/src/component/tag/TagDOMRenderer.ts
@@ -6,7 +6,7 @@ import { CreateTag } from "./tag/CreateTag";
 import { RenderTag } from "./tag/RenderTag";
 import { Tag } from "./tag/Tag";
 
-import { ISize } from "../../render/interfaces/ISize";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../viewer/interfaces/ISpriteAtlas";
 
 export class TagDOMRenderer {
@@ -15,7 +15,7 @@ export class TagDOMRenderer {
         createTag: CreateTag<Geometry>,
         atlas: ISpriteAtlas,
         camera: THREE.PerspectiveCamera,
-        size: ISize): vd.VNode {
+        size: ViewportSize): vd.VNode {
 
         let vNodes: vd.VNode[] = [];
 
diff --git a/src/component/tag/handlers/CreateHandlerBase.ts b/src/component/tag/handlers/CreateHandlerBase.ts
index 4a62f8e3e..fdc79c8d6 100644
--- a/src/component/tag/handlers/CreateHandlerBase.ts
+++ b/src/component/tag/handlers/CreateHandlerBase.ts
@@ -11,7 +11,7 @@ import {
 import { Component } from "../../Component";
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ITagConfiguration } from "../../interfaces/ITagConfiguration";
+import { TagConfiguration } from "../../interfaces/TagConfiguration";
 import { RenderCamera } from "../../../render/RenderCamera";
 import { Container } from "../../../viewer/Container";
 import { Navigator } from "../../../viewer/Navigator";
@@ -25,7 +25,7 @@ export abstract class CreateHandlerBase extends TagHandlerBase {
     protected _geometryCreated$: Subject<Geometry>;
 
     constructor(
-        component: Component<ITagConfiguration>,
+        component: Component<TagConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords,
diff --git a/src/component/tag/handlers/EditVertexHandler.ts b/src/component/tag/handlers/EditVertexHandler.ts
index fb5ae2b7a..56c8384dc 100644
--- a/src/component/tag/handlers/EditVertexHandler.ts
+++ b/src/component/tag/handlers/EditVertexHandler.ts
@@ -26,10 +26,10 @@ import { RenderCamera } from "../../../render/RenderCamera";
 import { Container } from "../../../viewer/Container";
 import { Component } from "../../Component";
 import { Navigator } from "../../../viewer/Navigator";
-import { ITagConfiguration } from "../../interfaces/ITagConfiguration";
+import { TagConfiguration } from "../../interfaces/TagConfiguration";
 import { Geometry } from "../geometry/Geometry";
 import { VertexGeometry } from "../geometry/VertexGeometry";
-import { IInteraction, InteractionCursor } from "../interfaces/IInteraction";
+import { TagInteraction, InteractionCursor } from "../interfaces/TagInteraction";
 import { RenderTag } from "../tag/RenderTag";
 import { Tag } from "../tag/Tag";
 import { TagOperation } from "../TagOperation";
@@ -46,7 +46,7 @@ export class EditVertexHandler extends TagHandlerBase {
     private _updateGeometrySubscription: Subscription;
 
     constructor(
-        component: Component<ITagConfiguration>,
+        component: Component<TagConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords,
@@ -57,26 +57,26 @@ export class EditVertexHandler extends TagHandlerBase {
     }
 
     protected _enable(): void {
-        const interaction$: Observable<IInteraction> = this._tagSet.changed$.pipe(
+        const interaction$: Observable<TagInteraction> = this._tagSet.changed$.pipe(
             map(
                 (tagSet: TagSet): RenderTag<Tag>[] => {
                     return tagSet.getAll();
                 }),
             switchMap(
-                (tags: RenderTag<Tag>[]): Observable<IInteraction> => {
+                (tags: RenderTag<Tag>[]): Observable<TagInteraction> => {
                     return observableFrom(tags).pipe(
                         mergeMap(
-                            (tag: RenderTag<Tag>): Observable<IInteraction> => {
+                            (tag: RenderTag<Tag>): Observable<TagInteraction> => {
                                 return tag.interact$;
                             }));
                 }),
             switchMap(
-                (interaction: IInteraction): Observable<IInteraction> => {
+                (interaction: TagInteraction): Observable<TagInteraction> => {
                     return observableConcat(
                         observableOf(interaction),
                         this._container.mouseService.documentMouseUp$.pipe(
                             map(
-                                (): IInteraction => {
+                                (): TagInteraction => {
                                     return { offsetX: 0, offsetY: 0, operation: TagOperation.None, tag: null };
                                 }),
                             first()));
@@ -90,7 +90,7 @@ export class EditVertexHandler extends TagHandlerBase {
 
         this._claimMouseSubscription = interaction$.pipe(
             switchMap(
-                (interaction: IInteraction): Observable<MouseEvent> => {
+                (interaction: TagInteraction): Observable<MouseEvent> => {
                     return !!interaction.tag ? this._container.mouseService.domMouseDragStart$ : observableEmpty();
                 }))
             .subscribe(
@@ -100,7 +100,7 @@ export class EditVertexHandler extends TagHandlerBase {
 
         this._cursorSubscription = interaction$.pipe(
             map(
-                (interaction: IInteraction): string => {
+                (interaction: TagInteraction): string => {
                     return interaction.cursor;
                 }),
             distinctUntilChanged())
@@ -125,7 +125,7 @@ export class EditVertexHandler extends TagHandlerBase {
 
         this._preventDefaultSubscription = interaction$.pipe(
             switchMap(
-                (interaction: IInteraction): Observable<MouseEvent> => {
+                (interaction: TagInteraction): Observable<MouseEvent> => {
                     return !!interaction.tag ?
                         this._container.mouseService.documentMouseMove$ :
                         observableEmpty();
@@ -137,7 +137,7 @@ export class EditVertexHandler extends TagHandlerBase {
 
         this._updateGeometrySubscription = interaction$.pipe(
             switchMap(
-                (interaction: IInteraction): Observable<[MouseEvent, RenderCamera, IInteraction, Transform]> => {
+                (interaction: TagInteraction): Observable<[MouseEvent, RenderCamera, TagInteraction, Transform]> => {
                     if (interaction.operation === TagOperation.None || !interaction.tag) {
                         return observableEmpty();
                     }
@@ -160,14 +160,14 @@ export class EditVertexHandler extends TagHandlerBase {
                                 this._navigator.stateService.currentTransform$,
                                 (
                                     [event, render]: [MouseEvent, RenderCamera],
-                                    i: IInteraction,
+                                    i: TagInteraction,
                                     transform: Transform):
-                                    [MouseEvent, RenderCamera, IInteraction, Transform] => {
+                                    [MouseEvent, RenderCamera, TagInteraction, Transform] => {
                                     return [event, render, i, transform];
                                 }));
                 }))
             .subscribe(
-                ([mouseEvent, renderCamera, interaction, transform]: [MouseEvent, RenderCamera, IInteraction, Transform]): void => {
+                ([mouseEvent, renderCamera, interaction, transform]: [MouseEvent, RenderCamera, TagInteraction, Transform]): void => {
                     const basic: number[] = this._mouseEventToBasic(
                         mouseEvent,
                         this._container.container,
diff --git a/src/component/tag/handlers/TagHandlerBase.ts b/src/component/tag/handlers/TagHandlerBase.ts
index b7bce086f..d9551f3f9 100644
--- a/src/component/tag/handlers/TagHandlerBase.ts
+++ b/src/component/tag/handlers/TagHandlerBase.ts
@@ -4,16 +4,16 @@ import { RenderCamera } from "../../../render/RenderCamera";
 import { Container } from "../../../viewer/Container";
 import { Navigator } from "../../../viewer/Navigator";
 import { Component } from "../../Component";
-import { ITagConfiguration } from "../../interfaces/ITagConfiguration";
+import { TagConfiguration } from "../../interfaces/TagConfiguration";
 import { HandlerBase } from "../../utils/HandlerBase";
 
-export abstract class TagHandlerBase extends HandlerBase<ITagConfiguration> {
+export abstract class TagHandlerBase extends HandlerBase<TagConfiguration> {
     protected _name: string;
 
     protected _viewportCoords: ViewportCoords;
 
     constructor(
-        component: Component<ITagConfiguration>,
+        component: Component<TagConfiguration>,
         container: Container,
         navigator: Navigator,
         viewportCoords: ViewportCoords) {
@@ -24,7 +24,7 @@ export abstract class TagHandlerBase extends HandlerBase<ITagConfiguration> {
         this._viewportCoords = viewportCoords;
     }
 
-    protected _getConfiguration(enable: boolean): ITagConfiguration {
+    protected _getConfiguration(enable: boolean): TagConfiguration {
         return {};
     }
 
diff --git a/src/component/tag/interfaces/IExtremePointCreateTagOptions.ts b/src/component/tag/interfaces/ExtremePointCreateTagOptions.ts
similarity index 89%
rename from src/component/tag/interfaces/IExtremePointCreateTagOptions.ts
rename to src/component/tag/interfaces/ExtremePointCreateTagOptions.ts
index 15a083163..cb6f27566 100644
--- a/src/component/tag/interfaces/IExtremePointCreateTagOptions.ts
+++ b/src/component/tag/interfaces/ExtremePointCreateTagOptions.ts
@@ -4,7 +4,7 @@
  *
  * @interface
  */
-export interface IExtremePointCreateTagOptions {
+export interface ExtremePointCreateTagOptions {
     /**
      * Text color as hexadecimal number.
      * @default 0xFFFFFF
diff --git a/src/component/tag/interfaces/IExtremePointTagOptions.ts b/src/component/tag/interfaces/ExtremePointTagOptions.ts
similarity index 96%
rename from src/component/tag/interfaces/IExtremePointTagOptions.ts
rename to src/component/tag/interfaces/ExtremePointTagOptions.ts
index 1dd354425..3afe0a4fa 100644
--- a/src/component/tag/interfaces/IExtremePointTagOptions.ts
+++ b/src/component/tag/interfaces/ExtremePointTagOptions.ts
@@ -4,7 +4,7 @@
  *
  * @interface
  */
-export interface IExtremePointTagOptions {
+export interface ExtremePointTagOptions {
     /**
      * Indicate whether the tag geometry should be editable.
      *
diff --git a/src/component/tag/interfaces/IOutlineCreateTagOptions.ts b/src/component/tag/interfaces/OutlineCreateTagOptions.ts
similarity index 83%
rename from src/component/tag/interfaces/IOutlineCreateTagOptions.ts
rename to src/component/tag/interfaces/OutlineCreateTagOptions.ts
index 956b9c053..6f4b3472d 100644
--- a/src/component/tag/interfaces/IOutlineCreateTagOptions.ts
+++ b/src/component/tag/interfaces/OutlineCreateTagOptions.ts
@@ -4,7 +4,7 @@
  *
  * @interface
  */
-export interface IOutlineCreateTagOptions {
+export interface OutlineCreateTagOptions {
     /**
      * Text color as hexadecimal number.
      * @default 0xFFFFFF
diff --git a/src/component/tag/interfaces/IOutlineTagOptions.ts b/src/component/tag/interfaces/OutlineTagOptions.ts
similarity index 96%
rename from src/component/tag/interfaces/IOutlineTagOptions.ts
rename to src/component/tag/interfaces/OutlineTagOptions.ts
index 88c559c8b..adef98eb1 100644
--- a/src/component/tag/interfaces/IOutlineTagOptions.ts
+++ b/src/component/tag/interfaces/OutlineTagOptions.ts
@@ -1,5 +1,5 @@
 import { TagDomain } from "../tag/TagDomain";
-import { Alignment } from "../../../viewer/Alignment";
+import { Alignment } from "../../../viewer/enums/Alignment";
 
 /**
  * Interface for the options that define the behavior and
@@ -7,7 +7,7 @@ import { Alignment } from "../../../viewer/Alignment";
  *
  * @interface
  */
-export interface IOutlineTagOptions {
+export interface OutlineTagOptions {
     /**
      * The domain where lines between vertices are treated as straight.
      *
diff --git a/src/component/tag/interfaces/ISpotTagOptions.ts b/src/component/tag/interfaces/SpotTagOptions.ts
similarity index 94%
rename from src/component/tag/interfaces/ISpotTagOptions.ts
rename to src/component/tag/interfaces/SpotTagOptions.ts
index c33d8149a..366a70609 100644
--- a/src/component/tag/interfaces/ISpotTagOptions.ts
+++ b/src/component/tag/interfaces/SpotTagOptions.ts
@@ -4,7 +4,7 @@
  *
  * @interface
  */
-export interface ISpotTagOptions {
+export interface SpotTagOptions {
     /**
      * Color for the spot specified as a hexadecimal number.
      * @default 0xFFFFFF
diff --git a/src/component/tag/interfaces/IInteraction.ts b/src/component/tag/interfaces/TagInteraction.ts
similarity index 90%
rename from src/component/tag/interfaces/IInteraction.ts
rename to src/component/tag/interfaces/TagInteraction.ts
index b31232a39..6de6b1943 100644
--- a/src/component/tag/interfaces/IInteraction.ts
+++ b/src/component/tag/interfaces/TagInteraction.ts
@@ -3,7 +3,7 @@ import { TagOperation } from "../TagOperation";
 
 export type InteractionCursor = "crosshair" | "move" | "nesw-resize" | "nwse-resize";
 
-export interface IInteraction {
+export interface TagInteraction {
     cursor?: InteractionCursor;
     offsetX: number;
     offsetY: number;
diff --git a/src/component/tag/tag/CreateTag.ts b/src/component/tag/tag/CreateTag.ts
index d45391dfe..c2700cb22 100644
--- a/src/component/tag/tag/CreateTag.ts
+++ b/src/component/tag/tag/CreateTag.ts
@@ -12,7 +12,7 @@ import { Geometry } from "../geometry/Geometry";
 
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 
 
 export abstract class CreateTag<T extends Geometry> {
@@ -76,7 +76,7 @@ export abstract class CreateTag<T extends Geometry> {
                 }));
     }
 
-    public abstract getDOMObjects(camera: THREE.Camera, size: ISize): vd.VNode[];
+    public abstract getDOMObjects(camera: THREE.Camera, size: ViewportSize): vd.VNode[];
 
     public abstract create(): void;
 
diff --git a/src/component/tag/tag/ExtremePointCreateTag.ts b/src/component/tag/tag/ExtremePointCreateTag.ts
index 9653ad4e8..5026f4a13 100644
--- a/src/component/tag/tag/ExtremePointCreateTag.ts
+++ b/src/component/tag/tag/ExtremePointCreateTag.ts
@@ -5,20 +5,20 @@ import { CreateTag } from "./CreateTag";
 
 import { PointsGeometry } from "../geometry/PointsGeometry";
 import { RectGeometry } from "../geometry/RectGeometry";
-import { IExtremePointCreateTagOptions } from "../interfaces/IExtremePointCreateTagOptions";
+import { ExtremePointCreateTagOptions } from "../interfaces/ExtremePointCreateTagOptions";
 
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 
 export class ExtremePointCreateTag extends CreateTag<PointsGeometry> {
     private _rectGeometry: RectGeometry;
-    private _options: IExtremePointCreateTagOptions;
+    private _options: ExtremePointCreateTagOptions;
     private _outline: THREE.Line;
 
     constructor(
         geometry: PointsGeometry,
-        options: IExtremePointCreateTagOptions,
+        options: ExtremePointCreateTagOptions,
         transform: Transform,
         viewportCoords?: ViewportCoords) {
 
@@ -47,7 +47,7 @@ export class ExtremePointCreateTag extends CreateTag<PointsGeometry> {
         this._disposeObjects();
     }
 
-    public getDOMObjects(camera: THREE.Camera, size: ISize): vd.VNode[] {
+    public getDOMObjects(camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
         const container: { offsetHeight: number, offsetWidth: number } = {
             offsetHeight: size.height, offsetWidth: size.width,
         };
diff --git a/src/component/tag/tag/ExtremePointRenderTag.ts b/src/component/tag/tag/ExtremePointRenderTag.ts
index 8f14ba83c..117a2d410 100644
--- a/src/component/tag/tag/ExtremePointRenderTag.ts
+++ b/src/component/tag/tag/ExtremePointRenderTag.ts
@@ -6,10 +6,10 @@ import { ExtremePointTag } from "./ExtremePointTag";
 import { OutlineRenderTagBase } from "./OutlineRenderTagBase";
 
 import { RectGeometry } from "../geometry/RectGeometry";
-import { InteractionCursor } from "../interfaces/IInteraction";
+import { InteractionCursor } from "../interfaces/TagInteraction";
 
 import { Transform } from "../../../geo/Transform";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 import { isSpherical } from "../../../geo/Geo";
 
@@ -40,7 +40,7 @@ export class ExtremePointRenderTag extends OutlineRenderTagBase<ExtremePointTag>
         this._disposeOutline();
     }
 
-    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[] {
+    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
         const vNodes: vd.VNode[] = [];
         const container: { offsetHeight: number, offsetWidth: number } = {
             offsetHeight: size.height, offsetWidth: size.width,
diff --git a/src/component/tag/tag/ExtremePointTag.ts b/src/component/tag/tag/ExtremePointTag.ts
index ee07b4d77..8ab283000 100644
--- a/src/component/tag/tag/ExtremePointTag.ts
+++ b/src/component/tag/tag/ExtremePointTag.ts
@@ -1,6 +1,6 @@
 import { Tag } from "./Tag";
 import { PointsGeometry } from "../geometry/PointsGeometry";
-import { IExtremePointTagOptions } from "../interfaces/IExtremePointTagOptions";
+import { ExtremePointTagOptions } from "../interfaces/ExtremePointTagOptions";
 
 /**
  * @class ExtremePointTag
@@ -37,10 +37,10 @@ export class ExtremePointTag extends Tag {
      * @constructor
      * @param {string} id - Unique identifier of the tag.
      * @param {PointsGeometry} geometry - Geometry defining points of tag.
-     * @param {IExtremePointTagOptions} options - Options defining the visual appearance and
+     * @param {ExtremePointTagOptions} options - Options defining the visual appearance and
      * behavior of the extreme point tag.
      */
-    constructor(id: string, geometry: PointsGeometry, options?: IExtremePointTagOptions) {
+    constructor(id: string, geometry: PointsGeometry, options?: ExtremePointTagOptions) {
         super(id, geometry);
 
         options = !!options ? options : {};
@@ -199,11 +199,11 @@ export class ExtremePointTag extends Tag {
      * @description Sets all the option properties provided and keeps
      * the rest of the values as is.
      *
-     * @param {IExtremePointTagOptions} options - Extreme point tag options
+     * @param {ExtremePointTagOptions} options - Extreme point tag options
      *
      * @fires {Tag#changed}
      */
-    public setOptions(options: IExtremePointTagOptions): void {
+    public setOptions(options: ExtremePointTagOptions): void {
         this._editable = options.editable == null ? this._editable : options.editable;
         this._indicateVertices = options.indicateVertices == null ? this._indicateVertices : options.indicateVertices;
         this._lineColor = options.lineColor == null ? this._lineColor : options.lineColor;
diff --git a/src/component/tag/tag/OutlineCreateTag.ts b/src/component/tag/tag/OutlineCreateTag.ts
index acd2655b8..59507aff3 100644
--- a/src/component/tag/tag/OutlineCreateTag.ts
+++ b/src/component/tag/tag/OutlineCreateTag.ts
@@ -6,19 +6,19 @@ import { CreateTag } from "./CreateTag";
 import { PolygonGeometry } from "../geometry/PolygonGeometry";
 import { RectGeometry } from "../geometry/RectGeometry";
 import { VertexGeometry } from "../geometry/VertexGeometry";
-import { IOutlineCreateTagOptions } from "../interfaces/IOutlineCreateTagOptions";
+import { OutlineCreateTagOptions } from "../interfaces/OutlineCreateTagOptions";
 
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 
 export class OutlineCreateTag extends CreateTag<VertexGeometry> {
     private _outline: THREE.Line;
-    private _options: IOutlineCreateTagOptions;
+    private _options: OutlineCreateTagOptions;
 
     constructor(
         geometry: VertexGeometry,
-        options: IOutlineCreateTagOptions,
+        options: OutlineCreateTagOptions,
         transform: Transform,
         viewportCoords?: ViewportCoords) {
 
@@ -45,7 +45,7 @@ export class OutlineCreateTag extends CreateTag<VertexGeometry> {
         this._disposeObjects();
     }
 
-    public getDOMObjects(camera: THREE.Camera, size: ISize): vd.VNode[] {
+    public getDOMObjects(camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
         const vNodes: vd.VNode[] = [];
         const container: { offsetHeight: number, offsetWidth: number } = {
             offsetHeight: size.height, offsetWidth: size.width,
diff --git a/src/component/tag/tag/OutlineRenderTag.ts b/src/component/tag/tag/OutlineRenderTag.ts
index 54b26a227..28623353a 100644
--- a/src/component/tag/tag/OutlineRenderTag.ts
+++ b/src/component/tag/tag/OutlineRenderTag.ts
@@ -8,10 +8,10 @@ import { TagOperation } from "../TagOperation";
 
 import { PolygonGeometry } from "../geometry/PolygonGeometry";
 import { RectGeometry } from "../geometry/RectGeometry";
-import { InteractionCursor } from "../interfaces/IInteraction";
+import { InteractionCursor } from "../interfaces/TagInteraction";
 
 import { Transform } from "../../../geo/Transform";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 import { isSpherical } from "../../../geo/Geo";
 
@@ -49,7 +49,7 @@ export class OutlineRenderTag extends OutlineRenderTagBase<OutlineTag> {
         this._disposeOutline();
     }
 
-    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[] {
+    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
         const vNodes: vd.VNode[] = [];
         const isRect: boolean = this._tag.geometry instanceof RectGeometry;
         const isPerspective: boolean = !isSpherical(this._transform.cameraType);
diff --git a/src/component/tag/tag/OutlineRenderTagBase.ts b/src/component/tag/tag/OutlineRenderTagBase.ts
index 6248a3e31..8608b093b 100644
--- a/src/component/tag/tag/OutlineRenderTagBase.ts
+++ b/src/component/tag/tag/OutlineRenderTagBase.ts
@@ -7,10 +7,10 @@ import { TagOperation } from "../TagOperation";
 import { RenderTag } from "./RenderTag";
 import { Tag } from "./Tag";
 
-import { InteractionCursor } from "../interfaces/IInteraction";
+import { InteractionCursor } from "../interfaces/TagInteraction";
 
 import { Transform } from "../../../geo/Transform";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 
 export abstract class OutlineRenderTagBase<T extends Tag> extends RenderTag<T> {
@@ -45,7 +45,7 @@ export abstract class OutlineRenderTagBase<T extends Tag> extends RenderTag<T> {
         this._geometryChangedSubscription.unsubscribe();
     }
 
-    public abstract getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[];
+    public abstract getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[];
 
     public abstract getGLObjects(): THREE.Object3D[];
 
diff --git a/src/component/tag/tag/OutlineTag.ts b/src/component/tag/tag/OutlineTag.ts
index 82e4e128d..a5afcdfdf 100644
--- a/src/component/tag/tag/OutlineTag.ts
+++ b/src/component/tag/tag/OutlineTag.ts
@@ -1,9 +1,9 @@
 import { Subject } from "rxjs";
-import { Alignment } from "../../../viewer/Alignment";
+import { Alignment } from "../../../viewer/enums/Alignment";
 
 import { PolygonGeometry } from "../geometry/PolygonGeometry";
 import { VertexGeometry } from "../geometry/VertexGeometry";
-import { IOutlineTagOptions } from "../interfaces/IOutlineTagOptions";
+import { OutlineTagOptions } from "../interfaces/OutlineTagOptions";
 
 import { Tag } from "./Tag";
 import { TagDomain } from "./TagDomain";
@@ -59,10 +59,10 @@ export class OutlineTag extends Tag {
      * @constructor
      * @param {string} id - Unique identifier of the tag.
      * @param {VertexGeometry} geometry - Geometry defining vertices of tag.
-     * @param {IOutlineTagOptions} options - Options defining the visual appearance and
+     * @param {OutlineTagOptions} options - Options defining the visual appearance and
      * behavior of the outline tag.
      */
-    constructor(id: string, geometry: VertexGeometry, options?: IOutlineTagOptions) {
+    constructor(id: string, geometry: VertexGeometry, options?: OutlineTagOptions) {
         super(id, geometry);
 
         options = !!options ? options : {};
@@ -362,11 +362,11 @@ export class OutlineTag extends Tag {
      * @description Sets all the option properties provided and keeps
      * the rest of the values as is.
      *
-     * @param {IOutlineTagOptions} options - Outline tag options
+     * @param {OutlineTagOptions} options - Outline tag options
      *
      * @fires {Tag#changed}
      */
-    public setOptions(options: IOutlineTagOptions): void {
+    public setOptions(options: OutlineTagOptions): void {
         const twoDimensionalPolygon: boolean = this._twoDimensionalPolygon(this._domain, this._geometry);
 
         this._editable = twoDimensionalPolygon || options.editable == null ? this._editable : options.editable;
diff --git a/src/component/tag/tag/RenderTag.ts b/src/component/tag/tag/RenderTag.ts
index 3c5870346..2cc705403 100644
--- a/src/component/tag/tag/RenderTag.ts
+++ b/src/component/tag/tag/RenderTag.ts
@@ -6,11 +6,11 @@ import {
     Subject,
 } from "rxjs";
 
-import { IInteraction } from "../interfaces/IInteraction";
+import { TagInteraction } from "../interfaces/TagInteraction";
 
 import { Transform } from "../../../geo/Transform";
 import { ViewportCoords } from "../../../geo/ViewportCoords";
-import { ISize } from "../../../render/interfaces/ISize";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
 import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 
 export abstract class RenderTag<T> {
@@ -19,7 +19,7 @@ export abstract class RenderTag<T> {
     protected _viewportCoords: ViewportCoords;
 
     protected _glObjectsChanged$: Subject<RenderTag<T>>;
-    protected _interact$: Subject<IInteraction>;
+    protected _interact$: Subject<TagInteraction>;
 
     constructor(tag: T, transform: Transform, viewportCoords?: ViewportCoords) {
         this._tag = tag;
@@ -27,14 +27,14 @@ export abstract class RenderTag<T> {
         this._viewportCoords = !!viewportCoords ? viewportCoords : new ViewportCoords();
 
         this._glObjectsChanged$ = new Subject<RenderTag<T>>();
-        this._interact$ = new Subject<IInteraction>();
+        this._interact$ = new Subject<TagInteraction>();
     }
 
     public get glObjectsChanged$(): Observable<RenderTag<T>> {
         return this._glObjectsChanged$;
     }
 
-    public get interact$(): Observable<IInteraction> {
+    public get interact$(): Observable<TagInteraction> {
         return this._interact$;
     }
 
@@ -44,7 +44,7 @@ export abstract class RenderTag<T> {
 
     public abstract dispose(): void;
 
-    public abstract getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[];
+    public abstract getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[];
 
     public abstract getGLObjects(): THREE.Object3D[];
 
diff --git a/src/component/tag/tag/SpotRenderTag.ts b/src/component/tag/tag/SpotRenderTag.ts
index a5d185069..77d665a7c 100644
--- a/src/component/tag/tag/SpotRenderTag.ts
+++ b/src/component/tag/tag/SpotRenderTag.ts
@@ -6,10 +6,10 @@ import { RenderTag } from "./RenderTag";
 import { SpotTag } from "./SpotTag";
 import { Tag } from "./Tag";
 
-import { InteractionCursor } from "../interfaces/IInteraction";
+import { InteractionCursor } from "../interfaces/TagInteraction";
 
-import { ISize } from "../../../render/interfaces/ISize";
-import { Alignment } from "../../../viewer/Alignment";
+import { ViewportSize } from "../../../render/interfaces/ViewportSize";
+import { Alignment } from "../../../viewer/enums/Alignment";
 import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 
 /**
@@ -19,7 +19,7 @@ import { ISpriteAtlas } from "../../../viewer/interfaces/ISpriteAtlas";
 export class SpotRenderTag extends RenderTag<SpotTag> {
     public dispose(): void { /* noop */ }
 
-    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ISize): vd.VNode[] {
+    public getDOMObjects(atlas: ISpriteAtlas, camera: THREE.Camera, size: ViewportSize): vd.VNode[] {
         const tag: SpotTag = this._tag;
         const container: { offsetHeight: number, offsetWidth: number } = {
             offsetHeight: size.height, offsetWidth: size.width,
diff --git a/src/component/tag/tag/SpotTag.ts b/src/component/tag/tag/SpotTag.ts
index abcd52fa1..3e53cb509 100644
--- a/src/component/tag/tag/SpotTag.ts
+++ b/src/component/tag/tag/SpotTag.ts
@@ -1,6 +1,6 @@
 import { Tag } from "./Tag";
 import { Geometry } from "../geometry/Geometry";
-import { ISpotTagOptions } from "../interfaces/ISpotTagOptions";
+import { SpotTagOptions } from "../interfaces/SpotTagOptions";
 
 /**
  * @class SpotTag
@@ -37,7 +37,7 @@ export class SpotTag extends Tag {
      * @param {IOutlineTagOptions} options - Options defining the visual appearance and
      * behavior of the spot tag.
      */
-    constructor(id: string, geometry: Geometry, options?: ISpotTagOptions) {
+    constructor(id: string, geometry: Geometry, options?: SpotTagOptions) {
         super(id, geometry);
 
         options = !!options ? options : {};
@@ -150,11 +150,11 @@ export class SpotTag extends Tag {
      * @description Sets all the option properties provided and keps
      * the rest of the values as is.
      *
-     * @param {ISpotTagOptions} options - Spot tag options
+     * @param {SpotTagOptions} options - Spot tag options
      *
      * @fires {Tag#changed}
      */
-    public setOptions(options: ISpotTagOptions): void {
+    public setOptions(options: SpotTagOptions): void {
         this._color = options.color == null ? this._color : options.color;
         this._editable = options.editable == null ? this._editable : options.editable;
         this._icon = options.icon === undefined ? this._icon : options.icon;
diff --git a/src/component/utils/HandlerBase.ts b/src/component/utils/HandlerBase.ts
index 82d6d33a1..1962913f3 100644
--- a/src/component/utils/HandlerBase.ts
+++ b/src/component/utils/HandlerBase.ts
@@ -1,10 +1,10 @@
 import { Component } from "../Component";
-import { IComponentConfiguration } from "../interfaces/IComponentConfiguration";
+import { ComponentConfiguration } from "../interfaces/ComponentConfiguration";
 
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
 
-export abstract class HandlerBase<TConfiguration extends IComponentConfiguration> {
+export abstract class HandlerBase<TConfiguration extends ComponentConfiguration> {
     protected _component: Component<TConfiguration>;
     protected _container: Container;
     protected _navigator: Navigator;
diff --git a/src/component/utils/MeshFactory.ts b/src/component/utils/MeshFactory.ts
index 5acb68c78..84fba7b9f 100644
--- a/src/component/utils/MeshFactory.ts
+++ b/src/component/utils/MeshFactory.ts
@@ -4,6 +4,7 @@ import { Shaders } from "../shaders/Shaders";
 
 import { Transform } from "../../geo/Transform";
 import { Node } from "../../graph/Node";
+import { isFisheye, isSpherical } from "../../geo/Geo";
 
 
 
@@ -17,9 +18,9 @@ export class MeshFactory {
     }
 
     public createMesh(node: Node, transform: Transform): THREE.Mesh {
-        if (transform.cameraType === "equirectangular") {
+        if (isSpherical(transform.cameraType)) {
             return this._createImageSphere(node, transform);
-        } else if (transform.cameraType === "fisheye") {
+        } else if (isFisheye(transform.cameraType)) {
             return this._createImagePlaneFisheye(node, transform);
         } else {
             return this._createImagePlane(node, transform);
@@ -45,9 +46,9 @@ export class MeshFactory {
     }
 
     public createCurtainMesh(node: Node, transform: Transform): THREE.Mesh {
-        if (transform.cameraType === "equirectangular") {
+        if (isSpherical(transform.cameraType)) {
             return this._createSphereCurtainMesh(node, transform);
-        } else if (transform.cameraType === "fisheye") {
+        } else if (isFisheye(transform.cameraType)) {
             return this._createCurtainMeshFisheye(node, transform);
         } else {
             return this._createCurtainMesh(node, transform);
@@ -145,7 +146,7 @@ export class MeshFactory {
     private _createSphereMaterialParameters(transform: Transform, texture: THREE.Texture): THREE.ShaderMaterialParameters {
         let materialParameters: THREE.ShaderMaterialParameters = {
             depthWrite: false,
-            fragmentShader: Shaders.equirectangular.fragment,
+            fragmentShader: Shaders.spherical.fragment,
             side: THREE.DoubleSide,
             transparent: true,
             uniforms: {
@@ -153,7 +154,7 @@ export class MeshFactory {
                 projectorMat: { value: transform.rt },
                 projectorTex: { value: texture },
             },
-            vertexShader: Shaders.equirectangular.vertex,
+            vertexShader: Shaders.spherical.vertex,
         };
 
         return materialParameters;
@@ -162,7 +163,7 @@ export class MeshFactory {
     private _createCurtainSphereMaterialParameters(transform: Transform, texture: THREE.Texture): THREE.ShaderMaterialParameters {
         let materialParameters: THREE.ShaderMaterialParameters = {
             depthWrite: false,
-            fragmentShader: Shaders.equirectangularCurtain.fragment,
+            fragmentShader: Shaders.sphericalCurtain.fragment,
             side: THREE.DoubleSide,
             transparent: true,
             uniforms: {
@@ -171,7 +172,7 @@ export class MeshFactory {
                 projectorMat: { value: transform.rt },
                 projectorTex: { value: texture },
             },
-            vertexShader: Shaders.equirectangularCurtain.vertex,
+            vertexShader: Shaders.sphericalCurtain.vertex,
         };
 
         return materialParameters;
@@ -319,7 +320,7 @@ export class MeshFactory {
     }
 
     private _getImageSphereGeo(transform: Transform, node: Node): THREE.BufferGeometry {
-        let t: THREE.Matrix4 = new THREE.Matrix4().copy(transform.srt).invert();
+        const t = transform.srtInverse;
 
         // push everything at least 5 meters in front of the camera
         let minZ: number = 5.0 * transform.scale;
@@ -362,7 +363,7 @@ export class MeshFactory {
 
     private _getImagePlaneGeo(transform: Transform, node: Node): THREE.BufferGeometry {
         const undistortionMarginFactor: number = 3;
-        let t: THREE.Matrix4 = new THREE.Matrix4().copy(transform.srt).invert();
+        const t = transform.srtInverse;
 
         // push everything at least 5 meters in front of the camera
         let minZ: number = 5.0 * transform.scale;
@@ -408,7 +409,7 @@ export class MeshFactory {
     }
 
     private _getImagePlaneGeoFisheye(transform: Transform, node: Node): THREE.BufferGeometry {
-        let t: THREE.Matrix4 = new THREE.Matrix4().copy(transform.srt).invert();
+        const t = transform.srtInverse;
 
         // push everything at least 5 meters in front of the camera
         let minZ: number = 5.0 * transform.scale;
@@ -450,9 +451,10 @@ export class MeshFactory {
     }
 
     private _getFlatImageSphereGeo(transform: Transform): THREE.BufferGeometry {
-        let geometry =
+        const geometry =
             new THREE.SphereGeometry(this._imageSphereRadius, 20, 40);
-        geometry.applyMatrix4(new THREE.Matrix4().copy(transform.rt).invert());
+        const t = transform.srtInverse;
+        geometry.applyMatrix4(t);
         return geometry;
     }
 
diff --git a/src/component/utils/MeshScene.ts b/src/component/utils/MeshScene.ts
index 2da06e884..a1712d0c9 100644
--- a/src/component/utils/MeshScene.ts
+++ b/src/component/utils/MeshScene.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 
-import { IShaderMaterial } from "../imageplane/interfaces/IShaderMaterial";
+import { ProjectorShaderMaterial } from "../imageplane/interfaces/ProjectorShaderMaterial";
 
 export class MeshScene {
     private _planes: { [key: string]: THREE.Mesh };
@@ -152,7 +152,7 @@ export class MeshScene {
             scene.remove(plane);
             plane.geometry.dispose();
             (<THREE.Material>plane.material).dispose();
-            let texture: THREE.Texture = (<IShaderMaterial>plane.material).uniforms.projectorTex.value;
+            let texture: THREE.Texture = (<ProjectorShaderMaterial>plane.material).uniforms.projectorTex.value;
             if (texture != null) {
                 texture.dispose();
             }
diff --git a/src/component/zoom/ZoomComponent.ts b/src/component/zoom/ZoomComponent.ts
index 8c3149a37..aacdff14e 100644
--- a/src/component/zoom/ZoomComponent.ts
+++ b/src/component/zoom/ZoomComponent.ts
@@ -12,15 +12,15 @@ import {
 } from "rxjs/operators";
 
 import { Component } from "../Component";
-import { IZoomConfiguration } from "../interfaces/IZoomConfiguration";
+import { ZoomConfiguration } from "../interfaces/ZoomConfiguration";
 
 import { Transform } from "../../geo/Transform";
 import { ViewportCoords } from "../../geo/ViewportCoords";
 import { RenderCamera } from "../../render/RenderCamera";
-import { ISize } from "../../render/interfaces/ISize";
-import { IVNodeHash } from "../../render/interfaces/IVNodeHash";
+import { ViewportSize } from "../../render/interfaces/ViewportSize";
+import { VirtualNodeHash } from "../../render/interfaces/VirtualNodeHash";
 import { State } from "../../state/State";
-import { IFrame } from "../../state/interfaces/IFrame";
+import { AnimationFrame } from "../../state/interfaces/AnimationFrame";
 import { ComponentSize } from "../utils/ComponentSize";
 import { Container } from "../../viewer/Container";
 import { Navigator } from "../../viewer/Navigator";
@@ -37,7 +37,7 @@ import { Navigator } from "../../viewer/Navigator";
  * zoomComponent.configure({ size: Mapillary.ComponentSize.Small });
  * ```
  */
-export class ZoomComponent extends Component<IZoomConfiguration> {
+export class ZoomComponent extends Component<ZoomConfiguration> {
     public static componentName: string = "zoom";
 
     private _viewportCoords: ViewportCoords;
@@ -62,7 +62,7 @@ export class ZoomComponent extends Component<IZoomConfiguration> {
             this._configuration$,
             this._container.renderService.size$).pipe(
                 map(
-                    ([frame, state, configuration, size]: [IFrame, State, IZoomConfiguration, ISize]): IVNodeHash => {
+                    ([frame, state, configuration, size]: [AnimationFrame, State, ZoomConfiguration, ViewportSize]): VirtualNodeHash => {
                         const zoom: number = frame.state.zoom;
 
                         const zoomInIcon: vd.VNode = vd.h("div.mapillary-zoom-in-icon", []);
@@ -107,7 +107,7 @@ export class ZoomComponent extends Component<IZoomConfiguration> {
         this._zoomSubscription.unsubscribe();
     }
 
-    protected _getDefaultConfiguration(): IZoomConfiguration {
+    protected _getDefaultConfiguration(): ZoomConfiguration {
         return { size: ComponentSize.Automatic };
     }
 }
diff --git a/src/export/APINamespace.ts b/src/export/APINamespace.ts
index a6cc3ff1a..115b6ae6d 100644
--- a/src/export/APINamespace.ts
+++ b/src/export/APINamespace.ts
@@ -1,19 +1,39 @@
-export { BufferFetcher } from "../api/BufferFetcher";
+// Class
+export * as Common from "../api/Common";
 export { DataProviderBase } from "../api/DataProviderBase";
-export { FalcorDataProvider } from "../api/FalcorDataProvider";
-export { GeometryProviderBase } from "../api/GeometryProviderBase";
 export { GeohashGeometryProvider } from "../api/GeohashGeometryProvider";
-export { JsonInflator } from "../api/JsonInflator";
-export { PbfMeshReader } from "../api/PbfMeshReader";
+export { GeometryProviderBase } from "../api/GeometryProviderBase";
 export { S2GeometryProvider } from "../api/S2GeometryProvider";
 
-export { ICellCorners } from "../api/interfaces/ICellCorners";
-export { ICoreNode } from "../api/interfaces/ICoreNode";
-export { IClusterReconstruction } from "../api/interfaces/IClusterReconstruction";
-export { IFalcorDataProviderOptions } from "../api/interfaces/IFalcorDataProviderOptions";
-export { IFillNode } from "../api/interfaces/IFillNode";
-export { IFullNode } from "../api/interfaces/IFullNode";
-export { ILatLon } from "../api/interfaces/ILatLon";
-export { IMesh } from "../api/interfaces/IMesh";
-export { ISequence } from "../api/interfaces/ISequence";
-export { IUser } from "../api/interfaces/IUser";
+// Falcor
+export { FalcorDataProvider } from "../api/falcor/FalcorDataProvider";
+export { FalcorDataProviderOptions } from "../api/falcor/FalcorDataProviderOptions";
+
+// Event
+export { DataAddedProviderEvent } from "../api/interfaces/DataAddedProviderEvent";
+
+// Contract
+export { CameraContract } from "../api/contracts/CameraContract";
+export { CameraShotContract } from "../api/contracts/CameraShotContract";
+export { ClusterReconstructionContract } from "../api/contracts/ClusterReconstructionContract";
+export { CoreImagesContract } from "../api/contracts/CoreImagesContract";
+export { ImagesContract } from "../api/contracts/ImagesContract";
+export { MeshContract } from "../api/contracts/MeshContract";
+export { PointContract } from "../api/contracts/PointContract";
+export { SequencesContract } from "../api/contracts/SequencesContract";
+export { SpatialImagesContract } from "../api/contracts/SpatialImagesContract";
+
+// Ent
+export { CameraEnt } from "../api/ents/CameraEnt";
+export { CoreImageEnt } from "../api/ents/CoreImageEnt";
+export { CreatorEnt } from "../api/ents/CreatorEnt";
+export { IDEnt } from "../api/ents/IDEnt";
+export { ImageEnt } from "../api/ents/ImageEnt";
+export { SequenceEnt } from "../api/ents/SequenceEnt";
+export { SpatialImageEnt } from "../api/ents/SpatialImageEnt";
+export { URLEnt } from "../api/ents/URLEnt";
+
+// Type
+export { CellCorners } from "../api/interfaces/CellCorners";
+export { LatLon } from "../api/interfaces/LatLon";
+export { LatLonAlt } from "../api/interfaces/LatLonAlt";
diff --git a/src/export/BearingNamespace.ts b/src/export/BearingNamespace.ts
index 450656f3a..2d39a4b11 100644
--- a/src/export/BearingNamespace.ts
+++ b/src/export/BearingNamespace.ts
@@ -1,2 +1,2 @@
-export { BearingComponent } from "../component/BearingComponent";
-export { IBearingConfiguration } from "../component/interfaces/IBearingConfiguration";
+export { BearingComponent } from "../component/bearing/BearingComponent";
+export { BearingConfiguration } from "../component/interfaces/BearingConfiguration";
diff --git a/src/export/CacheNamespace.ts b/src/export/CacheNamespace.ts
index eef0f9af1..e22db5c29 100644
--- a/src/export/CacheNamespace.ts
+++ b/src/export/CacheNamespace.ts
@@ -1,2 +1,5 @@
-export { CacheComponent } from "../component/CacheComponent";
-export { ICacheConfiguration } from "../component/interfaces/ICacheConfiguration";
+export { CacheComponent } from "../component/cache/CacheComponent";
+export {
+    CacheConfiguration,
+    CacheDepthConfiguration,
+} from "../component/interfaces/CacheConfiguration";
diff --git a/src/export/DirectionNamespace.ts b/src/export/DirectionNamespace.ts
index 0ab1727aa..1198867c1 100644
--- a/src/export/DirectionNamespace.ts
+++ b/src/export/DirectionNamespace.ts
@@ -1,2 +1,2 @@
 export { DirectionComponent } from "../component/direction/DirectionComponent";
-export { IDirectionConfiguration } from "../component/interfaces/IDirectionConfiguration";
+export { DirectionConfiguration } from "../component/interfaces/DirectionConfiguration";
diff --git a/src/export/KeyboardNamespace.ts b/src/export/KeyboardNamespace.ts
index b8fa6e225..db267f200 100644
--- a/src/export/KeyboardNamespace.ts
+++ b/src/export/KeyboardNamespace.ts
@@ -1,4 +1,4 @@
-export { IKeyboardConfiguration } from "../component/interfaces/IKeyboardConfiguration";
+export { KeyboardConfiguration } from "../component/interfaces/KeyboardConfiguration";
 export { KeyboardComponent } from "../component/keyboard/KeyboardComponent";
 export { KeyPlayHandler } from "../component/keyboard/KeyPlayHandler";
 export { KeySequenceNavigationHandler } from "../component/keyboard/KeySequenceNavigationHandler";
diff --git a/src/export/MarkerNamespace.ts b/src/export/MarkerNamespace.ts
index 82d50f65d..7a774787f 100644
--- a/src/export/MarkerNamespace.ts
+++ b/src/export/MarkerNamespace.ts
@@ -1,6 +1,6 @@
-export { ICircleMarkerOptions } from "../component/marker/interfaces/ICircleMarkerOptions";
-export { IMarkerEvent } from "../component/marker/interfaces/IMarkerEvent";
-export { ISimpleMarkerOptions } from "../component/marker/interfaces/ISimpleMarkerOptions";
+export { CircleMarkerOptions } from "../component/marker/interfaces/CircleMarkerOptions";
+export { MarkerEvent } from "../component/marker/interfaces/MarkerEvent";
+export { SimpleMarkerOptions } from "../component/marker/interfaces/SimpleMarkerOptions";
 export { CircleMarker } from "../component/marker/marker/CircleMarker";
 export { SimpleMarker } from "../component/marker/marker/SimpleMarker";
 export { MarkerComponent } from "../component/marker/MarkerComponent";
diff --git a/src/export/MouseNamespace.ts b/src/export/MouseNamespace.ts
index 73ce62c74..5abd2b108 100644
--- a/src/export/MouseNamespace.ts
+++ b/src/export/MouseNamespace.ts
@@ -1,4 +1,4 @@
-export { IMouseConfiguration } from "../component/interfaces/IMouseConfiguration";
+export { MouseConfiguration } from "../component/interfaces/MouseConfiguration";
 export { DragPanHandler } from "../component/mouse/DragPanHandler";
 export { MouseComponent } from "../component/mouse/MouseComponent";
 export { ScrollZoomHandler } from "../component/mouse/ScrollZoomHandler";
diff --git a/src/export/PopupNamespace.ts b/src/export/PopupNamespace.ts
index 2c552342a..f0f225417 100644
--- a/src/export/PopupNamespace.ts
+++ b/src/export/PopupNamespace.ts
@@ -1,4 +1,4 @@
-export { IPopupOffset } from "../component/popup/interfaces/IPopupOffset";
-export { IPopupOptions } from "../component/popup/interfaces/IPopupOptions";
+export { PopupOffset } from "../component/popup/interfaces/PopupOffset";
+export { PopupOptions } from "../component/popup/interfaces/PopupOptions";
 export { Popup } from "../component/popup/popup/Popup";
 export { PopupComponent } from "../component/popup/PopupComponent";
diff --git a/src/export/SequenceNamespace.ts b/src/export/SequenceNamespace.ts
index 38d1d086a..f3952a13e 100644
--- a/src/export/SequenceNamespace.ts
+++ b/src/export/SequenceNamespace.ts
@@ -1,2 +1,2 @@
-export { ISequenceConfiguration } from "../component/interfaces/ISequenceConfiguration";
+export { SequenceConfiguration } from "../component/interfaces/SequenceConfiguration";
 export { SequenceComponent } from "../component/sequence/SequenceComponent";
diff --git a/src/export/SliderNamespace.ts b/src/export/SliderNamespace.ts
index 69ee43d5e..f9d63c6ff 100644
--- a/src/export/SliderNamespace.ts
+++ b/src/export/SliderNamespace.ts
@@ -1,2 +1,6 @@
-export { ISliderConfiguration, ISliderKeys, SliderMode } from "../component/interfaces/ISliderConfiguration";
+export {
+    SliderConfiguration,
+    SliderConfigurationIds,
+    SliderConfigurationMode,
+} from "../component/interfaces/SliderConfiguration";
 export { SliderComponent } from "../component/slider/SliderComponent";
diff --git a/src/export/TagNamespace.ts b/src/export/TagNamespace.ts
index 0b9c14b5a..d47642393 100644
--- a/src/export/TagNamespace.ts
+++ b/src/export/TagNamespace.ts
@@ -8,9 +8,9 @@ export { RectGeometry } from "../component/tag/geometry/RectGeometry";
 export { VertexGeometry } from "../component/tag/geometry/VertexGeometry";
 
 export { ExtremePointTag } from "../component/tag/tag/ExtremePointTag";
-export { IExtremePointTagOptions } from "../component/tag/interfaces/IExtremePointTagOptions";
-export { IOutlineTagOptions } from "../component/tag/interfaces/IOutlineTagOptions";
-export { ISpotTagOptions } from "../component/tag/interfaces/ISpotTagOptions";
+export { ExtremePointTagOptions } from "../component/tag/interfaces/ExtremePointTagOptions";
+export { OutlineTagOptions } from "../component/tag/interfaces/OutlineTagOptions";
+export { SpotTagOptions } from "../component/tag/interfaces/SpotTagOptions";
 export { OutlineTag } from "../component/tag/tag/OutlineTag";
 export { SpotTag } from "../component/tag/tag/SpotTag";
 
diff --git a/src/export/ZoomNamespace.ts b/src/export/ZoomNamespace.ts
index 96733299a..0937cf749 100644
--- a/src/export/ZoomNamespace.ts
+++ b/src/export/ZoomNamespace.ts
@@ -1,2 +1,2 @@
-export { IZoomConfiguration } from "../component/interfaces/IZoomConfiguration";
+export { ZoomConfiguration } from "../component/interfaces/ZoomConfiguration";
 export { ZoomComponent } from "../component/zoom/ZoomComponent";
diff --git a/src/geo/Camera.ts b/src/geo/Camera.ts
index becb553f2..f3ae7b4c4 100644
--- a/src/geo/Camera.ts
+++ b/src/geo/Camera.ts
@@ -132,7 +132,7 @@ export class Camera {
      * Get the focal length based on the transform.
      *
      * @description Returns the focal length corresponding
-     * to a 90 degree field of view for equirectangular
+     * to a 90 degree field of view for spherical
      * transforms.
      *
      * Returns the transform focal length for other
diff --git a/src/geo/Geo.ts b/src/geo/Geo.ts
index d896ac10f..ece95b8fa 100644
--- a/src/geo/Geo.ts
+++ b/src/geo/Geo.ts
@@ -4,17 +4,20 @@ import { GeoCoords } from "./GeoCoords";
 import { Spatial } from "./Spatial";
 import { Transform } from "./Transform";
 import { ViewportCoords } from "./ViewportCoords";
-import { ILatLonAlt } from "./interfaces/ILatLonAlt";
-import { CameraProjectionType } from "../api/interfaces/CameraProjectionType";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 
-const geoCoords: GeoCoords = new GeoCoords();
-const spatial: Spatial = new Spatial();
+const geoCoords = new GeoCoords();
+const spatial = new Spatial();
 
 export function isSpherical(cameraType: string): boolean {
-    return cameraType === "equirectangular";
+    return cameraType === "spherical";
 }
 
-export function computeTranslation(position: ILatLonAlt, rotation: number[], reference: ILatLonAlt): number[] {
+export function isFisheye(cameraType: string): boolean {
+    return cameraType === "fisheye";
+}
+
+export function computeTranslation(position: LatLonAlt, rotation: number[], reference: LatLonAlt): number[] {
     const C: number[] = geoCoords.geodeticToEnu(
         position.lat,
         position.lon,
diff --git a/src/geo/GeoRBush.ts b/src/geo/GeoRBush.ts
index 3eebbaa0a..25cdf38e9 100644
--- a/src/geo/GeoRBush.ts
+++ b/src/geo/GeoRBush.ts
@@ -1,9 +1,9 @@
 import { BBox } from "rbush";
 import RBush from "rbush";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 
-export class GeoRBush<T extends ILatLon> extends RBush<T> {
+export class GeoRBush<T extends LatLon> extends RBush<T> {
     public compareMinX(a: T, b: T): number { return a.lat - b.lat; }
 
     public compareMinY(a: T, b: T): number { return a.lon - b.lon; }
diff --git a/src/geo/Transform.ts b/src/geo/Transform.ts
index 2f4f2cdfb..44f25b13f 100644
--- a/src/geo/Transform.ts
+++ b/src/geo/Transform.ts
@@ -1,6 +1,7 @@
 import * as THREE from "three";
+import { isFisheye, isSpherical } from "./Geo";
 
-import { CameraProjectionType } from "../api/interfaces/CameraProjectionType";
+import { CameraType } from "./interfaces/CameraType";
 
 const EPSILON = 1e-8;
 
@@ -20,16 +21,17 @@ export class Transform {
     private _basicHeight: number;
     private _basicAspect: number;
 
-    private _rt: THREE.Matrix4;
-    private _srt: THREE.Matrix4;
-
-    private _basicRt: THREE.Matrix4;
+    private _worldToCamera: THREE.Matrix4;
+    private _worldToCameraInverse: THREE.Matrix4;
+    private _scaledWorldToCamera: THREE.Matrix4;
+    private _scaledWorldToCameraInverse: THREE.Matrix4;
+    private _basicWorldToCamera: THREE.Matrix4;
 
     private _textureScale: number[];
 
     private _ck1: number;
     private _ck2: number;
-    private _cameraType: CameraProjectionType;
+    private _cameraType: CameraType;
 
     private _radialPeak: number;
 
@@ -48,15 +50,13 @@ export class Transform {
         orientation: number,
         width: number,
         height: number,
-        focal: number,
         scale: number,
         rotation: number[],
         translation: number[],
         image: HTMLImageElement,
         textureScale?: number[],
-        ck1?: number,
-        ck2?: number,
-        cameraType?: CameraProjectionType) {
+        cameraParameters?: number[],
+        cameraType?: CameraType) {
 
         this._orientation = this._getValue(orientation, 1);
 
@@ -74,13 +74,29 @@ export class Transform {
         this._basicWidth = keepOrientation ? width : height;
         this._basicHeight = keepOrientation ? height : width;
 
+        const parameters = this._getCameraParameters(
+            cameraParameters,
+            cameraType);
+        const focal = parameters[0];
+        const ck1 = parameters[1];
+        const ck2 = parameters[2];
+
         this._focal = this._getValue(focal, 1);
         this._scale = this._getValue(scale, 0);
 
-        this._rt = this._getRt(rotation, translation);
-        this._srt = this._getSrt(this._rt, this._scale);
+        this._worldToCamera = this.createWorldToCamera(rotation, translation);
+        this._worldToCameraInverse = new THREE.Matrix4()
+            .copy(this._worldToCamera)
+            .invert()
+        this._scaledWorldToCamera =
+            this._createScaledWorldToCamera(this._worldToCamera, this._scale);
+        this._scaledWorldToCameraInverse = new THREE.Matrix4()
+            .copy(this._scaledWorldToCamera)
+            .invert();
 
-        this._basicRt = this._getBasicRt(this._rt, orientation);
+        this._basicWorldToCamera = this._createBasicWorldToCamera(
+            this._worldToCamera,
+            orientation);
 
         this._textureScale = !!textureScale ? textureScale : [1, 1];
 
@@ -101,7 +117,7 @@ export class Transform {
         return this._ck2;
     }
 
-    public get cameraType(): CameraProjectionType {
+    public get cameraType(): CameraType {
         return this._cameraType;
     }
 
@@ -127,7 +143,7 @@ export class Transform {
     }
 
     public get basicRt(): THREE.Matrix4 {
-        return this._basicRt;
+        return this._basicWorldToCamera;
     }
 
     /**
@@ -176,7 +192,7 @@ export class Transform {
      * @returns {THREE.Matrix4} The extrinsic camera matrix.
      */
     public get rt(): THREE.Matrix4 {
-        return this._rt;
+        return this._worldToCamera;
     }
 
     /**
@@ -184,7 +200,15 @@ export class Transform {
      * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
      */
     public get srt(): THREE.Matrix4 {
-        return this._srt;
+        return this._scaledWorldToCamera;
+    }
+
+    /**
+     * Get srtInverse.
+     * @returns {THREE.Matrix4} The scaled extrinsic camera matrix.
+     */
+    public get srtInverse(): THREE.Matrix4 {
+        return this._scaledWorldToCameraInverse;
     }
 
     /**
@@ -230,7 +254,7 @@ export class Transform {
      * @returns {THREE.Vector3} Normalized and orientation adjusted up vector.
      */
     public upVector(): THREE.Vector3 {
-        let rte: number[] = this._rt.elements;
+        let rte: number[] = this._worldToCamera.elements;
 
         switch (this._orientation) {
             case 1:
@@ -264,7 +288,7 @@ export class Transform {
             0, 0, 1, 0);
 
         projector.multiply(projection);
-        projector.multiply(this._rt);
+        projector.multiply(this._worldToCamera);
 
         return projector;
     }
@@ -303,7 +327,7 @@ export class Transform {
      */
     public projectSfM(point3d: number[]): number[] {
         let v: THREE.Vector4 = new THREE.Vector4(point3d[0], point3d[1], point3d[2], 1);
-        v.applyMatrix4(this._rt);
+        v.applyMatrix4(this._worldToCamera);
         return this._bearingToSfm([v.x, v.y, v.z]);
     }
 
@@ -311,21 +335,19 @@ export class Transform {
      * Unproject SfM coordinates to a 3D world coordinates.
      *
      * @param {Array<number>} sfm - 2D SfM coordinates.
-     * @param {Array<number>} distance - Distance to unproject from camera center.
-     * @param {boolean} [depth] - Treat the distance value as depth from camera center.
-     *                            Only applicable for perspective images. Will be
-     *                            ignored for spherical.
+     * @param {Array<number>} distance - Distance to unproject
+     * from camera center.
+     * @param {boolean} [depth] - Treat the distance value as
+     * depth from camera center. Only applicable for perspective
+     * images. Will be ignored for spherical.
      * @returns {Array<number>} Unprojected 3D world coordinates.
      */
     public unprojectSfM(
         sfm: number[],
         distance: number,
         depth?: boolean): number[] {
-
         const bearing = this._sfmToBearing(sfm);
-        const equirectangular =
-            this._cameraType === 'equirectangular';
-        const v = depth && equirectangular ?
+        const unprojectedCamera = depth && !isSpherical(this._cameraType) ?
             new THREE.Vector4(
                 distance * bearing[0] / bearing[2],
                 distance * bearing[1] / bearing[2],
@@ -337,8 +359,13 @@ export class Transform {
                 distance * bearing[2],
                 1);
 
-        v.applyMatrix4(new THREE.Matrix4().copy(this._rt).invert());
-        return [v.x / v.w, v.y / v.w, v.z / v.w];
+        const unprojectedWorld = unprojectedCamera
+            .applyMatrix4(this._worldToCameraInverse);
+        return [
+            unprojectedWorld.x / unprojectedWorld.w,
+            unprojectedWorld.y / unprojectedWorld.w,
+            unprojectedWorld.z / unprojectedWorld.w,
+        ];
     }
 
     /**
@@ -350,14 +377,14 @@ export class Transform {
      * on the unit sphere).
      */
     private _sfmToBearing(sfm: number[]): number[] {
-        if (this._cameraType === 'equirectangular') {
+        if (isSpherical(this._cameraType)) {
             let lon: number = sfm[0] * 2 * Math.PI;
             let lat: number = -sfm[1] * 2 * Math.PI;
             let x: number = Math.cos(lat) * Math.sin(lon);
             let y: number = -Math.sin(lat);
             let z: number = Math.cos(lat) * Math.cos(lon);
             return [x, y, z];
-        } else if (this._cameraType === "fisheye") {
+        } else if (isFisheye(this._cameraType)) {
             let [dxn, dyn]: number[] = [sfm[0] / this._focal, sfm[1] / this._focal];
             const dTheta: number = Math.sqrt(dxn * dxn + dyn * dyn);
             let d: number = this._distortionFromDistortedRadius(dTheta, this._ck1, this._ck2, this._radialPeak);
@@ -409,14 +436,14 @@ export class Transform {
      * @returns {Array<number>} 2D SfM coordinates.
      */
     private _bearingToSfm(bearing: number[]): number[] {
-        if (this._cameraType === 'equirectangular') {
+        if (isSpherical(this._cameraType)) {
             let x: number = bearing[0];
             let y: number = bearing[1];
             let z: number = bearing[2];
             let lon: number = Math.atan2(x, z);
             let lat: number = Math.atan2(-y, Math.sqrt(x * x + z * z));
             return [lon / (2 * Math.PI), -lat / (2 * Math.PI)];
-        } else if (this._cameraType === "fisheye") {
+        } else if (isFisheye(this._cameraType)) {
             if (bearing[2] > 0) {
                 const [x, y, z]: number[] = bearing;
                 const r: number = Math.sqrt(x * x + y * y);
@@ -556,6 +583,21 @@ export class Transform {
         return value != null && value > 0 ? value : fallback;
     }
 
+    private _getCameraParameters(
+        value: number[],
+        cameraType: string): number[] {
+        if (isSpherical(cameraType)) { return []; }
+        if (!value || value.length === 0) { return [1, 0, 0]; }
+
+        const padding = 3 - value.length;
+        if (padding <= 0) { return value; }
+
+        return value
+            .concat(
+                new Array(padding)
+                    .fill(0));
+    }
+
     /**
      * Creates the extrinsic camera matrix [ R | t ].
      *
@@ -563,45 +605,46 @@ export class Transform {
      * @param {Array<number>} translation - Translation vector.
      * @returns {THREE.Matrix4} Extrisic camera matrix.
      */
-    private _getRt(rotation: number[], translation: number[]): THREE.Matrix4 {
-        let axis: THREE.Vector3 = new THREE.Vector3(rotation[0], rotation[1], rotation[2]);
-        let angle: number = axis.length();
+    private createWorldToCamera(
+        rotation: number[],
+        translation: number[]): THREE.Matrix4 {
+        const axis = new THREE.Vector3(rotation[0], rotation[1], rotation[2]);
+        const angle = axis.length();
         if (angle > 0) {
             axis.normalize();
         }
 
-        let rt: THREE.Matrix4 = new THREE.Matrix4();
-        rt.makeRotationAxis(axis, angle);
-        rt.setPosition(
+        const worldToCamera = new THREE.Matrix4();
+        worldToCamera.makeRotationAxis(axis, angle);
+        worldToCamera.setPosition(
             new THREE.Vector3(
                 translation[0],
                 translation[1],
                 translation[2]));
 
-        return rt;
+        return worldToCamera;
     }
 
     /**
      * Calculates the scaled extrinsic camera matrix scale * [ R | t ].
      *
-     * @param {THREE.Matrix4} rt - Extrisic camera matrix.
+     * @param {THREE.Matrix4} worldToCamera - Extrisic camera matrix.
      * @param {number} scale - Scale factor.
      * @returns {THREE.Matrix4} Scaled extrisic camera matrix.
      */
-    private _getSrt(rt: THREE.Matrix4, scale: number): THREE.Matrix4 {
-        let srt: THREE.Matrix4 = rt.clone();
-        let elements: number[] = srt.elements;
-
+    private _createScaledWorldToCamera(
+        worldToCamera: THREE.Matrix4,
+        scale: number): THREE.Matrix4 {
+        const scaledWorldToCamera = worldToCamera.clone();
+        const elements = scaledWorldToCamera.elements;
         elements[12] = scale * elements[12];
         elements[13] = scale * elements[13];
         elements[14] = scale * elements[14];
-
-        srt.scale(new THREE.Vector3(scale, scale, scale));
-
-        return srt;
+        scaledWorldToCamera.scale(new THREE.Vector3(scale, scale, scale));
+        return scaledWorldToCamera;
     }
 
-    private _getBasicRt(rt: THREE.Matrix4, orientation: number): THREE.Matrix4 {
+    private _createBasicWorldToCamera(rt: THREE.Matrix4, orientation: number): THREE.Matrix4 {
         const axis: THREE.Vector3 = new THREE.Vector3(0, 0, 1);
         let angle: number = 0;
 
diff --git a/src/geo/interfaces/CameraType.ts b/src/geo/interfaces/CameraType.ts
new file mode 100644
index 000000000..07dae99a4
--- /dev/null
+++ b/src/geo/interfaces/CameraType.ts
@@ -0,0 +1,4 @@
+export type CameraType =
+    "spherical" |
+    "fisheye" |
+    "perspective";
diff --git a/src/geo/interfaces/ILatLonAlt.ts b/src/geo/interfaces/ILatLonAlt.ts
deleted file mode 100644
index d122e0343..000000000
--- a/src/geo/interfaces/ILatLonAlt.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ILatLon } from "../../api/interfaces/ILatLon";
-
-export interface ILatLonAlt extends ILatLon {
-    alt: number;
-}
diff --git a/src/graph/Graph.ts b/src/graph/Graph.ts
index bc847111a..d7de4d95a 100644
--- a/src/graph/Graph.ts
+++ b/src/graph/Graph.ts
@@ -29,18 +29,19 @@ import { GraphCalculator } from "./GraphCalculator";
 import { Node } from "./Node";
 import { NodeCache } from "./NodeCache";
 import { Sequence } from "./Sequence";
-import { IGraphConfiguration } from "./interfaces/IGraphConfiguration";
+import { GraphConfiguration } from "./interfaces/GraphConfiguration";
 import { EdgeCalculator } from "./edge/EdgeCalculator";
-import { IEdge } from "./edge/interfaces/IEdge";
-import { IPotentialEdge } from "./edge/interfaces/IPotentialEdge";
+import { NavigationEdge } from "./edge/interfaces/NavigationEdge";
+import { PotentialEdge } from "./edge/interfaces/PotentialEdge";
 
 import { APIWrapper } from "../api/APIWrapper";
-import { ICoreNode } from "../api/interfaces/ICoreNode";
-import { IFillNode } from "../api/interfaces/IFillNode";
-import { IFullNode } from "../api/interfaces/IFullNode";
-import { ISequence } from "../api/interfaces/ISequence";
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { SpatialImageEnt } from "../api/ents/SpatialImageEnt";
+import { LatLon } from "../api/interfaces/LatLon";
 import { GraphMapillaryError } from "../error/GraphMapillaryError";
+import { SpatialImagesContract } from "../api/contracts/SpatialImagesContract";
+import { ImagesContract } from "../api/contracts/ImagesContract";
+import { SequencesContract } from "../api/contracts/SequencesContract";
+import { CoreImagesContract } from "../api/contracts/CoreImagesContract";
 
 type NodeTiles = {
     cache: string[];
@@ -144,7 +145,7 @@ export class Graph {
     private _defaultAlt: number;
     private _edgeCalculator: EdgeCalculator;
     private _graphCalculator: GraphCalculator;
-    private _configuration: IGraphConfiguration;
+    private _configuration: GraphConfiguration;
 
     private _filter: FilterFunction;
     private _filterCreator: FilterCreator;
@@ -202,7 +203,7 @@ export class Graph {
      * @param {GraphCalculator} [graphCalculator] - Instance for graph calculations.
      * @param {EdgeCalculator} [edgeCalculator] - Instance for edge calculations.
      * @param {FilterCreator} [filterCreator] - Instance for  filter creation.
-     * @param {IGraphConfiguration} [configuration] - Configuration struct.
+     * @param {GraphConfiguration} [configuration] - Configuration struct.
      */
     constructor(
         api: APIWrapper,
@@ -210,7 +211,7 @@ export class Graph {
         graphCalculator?: GraphCalculator,
         edgeCalculator?: EdgeCalculator,
         filterCreator?: FilterCreator,
-        configuration?: IGraphConfiguration) {
+        configuration?: GraphConfiguration) {
 
         this._api = api;
 
@@ -307,12 +308,12 @@ export class Graph {
      *
      * @description The node assets are not cached.
      *
-     * @param {ILatLon} sw - South west corner of bounding box.
-     * @param {ILatLon} ne - North east corner of bounding box.
+     * @param {LatLon} sw - South west corner of bounding box.
+     * @param {LatLon} ne - North east corner of bounding box.
      * @returns {Observable<Array<Node>>} Observable emitting
      * the full nodes in the bounding box.
      */
-    public cacheBoundingBox$(sw: ILatLon, ne: ILatLon): Observable<Node[]> {
+    public cacheBoundingBox$(sw: LatLon, ne: LatLon): Observable<Node[]> {
         const cacheTiles$: Observable<Graph>[] = this._api.data.geometry.bboxToCellIds(sw, ne)
             .filter(
                 (h: string): boolean => {
@@ -333,8 +334,8 @@ export class Graph {
             mergeAll(),
             last(),
             mergeMap(
-                (graph: Graph): Observable<Node[]> => {
-                    const nodes: Node[] = this._nodeIndex
+                (): Observable<Node[]> => {
+                    const nodes = this._nodeIndex
                         .search({
                             maxX: ne.lat,
                             maxY: ne.lon,
@@ -353,44 +354,40 @@ export class Graph {
                         if (node.full) {
                             fullNodes.push(node);
                         } else {
-                            coreNodes.push(node.key);
+                            coreNodes.push(node.id);
                         }
                     }
 
                     const coreNodeBatches: string[][] = [];
-                    const batchSize: number = 200;
+                    const batchSize = 200;
                     while (coreNodes.length > 0) {
                         coreNodeBatches.push(coreNodes.splice(0, batchSize));
                     }
 
-                    const fullNodes$: Observable<Node[]> = observableOf(fullNodes);
-                    const fillNodes$: Observable<Node[]>[] = coreNodeBatches
-                        .map(
-                            (batch: string[]): Observable<Node[]> => {
-                                return this._api.imageByKeyFill$(batch).pipe(
-                                    map(
-                                        (imageByKeyFill: { [key: string]: IFillNode }): Node[] => {
-                                            const filledNodes: Node[] = [];
-
-                                            for (const fillKey in imageByKeyFill) {
-                                                if (!imageByKeyFill.hasOwnProperty(fillKey)) {
-                                                    continue;
-                                                }
-
-                                                if (this.hasNode(fillKey)) {
-                                                    const node: Node = this.getNode(fillKey);
-
-                                                    if (!node.full) {
-                                                        this._makeFull(node, imageByKeyFill[fillKey]);
-                                                    }
-
-                                                    filledNodes.push(node);
-                                                }
+                    const fullNodes$ = observableOf(fullNodes);
+                    const fillNodes$ = coreNodeBatches
+                        .map((batch: string[]): Observable<Node[]> => {
+                            return this._api
+                                .getSpatialImages$(batch)
+                                .pipe(
+                                    map((items: SpatialImagesContract)
+                                        : Node[] => {
+                                        const result: Node[] = [];
+                                        for (const item of items) {
+                                            const exists = this
+                                                .hasNode(item.node_id);
+                                            if (!exists) { continue; }
+
+                                            const node = this
+                                                .getNode(item.node_id);
+                                            if (!node.full) {
+                                                this._makeFull(node, item.node);
                                             }
-
-                                            return filledNodes;
-                                        }));
-                            });
+                                            result.push(node);
+                                        }
+                                        return result;
+                                    }));
+                        });
 
                     return observableMerge(
                         fullNodes$,
@@ -431,7 +428,7 @@ export class Graph {
                     if (node.full) {
                         fullNodes.push(node);
                     } else {
-                        coreNodes.push(node.key);
+                        coreNodes.push(node.id);
                     }
                 }
 
@@ -444,24 +441,25 @@ export class Graph {
                 const fullNodes$ = observableOf(fullNodes);
                 const fillNodes$ = coreNodeBatches
                     .map((batch: string[]): Observable<Node[]> => {
-                        return this._api.imageByKeyFill$(batch).pipe(
-                            map((nodes: { [key: string]: IFillNode }):
+                        return this._api.getSpatialImages$(batch).pipe(
+                            map((items: SpatialImagesContract):
                                 Node[] => {
                                 const filled: Node[] = [];
-                                for (const key in nodes) {
-                                    if (!nodes.hasOwnProperty(key)) {
+                                for (const item of items) {
+                                    if (!item.node) {
+                                        console.warn(
+                                            `Node is empty (${item.node})`);
                                         continue;
                                     }
 
-                                    if (!this.hasNode(key)) { continue; }
-
-                                    const node = this.getNode(key);
+                                    const id = item.node_id;
+                                    if (!this.hasNode(id)) { continue; }
+                                    const node = this.getNode(id);
                                     if (!node.full) {
-                                        this._makeFull(node, nodes[key]);
+                                        this._makeFull(node, item.node);
                                     }
                                     filled.push(node);
                                 }
-
                                 return filled;
                             }));
                     });
@@ -499,24 +497,25 @@ export class Graph {
             return this._cachingFill$[key];
         }
 
-        let node: Node = this.getNode(key);
+        const node = this.getNode(key);
         if (node.full) {
             throw new GraphMapillaryError(`Cannot fill node that is already full (${key}).`);
         }
 
-        this._cachingFill$[key] = this._api.imageByKeyFill$([key]).pipe(
+        this._cachingFill$[key] = this._api.getSpatialImages$([key]).pipe(
             tap(
-                (imageByKeyFill: { [key: string]: IFillNode }): void => {
-                    if (!node.full) {
-                        this._makeFull(node, imageByKeyFill[key]);
+                (items: SpatialImagesContract): void => {
+                    for (const item of items) {
+                        if (!item.node) {
+                            console.warn(`Node is empty ${item.node_id}`);
+                        }
+                        if (!node.full) {
+                            this._makeFull(node, item.node);
+                        }
+                        delete this._cachingFill$[item.node_id];
                     }
-
-                    delete this._cachingFill$[key];
-                }),
-            map(
-                (imageByKeyFill: { [key: string]: IFillNode }): Graph => {
-                    return this;
                 }),
+            map((): Graph => { return this; }),
             finalize(
                 (): void => {
                     if (key in this._cachingFill$) {
@@ -549,36 +548,35 @@ export class Graph {
             throw new GraphMapillaryError(`Cannot cache full node that already exist in graph (${key}).`);
         }
 
-        this._cachingFull$[key] = this._api.imageByKeyFull$([key]).pipe(
+        this._cachingFull$[key] = this._api.getImages$([key]).pipe(
             tap(
-                (imageByKeyFull: { [key: string]: IFullNode }): void => {
-                    let fn: IFullNode = imageByKeyFull[key];
-
-                    if (this.hasNode(key)) {
-                        let node: Node = this.getNode(key);
-
-                        if (!node.full) {
-                            this._makeFull(node, fn);
-                        }
-                    } else {
-                        if (fn.sequence_key == null) {
-                            throw new GraphMapillaryError(`Node has no sequence key (${key}).`);
-                        }
+                (items: ImagesContract): void => {
+                    for (const item of items) {
+                        const id = item.node_id;
+                        if (this.hasNode(id)) {
+                            const node = this.getNode(key);
+                            if (!node.full) {
+                                this._makeFull(node, item.node);
+                            }
+                        } else {
+                            if (item.node.sequence.id == null) {
+                                throw new GraphMapillaryError(
+                                    `Node has no sequence key (${key}).`);
+                            }
 
-                        let node: Node = new Node(fn);
-                        this._makeFull(node, fn);
+                            const node = new Node(item.node);
+                            this._makeFull(node, item.node);
 
-                        let h: string = this._api.data.geometry.latLonToCellId(node.originalLatLon);
-                        this._preStore(h, node);
-                        this._setNode(node);
+                            const cellId = this._api.data.geometry
+                                .latLonToCellId(node.originalLatLon);
+                            this._preStore(cellId, node);
+                            this._setNode(node);
 
-                        delete this._cachingFull$[key];
+                            delete this._cachingFull$[id];
+                        }
                     }
                 }),
-            map(
-                (imageByKeyFull: { [key: string]: IFullNode }): Graph => {
-                    return this;
-                }),
+            map((): Graph => this),
             finalize(
                 (): void => {
                     if (key in this._cachingFull$) {
@@ -608,11 +606,11 @@ export class Graph {
         }
 
         let node: Node = this.getNode(key);
-        if (node.sequenceKey in this._sequences) {
-            throw new GraphMapillaryError(`Sequence already cached (${key}), (${node.sequenceKey}).`);
+        if (node.sequenceId in this._sequences) {
+            throw new GraphMapillaryError(`Sequence already cached (${key}), (${node.sequenceId}).`);
         }
 
-        return this._cacheSequence$(node.sequenceKey);
+        return this._cacheSequence$(node.sequenceId);
     }
 
     /**
@@ -642,12 +640,12 @@ export class Graph {
     public cacheSequenceEdges(key: string): void {
         let node: Node = this.getNode(key);
 
-        if (!(node.sequenceKey in this._sequences)) {
-            throw new GraphMapillaryError(`Sequence is not cached (${key}), (${node.sequenceKey})`);
+        if (!(node.sequenceId in this._sequences)) {
+            throw new GraphMapillaryError(`Sequence is not cached (${key}), (${node.sequenceId})`);
         }
 
-        let sequence: Sequence = this._sequences[node.sequenceKey].sequence;
-        let edges: IEdge[] = this._edgeCalculator.computeSequenceEdges(node, sequence);
+        let sequence: Sequence = this._sequences[node.sequenceId].sequence;
+        let edges: NavigationEdge[] = this._edgeCalculator.computeSequenceEdges(node, sequence);
 
         node.cacheSequenceEdges(edges);
     }
@@ -672,12 +670,12 @@ export class Graph {
         }
 
         const sequence: Sequence = this.getSequence(sequenceKey);
-        if (sequence.key in this._cachingSequenceNodes$) {
-            return this._cachingSequenceNodes$[sequence.key];
+        if (sequence.id in this._cachingSequenceNodes$) {
+            return this._cachingSequenceNodes$[sequence.id];
         }
 
         const batches: string[][] = [];
-        const keys: string[] = sequence.keys.slice();
+        const keys: string[] = sequence.imageIds.slice();
 
         const referenceBatchSize: number = 50;
         if (!!referenceNodeKey && keys.length > referenceBatchSize) {
@@ -700,57 +698,54 @@ export class Graph {
         const sequenceNodes$: Observable<Graph> = observableFrom(batches).pipe(
             mergeMap(
                 (batch: string[]): Observable<Graph> => {
-                    return this._api.imageByKeyFull$(batch).pipe(
+                    return this._api.getImages$(batch).pipe(
                         tap(
-                            (imageByKeyFull: { [key: string]: IFullNode }): void => {
-                                for (const fullKey in imageByKeyFull) {
-                                    if (!imageByKeyFull.hasOwnProperty(fullKey)) {
+                            (items: ImagesContract): void => {
+                                for (const item of items) {
+                                    if (!item.node) {
+                                        console.warn(
+                                            `Node empty (${item.node_id})`);
                                         continue;
                                     }
-
-                                    const fn: IFullNode = imageByKeyFull[fullKey];
-
-                                    if (this.hasNode(fullKey)) {
-                                        const node: Node = this.getNode(fn.key);
-
+                                    const id = item.node_id;
+                                    if (this.hasNode(id)) {
+                                        const node = this.getNode(id);
                                         if (!node.full) {
-                                            this._makeFull(node, fn);
+                                            this._makeFull(node, item.node);
                                         }
                                     } else {
-                                        if (fn.sequence_key == null) {
-                                            console.warn(`Sequence missing, discarding node (${fn.key})`);
+                                        if (item.node.sequence.id == null) {
+                                            console.warn(`Sequence missing, discarding node (${item.node_id})`);
                                         }
 
-                                        const node: Node = new Node(fn);
-                                        this._makeFull(node, fn);
+                                        const node = new Node(item.node);
+                                        this._makeFull(node, item.node);
 
-                                        const h: string = this._api.data.geometry.latLonToCellId(node.originalLatLon);
-                                        this._preStore(h, node);
+                                        const cellId = this._api.data.geometry
+                                            .latLonToCellId(node.originalLatLon);
+                                        this._preStore(cellId, node);
                                         this._setNode(node);
                                     }
                                 }
 
                                 batchesToCache--;
                             }),
-                        map(
-                            (imageByKeyFull: { [key: string]: IFullNode }): Graph => {
-                                return this;
-                            }));
+                        map((): Graph => this));
                 },
                 6),
             last(),
             finalize(
                 (): void => {
-                    delete this._cachingSequenceNodes$[sequence.key];
+                    delete this._cachingSequenceNodes$[sequence.id];
 
                     if (batchesToCache === 0) {
-                        this._cachedSequenceNodes[sequence.key] = true;
+                        this._cachedSequenceNodes[sequence.id] = true;
                     }
                 }),
             publish(),
             refCount());
 
-        this._cachingSequenceNodes$[sequence.key] = sequenceNodes$;
+        this._cachingSequenceNodes$[sequence.id] = sequenceNodes$;
 
         return sequenceNodes$;
     }
@@ -795,34 +790,31 @@ export class Graph {
         let spatialNodes$: Observable<Graph>[] = [];
 
         for (let batch of batches) {
-            let spatialNodeBatch$: Observable<Graph> = this._api.imageByKeyFill$(batch).pipe(
+            let spatialNodeBatch$: Observable<Graph> = this._api.getSpatialImages$(batch).pipe(
                 tap(
-                    (imageByKeyFill: { [key: string]: IFillNode }): void => {
-                        for (let fillKey in imageByKeyFill) {
-                            if (!imageByKeyFill.hasOwnProperty(fillKey)) {
+                    (items: SpatialImagesContract): void => {
+                        for (const item of items) {
+                            if (!item.node) {
+                                console.warn(`Node is empty (${item.node_id})`)
                                 continue;
                             }
 
-                            let spatialNode: Node = spatialArea.cacheNodes[fillKey];
+                            const id = item.node_id;
+                            const spatialNode = spatialArea.cacheNodes[id];
                             if (spatialNode.full) {
-                                delete spatialArea.cacheNodes[fillKey];
+                                delete spatialArea.cacheNodes[id];
                                 continue;
                             }
 
-                            let fillNode: IFillNode = imageByKeyFill[fillKey];
-                            this._makeFull(spatialNode, fillNode);
-
-                            delete spatialArea.cacheNodes[fillKey];
+                            this._makeFull(spatialNode, item.node);
+                            delete spatialArea.cacheNodes[id];
                         }
 
                         if (--batchesToCache === 0) {
                             delete this._cachingSpatialArea$[key];
                         }
                     }),
-                map(
-                    (imageByKeyFill: { [key: string]: IFillNode }): Graph => {
-                        return this;
-                    }),
+                map((): Graph => { return this; }),
                 catchError(
                     (error: Error): Observable<Graph> => {
                         for (let batchKey of batch) {
@@ -871,15 +863,15 @@ export class Graph {
         }
 
         let node: Node = this.getNode(key);
-        let sequence: Sequence = this._sequences[node.sequenceKey].sequence;
+        let sequence: Sequence = this._sequences[node.sequenceId].sequence;
 
         let fallbackKeys: string[] = [];
-        let prevKey: string = sequence.findPrevKey(node.key);
+        let prevKey: string = sequence.findPrev(node.id);
         if (prevKey != null) {
             fallbackKeys.push(prevKey);
         }
 
-        let nextKey: string = sequence.findNextKey(node.key);
+        let nextKey: string = sequence.findNext(node.id);
         if (nextKey != null) {
             fallbackKeys.push(nextKey);
         }
@@ -899,10 +891,10 @@ export class Graph {
             }
         }
 
-        let potentialEdges: IPotentialEdge[] =
+        let potentialEdges: PotentialEdge[] =
             this._edgeCalculator.getPotentialEdges(node, potentialNodes, fallbackKeys);
 
-        let edges: IEdge[] =
+        let edges: NavigationEdge[] =
             this._edgeCalculator.computeStepEdges(
                 node,
                 potentialEdges,
@@ -1059,7 +1051,7 @@ export class Graph {
     public isCachingNodeSequence(key: string): boolean {
         let node: Node = this.getNode(key);
 
-        return node.sequenceKey in this._cachingSequences$;
+        return node.sequenceId in this._cachingSequences$;
     }
 
     /**
@@ -1134,7 +1126,7 @@ export class Graph {
      */
     public hasNodeSequence(key: string): boolean {
         let node: Node = this.getNode(key);
-        let sequenceKey: string = node.sequenceKey;
+        let sequenceKey: string = node.sequenceId;
 
         let hasNodeSequence: boolean = sequenceKey in this._sequences;
 
@@ -1195,7 +1187,7 @@ export class Graph {
         }
 
         let node: Node = this.getNode(key);
-        let bbox: [ILatLon, ILatLon] = this._graphCalculator.boundingBoxCorners(node.latLon, this._tileThreshold);
+        let bbox: [LatLon, LatLon] = this._graphCalculator.boundingBoxCorners(node.latLon, this._tileThreshold);
 
         let spatialItems: NodeIndexItem[] = this._nodeIndex.search({
             maxX: bbox[1].lat,
@@ -1211,11 +1203,11 @@ export class Graph {
         };
 
         for (let spatialItem of spatialItems) {
-            spatialNodes.all[spatialItem.node.key] = spatialItem.node;
+            spatialNodes.all[spatialItem.node.id] = spatialItem.node;
 
             if (!spatialItem.node.full) {
-                spatialNodes.cacheKeys.push(spatialItem.node.key);
-                spatialNodes.cacheNodes[spatialItem.node.key] = spatialItem.node;
+                spatialNodes.cacheKeys.push(spatialItem.node.id);
+                spatialNodes.cacheNodes[spatialItem.node.id] = spatialItem.node;
             }
         }
 
@@ -1355,7 +1347,7 @@ export class Graph {
         this._preStored = {};
 
         for (const node of nodes) {
-            this._nodes[node.key] = node;
+            this._nodes[node.id] = node;
 
             const h: string = this._api.data.geometry.latLonToCellId(node.originalLatLon);
             this._preStore(h, node);
@@ -1474,7 +1466,7 @@ export class Graph {
                     continue;
                 }
 
-                if (prestoredNodes[key].sequenceKey === keepSequenceKey) {
+                if (prestoredNodes[key].sequenceId === keepSequenceKey) {
                     continue;
                 }
 
@@ -1494,7 +1486,7 @@ export class Graph {
             .slice(this._configuration.maxUnusedPreStoredNodes)
             .map(
                 ([na, h]: [NodeAccess, string]): [string, string] => {
-                    return [na.node.key, h];
+                    return [na.node.id, h];
                 });
 
         this._uncachePreStored(nonCachedPreStored);
@@ -1518,7 +1510,7 @@ export class Graph {
 
         for (let nodeAccess of uncacheNodes) {
             nodeAccess.node.uncache();
-            let key: string = nodeAccess.node.key;
+            let key: string = nodeAccess.node.id;
             delete this._cachedNodes[key];
 
             if (key in this._cachedNodeTiles) {
@@ -1549,7 +1541,7 @@ export class Graph {
             .slice(this._configuration.maxSequences);
 
         for (let sequenceAccess of uncacheSequences) {
-            let sequenceKey: string = sequenceAccess.sequence.key;
+            let sequenceKey: string = sequenceAccess.sequence.id;
 
             delete this._sequences[sequenceKey];
 
@@ -1621,134 +1613,129 @@ export class Graph {
         }
     }
 
-    private _cacheSequence$(sequenceKey: string): Observable<Graph> {
-        if (sequenceKey in this._cachingSequences$) {
-            return this._cachingSequences$[sequenceKey];
+    private _cacheSequence$(sequenceId: string): Observable<Graph> {
+        if (sequenceId in this._cachingSequences$) {
+            return this._cachingSequences$[sequenceId];
         }
 
-        this._cachingSequences$[sequenceKey] = this._api.sequenceByKey$([sequenceKey]).pipe(
-            tap(
-                (sequenceByKey: { [sequenceKey: string]: ISequence }): void => {
-                    if (!(sequenceKey in this._sequences)) {
-                        this._sequences[sequenceKey] = {
-                            accessed: new Date().getTime(),
-                            sequence: new Sequence(sequenceByKey[sequenceKey]),
-                        };
-                    }
-
-                    delete this._cachingSequences$[sequenceKey];
-                }),
-            map(
-                (sequenceByKey: { [sequenceKey: string]: ISequence }): Graph => {
-                    return this;
-                }),
-            finalize(
-                (): void => {
-                    if (sequenceKey in this._cachingSequences$) {
-                        delete this._cachingSequences$[sequenceKey];
-                    }
-
-                    this._changed$.next(this);
-                }),
-            publish(),
-            refCount());
-
-        return this._cachingSequences$[sequenceKey];
-    }
-
-    private _cacheTile$(h: string): Observable<Graph> {
-        this._cachingTiles$[h] = this._api.imagesByH$(h).pipe(
-            tap(
-                (imagesByH: { [key: string]: { [index: string]: ICoreNode } }): void => {
-                    let coreNodes: { [index: string]: ICoreNode } = imagesByH[h];
-
-                    if (h in this._cachedTiles) {
-                        return;
-                    }
-
-                    this._nodeIndexTiles[h] = [];
-                    this._cachedTiles[h] = { accessed: new Date().getTime(), nodes: [] };
-                    let hCache: Node[] = this._cachedTiles[h].nodes;
-                    let preStored: { [key: string]: Node } = this._removeFromPreStore(h);
+        this._cachingSequences$[sequenceId] = this._api
+            .getSequences$([sequenceId])
+            .pipe(
+                tap(
+                    (sequences: SequencesContract): void => {
+                        for (const sequence of sequences) {
+                            if (!sequence.node) {
+                                console.warn(
+                                    `Sequence does not exist ` +
+                                    `(${sequence.node_id})`);
+                            } else {
+                                if (!(sequence.node_id in this._sequences)) {
+                                    this._sequences[sequence.node_id] = {
+                                        accessed: new Date().getTime(),
+                                        sequence: new Sequence(sequence.node),
+                                    };
+                                }
+                            }
 
-                    for (let index in coreNodes) {
-                        if (!coreNodes.hasOwnProperty(index)) {
-                            continue;
+                            delete this._cachingSequences$[sequenceId];
                         }
 
-                        let coreNode: ICoreNode = coreNodes[index];
 
-                        if (coreNode == null) {
-                            break;
+                    }),
+                map((): Graph => { return this; }),
+                finalize(
+                    (): void => {
+                        if (sequenceId in this._cachingSequences$) {
+                            delete this._cachingSequences$[sequenceId];
                         }
 
-                        if (coreNode.sequence_key == null) {
-                            console.warn(`Sequence missing, discarding node (${coreNode.key})`);
+                        this._changed$.next(this);
+                    }),
+                publish(),
+                refCount());
+
+        return this._cachingSequences$[sequenceId];
+    }
 
+    private _cacheTile$(cellId: string): Observable<Graph> {
+        this._cachingTiles$[cellId] = this._api
+            .getCoreImages$(cellId)
+            .pipe(
+                tap((contract: CoreImagesContract): void => {
+                    if (cellId in this._cachedTiles) {
+                        return;
+                    }
+                    const cores = contract.images;
+                    this._nodeIndexTiles[cellId] = [];
+                    this._cachedTiles[cellId] = {
+                        accessed: new Date().getTime(),
+                        nodes: [],
+                    };
+                    const hCache = this._cachedTiles[cellId].nodes;
+                    const preStored = this._removeFromPreStore(cellId);
+
+                    for (const core of cores) {
+                        if (!core) { break; }
+
+                        if (core.sequence.id == null) {
+                            console.warn(`Sequence missing, discarding ` +
+                                `node (${core.id})`);
                             continue;
                         }
 
-                        if (preStored != null && coreNode.key in preStored) {
-                            let preStoredNode: Node = preStored[coreNode.key];
-                            delete preStored[coreNode.key];
-
+                        if (preStored != null && core.id in preStored) {
+                            const preStoredNode = preStored[core.id];
+                            delete preStored[core.id];
                             hCache.push(preStoredNode);
-
-                            let preStoredNodeIndexItem: NodeIndexItem = {
+                            const preStoredNodeIndexItem: NodeIndexItem = {
                                 lat: preStoredNode.latLon.lat,
                                 lon: preStoredNode.latLon.lon,
                                 node: preStoredNode,
                             };
-
                             this._nodeIndex.insert(preStoredNodeIndexItem);
-                            this._nodeIndexTiles[h].push(preStoredNodeIndexItem);
-                            this._nodeToTile[preStoredNode.key] = h;
-
+                            this._nodeIndexTiles[cellId]
+                                .push(preStoredNodeIndexItem);
+                            this._nodeToTile[preStoredNode.id] = cellId;
                             continue;
                         }
 
-                        let node: Node = new Node(coreNode);
-
+                        const node = new Node(core);
                         hCache.push(node);
-
-                        let nodeIndexItem: NodeIndexItem = {
+                        const nodeIndexItem: NodeIndexItem = {
                             lat: node.latLon.lat,
                             lon: node.latLon.lon,
                             node: node,
                         };
 
                         this._nodeIndex.insert(nodeIndexItem);
-                        this._nodeIndexTiles[h].push(nodeIndexItem);
-                        this._nodeToTile[node.key] = h;
+                        this._nodeIndexTiles[cellId].push(nodeIndexItem);
+                        this._nodeToTile[node.id] = cellId;
 
                         this._setNode(node);
                     }
 
-                    delete this._cachingTiles$[h];
-                }),
-            map(
-                (imagesByH: { [key: string]: { [index: string]: ICoreNode } }): Graph => {
-                    return this;
+                    delete this._cachingTiles$[cellId];
                 }),
-            catchError(
-                (error: Error): Observable<Graph> => {
-                    delete this._cachingTiles$[h];
+                map((): Graph => this),
+                catchError(
+                    (error: Error): Observable<Graph> => {
+                        delete this._cachingTiles$[cellId];
 
-                    throw error;
-                }),
-            publish(),
-            refCount());
+                        throw error;
+                    }),
+                publish(),
+                refCount());
 
-        return this._cachingTiles$[h];
+        return this._cachingTiles$[cellId];
     }
 
-    private _makeFull(node: Node, fillNode: IFillNode): void {
-        if (fillNode.calt == null) {
-            fillNode.calt = this._defaultAlt;
+    private _makeFull(node: Node, fillNode: SpatialImageEnt): void {
+        if (fillNode.computed_altitude == null) {
+            fillNode.computed_altitude = this._defaultAlt;
         }
 
-        if (fillNode.c_rotation == null) {
-            fillNode.c_rotation = this._graphCalculator.rotationFromCompass(fillNode.ca, fillNode.orientation);
+        if (fillNode.computed_rotation == null) {
+            fillNode.computed_rotation = this._graphCalculator.rotationFromCompass(fillNode.compass_angle, fillNode.exif_orientation);
         }
 
         node.makeFull(fillNode);
@@ -1759,7 +1746,7 @@ export class Graph {
             this._preStored[h] = {};
         }
 
-        this._preStored[h][node.key] = node;
+        this._preStored[h][node.id] = node;
     }
 
     private _removeFromPreStore(h: string): { [key: string]: Node } {
@@ -1774,7 +1761,7 @@ export class Graph {
     }
 
     private _setNode(node: Node): void {
-        let key: string = node.key;
+        let key: string = node.id;
 
         if (this.hasNode(key)) {
             throw new GraphMapillaryError(`Node already exist (${key}).`);
@@ -1785,7 +1772,7 @@ export class Graph {
 
     private _uncacheTile(h: string, keepSequenceKey: string): void {
         for (let node of this._cachedTiles[h].nodes) {
-            let key: string = node.key;
+            let key: string = node.id;
 
             delete this._nodeToTile[key];
 
@@ -1801,14 +1788,14 @@ export class Graph {
                 delete this._cachedSpatialEdges[key];
             }
 
-            if (node.sequenceKey === keepSequenceKey) {
+            if (node.sequenceId === keepSequenceKey) {
                 this._preStore(h, node);
                 node.uncache();
             } else {
                 delete this._nodes[key];
 
-                if (node.sequenceKey in this._cachedSequenceNodes) {
-                    delete this._cachedSequenceNodes[node.sequenceKey];
+                if (node.sequenceId in this._cachedSequenceNodes) {
+                    delete this._cachedSequenceNodes[node.sequenceId];
                 }
 
                 node.dispose();
@@ -1836,8 +1823,8 @@ export class Graph {
 
             let node: Node = this._preStored[h][key];
 
-            if (node.sequenceKey in this._cachedSequenceNodes) {
-                delete this._cachedSequenceNodes[node.sequenceKey];
+            if (node.sequenceId in this._cachedSequenceNodes) {
+                delete this._cachedSequenceNodes[node.sequenceId];
             }
 
             delete this._preStored[h][key];
@@ -1871,9 +1858,9 @@ export class Graph {
     }
 
     private _updateCell$(cellId: string): Observable<string> {
-        return this._api.imagesByH$(cellId).pipe(
+        return this._api.getCoreImages$(cellId).pipe(
             mergeMap(
-                (imagesByH: { [key: string]: { [index: string]: ICoreNode } }): Observable<string> => {
+                (contract: CoreImagesContract): Observable<string> => {
                     if (!(cellId in this._cachedTiles)) {
                         return observableEmpty();
                     }
@@ -1885,28 +1872,18 @@ export class Graph {
                     cell.accessed = new Date().getTime();
                     const cellNodes = cell.nodes;
 
-                    const coreNodes = imagesByH[cellId];
-                    for (const index in coreNodes) {
-                        if (!coreNodes.hasOwnProperty(index)) {
-                            continue;
-                        }
-
-                        const coreNode = coreNodes[index];
-                        if (coreNode == null) {
-                            break;
-                        }
-
-                        if (this.hasNode(coreNode.key)) {
-                            continue;
-                        }
+                    const cores = contract.images;
+                    for (const core of cores) {
+                        if (core == null) { break; }
+                        if (this.hasNode(core.id)) { continue; }
 
-                        if (coreNode.sequence_key == null) {
-                            console.warn(`Sequence missing, discarding node ` +
-                                `(${coreNode.key})`);
+                        if (core.sequence.id == null) {
+                            console.warn(`Sequence missing, discarding ` +
+                                `node (${core.id})`);
                             continue;
                         }
 
-                        const node = new Node(coreNode);
+                        const node = new Node(core);
                         cellNodes.push(node);
                         const nodeIndexItem: NodeIndexItem = {
                             lat: node.latLon.lat,
@@ -1915,7 +1892,7 @@ export class Graph {
                         };
                         nodeIndex.insert(nodeIndexItem);
                         nodeIndexCell.push(nodeIndexItem);
-                        nodeToCell[node.key] = cellId;
+                        nodeToCell[node.id] = cellId;
                         this._setNode(node);
                     }
                     return observableOf(cellId);
diff --git a/src/graph/GraphCalculator.ts b/src/graph/GraphCalculator.ts
index 40573ea04..130ef9a2c 100644
--- a/src/graph/GraphCalculator.ts
+++ b/src/graph/GraphCalculator.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { GeoCoords } from "../geo/GeoCoords";
 
 /**
@@ -24,13 +24,13 @@ export class GraphCalculator {
      * Get the bounding box corners for a circle with radius of a threshold
      * with center in a geodetic position.
      *
-     * @param {ILatLon} latlon - Latitude and longitude to encode.
+     * @param {LatLon} latlon - Latitude and longitude to encode.
      * @param {number} threshold - Threshold distance from the position in meters.
      *
-     * @returns {Array<ILatLon>} The south west and north east corners of the
+     * @returns {Array<LatLon>} The south west and north east corners of the
      * bounding box.
      */
-    public boundingBoxCorners(latLon: ILatLon, threshold: number): [ILatLon, ILatLon] {
+    public boundingBoxCorners(latLon: LatLon, threshold: number): [LatLon, LatLon] {
         let bl: number[] =
             this._geoCoords.enuToGeodetic(
                 -threshold,
diff --git a/src/graph/GraphService.ts b/src/graph/GraphService.ts
index aca702273..733b2bbc5 100644
--- a/src/graph/GraphService.ts
+++ b/src/graph/GraphService.ts
@@ -29,9 +29,9 @@ import { GraphMode } from "./GraphMode";
 import { Node } from "./Node";
 import { Sequence } from "./Sequence";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
-import { IDataAddedEvent } from "../api/interfaces/IDataAddedEvent";
+import { DataAddedProviderEvent } from "../api/interfaces/DataAddedProviderEvent";
 
 /**
  * @class GraphService
@@ -135,13 +135,13 @@ export class GraphService {
      * retrieved, {@link cacheNode$} needs to be called for caching
      * assets.
      *
-     * @param {ILatLon} sw - South west corner of bounding box.
-     * @param {ILatLon} ne - North east corner of bounding box.
+     * @param {LatLon} sw - South west corner of bounding box.
+     * @param {LatLon} ne - North east corner of bounding box.
      * @return {Observable<Array<Node>>} Observable emitting a single item,
      * the nodes of the bounding box, when they have all been retrieved.
      * @throws {Error} Propagates any IO node caching errors to the caller.
      */
-    public cacheBoundingBox$(sw: ILatLon, ne: ILatLon): Observable<Node[]> {
+    public cacheBoundingBox$(sw: LatLon, ne: LatLon): Observable<Node[]> {
         return this._graph$.pipe(
             first(),
             mergeMap(
@@ -186,12 +186,12 @@ export class GraphService {
      * retrieved. The sequence and spatial edges may be set before
      * or after the node is returned.
      *
-     * @param {string} key - Key of the node to cache.
+     * @param {string} id - Id of the node to cache.
      * @return {Observable<Node>} Observable emitting a single item,
      * the node, when it has been retrieved and its assets are cached.
      * @throws {Error} Propagates any IO node caching errors to the caller.
      */
-    public cacheNode$(key: string): Observable<Node> {
+    public cacheNode$(id: string): Observable<Node> {
         const firstGraphSubject$: Subject<Graph> = new Subject<Graph>();
 
         this._firstGraphSubjects$.push(firstGraphSubject$);
@@ -203,7 +203,7 @@ export class GraphService {
         const node$: Observable<Node> = firstGraph$.pipe(
             map(
                 (graph: Graph): Node => {
-                    return graph.getNode(key);
+                    return graph.getNode(id);
                 }),
             mergeMap(
                 (node: Node): Observable<Node> => {
@@ -217,7 +217,7 @@ export class GraphService {
         node$.subscribe(
             undefined,
             (error: Error): void => {
-                console.error(`Failed to cache node (${key})`, error);
+                console.error(`Failed to cache node (${id})`, error);
             });
 
         let initializeCacheSubscription: Subscription;
@@ -225,20 +225,20 @@ export class GraphService {
             first(),
             mergeMap(
                 (graph: Graph): Observable<Graph> => {
-                    if (graph.isCachingFull(key) || !graph.hasNode(key)) {
-                        return graph.cacheFull$(key);
+                    if (graph.isCachingFull(id) || !graph.hasNode(id)) {
+                        return graph.cacheFull$(id);
                     }
 
-                    if (graph.isCachingFill(key) || !graph.getNode(key).full) {
-                        return graph.cacheFill$(key);
+                    if (graph.isCachingFill(id) || !graph.getNode(id).full) {
+                        return graph.cacheFill$(id);
                     }
 
                     return observableOf<Graph>(graph);
                 }),
             tap(
                 (graph: Graph): void => {
-                    if (!graph.hasInitializedCache(key)) {
-                        graph.initializeCache(key);
+                    if (!graph.hasInitializedCache(id)) {
+                        graph.initializeCache(id);
                     }
                 }),
             finalize(
@@ -266,8 +266,8 @@ export class GraphService {
         const graphSequence$: Observable<Graph> = firstGraph$.pipe(
             mergeMap(
                 (graph: Graph): Observable<Graph> => {
-                    if (graph.isCachingNodeSequence(key) || !graph.hasNodeSequence(key)) {
-                        return graph.cacheNodeSequence$(key);
+                    if (graph.isCachingNodeSequence(id) || !graph.hasNodeSequence(id)) {
+                        return graph.cacheNodeSequence$(id);
                     }
 
                     return observableOf<Graph>(graph);
@@ -279,8 +279,8 @@ export class GraphService {
         sequenceSubscription = graphSequence$.pipe(
             tap(
                 (graph: Graph): void => {
-                    if (!graph.getNode(key).sequenceEdges.cached) {
-                        graph.cacheSequenceEdges(key);
+                    if (!graph.getNode(id).sequenceEdges.cached) {
+                        graph.cacheSequenceEdges(id);
                     }
                 }),
             finalize(
@@ -294,7 +294,7 @@ export class GraphService {
             .subscribe(
                 (): void => { return; },
                 (error: Error): void => {
-                    console.error(`Failed to cache sequence edges (${key}).`, error);
+                    console.error(`Failed to cache sequence edges (${id}).`, error);
                 });
 
         if (!sequenceSubscription.closed) {
@@ -306,17 +306,17 @@ export class GraphService {
             spatialSubscription = firstGraph$.pipe(
                 expand(
                     (graph: Graph): Observable<Graph> => {
-                        if (graph.hasTiles(key)) {
+                        if (graph.hasTiles(id)) {
                             return observableEmpty();
                         }
 
-                        return observableFrom(graph.cacheTiles$(key)).pipe(
+                        return observableFrom(graph.cacheTiles$(id)).pipe(
                             mergeMap(
                                 (graph$: Observable<Graph>): Observable<Graph> => {
                                     return graph$.pipe(
                                         mergeMap(
                                             (g: Graph): Observable<Graph> => {
-                                                if (g.isCachingTiles(key)) {
+                                                if (g.isCachingTiles(id)) {
                                                     return observableEmpty();
                                                 }
 
@@ -324,7 +324,7 @@ export class GraphService {
                                             }),
                                         catchError(
                                             (error: Error): Observable<Graph> => {
-                                                console.error(`Failed to cache tile data (${key}).`, error);
+                                                console.error(`Failed to cache tile data (${id}).`, error);
 
                                                 return observableEmpty();
                                             }));
@@ -333,17 +333,17 @@ export class GraphService {
                 last(),
                 mergeMap(
                     (graph: Graph): Observable<Graph> => {
-                        if (graph.hasSpatialArea(key)) {
+                        if (graph.hasSpatialArea(id)) {
                             return observableOf<Graph>(graph);
                         }
 
-                        return observableFrom(graph.cacheSpatialArea$(key)).pipe(
+                        return observableFrom(graph.cacheSpatialArea$(id)).pipe(
                             mergeMap(
                                 (graph$: Observable<Graph>): Observable<Graph> => {
                                     return graph$.pipe(
                                         catchError(
                                             (error: Error): Observable<Graph> => {
-                                                console.error(`Failed to cache spatial nodes (${key}).`, error);
+                                                console.error(`Failed to cache spatial nodes (${id}).`, error);
 
                                                 return observableEmpty();
                                             }));
@@ -352,14 +352,14 @@ export class GraphService {
                 last(),
                 mergeMap(
                     (graph: Graph): Observable<Graph> => {
-                        return graph.hasNodeSequence(key) ?
+                        return graph.hasNodeSequence(id) ?
                             observableOf<Graph>(graph) :
-                            graph.cacheNodeSequence$(key);
+                            graph.cacheNodeSequence$(id);
                     }),
                 tap(
                     (graph: Graph): void => {
-                        if (!graph.getNode(key).spatialEdges.cached) {
-                            graph.cacheSpatialEdges(key);
+                        if (!graph.getNode(id).spatialEdges.cached) {
+                            graph.cacheSpatialEdges(id);
                         }
                     }),
                 finalize(
@@ -373,7 +373,7 @@ export class GraphService {
                 .subscribe(
                     (): void => { return; },
                     (error: Error): void => {
-                        console.error(`Failed to cache spatial edges (${key}).`, error);
+                        console.error(`Failed to cache spatial edges (${id}).`, error);
                     });
 
             if (!spatialSubscription.closed) {
@@ -391,25 +391,25 @@ export class GraphService {
     /**
      * Cache a sequence in the graph and retrieve it.
      *
-     * @param {string} sequenceKey - Sequence key.
+     * @param {string} sequenceId - Sequence id.
      * @returns {Observable<Sequence>} Observable emitting a single item,
      * the sequence, when it has been retrieved and its assets are cached.
      * @throws {Error} Propagates any IO node caching errors to the caller.
      */
-    public cacheSequence$(sequenceKey: string): Observable<Sequence> {
+    public cacheSequence$(sequenceId: string): Observable<Sequence> {
         return this._graph$.pipe(
             first(),
             mergeMap(
                 (graph: Graph): Observable<Graph> => {
-                    if (graph.isCachingSequence(sequenceKey) || !graph.hasSequence(sequenceKey)) {
-                        return graph.cacheSequence$(sequenceKey);
+                    if (graph.isCachingSequence(sequenceId) || !graph.hasSequence(sequenceId)) {
+                        return graph.cacheSequence$(sequenceId);
                     }
 
                     return observableOf<Graph>(graph);
                 }),
             map(
                 (graph: Graph): Sequence => {
-                    return graph.getSequence(sequenceKey);
+                    return graph.getSequence(sequenceId);
                 }));
     }
 
@@ -420,36 +420,36 @@ export class GraphService {
      * retrieves all nodes belonging to the sequence. The node assets
      * or edges will not be cached.
      *
-     * @param {string} sequenceKey - Sequence key.
-     * @param {string} referenceNodeKey - Key of node to use as reference
+     * @param {string} sequenceId - Sequence id.
+     * @param {string} referenceNodeId - Id of node to use as reference
      * for optimized caching.
      * @returns {Observable<Sequence>} Observable emitting a single item,
      * the sequence, when it has been retrieved, its assets are cached and
      * all nodes belonging to the sequence has been retrieved.
      * @throws {Error} Propagates any IO node caching errors to the caller.
      */
-    public cacheSequenceNodes$(sequenceKey: string, referenceNodeKey?: string): Observable<Sequence> {
+    public cacheSequenceNodes$(sequenceId: string, referenceNodeId?: string): Observable<Sequence> {
         return this._graph$.pipe(
             first(),
             mergeMap(
                 (graph: Graph): Observable<Graph> => {
-                    if (graph.isCachingSequence(sequenceKey) || !graph.hasSequence(sequenceKey)) {
-                        return graph.cacheSequence$(sequenceKey);
+                    if (graph.isCachingSequence(sequenceId) || !graph.hasSequence(sequenceId)) {
+                        return graph.cacheSequence$(sequenceId);
                     }
 
                     return observableOf<Graph>(graph);
                 }),
             mergeMap(
                 (graph: Graph): Observable<Graph> => {
-                    if (graph.isCachingSequenceNodes(sequenceKey) || !graph.hasSequenceNodes(sequenceKey)) {
-                        return graph.cacheSequenceNodes$(sequenceKey, referenceNodeKey);
+                    if (graph.isCachingSequenceNodes(sequenceId) || !graph.hasSequenceNodes(sequenceId)) {
+                        return graph.cacheSequenceNodes$(sequenceId, referenceNodeId);
                     }
 
                     return observableOf<Graph>(graph);
                 }),
             map(
                 (graph: Graph): Sequence => {
-                    return graph.getSequence(sequenceKey);
+                    return graph.getSequence(sequenceId);
                 }));
     }
 
@@ -518,13 +518,13 @@ export class GraphService {
      * Reset the graph.
      *
      * @description Resets the graph but keeps the nodes of the
-     * supplied keys.
+     * supplied ids.
      *
-     * @param {Array<string>} keepKeys - Keys of nodes to keep in graph.
+     * @param {Array<string>} keepIds - Ids of nodes to keep in graph.
      * @return {Observable<Node>} Observable emitting a single item,
      * the graph, when it has been reset.
      */
-    public reset$(keepKeys: string[]): Observable<void> {
+    public reset$(keepIds: string[]): Observable<void> {
         this._abortSubjects(this._firstGraphSubjects$);
         this._resetSubscriptions(this._initializeCacheSubscriptions);
         this._resetSubscriptions(this._sequenceSubscriptions);
@@ -534,7 +534,7 @@ export class GraphService {
             first(),
             tap(
                 (graph: Graph): void => {
-                    graph.reset(keepKeys);
+                    graph.reset(keepIds);
                 }),
             map(
                 (): void => {
@@ -546,23 +546,23 @@ export class GraphService {
      * Uncache the graph.
      *
      * @description Uncaches the graph by removing tiles, nodes and
-     * sequences. Keeps the nodes of the supplied keys and the tiles
+     * sequences. Keeps the nodes of the supplied ids and the tiles
      * related to those nodes.
      *
-     * @param {Array<string>} keepKeys - Keys of nodes to keep in graph.
-     * @param {string} keepSequenceKey - Optional key of sequence
+     * @param {Array<string>} keepIds - Ids of nodes to keep in graph.
+     * @param {string} keepSequenceId - Optional id of sequence
      * for which the belonging nodes should not be disposed or
      * removed from the graph. These nodes may still be uncached if
-     * not specified in keep keys param.
+     * not specified in keep ids param.
      * @return {Observable<Graph>} Observable emitting a single item,
      * the graph, when the graph has been uncached.
      */
-    public uncache$(keepKeys: string[], keepSequenceKey?: string): Observable<void> {
+    public uncache$(keepIds: string[], keepSequenceId?: string): Observable<void> {
         return this._graph$.pipe(
             first(),
             tap(
                 (graph: Graph): void => {
-                    graph.uncache(keepKeys, keepSequenceKey);
+                    graph.uncache(keepIds, keepSequenceId);
                 }),
             map(
                 (): void => {
@@ -578,7 +578,7 @@ export class GraphService {
         }
     }
 
-    private _onDataAdded = (event: IDataAddedEvent): void => {
+    private _onDataAdded = (event: DataAddedProviderEvent): void => {
         this._graph$
             .pipe(
                 first(),
diff --git a/src/graph/Node.ts b/src/graph/Node.ts
index bb69b17f8..38dda536a 100644
--- a/src/graph/Node.ts
+++ b/src/graph/Node.ts
@@ -2,16 +2,13 @@ import { Observable } from "rxjs";
 import { map } from "rxjs/operators";
 
 import { NodeCache } from "./NodeCache";
-import { IEdge } from "./edge/interfaces/IEdge";
-import { IEdgeStatus } from "./interfaces/IEdgeStatus";
+import { NavigationEdge } from "./edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "./interfaces/NavigationEdgeStatus";
 
-import { ICoreNode } from "../api/interfaces/ICoreNode";
-import { IFillNode } from "../api/interfaces/IFillNode";
-import { ILatLon } from "../api/interfaces/ILatLon";
-import { IMesh } from "../api/interfaces/IMesh";
-import { ImageSize } from "../viewer/ImageSize";
-import { CameraProjectionType } from "../api/interfaces/CameraProjectionType";
-import { isSpherical } from "../geo/Geo";
+import { CoreImageEnt } from "../api/ents/CoreImageEnt";
+import { SpatialImageEnt } from "../api/ents/SpatialImageEnt";
+import { LatLon } from "../api/interfaces/LatLon";
+import { MeshContract } from "../api/contracts/MeshContract";
 
 /**
  * @class Node
@@ -44,8 +41,8 @@ import { isSpherical } from "../geo/Geo";
  */
 export class Node {
     private _cache: NodeCache;
-    private _core: ICoreNode;
-    private _fill: IFillNode;
+    private _core: CoreImageEnt;
+    private _spatial: SpatialImageEnt;
 
     /**
      * Create a new node instance.
@@ -53,13 +50,13 @@ export class Node {
      * @description Nodes are always created internally by the library.
      * Nodes can not be added to the library through any API method.
      *
-     * @param {ICoreNode} coreNode - Raw core node data.
+     * @param {CoreImageEnt} coreNode - Raw core node data.
      * @ignore
      */
-    constructor(core: ICoreNode) {
+    constructor(core: CoreImageEnt) {
         this._cache = null;
         this._core = core;
-        this._fill = null;
+        this._spatial = null;
     }
 
     /**
@@ -77,35 +74,37 @@ export class Node {
      */
     public get assetsCached(): boolean {
         return this._core != null &&
-            this._fill != null &&
+            this._spatial != null &&
             this._cache != null &&
             this._cache.image != null &&
             this._cache.mesh != null;
     }
 
     /**
-     * Get alt.
+     * Get cameraParameters.
      *
-     * @description If SfM has not been run the computed altitude is
-     * set to a default value of two meters.
+     * @description Will be undefined if SfM has
+     * not been run.
      *
-     * @returns {number} Altitude, in meters.
-     */
-    public get alt(): number {
-        return this._fill.calt;
-    }
-
-    /**
-     * Get ca.
+     * Camera type dependent parameters.
      *
-     * @description If the SfM computed compass angle exists it will
-     * be returned, otherwise the original EXIF compass angle.
+     * For perspective and fisheye camera types,
+     * the camera parameters array should be
+     * constructed according to
      *
-     * @returns {number} Compass angle, measured in degrees
-     * clockwise with respect to north.
+     * `[focal, k1, k2]`
+     *
+     * where focal is the camera focal length,
+     * and k1, k2 are radial distortion parameters.
+     *
+     * For spherical camera type the camera
+     * parameters are unset or emtpy array.
+     *
+     * @returns {Array<number>} The parameters
+     * related to the camera type.
      */
-    public get ca(): number {
-        return this._fill.cca != null ? this._fill.cca : this._fill.ca;
+    public get cameraParameters(): number[] {
+        return this._spatial.camera_parameters;
     }
 
     /**
@@ -116,7 +115,7 @@ export class Node {
      * @returns {string} The camera type that captured the image.
      */
     public get cameraType(): string {
-        return this._fill.camera_projection_type;
+        return this._spatial.camera_type;
     }
 
     /**
@@ -125,30 +124,19 @@ export class Node {
      * @returns {number} Timestamp when the image was captured.
      */
     public get capturedAt(): number {
-        return this._fill.captured_at;
+        return this._spatial.captured_at;
     }
 
     /**
-     * Get camera uuid.
+     * Get clusterId.
      *
-     * @description Will be undefined if the camera uuid was not
-     * recorded in the image exif information.
-     *
-     * @returns {string} Universally unique id for camera used
-     * when capturing image.
-     */
-    public get cameraUuid(): string {
-        return this._fill.captured_with_camera_uuid;
-    }
-
-    /**
-     * Get clusterKey.
-     *
-     * @returns {string} Unique key of the SfM cluster to which
+     * @returns {string} Globally unique id of the SfM cluster to which
      * the node belongs.
      */
-    public get clusterKey(): string {
-        return this._fill.cluster_key;
+    public get clusterId(): string {
+        return !!this._spatial.cluster ?
+            this._spatial.cluster.id :
+            null;
     }
 
     /**
@@ -159,43 +147,48 @@ export class Node {
      * @ignore
      */
     public get clusterUrl(): string {
-        return this._fill.cluster_url;
+        return !!this._spatial.cluster ?
+            this._spatial.cluster.url :
+            null;
     }
 
     /**
-     * Get ck1.
+     * Get compassAngle.
      *
-     * @description Will not be set if SfM has not been run.
+     * @description If the SfM computed compass angle exists it will
+     * be returned, otherwise the original EXIF compass angle.
      *
-     * @returns {number} SfM computed radial distortion parameter
-     * k1.
+     * @returns {number} Compass angle, measured in degrees
+     * clockwise with respect to north.
      */
-    public get ck1(): number {
-        return this._fill.ck1;
+    public get compassAngle(): number {
+        return this._spatial.computed_compass_angle != null ?
+            this._spatial.computed_compass_angle :
+            this._spatial.compass_angle;
     }
 
     /**
-     * Get ck2.
+     * Get computedAltitude.
      *
-     * @description Will not be set if SfM has not been run.
+     * @description If SfM has not been run the computed altitude is
+     * set to a default value of two meters.
      *
-     * @returns {number} SfM computed radial distortion parameter
-     * k2.
+     * @returns {number} Altitude, in meters.
      */
-    public get ck2(): number {
-        return this._fill.ck2;
+    public get computedAltitude(): number {
+        return this._spatial.computed_altitude;
     }
 
     /**
-     * Get computedCA.
+     * Get computedCompassAngle.
      *
      * @description Will not be set if SfM has not been run.
      *
      * @returns {number} SfM computed compass angle, measured
      * in degrees clockwise with respect to north.
      */
-    public get computedCA(): number {
-        return this._fill.cca;
+    public get computedCompassAngle(): number {
+        return this._spatial.computed_compass_angle;
     }
 
     /**
@@ -203,22 +196,41 @@ export class Node {
      *
      * @description Will not be set if SfM has not been run.
      *
-     * @returns {ILatLon} SfM computed latitude longitude in WGS84 datum,
+     * @returns {LatLon} SfM computed latitude longitude in WGS84 datum,
      * measured in degrees.
      */
-    public get computedLatLon(): ILatLon {
-        return this._core.cl;
+    public get computedLatLon(): LatLon {
+        return this._core.computed_geometry;
     }
 
     /**
-     * Get focal.
+     * Get userId.
      *
-     * @description Will not be set if SfM has not been run.
+     * @returns {string} Globally unique id of the user who uploaded
+     * the image.
+     */
+    public get creatorId(): string {
+        return this._spatial.creator.id;
+    }
+
+    /**
+     * Get creatorUsername.
+     *
+     * @returns {string} Username of the creator who uploaded
+     * the image.
+     */
+    public get creatorUsername(): string {
+        return this._spatial.creator.username;
+    }
+
+
+    /**
+     * Get exifOrientation.
      *
-     * @returns {number} SfM computed focal length.
+     * @returns {number} EXIF orientation of original image.
      */
-    public get focal(): number {
-        return this._fill.cfocal;
+    public get exifOrientation(): number {
+        return this._spatial.exif_orientation;
     }
 
     /**
@@ -233,7 +245,7 @@ export class Node {
      * @ignore
      */
     public get full(): boolean {
-        return this._fill != null;
+        return this._spatial != null;
     }
 
     /**
@@ -243,7 +255,7 @@ export class Node {
      * for orientation.
      */
     public get height(): number {
-        return this._fill.height;
+        return this._spatial.height;
     }
 
     /**
@@ -270,12 +282,12 @@ export class Node {
     }
 
     /**
-     * Get key.
+     * Get id.
      *
-     * @returns {string} Unique key of the node.
+     * @returns {string} Globally unique id of the node.
      */
-    public get key(): string {
-        return this._core.key;
+    public get id(): string {
+        return this._core.id;
     }
 
     /**
@@ -285,11 +297,13 @@ export class Node {
      * it will be returned, otherwise the original EXIF latitude
      * longitude.
      *
-     * @returns {ILatLon} Latitude longitude in WGS84 datum,
+     * @returns {LatLon} Latitude longitude in WGS84 datum,
      * measured in degrees.
      */
-    public get latLon(): ILatLon {
-        return this._core.cl != null ? this._core.cl : this._core.l;
+    public get latLon(): LatLon {
+        return this._core.computed_geometry != null ?
+            this._core.computed_geometry :
+            this._core.geometry;
     }
 
     /**
@@ -300,22 +314,22 @@ export class Node {
      * connected component.
      */
     public get merged(): boolean {
-        return this._fill != null &&
-            this._fill.merge_version != null &&
-            this._fill.merge_version > 0;
+        return this._spatial != null &&
+            this._spatial.merge_version != null &&
+            this._spatial.merge_version > 0;
     }
 
     /**
-     * Get mergeCC.
+     * Get mergeConnectedComponent.
      *
      * @description Will not be set if SfM has not yet been run on
      * node.
      *
-     * @returns {number} SfM connected component key to which
+     * @returns {number} SfM connected component id to which
      * image belongs.
      */
-    public get mergeCC(): number {
-        return this._fill.merge_cc;
+    public get mergeConnectedComponent(): number {
+        return this._spatial.merge_cc;
     }
 
     /**
@@ -324,7 +338,7 @@ export class Node {
      * @returns {number} Version for which SfM was run and image was merged.
      */
     public get mergeVersion(): number {
-        return this._fill.merge_version;
+        return this._spatial.merge_version;
     }
 
     /**
@@ -332,92 +346,67 @@ export class Node {
      *
      * @description The mesh will always be set on the current node.
      *
-     * @returns {IMesh} SfM triangulated mesh of reconstructed
+     * @returns {MeshContract} SfM triangulated mesh of reconstructed
      * atomic 3D points.
      */
-    public get mesh(): IMesh {
+    public get mesh(): MeshContract {
         return this._cache.mesh;
     }
 
     /**
-     * Get organizationKey.
-     *
-     * @returns {string} Unique key of the organization to which
-     * the node belongs. If the node does not belong to an
-     * organization the organization key will be undefined.
-     */
-    public get organizationKey(): string {
-        return this._fill.organization_key;
-    }
-
-    /**
-     * Get orientation.
-     *
-     * @returns {number} EXIF orientation of original image.
-     */
-    public get orientation(): number {
-        return this._fill.orientation;
-    }
-
-    /**
-     * Get originalAlt.
+     * Get originalAltitude.
      *
      * @returns {number} EXIF altitude, in meters, if available.
      */
-    public get originalAlt(): number {
-        return this._fill.altitude;
+    public get originalAltitude(): number {
+        return this._spatial.altitude;
     }
 
     /**
-     * Get originalCA.
+     * Get originalCompassAngle.
      *
      * @returns {number} Original EXIF compass angle, measured in
      * degrees.
      */
-    public get originalCA(): number {
-        return this._fill.ca;
+    public get originalCompassAngle(): number {
+        return this._spatial.compass_angle;
     }
 
     /**
      * Get originalLatLon.
      *
-     * @returns {ILatLon} Original EXIF latitude longitude in
+     * @returns {LatLon} Original EXIF latitude longitude in
      * WGS84 datum, measured in degrees.
      */
-    public get originalLatLon(): ILatLon {
-        return this._core.l;
+    public get originalLatLon(): LatLon {
+        return this._core.geometry;
     }
 
     /**
-     * Get private.
+     * Get ownerId.
      *
-     * @returns {boolean} Value specifying if image is accessible to
-     * organization members only or to everyone.
+     * @returns {string} Globally unique id of the owner to which
+     * the node belongs. If the node does not belong to an
+     * owner the owner id will be undefined.
      */
-    public get private(): boolean {
-        return this._fill.private;
+    public get ownerId(): string {
+        return !!this._spatial.owner ?
+            this._spatial.owner.id :
+            null;
     }
 
     /**
-     * Get projectKey.
-     *
-     * @returns {string} Unique key of the project to which
-     * the node belongs. If the node does not belong to a
-     * project the project key will be undefined.
-     *
-     * @deprecated This property will be deprecated in favor
-     * of the organization key and private properties.
+     * Get private.
      *
-     * @ignore
+     * @returns {boolean} Value specifying if image is accessible to
+     * organization members only or to everyone.
      */
-    public get projectKey(): string {
-        return this._fill.project != null ?
-            this._fill.project.key :
-            null;
+    public get private(): boolean {
+        return this._spatial.private;
     }
 
     /**
-     * Get quality score.
+     * Get qualityScore.
      *
      * @returns {number} A number between zero and one
      * determining the quality of the image. Blurriness
@@ -426,9 +415,11 @@ export class Node {
      * reflections, bad illumination (exposure, glare),
      * and bad weather condition (fog, rain, snow)
      * affect the quality score.
+     *
+     * @description Value should be on the interval [0, 1].
      */
     public get qualityScore(): number {
-        return this._fill.quality_score;
+        return this._spatial.quality_score;
     }
 
     /**
@@ -439,7 +430,7 @@ export class Node {
      * @returns {Array<number>} Rotation vector in angle axis representation.
      */
     public get rotation(): number[] {
-        return this._fill.c_rotation;
+        return this._spatial.computed_rotation;
     }
 
     /**
@@ -447,31 +438,34 @@ export class Node {
      *
      * @description Will not be set if SfM has not been run.
      *
-     * @returns {number} Scale of atomic reconstruction.
+     * @returns {number} Scale of reconstruction the node
+     * belongs to.
      */
     public get scale(): number {
-        return this._fill.atomic_scale;
+        return this._spatial.atomic_scale;
     }
 
     /**
-     * Get sequenceKey.
+     * Get sequenceId.
      *
-     * @returns {string} Unique key of the sequence to which
-     * the node belongs.
+     * @returns {string} Globally unique id of the sequence
+     * to which the node belongs.
      */
-    public get sequenceKey(): string {
-        return this._core.sequence_key;
+    public get sequenceId(): string {
+        return !!this._core.sequence ?
+            this._core.sequence.id :
+            null;
     }
 
     /**
      * Get sequenceEdges.
      *
-     * @returns {IEdgeStatus} Value describing the status of the
+     * @returns {NavigationEdgeStatus} Value describing the status of the
      * sequence edges.
      *
      * @ignore
      */
-    public get sequenceEdges(): IEdgeStatus {
+    public get sequenceEdges(): NavigationEdgeStatus {
         return this._cache.sequenceEdges;
     }
 
@@ -480,24 +474,24 @@ export class Node {
      *
      * @description Internal observable, should not be used as an API.
      *
-     * @returns {Observable<IEdgeStatus>} Observable emitting
+     * @returns {Observable<NavigationEdgeStatus>} Observable emitting
      * values describing the status of the sequence edges.
      *
      * @ignore
      */
-    public get sequenceEdges$(): Observable<IEdgeStatus> {
+    public get sequenceEdges$(): Observable<NavigationEdgeStatus> {
         return this._cache.sequenceEdges$;
     }
 
     /**
      * Get spatialEdges.
      *
-     * @returns {IEdgeStatus} Value describing the status of the
+     * @returns {NavigationEdgeStatus} Value describing the status of the
      * spatial edges.
      *
      * @ignore
      */
-    public get spatialEdges(): IEdgeStatus {
+    public get spatialEdges(): NavigationEdgeStatus {
         return this._cache.spatialEdges;
     }
 
@@ -506,35 +500,15 @@ export class Node {
      *
      * @description Internal observable, should not be used as an API.
      *
-     * @returns {Observable<IEdgeStatus>} Observable emitting
+     * @returns {Observable<NavigationEdgeStatus>} Observable emitting
      * values describing the status of the spatial edges.
      *
      * @ignore
      */
-    public get spatialEdges$(): Observable<IEdgeStatus> {
+    public get spatialEdges$(): Observable<NavigationEdgeStatus> {
         return this._cache.spatialEdges$;
     }
 
-    /**
-     * Get userKey.
-     *
-     * @returns {string} Unique key of the user who uploaded
-     * the image.
-     */
-    public get userKey(): string {
-        return this._fill.user.key;
-    }
-
-    /**
-     * Get username.
-     *
-     * @returns {string} Username of the user who uploaded
-     * the image.
-     */
-    public get username(): string {
-        return this._fill.user.username;
-    }
-
     /**
      * Get width.
      *
@@ -542,7 +516,7 @@ export class Node {
      * adjusted for orientation.
      */
     public get width(): number {
-        return this._fill.width;
+        return this._spatial.width;
     }
 
     /**
@@ -558,15 +532,9 @@ export class Node {
      */
     public cacheAssets$(): Observable<Node> {
         return this._cache
-            .cacheAssets$(
-                this._fill,
-                isSpherical(this._fill.camera_projection_type),
-                this.merged)
+            .cacheAssets$(this._spatial, this.merged)
             .pipe(
-                map(
-                    (): Node => {
-                        return this;
-                    }));
+                map((): Node => { return this; }));
     }
 
     /**
@@ -580,12 +548,11 @@ export class Node {
      *
      * @ignore
      */
-    public cacheImage$(imageSize: ImageSize): Observable<Node> {
-        return this._cache.cacheImage$(this._fill, imageSize).pipe(
-            map(
-                (): Node => {
-                    return this;
-                }));
+    public cacheImage$(): Observable<Node> {
+        return this._cache
+            .cacheImage$(this._spatial)
+            .pipe(
+                map((): Node => { return this; }));
     }
 
     /**
@@ -594,10 +561,10 @@ export class Node {
      * @description The sequence edges are cached asynchronously
      * internally by the library.
      *
-     * @param {Array<IEdge>} edges - Sequence edges to cache.
+     * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
      * @ignore
      */
-    public cacheSequenceEdges(edges: IEdge[]): void {
+    public cacheSequenceEdges(edges: NavigationEdge[]): void {
         this._cache.cacheSequenceEdges(edges);
     }
 
@@ -607,10 +574,10 @@ export class Node {
      * @description The spatial edges are cached asynchronously
      * internally by the library.
      *
-     * @param {Array<IEdge>} edges - Spatial edges to cache.
+     * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
      * @ignore
      */
-    public cacheSpatialEdges(edges: IEdge[]): void {
+    public cacheSpatialEdges(edges: NavigationEdge[]): void {
         this._cache.cacheSpatialEdges(edges);
     }
 
@@ -627,7 +594,7 @@ export class Node {
         }
 
         this._core = null;
-        this._fill = null;
+        this._spatial = null;
     }
 
     /**
@@ -641,7 +608,7 @@ export class Node {
      */
     public initializeCache(cache: NodeCache): void {
         if (this._cache != null) {
-            throw new Error(`Node cache already initialized (${this.key}).`);
+            throw new Error(`Node cache already initialized (${this.id}).`);
         }
 
         this._cache = cache;
@@ -653,15 +620,15 @@ export class Node {
      * @description The node is filled internally by
      * the library.
      *
-     * @param {IFillNode} fill - The fill node struct.
+     * @param {SpatialImageEnt} fill - The fill node struct.
      * @ignore
      */
-    public makeFull(fill: IFillNode): void {
+    public makeFull(fill: SpatialImageEnt): void {
         if (fill == null) {
             throw new Error("Fill can not be null.");
         }
 
-        this._fill = fill;
+        this._spatial = fill;
     }
 
     /**
diff --git a/src/graph/NodeCache.ts b/src/graph/NodeCache.ts
index 3111e01f1..68020f6ab 100644
--- a/src/graph/NodeCache.ts
+++ b/src/graph/NodeCache.ts
@@ -17,14 +17,12 @@ import {
     tap,
 } from "rxjs/operators";
 
-import { IEdge } from "./edge/interfaces/IEdge";
-import { IEdgeStatus } from "./interfaces/IEdgeStatus";
+import { NavigationEdge } from "./edge/interfaces/NavigationEdge";
+import { NavigationEdgeStatus } from "./interfaces/NavigationEdgeStatus";
 
-import { IMesh } from "../api/interfaces/IMesh";
-import { INodeUrls } from "../api/interfaces/INodeUrls";
-import { Settings } from "../utils/Settings";
-import { ImageSize } from "../viewer/ImageSize";
+import { MeshContract } from "../api/contracts/MeshContract";
 import { DataProviderBase } from "../api/DataProviderBase";
+import { SpatialImageEnt } from "../api/ents/SpatialImageEnt";
 
 /**
  * @class NodeCache
@@ -37,19 +35,19 @@ export class NodeCache {
     private _provider: DataProviderBase;
 
     private _image: HTMLImageElement;
-    private _mesh: IMesh;
-    private _sequenceEdges: IEdgeStatus;
-    private _spatialEdges: IEdgeStatus;
+    private _mesh: MeshContract;
+    private _sequenceEdges: NavigationEdgeStatus;
+    private _spatialEdges: NavigationEdgeStatus;
 
     private _imageAborter: Function;
     private _meshAborter: Function;
 
     private _imageChanged$: Subject<HTMLImageElement>;
     private _image$: Observable<HTMLImageElement>;
-    private _sequenceEdgesChanged$: Subject<IEdgeStatus>;
-    private _sequenceEdges$: Observable<IEdgeStatus>;
-    private _spatialEdgesChanged$: Subject<IEdgeStatus>;
-    private _spatialEdges$: Observable<IEdgeStatus>;
+    private _sequenceEdgesChanged$: Subject<NavigationEdgeStatus>;
+    private _sequenceEdges$: Observable<NavigationEdgeStatus>;
+    private _spatialEdgesChanged$: Subject<NavigationEdgeStatus>;
+    private _spatialEdges$: Observable<NavigationEdgeStatus>;
 
     private _cachingAssets$: Observable<NodeCache>;
 
@@ -78,7 +76,7 @@ export class NodeCache {
 
         this._iamgeSubscription = this._image$.subscribe();
 
-        this._sequenceEdgesChanged$ = new Subject<IEdgeStatus>();
+        this._sequenceEdgesChanged$ = new Subject<NavigationEdgeStatus>();
         this._sequenceEdges$ = this._sequenceEdgesChanged$.pipe(
             startWith(this._sequenceEdges),
             publishReplay(1),
@@ -86,7 +84,7 @@ export class NodeCache {
 
         this._sequenceEdgesSubscription = this._sequenceEdges$.subscribe(() => { /*noop*/ });
 
-        this._spatialEdgesChanged$ = new Subject<IEdgeStatus>();
+        this._spatialEdgesChanged$ = new Subject<NavigationEdgeStatus>();
         this._spatialEdges$ = this._spatialEdgesChanged$.pipe(
             startWith(this._spatialEdges),
             publishReplay(1),
@@ -125,77 +123,75 @@ export class NodeCache {
      * @description Will not be set when assets have not been cached
      * or when the object has been disposed.
      *
-     * @returns {IMesh} SfM triangulated mesh of reconstructed
+     * @returns {MeshContract} SfM triangulated mesh of reconstructed
      * atomic 3D points.
      */
-    public get mesh(): IMesh {
+    public get mesh(): MeshContract {
         return this._mesh;
     }
 
     /**
      * Get sequenceEdges.
      *
-     * @returns {IEdgeStatus} Value describing the status of the
+     * @returns {NavigationEdgeStatus} Value describing the status of the
      * sequence edges.
      */
-    public get sequenceEdges(): IEdgeStatus {
+    public get sequenceEdges(): NavigationEdgeStatus {
         return this._sequenceEdges;
     }
 
     /**
      * Get sequenceEdges$.
      *
-     * @returns {Observable<IEdgeStatus>} Observable emitting
+     * @returns {Observable<NavigationEdgeStatus>} Observable emitting
      * values describing the status of the sequence edges.
      */
-    public get sequenceEdges$(): Observable<IEdgeStatus> {
+    public get sequenceEdges$(): Observable<NavigationEdgeStatus> {
         return this._sequenceEdges$;
     }
 
     /**
      * Get spatialEdges.
      *
-     * @returns {IEdgeStatus} Value describing the status of the
+     * @returns {NavigationEdgeStatus} Value describing the status of the
      * spatial edges.
      */
-    public get spatialEdges(): IEdgeStatus {
+    public get spatialEdges(): NavigationEdgeStatus {
         return this._spatialEdges;
     }
 
     /**
      * Get spatialEdges$.
      *
-     * @returns {Observable<IEdgeStatus>} Observable emitting
+     * @returns {Observable<NavigationEdgeStatus>} Observable emitting
      * values describing the status of the spatial edges.
      */
-    public get spatialEdges$(): Observable<IEdgeStatus> {
+    public get spatialEdges$(): Observable<NavigationEdgeStatus> {
         return this._spatialEdges$;
     }
 
     /**
      * Cache the image and mesh assets.
      *
-     * @param {string} key - Key of the node to cache.
+     * @param {SpatialImageEnt} spatial - Spatial props of the node to cache.
      * @param {boolean} spherical - Value indicating whether node is a spherical.
      * @param {boolean} merged - Value indicating whether node is merged.
      * @returns {Observable<NodeCache>} Observable emitting this node
      * cache whenever the load status has changed and when the mesh or image
      * has been fully loaded.
      */
-    public cacheAssets$(nodeUrls: INodeUrls, spherical: boolean, merged: boolean): Observable<NodeCache> {
+    public cacheAssets$(
+        spatial: SpatialImageEnt,
+        merged: boolean): Observable<NodeCache> {
         if (this._cachingAssets$ != null) {
             return this._cachingAssets$;
         }
 
-        const imageSize: ImageSize = spherical ?
-            Settings.baseSphericalSize :
-            Settings.baseImageSize;
-
         this._cachingAssets$ = observableCombineLatest(
-            this._cacheImage$(nodeUrls, imageSize),
-            this._cacheMesh$(nodeUrls, merged)).pipe(
+            this._cacheImage$(spatial),
+            this._cacheMesh$(spatial, merged)).pipe(
                 map(
-                    ([image, mesh]: [HTMLImageElement, IMesh]): NodeCache => {
+                    ([image, mesh]: [HTMLImageElement, MeshContract]): NodeCache => {
                         this._image = image;
                         this._mesh = mesh;
 
@@ -225,34 +221,32 @@ export class NodeCache {
     /**
      * Cache an image with a higher resolution than the current one.
      *
-     * @param {INodeUrls} nodeUrls - Node URLs.
-     * @param {ImageSize} imageSize - The size to cache.
+     * @param {SpatialImageEnt} spatial - Spatial props.
      * @returns {Observable<NodeCache>} Observable emitting a single item,
      * the node cache, when the image has been cached. If supplied image
      * size is not larger than the current image size the node cache is
      * returned immediately.
      */
-    public cacheImage$(nodeUrls: INodeUrls, imageSize: ImageSize): Observable<NodeCache> {
-        if (this._image != null && imageSize <= Math.max(this._image.width, this._image.height)) {
-            return observableOf<NodeCache>(this);
-        }
-
-        const cacheImage$: Observable<NodeCache> = this._cacheImage$(nodeUrls, imageSize).pipe(
-            first(
-                (image: HTMLImageElement): boolean => {
-                    return !!image;
-                }),
-            tap(
-                (image: HTMLImageElement): void => {
-                    this._disposeImage();
-                    this._image = image;
-                }),
-            map(
-                (): NodeCache => {
-                    return this;
-                }),
-            publishReplay(1),
-            refCount());
+    public cacheImage$(spatial: SpatialImageEnt): Observable<NodeCache> {
+        if (this._image != null) { return observableOf<NodeCache>(this); }
+
+        const cacheImage$ = this._cacheImage$(spatial)
+            .pipe(
+                first(
+                    (image: HTMLImageElement): boolean => {
+                        return !!image;
+                    }),
+                tap(
+                    (image: HTMLImageElement): void => {
+                        this._disposeImage();
+                        this._image = image;
+                    }),
+                map(
+                    (): NodeCache => {
+                        return this;
+                    }),
+                publishReplay(1),
+                refCount());
 
         cacheImage$
             .subscribe(
@@ -267,9 +261,9 @@ export class NodeCache {
     /**
      * Cache the sequence edges.
      *
-     * @param {Array<IEdge>} edges - Sequence edges to cache.
+     * @param {Array<NavigationEdge>} edges - Sequence edges to cache.
      */
-    public cacheSequenceEdges(edges: IEdge[]): void {
+    public cacheSequenceEdges(edges: NavigationEdge[]): void {
         this._sequenceEdges = { cached: true, edges: edges };
         this._sequenceEdgesChanged$.next(this._sequenceEdges);
     }
@@ -277,9 +271,9 @@ export class NodeCache {
     /**
      * Cache the spatial edges.
      *
-     * @param {Array<IEdge>} edges - Spatial edges to cache.
+     * @param {Array<NavigationEdge>} edges - Spatial edges to cache.
      */
-    public cacheSpatialEdges(edges: IEdge[]): void {
+    public cacheSpatialEdges(edges: NavigationEdge[]): void {
         this._spatialEdges = { cached: true, edges: edges };
         this._spatialEdgesChanged$.next(this._spatialEdges);
     }
@@ -338,27 +332,27 @@ export class NodeCache {
     /**
      * Cache the image.
      *
-     * @param {INodeUrls} nodeUrls - Node URLs.
+     * @param {SpatialImageEnt} spatial - Node URLs.
      * @param {boolean} spherical - Value indicating whether node is a spherical.
      * @returns {Observable<ILoadStatusObject<HTMLImageElement>>} Observable
      * emitting a load status object every time the load status changes
      * and completes when the image is fully loaded.
      */
-    private _cacheImage$(nodeUrls: INodeUrls, imageSize: ImageSize): Observable<HTMLImageElement> {
+    private _cacheImage$(spatial: SpatialImageEnt): Observable<HTMLImageElement> {
         return Observable.create(
             (subscriber: Subscriber<HTMLImageElement>): void => {
-                const abort: Promise<void> = new Promise(
+                const abort = new Promise<void>(
                     (_, reject): void => {
                         this._imageAborter = reject;
                     });
 
-                const url: string = this._getThumbUrl(nodeUrls, imageSize);
-                this._provider.getImage(url, abort)
+                const url = spatial.thumb.url
+                this._provider.getImageBuffer(url, abort)
                     .then(
                         (buffer: ArrayBuffer): void => {
                             this._imageAborter = null;
 
-                            const image: HTMLImageElement = new Image();
+                            const image = new Image();
                             image.crossOrigin = "Anonymous";
 
                             image.onload = () => {
@@ -392,15 +386,15 @@ export class NodeCache {
     /**
      * Cache the mesh.
      *
-     * @param {INodeUrls} nodeUrls - Node URLs.
+     * @param {SpatialImageEnt} spatial - Spatial props.
      * @param {boolean} merged - Value indicating whether node is merged.
-     * @returns {Observable<ILoadStatusObject<IMesh>>} Observable emitting
+     * @returns {Observable<ILoadStatusObject<MeshContract>>} Observable emitting
      * a load status object every time the load status changes and completes
      * when the mesh is fully loaded.
      */
-    private _cacheMesh$(nodeUrls: INodeUrls, merged: boolean): Observable<IMesh> {
+    private _cacheMesh$(spatial: SpatialImageEnt, merged: boolean): Observable<MeshContract> {
         return Observable.create(
-            (subscriber: Subscriber<IMesh>): void => {
+            (subscriber: Subscriber<MeshContract>): void => {
                 if (!merged) {
                     subscriber.next(this._createEmptyMesh());
                     subscriber.complete();
@@ -412,9 +406,9 @@ export class NodeCache {
                         this._meshAborter = reject;
                     });
 
-                this._provider.getMesh(nodeUrls.mesh_url, abort)
+                this._provider.getMesh(spatial.mesh.url, abort)
                     .then(
-                        (mesh: IMesh): void => {
+                        (mesh: MeshContract): void => {
                             this._meshAborter = null;
 
                             if (this._disposed) {
@@ -436,10 +430,10 @@ export class NodeCache {
     /**
      * Create a load status object with an empty mesh.
      *
-     * @returns {ILoadStatusObject<IMesh>} Load status object
+     * @returns {ILoadStatusObject<MeshContract>} Load status object
      * with empty mesh.
      */
-    private _createEmptyMesh(): IMesh {
+    private _createEmptyMesh(): MeshContract {
         return { faces: [], vertices: [] };
     }
 
@@ -450,17 +444,4 @@ export class NodeCache {
 
         this._image = null;
     }
-
-    private _getThumbUrl(nodeUrls: INodeUrls, size: ImageSize): string {
-        switch (size) {
-            case ImageSize.Size320:
-                return nodeUrls.thumb320_url;
-            case ImageSize.Size640:
-                return nodeUrls.thumb640_url;
-            case ImageSize.Size1024:
-                return nodeUrls.thumb1024_url;
-            default:
-                return nodeUrls.thumb2048_url;
-        }
-    }
 }
diff --git a/src/graph/Sequence.ts b/src/graph/Sequence.ts
index 9efb21b7b..bb63b6424 100644
--- a/src/graph/Sequence.ts
+++ b/src/graph/Sequence.ts
@@ -1,4 +1,4 @@
-import { ISequence } from "../api/interfaces/ISequence";
+import { SequenceEnt } from "../api/ents/SequenceEnt";
 
 /**
  * @class Sequence
@@ -6,35 +6,35 @@ import { ISequence } from "../api/interfaces/ISequence";
  * @classdesc Represents a sequence of ordered nodes.
  */
 export class Sequence {
-    private _key: string;
-    private _keys: string[];
+    private _id: string;
+    private _imageIds: string[];
 
     /**
      * Create a new sequene instance.
      *
-     * @param {ISequence} sequence - Raw sequence data.
+     * @param {SequenceEnt} sequence - Raw sequence data.
      */
-    constructor(sequence: ISequence) {
-        this._key = sequence.key;
-        this._keys = sequence.keys;
+    constructor(sequence: SequenceEnt) {
+        this._id = sequence.id;
+        this._imageIds = sequence.image_ids;
     }
 
     /**
-     * Get key.
+     * Get id.
      *
-     * @returns {string} Unique sequence key.
+     * @returns {string} Unique sequence id.
      */
-    public get key(): string {
-        return this._key;
+    public get id(): string {
+        return this._id;
     }
 
     /**
-     * Get keys.
+     * Get ids.
      *
-     * @returns {Array<string>} Array of ordered node keys in the sequence.
+     * @returns {Array<string>} Array of ordered node ids in the sequence.
      */
-    public get keys(): string[] {
-        return this._keys;
+    public get imageIds(): string[] {
+        return this._imageIds;
     }
 
     /**
@@ -43,41 +43,41 @@ export class Sequence {
      * @description Disposes all cached assets.
      */
     public dispose(): void {
-        this._key = null;
-        this._keys = null;
+        this._id = null;
+        this._imageIds = null;
     }
 
     /**
-     * Find the next node key in the sequence with respect to
-     * the provided node key.
+     * Find the next node id in the sequence with respect to
+     * the provided node id.
      *
-     * @param {string} key - Reference node key.
-     * @returns {string} Next key in sequence if it exists, null otherwise.
+     * @param {string} id - Reference node id.
+     * @returns {string} Next id in sequence if it exists, null otherwise.
      */
-    public findNextKey(key: string): string {
-        let i: number = this._keys.indexOf(key);
+    public findNext(id: string): string {
+        let i: number = this._imageIds.indexOf(id);
 
-        if ((i + 1) >= this._keys.length || i === -1) {
+        if ((i + 1) >= this._imageIds.length || i === -1) {
             return null;
         } else {
-            return this._keys[i + 1];
+            return this._imageIds[i + 1];
         }
     }
 
     /**
-     * Find the previous node key in the sequence with respect to
-     * the provided node key.
+     * Find the previous node id in the sequence with respect to
+     * the provided node id.
      *
-     * @param {string} key - Reference node key.
-     * @returns {string} Previous key in sequence if it exists, null otherwise.
+     * @param {string} id - Reference node id.
+     * @returns {string} Previous id in sequence if it exists, null otherwise.
      */
-    public findPrevKey(key: string): string {
-        let i: number = this._keys.indexOf(key);
+    public findPrev(id: string): string {
+        let i: number = this._imageIds.indexOf(id);
 
         if (i === 0 || i === -1) {
             return null;
         } else {
-            return this._keys[i - 1];
+            return this._imageIds[i - 1];
         }
     }
 }
diff --git a/src/graph/edge/EdgeCalculator.ts b/src/graph/edge/EdgeCalculator.ts
index 986b4c184..6f46b2157 100644
--- a/src/graph/edge/EdgeCalculator.ts
+++ b/src/graph/edge/EdgeCalculator.ts
@@ -3,12 +3,11 @@ import * as THREE from "three";
 import { EdgeCalculatorCoefficients } from "./EdgeCalculatorCoefficients";
 import { EdgeCalculatorDirections } from "./EdgeCalculatorDirections";
 import { EdgeCalculatorSettings } from "./EdgeCalculatorSettings";
-import { EdgeDirection } from "./EdgeDirection";
-import { IEdge } from "./interfaces/IEdge";
-import { ISpherical } from "./interfaces/ISpherical";
-import { IPotentialEdge } from "./interfaces/IPotentialEdge";
-import { IStep } from "./interfaces/IStep";
-import { ITurn } from "./interfaces/ITurn";
+import { NavigationDirection } from "./NavigationDirection";
+import { NavigationEdge } from "./interfaces/NavigationEdge";
+import { PotentialEdge } from "./interfaces/PotentialEdge";
+import { StepDirection } from "./interfaces/StepDirection";
+import { TurnDirection } from "./interfaces/TurnDirection";
 
 import { Node } from "../Node";
 import { Sequence } from "../Sequence";
@@ -58,11 +57,12 @@ export class EdgeCalculator {
      *
      * @param {Node} node - Source node.
      * @param {Array<Node>} nodes - Potential destination nodes.
-     * @param {Array<string>} fallbackKeys - Keys for destination nodes that should
-     * be returned even if they do not meet the criteria for a potential edge.
+     * @param {Array<string>} fallbackIds - Ids for destination nodes
+     * that should be returned even if they do not meet the
+     * criteria for a potential edge.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public getPotentialEdges(node: Node, potentialNodes: Node[], fallbackKeys: string[]): IPotentialEdge[] {
+    public getPotentialEdges(node: Node, potentialNodes: Node[], fallbackIds: string[]): PotentialEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
@@ -76,27 +76,27 @@ export class EdgeCalculator {
         let currentVerticalDirection: number =
             this._spatial.angleToPlane(currentDirection.toArray(), [0, 0, 1]);
 
-        let potentialEdges: IPotentialEdge[] = [];
+        let potentialEdges: PotentialEdge[] = [];
 
         for (let potential of potentialNodes) {
             if (!potential.merged ||
-                potential.key === node.key) {
+                potential.id === node.id) {
                 continue;
             }
 
             let enu: number[] = this._geoCoords.geodeticToEnu(
                 potential.latLon.lat,
                 potential.latLon.lon,
-                potential.alt,
+                potential.computedAltitude,
                 node.latLon.lat,
                 node.latLon.lon,
-                node.alt);
+                node.computedAltitude);
 
             let motion: THREE.Vector3 = new THREE.Vector3(enu[0], enu[1], enu[2]);
             let distance: number = motion.length();
 
             if (distance > this._settings.maxDistance &&
-                fallbackKeys.indexOf(potential.key) < 0) {
+                fallbackIds.indexOf(potential.id) < 0) {
                 continue;
             }
 
@@ -127,29 +127,29 @@ export class EdgeCalculator {
             let worldMotionAzimuth: number =
                 this._spatial.angleBetweenVector2(1, 0, motion.x, motion.y);
 
-            let sameSequence: boolean = potential.sequenceKey != null &&
-                node.sequenceKey != null &&
-                potential.sequenceKey === node.sequenceKey;
+            let sameSequence: boolean = potential.sequenceId != null &&
+                node.sequenceId != null &&
+                potential.sequenceId === node.sequenceId;
 
             let sameMergeCC: boolean =
-                (potential.mergeCC == null && node.mergeCC == null) ||
-                potential.mergeCC === node.mergeCC;
+                (potential.mergeConnectedComponent == null && node.mergeConnectedComponent == null) ||
+                potential.mergeConnectedComponent === node.mergeConnectedComponent;
 
             let sameUser: boolean =
-                potential.userKey === node.userKey;
+                potential.creatorId === node.creatorId;
 
-            let potentialEdge: IPotentialEdge = {
+            let potentialEdge: PotentialEdge = {
                 capturedAt: potential.capturedAt,
                 directionChange: directionChange,
                 distance: distance,
                 spherical: isSpherical(potential.cameraType),
-                key: potential.key,
+                id: potential.id,
                 motionChange: motionChange,
                 rotation: rotation,
                 sameMergeCC: sameMergeCC,
                 sameSequence: sameSequence,
                 sameUser: sameUser,
-                sequenceKey: potential.sequenceKey,
+                sequenceId: potential.sequenceId,
                 verticalDirectionChange: verticalDirectionChange,
                 verticalMotion: verticalMotion,
                 worldMotionAzimuth: worldMotionAzimuth,
@@ -167,38 +167,38 @@ export class EdgeCalculator {
      * @param {Node} node - Source node.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public computeSequenceEdges(node: Node, sequence: Sequence): IEdge[] {
+    public computeSequenceEdges(node: Node, sequence: Sequence): NavigationEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
 
-        if (node.sequenceKey !== sequence.key) {
+        if (node.sequenceId !== sequence.id) {
             throw new ArgumentMapillaryError("Node and sequence does not correspond.");
         }
 
-        let edges: IEdge[] = [];
+        let edges: NavigationEdge[] = [];
 
-        let nextKey: string = sequence.findNextKey(node.key);
-        if (nextKey != null) {
+        let nextId: string = sequence.findNext(node.id);
+        if (nextId != null) {
             edges.push({
                 data: {
-                    direction: EdgeDirection.Next,
+                    direction: NavigationDirection.Next,
                     worldMotionAzimuth: Number.NaN,
                 },
-                from: node.key,
-                to: nextKey,
+                source: node.id,
+                target: nextId,
             });
         }
 
-        let prevKey: string = sequence.findPrevKey(node.key);
-        if (prevKey != null) {
+        let prevId: string = sequence.findPrev(node.id);
+        if (prevId != null) {
             edges.push({
                 data: {
-                    direction: EdgeDirection.Prev,
+                    direction: NavigationDirection.Prev,
                     worldMotionAzimuth: Number.NaN,
                 },
-                from: node.key,
-                to: prevKey,
+                source: node.id,
+                target: prevId,
             });
         }
 
@@ -213,19 +213,19 @@ export class EdgeCalculator {
      * Similar edges for spherical only target other spherical.
      *
      * @param {Node} node - Source node.
-     * @param {Array<IPotentialEdge>} potentialEdges - Potential edges.
+     * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public computeSimilarEdges(node: Node, potentialEdges: IPotentialEdge[]): IEdge[] {
+    public computeSimilarEdges(node: Node, potentialEdges: PotentialEdge[]): NavigationEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
 
         let nodeSpherical: boolean = isSpherical(node.cameraType);
-        let sequenceGroups: { [key: string]: IPotentialEdge[] } = {};
+        let sequenceGroups: { [key: string]: PotentialEdge[] } = {};
 
         for (let potentialEdge of potentialEdges) {
-            if (potentialEdge.sequenceKey == null) {
+            if (potentialEdge.sequenceId == null) {
                 continue;
             }
 
@@ -254,35 +254,35 @@ export class EdgeCalculator {
                 continue;
             }
 
-            if (sequenceGroups[potentialEdge.sequenceKey] == null) {
-                sequenceGroups[potentialEdge.sequenceKey] = [];
+            if (sequenceGroups[potentialEdge.sequenceId] == null) {
+                sequenceGroups[potentialEdge.sequenceId] = [];
             }
 
-            sequenceGroups[potentialEdge.sequenceKey].push(potentialEdge);
+            sequenceGroups[potentialEdge.sequenceId].push(potentialEdge);
 
         }
 
-        let similarEdges: IPotentialEdge[] = [];
+        let similarEdges: PotentialEdge[] = [];
 
         let calculateScore =
             isSpherical(node.cameraType) ?
-                (potentialEdge: IPotentialEdge): number => {
+                (potentialEdge: PotentialEdge): number => {
                     return potentialEdge.distance;
                 } :
-                (potentialEdge: IPotentialEdge): number => {
+                (potentialEdge: PotentialEdge): number => {
                     return this._coefficients.similarDistance * potentialEdge.distance +
                         this._coefficients.similarRotation * potentialEdge.rotation;
                 };
 
-        for (let sequenceKey in sequenceGroups) {
-            if (!sequenceGroups.hasOwnProperty(sequenceKey)) {
+        for (let sequenceId in sequenceGroups) {
+            if (!sequenceGroups.hasOwnProperty(sequenceId)) {
                 continue;
             }
 
             let lowestScore: number = Number.MAX_VALUE;
-            let similarEdge: IPotentialEdge = null;
+            let similarEdge: PotentialEdge = null;
 
-            for (let potentialEdge of sequenceGroups[sequenceKey]) {
+            for (let potentialEdge of sequenceGroups[sequenceId]) {
                 let score: number = calculateScore(potentialEdge);
 
                 if (score < lowestScore) {
@@ -299,15 +299,15 @@ export class EdgeCalculator {
         }
 
         return similarEdges
-            .map<IEdge>(
-                (potentialEdge: IPotentialEdge): IEdge => {
+            .map<NavigationEdge>(
+                (potentialEdge: PotentialEdge): NavigationEdge => {
                     return {
                         data: {
-                            direction: EdgeDirection.Similar,
+                            direction: NavigationDirection.Similar,
                             worldMotionAzimuth: potentialEdge.worldMotionAzimuth,
                         },
-                        from: node.key,
-                        to: potentialEdge.key,
+                        source: node.id,
+                        target: potentialEdge.id,
                     };
                 });
     }
@@ -319,22 +319,22 @@ export class EdgeCalculator {
      * Returns an empty array for spherical.
      *
      * @param {Node} node - Source node.
-     * @param {Array<IPotentialEdge>} potentialEdges - Potential edges.
-     * @param {string} prevKey - Key of previous node in sequence.
-     * @param {string} prevKey - Key of next node in sequence.
+     * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
+     * @param {string} prevId - Id of previous node in sequence.
+     * @param {string} nextId - Id of next node in sequence.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
     public computeStepEdges(
         node: Node,
-        potentialEdges: IPotentialEdge[],
-        prevKey: string,
-        nextKey: string): IEdge[] {
+        potentialEdges: PotentialEdge[],
+        prevId: string,
+        nextId: string): NavigationEdge[] {
 
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
 
-        let edges: IEdge[] = [];
+        let edges: NavigationEdge[] = [];
 
         if (isSpherical(node.cameraType)) {
             return edges;
@@ -345,11 +345,11 @@ export class EdgeCalculator {
                 continue;
             }
 
-            let step: IStep = this._directions.steps[k];
+            let step: StepDirection = this._directions.steps[k];
 
             let lowestScore: number = Number.MAX_VALUE;
-            let edge: IPotentialEdge = null;
-            let fallback: IPotentialEdge = null;
+            let edge: PotentialEdge = null;
+            let fallback: PotentialEdge = null;
 
             for (let potential of potentialEdges) {
                 if (potential.spherical) {
@@ -371,8 +371,8 @@ export class EdgeCalculator {
                     continue;
                 }
 
-                let potentialKey: string = potential.key;
-                if (step.useFallback && (potentialKey === prevKey || potentialKey === nextKey)) {
+                let potentialId: string = potential.id;
+                if (step.useFallback && (potentialId === prevId || potentialId === nextId)) {
                     fallback = potential;
                 }
 
@@ -406,8 +406,8 @@ export class EdgeCalculator {
                         direction: step.direction,
                         worldMotionAzimuth: edge.worldMotionAzimuth,
                     },
-                    from: node.key,
-                    to: edge.key,
+                    source: node.id,
+                    target: edge.id,
                 });
             }
         }
@@ -422,15 +422,15 @@ export class EdgeCalculator {
      * Returns an empty array for spherical.
      *
      * @param {Node} node - Source node.
-     * @param {Array<IPotentialEdge>} potentialEdges - Potential edges.
+     * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public computeTurnEdges(node: Node, potentialEdges: IPotentialEdge[]): IEdge[] {
+    public computeTurnEdges(node: Node, potentialEdges: PotentialEdge[]): NavigationEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
 
-        let edges: IEdge[] = [];
+        let edges: NavigationEdge[] = [];
 
         if (isSpherical(node.cameraType)) {
             return edges;
@@ -441,10 +441,10 @@ export class EdgeCalculator {
                 continue;
             }
 
-            let turn: ITurn = this._directions.turns[k];
+            let turn: TurnDirection = this._directions.turns[k];
 
             let lowestScore: number = Number.MAX_VALUE;
-            let edge: IPotentialEdge = null;
+            let edge: PotentialEdge = null;
 
             for (let potential of potentialEdges) {
                 if (potential.spherical) {
@@ -456,7 +456,7 @@ export class EdgeCalculator {
                 }
 
                 let rig: boolean =
-                    turn.direction !== EdgeDirection.TurnU &&
+                    turn.direction !== NavigationDirection.TurnU &&
                     potential.distance < this._settings.turnMaxRigDistance &&
                     Math.abs(potential.directionChange) > this._settings.turnMinRigDirectionChange;
 
@@ -502,8 +502,8 @@ export class EdgeCalculator {
                         direction: turn.direction,
                         worldMotionAzimuth: edge.worldMotionAzimuth,
                     },
-                    from: node.key,
-                    to: edge.key,
+                    source: node.id,
+                    target: edge.id,
                 });
             }
         }
@@ -518,10 +518,10 @@ export class EdgeCalculator {
      * spherical nodes. Returns an empty array for spherical.
      *
      * @param {Node} node - Source node.
-     * @param {Array<IPotentialEdge>} potentialEdges - Potential edges.
+     * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public computePerspectiveToSphericalEdges(node: Node, potentialEdges: IPotentialEdge[]): IEdge[] {
+    public computePerspectiveToSphericalEdges(node: Node, potentialEdges: PotentialEdge[]): NavigationEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
@@ -531,7 +531,7 @@ export class EdgeCalculator {
         }
 
         let lowestScore: number = Number.MAX_VALUE;
-        let edge: IPotentialEdge = null;
+        let edge: PotentialEdge = null;
 
         for (let potential of potentialEdges) {
             if (!potential.spherical) {
@@ -558,11 +558,11 @@ export class EdgeCalculator {
         return [
             {
                 data: {
-                    direction: EdgeDirection.Spherical,
+                    direction: NavigationDirection.Spherical,
                     worldMotionAzimuth: edge.worldMotionAzimuth,
                 },
-                from: node.key,
-                to: edge.key,
+                source: node.id,
+                target: edge.id,
             },
         ];
     }
@@ -575,10 +575,10 @@ export class EdgeCalculator {
      * nodes.
      *
      * @param {Node} node - Source node.
-     * @param {Array<IPotentialEdge>} potentialEdges - Potential edges.
+     * @param {Array<PotentialEdge>} potentialEdges - Potential edges.
      * @throws {ArgumentMapillaryError} If node is not full.
      */
-    public computeSphericalEdges(node: Node, potentialEdges: IPotentialEdge[]): IEdge[] {
+    public computeSphericalEdges(node: Node, potentialEdges: PotentialEdge[]): NavigationEdge[] {
         if (!node.full) {
             throw new ArgumentMapillaryError("Node has to be full.");
         }
@@ -587,9 +587,9 @@ export class EdgeCalculator {
             return [];
         }
 
-        let sphericalEdges: IEdge[] = [];
-        let potentialSpherical: IPotentialEdge[] = [];
-        let potentialSteps: [EdgeDirection, IPotentialEdge][] = [];
+        let sphericalEdges: NavigationEdge[] = [];
+        let potentialSpherical: PotentialEdge[] = [];
+        let potentialSteps: [NavigationDirection, PotentialEdge][] = [];
 
         for (let potential of potentialEdges) {
             if (potential.distance > this._settings.sphericalMaxDistance) {
@@ -608,7 +608,7 @@ export class EdgeCalculator {
                         continue;
                     }
 
-                    let spherical: ISpherical = this._directions.spherical[k];
+                    let spherical = this._directions.spherical[k];
 
                     let turn: number = this._spatial.angleDifference(
                         potential.directionChange,
@@ -636,7 +636,7 @@ export class EdgeCalculator {
             let rotation: number = index / this._settings.sphericalMaxItems * 2 * Math.PI;
 
             let lowestScore: number = Number.MAX_VALUE;
-            let edge: IPotentialEdge = null;
+            let edge: PotentialEdge = null;
 
             for (let potential of potentialSpherical) {
                 let motionDifference: number = this._spatial.angleDifference(rotation, potential.motionChange);
@@ -675,11 +675,11 @@ export class EdgeCalculator {
                 occupiedAngles.push(edge.motionChange);
                 sphericalEdges.push({
                     data: {
-                        direction: EdgeDirection.Spherical,
+                        direction: NavigationDirection.Spherical,
                         worldMotionAzimuth: edge.worldMotionAzimuth,
                     },
-                    from: node.key,
-                    to: edge.key,
+                    source: node.id,
+                    target: edge.id,
                 });
             } else {
                 stepAngles.push(rotation);
@@ -687,29 +687,29 @@ export class EdgeCalculator {
         }
 
         let occupiedStepAngles: { [direction: string]: number[] } = {};
-        occupiedStepAngles[EdgeDirection.Spherical] = occupiedAngles;
-        occupiedStepAngles[EdgeDirection.StepForward] = [];
-        occupiedStepAngles[EdgeDirection.StepLeft] = [];
-        occupiedStepAngles[EdgeDirection.StepBackward] = [];
-        occupiedStepAngles[EdgeDirection.StepRight] = [];
+        occupiedStepAngles[NavigationDirection.Spherical] = occupiedAngles;
+        occupiedStepAngles[NavigationDirection.StepForward] = [];
+        occupiedStepAngles[NavigationDirection.StepLeft] = [];
+        occupiedStepAngles[NavigationDirection.StepBackward] = [];
+        occupiedStepAngles[NavigationDirection.StepRight] = [];
 
         for (let stepAngle of stepAngles) {
-            let occupations: [EdgeDirection, IPotentialEdge][] = [];
+            let occupations: [NavigationDirection, PotentialEdge][] = [];
 
             for (let k in this._directions.spherical) {
                 if (!this._directions.spherical.hasOwnProperty(k)) {
                     continue;
                 }
 
-                let spherical: ISpherical = this._directions.spherical[k];
+                let spherical = this._directions.spherical[k];
 
-                let allOccupiedAngles: number[] = occupiedStepAngles[EdgeDirection.Spherical]
+                let allOccupiedAngles: number[] = occupiedStepAngles[NavigationDirection.Spherical]
                     .concat(occupiedStepAngles[spherical.direction])
                     .concat(occupiedStepAngles[spherical.prev])
                     .concat(occupiedStepAngles[spherical.next]);
 
                 let lowestScore: number = Number.MAX_VALUE;
-                let edge: [EdgeDirection, IPotentialEdge] = null;
+                let edge: [NavigationDirection, PotentialEdge] = null;
 
                 for (let potential of potentialSteps) {
                     if (potential[0] !== spherical.direction) {
@@ -755,8 +755,8 @@ export class EdgeCalculator {
                             direction: edge[0],
                             worldMotionAzimuth: edge[1].worldMotionAzimuth,
                         },
-                        from: node.key,
-                        to: edge[1].key,
+                        source: node.id,
+                        target: edge[1].id,
                     });
                 }
             }
diff --git a/src/graph/edge/EdgeCalculatorDirections.ts b/src/graph/edge/EdgeCalculatorDirections.ts
index b5699f136..dfdfe9917 100644
--- a/src/graph/edge/EdgeCalculatorDirections.ts
+++ b/src/graph/edge/EdgeCalculatorDirections.ts
@@ -1,83 +1,83 @@
-import { EdgeDirection } from "./EdgeDirection";
-import { ISpherical } from "./interfaces/ISpherical";
-import { IStep } from "./interfaces/IStep";
-import { ITurn } from "./interfaces/ITurn";
+import { NavigationDirection } from "./NavigationDirection";
+import { SphericalDirection } from "./interfaces/SphericalDirection";
+import { StepDirection } from "./interfaces/StepDirection";
+import { TurnDirection } from "./interfaces/TurnDirection";
 
 export class EdgeCalculatorDirections {
 
-    public steps: { [direction: string]: IStep } = {};
-    public turns: { [direction: string]: ITurn } = {};
-    public spherical: { [direction: string]: ISpherical } = {};
+    public steps: { [direction: string]: StepDirection } = {};
+    public turns: { [direction: string]: TurnDirection } = {};
+    public spherical: { [direction: string]: SphericalDirection } = {};
 
     constructor() {
-        this.steps[EdgeDirection.StepForward] = {
-            direction: EdgeDirection.StepForward,
+        this.steps[NavigationDirection.StepForward] = {
+            direction: NavigationDirection.StepForward,
             motionChange: 0,
             useFallback: true,
         };
 
-        this.steps[EdgeDirection.StepBackward] = {
-            direction: EdgeDirection.StepBackward,
+        this.steps[NavigationDirection.StepBackward] = {
+            direction: NavigationDirection.StepBackward,
             motionChange: Math.PI,
             useFallback: true,
         };
 
-        this.steps[EdgeDirection.StepLeft] = {
-            direction: EdgeDirection.StepLeft,
+        this.steps[NavigationDirection.StepLeft] = {
+            direction: NavigationDirection.StepLeft,
             motionChange: Math.PI / 2,
             useFallback: false,
         };
 
-        this.steps[EdgeDirection.StepRight] = {
-            direction: EdgeDirection.StepRight,
+        this.steps[NavigationDirection.StepRight] = {
+            direction: NavigationDirection.StepRight,
             motionChange: -Math.PI / 2,
             useFallback: false,
         };
 
-        this.turns[EdgeDirection.TurnLeft] = {
-            direction: EdgeDirection.TurnLeft,
+        this.turns[NavigationDirection.TurnLeft] = {
+            direction: NavigationDirection.TurnLeft,
             directionChange: Math.PI / 2,
             motionChange: Math.PI / 4,
         };
 
-        this.turns[EdgeDirection.TurnRight] = {
-            direction: EdgeDirection.TurnRight,
+        this.turns[NavigationDirection.TurnRight] = {
+            direction: NavigationDirection.TurnRight,
             directionChange: -Math.PI / 2,
             motionChange: -Math.PI / 4,
         };
 
-        this.turns[EdgeDirection.TurnU] = {
-            direction: EdgeDirection.TurnU,
+        this.turns[NavigationDirection.TurnU] = {
+            direction: NavigationDirection.TurnU,
             directionChange: Math.PI,
             motionChange: null,
         };
 
-        this.spherical[EdgeDirection.StepForward] = {
-            direction: EdgeDirection.StepForward,
+        this.spherical[NavigationDirection.StepForward] = {
+            direction: NavigationDirection.StepForward,
             directionChange: 0,
-            next: EdgeDirection.StepLeft,
-            prev: EdgeDirection.StepRight,
+            next: NavigationDirection.StepLeft,
+            prev: NavigationDirection.StepRight,
         };
 
-        this.spherical[EdgeDirection.StepBackward] = {
-            direction: EdgeDirection.StepBackward,
+        this.spherical[NavigationDirection.StepBackward] = {
+            direction: NavigationDirection.StepBackward,
             directionChange: Math.PI,
-            next: EdgeDirection.StepRight,
-            prev: EdgeDirection.StepLeft,
+            next: NavigationDirection.StepRight,
+            prev: NavigationDirection.StepLeft,
         };
 
-        this.spherical[EdgeDirection.StepLeft] = {
-            direction: EdgeDirection.StepLeft,
+        this.spherical[NavigationDirection.StepLeft] = {
+            direction: NavigationDirection.StepLeft,
             directionChange: Math.PI / 2,
-            next: EdgeDirection.StepBackward,
-            prev: EdgeDirection.StepForward,
+            next: NavigationDirection.StepBackward,
+            prev: NavigationDirection.StepForward,
         };
 
-        this.spherical[EdgeDirection.StepRight] = {
-            direction: EdgeDirection.StepRight,
+        this.spherical[NavigationDirection.StepRight] = {
+            direction: NavigationDirection.StepRight,
             directionChange: -Math.PI / 2,
-            next: EdgeDirection.StepForward,
-            prev: EdgeDirection.StepBackward,
+            next: NavigationDirection.StepForward,
+            prev: NavigationDirection.StepBackward,
         };
     }
 }
diff --git a/src/graph/edge/EdgeDirection.ts b/src/graph/edge/NavigationDirection.ts
similarity index 96%
rename from src/graph/edge/EdgeDirection.ts
rename to src/graph/edge/NavigationDirection.ts
index 2687b1db1..5e3c216d3 100644
--- a/src/graph/edge/EdgeDirection.ts
+++ b/src/graph/edge/NavigationDirection.ts
@@ -5,7 +5,7 @@
  * @description Directions for edges in node graph describing
  * sequence, spatial and node type relations between nodes.
  */
-export enum EdgeDirection {
+export enum NavigationDirection {
     /**
      * Next node in the sequence.
      */
diff --git a/src/graph/edge/interfaces/IEdge.ts b/src/graph/edge/interfaces/IEdge.ts
deleted file mode 100644
index 74b744b59..000000000
--- a/src/graph/edge/interfaces/IEdge.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { IEdgeData } from "./IEdgeData";
-
-/**
- * Interface that describes the properties for an edge from
- * a source node to a destination node.
- *
- * @interface IEdge
- */
-export interface IEdge {
-    /**
-     * The key of the source node.
-     */
-    from: string;
-
-    /**
-     * The key of the destination node.
-     */
-    to: string;
-
-    /**
-     * Additional data describing properties of the edge.
-     */
-    data: IEdgeData;
-}
diff --git a/src/graph/edge/interfaces/ISpherical.ts b/src/graph/edge/interfaces/ISpherical.ts
deleted file mode 100644
index 8dfa6f9dc..000000000
--- a/src/graph/edge/interfaces/ISpherical.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { EdgeDirection } from "../EdgeDirection";
-
-export interface ISpherical {
-    direction: EdgeDirection;
-    prev: EdgeDirection;
-    next: EdgeDirection;
-    directionChange: number;
-}
diff --git a/src/graph/edge/interfaces/IStep.ts b/src/graph/edge/interfaces/IStep.ts
deleted file mode 100644
index a86fb922f..000000000
--- a/src/graph/edge/interfaces/IStep.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { EdgeDirection } from "../EdgeDirection";
-
-export interface IStep {
-    direction: EdgeDirection;
-    motionChange: number;
-    useFallback: boolean;
-}
diff --git a/src/graph/edge/interfaces/ITurn.ts b/src/graph/edge/interfaces/ITurn.ts
deleted file mode 100644
index 4f775c4f9..000000000
--- a/src/graph/edge/interfaces/ITurn.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { EdgeDirection } from "../EdgeDirection";
-
-export interface ITurn {
-    direction: EdgeDirection;
-    directionChange: number;
-    motionChange?: number;
-}
diff --git a/src/graph/edge/interfaces/NavigationEdge.ts b/src/graph/edge/interfaces/NavigationEdge.ts
new file mode 100644
index 000000000..5fc8e2788
--- /dev/null
+++ b/src/graph/edge/interfaces/NavigationEdge.ts
@@ -0,0 +1,25 @@
+import { NavigationEdgeData } from "./NavigationEdgeData";
+
+/**
+ * Interface that describes the properties for a
+ * navigation edge from a source node to a
+ * target node.
+ *
+ * @interface NavigationEdge
+ */
+export interface NavigationEdge {
+    /**
+     * The id of the source node.
+     */
+    source: string;
+
+    /**
+     * The id of the target node.
+     */
+    target: string;
+
+    /**
+     * Additional data describing properties of the edge.
+     */
+    data: NavigationEdgeData;
+}
diff --git a/src/graph/edge/interfaces/IEdgeData.ts b/src/graph/edge/interfaces/NavigationEdgeData.ts
similarity index 67%
rename from src/graph/edge/interfaces/IEdgeData.ts
rename to src/graph/edge/interfaces/NavigationEdgeData.ts
index 2b333e440..5f626a280 100644
--- a/src/graph/edge/interfaces/IEdgeData.ts
+++ b/src/graph/edge/interfaces/NavigationEdgeData.ts
@@ -1,15 +1,15 @@
-import { EdgeDirection } from "../EdgeDirection";
+import { NavigationDirection } from "../NavigationDirection";
 
 /**
  * Interface that describes additional properties of an edge.
  *
- * @interface IEdgeData
+ * @interface NavigationEdgeData
  */
-export interface IEdgeData {
+export interface NavigationEdgeData {
     /**
      * The edge direction.
      */
-    direction: EdgeDirection;
+    direction: NavigationDirection;
 
     /**
      * The counter clockwise horizontal rotation angle from
diff --git a/src/graph/edge/interfaces/IPotentialEdge.ts b/src/graph/edge/interfaces/PotentialEdge.ts
similarity index 91%
rename from src/graph/edge/interfaces/IPotentialEdge.ts
rename to src/graph/edge/interfaces/PotentialEdge.ts
index 3aee2b7fc..9f4c05faa 100644
--- a/src/graph/edge/interfaces/IPotentialEdge.ts
+++ b/src/graph/edge/interfaces/PotentialEdge.ts
@@ -2,9 +2,9 @@
  * Interface that describes the properties for a node that is the destination of a
  * potential edge from an origin node.
  *
- * @interface IPotentialEdge
+ * @interface PotentialEdge
  */
-export interface IPotentialEdge {
+export interface PotentialEdge {
 
     /**
      * Timestamp when the image was captured.
@@ -31,10 +31,10 @@ export interface IPotentialEdge {
     spherical: boolean;
 
     /**
-     * Unique image key.
-     * @property {string} key
+     * Unique image id.
+     * @property {string} id
      */
-    key: string;
+    id: string;
 
     /**
      * Change in motion with respect to the viewing direction
@@ -73,9 +73,9 @@ export interface IPotentialEdge {
     /**
      * Determines which sequence the destination node of the potential edge
      * belongs to.
-     * @property {string} sequenceKey
+     * @property {string} sequenceId
      */
-    sequenceKey: string;
+    sequenceId: string;
 
     /**
      * Change in viewing direction with respect to the XY-plane.
diff --git a/src/graph/edge/interfaces/SphericalDirection.ts b/src/graph/edge/interfaces/SphericalDirection.ts
new file mode 100644
index 000000000..215340c9b
--- /dev/null
+++ b/src/graph/edge/interfaces/SphericalDirection.ts
@@ -0,0 +1,8 @@
+import { NavigationDirection } from "../NavigationDirection";
+
+export interface SphericalDirection {
+    direction: NavigationDirection;
+    prev: NavigationDirection;
+    next: NavigationDirection;
+    directionChange: number;
+}
diff --git a/src/graph/edge/interfaces/StepDirection.ts b/src/graph/edge/interfaces/StepDirection.ts
new file mode 100644
index 000000000..29cbdc96b
--- /dev/null
+++ b/src/graph/edge/interfaces/StepDirection.ts
@@ -0,0 +1,7 @@
+import { NavigationDirection } from "../NavigationDirection";
+
+export interface StepDirection {
+    direction: NavigationDirection;
+    motionChange: number;
+    useFallback: boolean;
+}
diff --git a/src/graph/edge/interfaces/TurnDirection.ts b/src/graph/edge/interfaces/TurnDirection.ts
new file mode 100644
index 000000000..4e9a912b7
--- /dev/null
+++ b/src/graph/edge/interfaces/TurnDirection.ts
@@ -0,0 +1,7 @@
+import { NavigationDirection } from "../NavigationDirection";
+
+export interface TurnDirection {
+    direction: NavigationDirection;
+    directionChange: number;
+    motionChange?: number;
+}
diff --git a/src/graph/interfaces/IGraphConfiguration.ts b/src/graph/interfaces/GraphConfiguration.ts
similarity index 88%
rename from src/graph/interfaces/IGraphConfiguration.ts
rename to src/graph/interfaces/GraphConfiguration.ts
index 321c37b03..ec670efb0 100644
--- a/src/graph/interfaces/IGraphConfiguration.ts
+++ b/src/graph/interfaces/GraphConfiguration.ts
@@ -1,9 +1,9 @@
 /**
  * Interface for graph configuration.
  *
- * @interface IGraphConfiguration
+ * @interface GraphConfiguration
  */
-export interface IGraphConfiguration {
+export interface GraphConfiguration {
     /**
      * The maximum number of cached sequences left
      * after uncache.
diff --git a/src/graph/interfaces/IEdgeStatus.ts b/src/graph/interfaces/NavigationEdgeStatus.ts
similarity index 70%
rename from src/graph/interfaces/IEdgeStatus.ts
rename to src/graph/interfaces/NavigationEdgeStatus.ts
index 7fbc41382..f0150b8b7 100644
--- a/src/graph/interfaces/IEdgeStatus.ts
+++ b/src/graph/interfaces/NavigationEdgeStatus.ts
@@ -1,11 +1,11 @@
-import { IEdge } from "../edge/interfaces/IEdge";
+import { NavigationEdge } from "../edge/interfaces/NavigationEdge";
 
 /**
  * Interface that indicates edge status.
  *
- * @interface IEdgeStatus
+ * @interface NavigationEdgeStatus
  */
-export interface IEdgeStatus {
+export interface NavigationEdgeStatus {
     /**
      * Value indicating whether the edges have been cached.
      */
@@ -19,5 +19,5 @@ export interface IEdgeStatus {
      * property is true, there will exist edges in the the
      * array if the node has edges.
      */
-    edges: IEdge[];
+    edges: NavigationEdge[];
 }
diff --git a/src/render/DOMRenderer.ts b/src/render/DOMRenderer.ts
index 058087869..1d769230d 100644
--- a/src/render/DOMRenderer.ts
+++ b/src/render/DOMRenderer.ts
@@ -18,59 +18,59 @@ import {
 
 import { RenderMode } from "./RenderMode";
 import { RenderService } from "./RenderService";
-import { ISize } from "./interfaces/ISize";
-import { IVNodeHash } from "./interfaces/IVNodeHash";
+import { ViewportSize } from "./interfaces/ViewportSize";
+import { VirtualNodeHash } from "./interfaces/VirtualNodeHash";
 
-import { IFrame } from "../state/interfaces/IFrame";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
-interface INodePatch {
+interface VirtualNodePatch {
     vnode: vd.VNode;
     vpatch: vd.VPatch[];
 }
 
-interface IVNodeHashes {
+interface VirtualNodeHashes {
     [name: string]: vd.VNode;
 }
 
-interface IOffset {
+interface OffsetStyle {
     bottom: number;
     left: number;
     right: number;
     top: number;
 }
 
-interface IAdaptive {
+interface AdaptiveCanvas {
     elementHeight: number;
     elementWidth: number;
     imageAspect: number;
     renderMode: RenderMode;
 }
 
-interface IAdaptiveOperation {
-    (adaptive: IAdaptive): IAdaptive;
+interface AdaptiveRenderOperation {
+    (adaptive: AdaptiveCanvas): AdaptiveCanvas;
 }
 
 export class DOMRenderer {
     private _renderService: RenderService;
-    private _currentFrame$: Observable<IFrame>;
+    private _currentFrame$: Observable<AnimationFrame>;
 
-    private _adaptiveOperation$: Subject<IAdaptiveOperation> =
-        new Subject<IAdaptiveOperation>();
-    private _offset$: Observable<IOffset>;
+    private _adaptiveOperation$: Subject<AdaptiveRenderOperation> =
+        new Subject<AdaptiveRenderOperation>();
+    private _offset$: Observable<OffsetStyle>;
 
     private _element$: Observable<Element>;
     private _vPatch$: Observable<vd.VPatch[]>;
     private _vNode$: Observable<vd.VNode>;
-    private _render$: Subject<IVNodeHash> = new Subject<IVNodeHash>();
-    private _renderAdaptive$: Subject<IVNodeHash> = new Subject<IVNodeHash>();
+    private _render$: Subject<VirtualNodeHash> = new Subject<VirtualNodeHash>();
+    private _renderAdaptive$: Subject<VirtualNodeHash> = new Subject<VirtualNodeHash>();
 
     private _subscriptions: SubscriptionHolder = new SubscriptionHolder();
 
     constructor(
         element: HTMLElement,
         renderService: RenderService,
-        currentFrame$: Observable<IFrame>) {
+        currentFrame$: Observable<AnimationFrame>) {
         this._renderService = renderService;
         this._currentFrame$ = currentFrame$;
 
@@ -81,7 +81,7 @@ export class DOMRenderer {
 
         this._offset$ = this._adaptiveOperation$.pipe(
             scan(
-                (adaptive: IAdaptive, operation: IAdaptiveOperation): IAdaptive => {
+                (adaptive: AdaptiveCanvas, operation: AdaptiveRenderOperation): AdaptiveCanvas => {
                     return operation(adaptive);
                 },
                 {
@@ -91,11 +91,11 @@ export class DOMRenderer {
                     renderMode: RenderMode.Fill,
                 }),
             filter(
-                (adaptive: IAdaptive): boolean => {
+                (adaptive: AdaptiveCanvas): boolean => {
                     return adaptive.imageAspect > 0 && adaptive.elementWidth > 0 && adaptive.elementHeight > 0;
                 }),
             map(
-                (adaptive: IAdaptive): IOffset => {
+                (adaptive: AdaptiveCanvas): OffsetStyle => {
                     const elementAspect = adaptive.elementWidth / adaptive.elementHeight;
                     const ratio = adaptive.imageAspect / elementAspect;
 
@@ -126,23 +126,23 @@ export class DOMRenderer {
 
         const imageAspectSubscription = this._currentFrame$.pipe(
             filter(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.currentNode != null;
                 }),
             distinctUntilChanged(
                 (k1: string, k2: string): boolean => {
                     return k1 === k2;
                 },
-                (frame: IFrame): string => {
-                    return frame.state.currentNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.currentNode.id;
                 }),
             map(
-                (frame: IFrame): number => {
+                (frame: AnimationFrame): number => {
                     return frame.state.currentTransform.basicAspect;
                 }),
             map(
-                (aspect: number): IAdaptiveOperation => {
-                    return (adaptive: IAdaptive): IAdaptive => {
+                (aspect: number): AdaptiveRenderOperation => {
+                    return (adaptive: AdaptiveCanvas): AdaptiveCanvas => {
                         adaptive.imageAspect = aspect;
 
                         return adaptive;
@@ -153,7 +153,7 @@ export class DOMRenderer {
         const renderAdaptiveSubscription = observableCombineLatest(
             this._renderAdaptive$.pipe(
                 scan(
-                    (vNodeHashes: IVNodeHashes, vNodeHash: IVNodeHash): IVNodeHashes => {
+                    (vNodeHashes: VirtualNodeHashes, vNodeHash: VirtualNodeHash): VirtualNodeHashes => {
                         if (vNodeHash.vnode == null) {
                             delete vNodeHashes[vNodeHash.name];
                         } else {
@@ -164,9 +164,9 @@ export class DOMRenderer {
                     {})),
             this._offset$).pipe(
                 map(
-                    (vo: [IVNodeHashes, IOffset]): IVNodeHash => {
+                    (vo: [VirtualNodeHashes, OffsetStyle]): VirtualNodeHash => {
                         const vNodes: vd.VNode[] = [];
-                        const hashes: IVNodeHashes = vo[0];
+                        const hashes: VirtualNodeHashes = vo[0];
                         for (const name in hashes) {
                             if (!hashes.hasOwnProperty(name)) {
                                 continue;
@@ -197,7 +197,7 @@ export class DOMRenderer {
 
         this._vNode$ = this._render$.pipe(
             scan(
-                (vNodeHashes: IVNodeHashes, vNodeHash: IVNodeHash): IVNodeHashes => {
+                (vNodeHashes: VirtualNodeHashes, vNodeHash: VirtualNodeHash): VirtualNodeHashes => {
                     if (vNodeHash.vnode == null) {
                         delete vNodeHashes[vNodeHash.name];
                     } else {
@@ -208,7 +208,7 @@ export class DOMRenderer {
                 },
                 {}),
             map(
-                (hashes: IVNodeHashes): vd.VNode => {
+                (hashes: VirtualNodeHashes): vd.VNode => {
                     const vNodes: vd.VNode[] = [];
                     for (const name in hashes) {
                         if (!hashes.hasOwnProperty(name)) {
@@ -223,13 +223,13 @@ export class DOMRenderer {
 
         this._vPatch$ = this._vNode$.pipe(
             scan(
-                (nodePatch: INodePatch, vNode: vd.VNode): INodePatch => {
+                (nodePatch: VirtualNodePatch, vNode: vd.VNode): VirtualNodePatch => {
                     nodePatch.vpatch = vd.diff(nodePatch.vnode, vNode);
                     nodePatch.vnode = vNode;
                     return nodePatch;
                 },
                 { vnode: vd.h("div.mapillary-dom-renderer", []), vpatch: null }),
-            pluck<INodePatch, vd.VPatch[]>("vpatch"));
+            pluck<VirtualNodePatch, vd.VPatch[]>("vpatch"));
 
         this._element$ = this._vPatch$.pipe(
             scan(
@@ -246,8 +246,8 @@ export class DOMRenderer {
 
         subs.push(this._renderService.size$.pipe(
             map(
-                (size: ISize): IAdaptiveOperation => {
-                    return (adaptive: IAdaptive): IAdaptive => {
+                (size: ViewportSize): AdaptiveRenderOperation => {
+                    return (adaptive: AdaptiveCanvas): AdaptiveCanvas => {
                         adaptive.elementWidth = size.width;
                         adaptive.elementHeight = size.height;
 
@@ -258,8 +258,8 @@ export class DOMRenderer {
 
         subs.push(this._renderService.renderMode$.pipe(
             map(
-                (renderMode: RenderMode): IAdaptiveOperation => {
-                    return (adaptive: IAdaptive): IAdaptive => {
+                (renderMode: RenderMode): AdaptiveRenderOperation => {
+                    return (adaptive: AdaptiveCanvas): AdaptiveCanvas => {
                         adaptive.renderMode = renderMode;
 
                         return adaptive;
@@ -272,11 +272,11 @@ export class DOMRenderer {
         return this._element$;
     }
 
-    public get render$(): Subject<IVNodeHash> {
+    public get render$(): Subject<VirtualNodeHash> {
         return this._render$;
     }
 
-    public get renderAdaptive$(): Subject<IVNodeHash> {
+    public get renderAdaptive$(): Subject<VirtualNodeHash> {
         return this._renderAdaptive$;
     }
 
diff --git a/src/render/GLRenderStage.ts b/src/render/GLRenderStage.ts
deleted file mode 100644
index 8add4dd5f..000000000
--- a/src/render/GLRenderStage.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export enum GLRenderStage {
-    Background,
-    Foreground,
-}
diff --git a/src/render/GLRenderer.ts b/src/render/GLRenderer.ts
index 62968ec77..0c7e1207f 100644
--- a/src/render/GLRenderer.ts
+++ b/src/render/GLRenderer.ts
@@ -22,57 +22,57 @@ import {
     startWith,
 } from "rxjs/operators";
 
-import { GLRenderStage } from "./GLRenderStage";
+import { RenderPass } from "./RenderPass";
 import { RenderCamera } from "./RenderCamera";
 import { RenderService } from "./RenderService";
-import { IGLRender } from "./interfaces/IGLRender";
-import { IGLRenderFunction } from "./interfaces/IGLRenderFunction";
-import { IGLRenderHash } from "./interfaces/IGLRenderHash";
-import { ISize } from "./interfaces/ISize";
+import { GLFrameRenderer } from "./interfaces/GLFrameRenderer";
+import { GLRenderFunction } from "./interfaces/GLRenderFunction";
+import { GLRenderHash } from "./interfaces/IGLRenderHash";
+import { ViewportSize } from "./interfaces/ViewportSize";
 
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
-interface IGLRenderer {
+interface GLRendererStatus {
     needsRender: boolean;
     renderer: THREE.WebGLRenderer;
 }
 
-interface IRenderCamera {
+interface GLRenderCamera {
     frameId: number;
     needsRender: boolean;
     perspective: THREE.PerspectiveCamera;
 }
 
-interface IGLRenderHashes {
-    [name: string]: IGLRender;
+interface GLRenderHashes {
+    [name: string]: GLFrameRenderer;
 }
 
-interface IForce {
+interface ForceRenderer {
     needsRender: boolean;
 }
 
-interface IGLRendererOperation {
-    (renderer: IGLRenderer): IGLRenderer;
+interface GLRendererOperation {
+    (renderer: GLRendererStatus): GLRendererStatus;
 }
 
-interface IRenderCameraOperation {
-    (camera: IRenderCamera): IRenderCamera;
+interface GLRenderCameraOperation {
+    (camera: GLRenderCamera): GLRenderCamera;
 }
 
-interface IGLRenderHashesOperation extends Function {
-    (hashes: IGLRenderHashes): IGLRenderHashes;
+interface GLRenderHashesOperation extends Function {
+    (hashes: GLRenderHashes): GLRenderHashes;
 }
 
-interface IForceOperation {
-    (forcer: IForce): IForce;
+interface ForceRendererOperation {
+    (forcer: ForceRenderer): ForceRenderer;
 }
 
-interface ICombination {
-    camera: IRenderCamera;
-    eraser: IForce;
-    trigger: IForce;
-    renderer: IGLRenderer;
-    renders: IGLRender[];
+interface GLRendererCombination {
+    camera: GLRenderCamera;
+    eraser: ForceRenderer;
+    trigger: ForceRenderer;
+    renderer: GLRendererStatus;
+    renders: GLFrameRenderer[];
 }
 
 export class GLRenderer {
@@ -81,31 +81,31 @@ export class GLRenderer {
     private _renderFrame$: Subject<RenderCamera> =
         new Subject<RenderCamera>();
 
-    private _renderCameraOperation$: Subject<IRenderCameraOperation> =
-        new Subject<IRenderCameraOperation>();
-    private _renderCamera$: Observable<IRenderCamera>;
+    private _renderCameraOperation$: Subject<GLRenderCameraOperation> =
+        new Subject<GLRenderCameraOperation>();
+    private _renderCamera$: Observable<GLRenderCamera>;
 
-    private _render$: Subject<IGLRenderHash> = new Subject<IGLRenderHash>();
+    private _render$: Subject<GLRenderHash> = new Subject<GLRenderHash>();
     private _clear$: Subject<string> = new Subject<string>();
-    private _renderOperation$: Subject<IGLRenderHashesOperation> =
-        new Subject<IGLRenderHashesOperation>();
-    private _renderCollection$: Observable<IGLRenderHashes>;
+    private _renderOperation$: Subject<GLRenderHashesOperation> =
+        new Subject<GLRenderHashesOperation>();
+    private _renderCollection$: Observable<GLRenderHashes>;
 
-    private _rendererOperation$: Subject<IGLRendererOperation> =
-        new Subject<IGLRendererOperation>();
-    private _renderer$: Observable<IGLRenderer>;
+    private _rendererOperation$: Subject<GLRendererOperation> =
+        new Subject<GLRendererOperation>();
+    private _renderer$: Observable<GLRendererStatus>;
 
-    private _eraserOperation$: Subject<IForceOperation> = new Subject<IForceOperation>();
-    private _eraser$: Observable<IForce>;
+    private _eraserOperation$: Subject<ForceRendererOperation> = new Subject<ForceRendererOperation>();
+    private _eraser$: Observable<ForceRenderer>;
 
-    private _triggerOperation$: Subject<IForceOperation> = new Subject<IForceOperation>();
+    private _triggerOperation$: Subject<ForceRendererOperation> = new Subject<ForceRendererOperation>();
 
     private _webGLRenderer$: Observable<THREE.WebGLRenderer>;
 
     private _renderFrameSubscription: Subscription;
     private _subscriptions: SubscriptionHolder = new SubscriptionHolder();
 
-    private _postrender$: Subject<void> = new Subject<void>();
+    private _opaqueRender$: Subject<void> = new Subject<void>();
 
     constructor(
         canvas: HTMLCanvasElement,
@@ -116,18 +116,18 @@ export class GLRenderer {
 
         this._renderer$ = this._rendererOperation$.pipe(
             scan(
-                (renderer: IGLRenderer, operation: IGLRendererOperation): IGLRenderer => {
+                (renderer: GLRendererStatus, operation: GLRendererOperation): GLRendererStatus => {
                     return operation(renderer);
                 },
                 { needsRender: false, renderer: null }),
             filter(
-                (renderer: IGLRenderer): boolean => {
+                (renderer: GLRendererStatus): boolean => {
                     return !!renderer.renderer;
                 }));
 
         this._renderCollection$ = this._renderOperation$.pipe(
             scan(
-                (hashes: IGLRenderHashes, operation: IGLRenderHashesOperation): IGLRenderHashes => {
+                (hashes: GLRenderHashes, operation: GLRenderHashesOperation): GLRenderHashes => {
                     return operation(hashes);
                 },
                 {}),
@@ -135,29 +135,29 @@ export class GLRenderer {
 
         this._renderCamera$ = this._renderCameraOperation$.pipe(
             scan(
-                (rc: IRenderCamera, operation: IRenderCameraOperation): IRenderCamera => {
+                (rc: GLRenderCamera, operation: GLRenderCameraOperation): GLRenderCamera => {
                     return operation(rc);
                 },
                 { frameId: -1, needsRender: false, perspective: null }));
 
         this._eraser$ = this._eraserOperation$.pipe(
             startWith(
-                (eraser: IForce): IForce => {
+                (eraser: ForceRenderer): ForceRenderer => {
                     return eraser;
                 }),
             scan(
-                (eraser: IForce, operation: IForceOperation): IForce => {
+                (eraser: ForceRenderer, operation: ForceRendererOperation): ForceRenderer => {
                     return operation(eraser);
                 },
                 { needsRender: false }));
 
         const trigger$ = this._triggerOperation$.pipe(
             startWith(
-                (trigger: IForce): IForce => {
+                (trigger: ForceRenderer): ForceRenderer => {
                     return trigger;
                 }),
             scan(
-                (trigger: IForce, operation: IForceOperation): IForce => {
+                (trigger: ForceRenderer, operation: ForceRendererOperation): ForceRenderer => {
                     return operation(trigger);
                 },
                 { needsRender: false }));
@@ -171,16 +171,16 @@ export class GLRenderer {
             trigger$).pipe(
                 map(
                     ([renderer, hashes, rc, eraser, trigger]:
-                        [IGLRenderer, IGLRenderHashes, IRenderCamera, IForce, IForce]): ICombination => {
-                        const renders: IGLRender[] = Object.keys(hashes)
-                            .map((key: string): IGLRender => {
+                        [GLRendererStatus, GLRenderHashes, GLRenderCamera, ForceRenderer, ForceRenderer]): GLRendererCombination => {
+                        const renders: GLFrameRenderer[] = Object.keys(hashes)
+                            .map((key: string): GLFrameRenderer => {
                                 return hashes[key];
                             });
 
                         return { camera: rc, eraser: eraser, trigger: trigger, renderer: renderer, renders: renders };
                     }),
                 filter(
-                    (co: ICombination): boolean => {
+                    (co: GLRendererCombination): boolean => {
                         let needsRender: boolean =
                             co.renderer.needsRender ||
                             co.camera.needsRender ||
@@ -203,12 +203,12 @@ export class GLRenderer {
                     (n1: number, n2: number): boolean => {
                         return n1 === n2;
                     },
-                    (co: ICombination): number => {
+                    (co: GLRendererCombination): number => {
                         return co.eraser.needsRender ||
                             co.trigger.needsRender ? -co.camera.frameId : co.camera.frameId;
                     }))
             .subscribe(
-                (co: ICombination): void => {
+                (co: GLRendererCombination): void => {
                     co.renderer.needsRender = false;
                     co.camera.needsRender = false;
                     co.eraser.needsRender = false;
@@ -216,14 +216,14 @@ export class GLRenderer {
 
                     const perspectiveCamera = co.camera.perspective;
 
-                    const backgroundRenders: IGLRenderFunction[] = [];
-                    const foregroundRenders: IGLRenderFunction[] = [];
+                    const backgroundRenders: GLRenderFunction[] = [];
+                    const opaqueRenders: GLRenderFunction[] = [];
 
                     for (const render of co.renders) {
-                        if (render.stage === GLRenderStage.Background) {
+                        if (render.pass === RenderPass.Background) {
                             backgroundRenders.push(render.render);
-                        } else if (render.stage === GLRenderStage.Foreground) {
-                            foregroundRenders.push(render.render);
+                        } else if (render.pass === RenderPass.Opaque) {
+                            opaqueRenders.push(render.render);
                         }
                     }
 
@@ -232,24 +232,24 @@ export class GLRenderer {
                     renderer.setClearColor(clearColor, 1.0);
                     renderer.clear();
 
-                    for (const render of backgroundRenders) {
-                        render(perspectiveCamera, renderer);
+                    for (const renderBackground of backgroundRenders) {
+                        renderBackground(perspectiveCamera, renderer);
                     }
 
                     renderer.clearDepth();
 
-                    for (const render of foregroundRenders) {
-                        render(perspectiveCamera, renderer);
+                    for (const renderOpaque of opaqueRenders) {
+                        renderOpaque(perspectiveCamera, renderer);
                     }
 
-                    this._postrender$.next();
+                    this._opaqueRender$.next();
                 });
 
         subs.push(renderSubscription);
         subs.push(this._renderFrame$.pipe(
             map(
-                (rc: RenderCamera): IRenderCameraOperation => {
-                    return (irc: IRenderCamera): IRenderCamera => {
+                (rc: RenderCamera): GLRenderCameraOperation => {
+                    return (irc: GLRenderCamera): GLRenderCamera => {
                         irc.frameId = rc.frameId;
                         irc.perspective = rc.perspective;
 
@@ -266,9 +266,9 @@ export class GLRenderer {
 
         const renderHash$ = this._render$.pipe(
             map(
-                (hash: IGLRenderHash) => {
-                    return (hashes: IGLRenderHashes): IGLRenderHashes => {
-                        hashes[hash.name] = hash.render;
+                (hash: GLRenderHash) => {
+                    return (hashes: GLRenderHashes): GLRenderHashes => {
+                        hashes[hash.name] = hash.renderer;
 
                         return hashes;
                     };
@@ -277,7 +277,7 @@ export class GLRenderer {
         const clearHash$ = this._clear$.pipe(
             map(
                 (name: string) => {
-                    return (hashes: IGLRenderHashes): IGLRenderHashes => {
+                    return (hashes: GLRenderHashes): GLRenderHashes => {
                         delete hashes[name];
 
                         return hashes;
@@ -309,8 +309,8 @@ export class GLRenderer {
         const createRenderer$ = this._webGLRenderer$.pipe(
             first(),
             map(
-                (webGLRenderer: THREE.WebGLRenderer): IGLRendererOperation => {
-                    return (renderer: IGLRenderer): IGLRenderer => {
+                (webGLRenderer: THREE.WebGLRenderer): GLRendererOperation => {
+                    return (renderer: GLRendererStatus): GLRendererStatus => {
                         renderer.needsRender = true;
                         renderer.renderer = webGLRenderer;
 
@@ -320,8 +320,8 @@ export class GLRenderer {
 
         const resizeRenderer$ = this._renderService.size$.pipe(
             map(
-                (size: ISize): IGLRendererOperation => {
-                    return (renderer: IGLRenderer): IGLRenderer => {
+                (size: ViewportSize): GLRendererOperation => {
+                    return (renderer: GLRendererStatus): GLRendererStatus => {
                         if (renderer.renderer == null) {
                             return renderer;
                         }
@@ -336,7 +336,7 @@ export class GLRenderer {
         const clearRenderer$ = this._clear$.pipe(
             map(
                 () => {
-                    return (renderer: IGLRenderer): IGLRenderer => {
+                    return (renderer: GLRendererStatus): GLRendererStatus => {
                         if (renderer.renderer == null) {
                             return renderer;
                         }
@@ -355,7 +355,7 @@ export class GLRenderer {
 
         const renderCollectionEmpty$ = this._renderCollection$.pipe(
             filter(
-                (hashes: IGLRenderHashes): boolean => {
+                (hashes: GLRenderHashes): boolean => {
                     return Object.keys(hashes).length === 0;
                 }),
             share());
@@ -375,8 +375,8 @@ export class GLRenderer {
 
         subs.push(renderCollectionEmpty$.pipe(
             map(
-                (): IForceOperation => {
-                    return (eraser: IForce): IForce => {
+                (): ForceRendererOperation => {
+                    return (eraser: ForceRenderer): ForceRenderer => {
                         eraser.needsRender = true;
 
                         return eraser;
@@ -385,12 +385,12 @@ export class GLRenderer {
             .subscribe(this._eraserOperation$));
     }
 
-    public get render$(): Subject<IGLRenderHash> {
+    public get render$(): Subject<GLRenderHash> {
         return this._render$;
     }
 
-    public get postrender$(): Observable<void> {
-        return this._postrender$;
+    public get opaqueRender$(): Observable<void> {
+        return this._opaqueRender$;
     }
 
     public get webGLRenderer$(): Observable<THREE.WebGLRenderer> {
@@ -403,7 +403,7 @@ export class GLRenderer {
 
     public remove(): void {
         this._rendererOperation$.next(
-            (renderer: IGLRenderer): IGLRenderer => {
+            (renderer: GLRendererStatus): GLRendererStatus => {
                 if (renderer.renderer != null) {
                     const extension = renderer.renderer
                         .getContext()
@@ -433,7 +433,7 @@ export class GLRenderer {
             .subscribe(
                 (): void => {
                     this._triggerOperation$.next(
-                        (trigger: IForce): IForce => {
+                        (trigger: ForceRenderer): ForceRenderer => {
                             trigger.needsRender = true;
                             return trigger;
                         });
@@ -444,15 +444,15 @@ export class GLRenderer {
         this._render$.pipe(
             first(),
             map(
-                (): IRenderCameraOperation => {
-                    return (irc: IRenderCamera): IRenderCamera => {
+                (): GLRenderCameraOperation => {
+                    return (irc: GLRenderCamera): GLRenderCamera => {
                         irc.needsRender = true;
 
                         return irc;
                     };
                 }))
             .subscribe(
-                (operation: IRenderCameraOperation): void => {
+                (operation: GLRenderCameraOperation): void => {
                     this._renderCameraOperation$.next(operation);
                 });
 
diff --git a/src/render/RenderCamera.ts b/src/render/RenderCamera.ts
index b80e5722c..34d301471 100644
--- a/src/render/RenderCamera.ts
+++ b/src/render/RenderCamera.ts
@@ -3,16 +3,16 @@ import * as THREE from "three";
 import * as Geo from "../geo/Geo";
 
 import { RenderMode } from "./RenderMode";
-import { ISize } from "./interfaces/ISize";
+import { ViewportSize } from "./interfaces/ViewportSize";
 
 import { Camera } from "../geo/Camera";
 import { Spatial } from "../geo/Spatial";
 import { Transform } from "../geo/Transform";
 import { ViewportCoords } from "../geo/ViewportCoords";
 import { State } from "../state/State";
-import { ICurrentState } from "../state/interfaces/ICurrentState";
-import { IFrame } from "../state/interfaces/IFrame";
-import { IRotation } from "../state/interfaces/IRotation";
+import { IAnimationState } from "../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
+import { EulerRotation } from "../state/interfaces/EulerRotation";
 import { isSpherical } from "../geo/Geo";
 
 export class RenderCamera {
@@ -27,7 +27,7 @@ export class RenderCamera {
     private _camera: Camera;
     private _perspective: THREE.PerspectiveCamera;
 
-    private _rotation: IRotation;
+    private _rotation: EulerRotation;
 
     private _changed: boolean;
     private _changedForFrame: number;
@@ -114,7 +114,7 @@ export class RenderCamera {
         return this._renderMode;
     }
 
-    public get rotation(): IRotation {
+    public get rotation(): EulerRotation {
         return this._rotation;
     }
 
@@ -142,8 +142,8 @@ export class RenderCamera {
         return zoom;
     }
 
-    public setFrame(frame: IFrame): void {
-        const state: ICurrentState = frame.state;
+    public setFrame(frame: AnimationFrame): void {
+        const state: IAnimationState = frame.state;
 
         if (state.state !== this._state) {
             this._state = state.state;
@@ -151,8 +151,8 @@ export class RenderCamera {
             this._changed = true;
         }
 
-        const currentNodeId: string = state.currentNode.key;
-        const previousNodeId: string = !!state.previousNode ? state.previousNode.key : null;
+        const currentNodeId: string = state.currentNode.id;
+        const previousNodeId: string = !!state.previousNode ? state.previousNode.id : null;
 
         if (currentNodeId !== this._currentNodeId) {
             this._currentNodeId = currentNodeId;
@@ -236,7 +236,7 @@ export class RenderCamera {
         this._changed = true;
     }
 
-    public setSize(size: ISize): void {
+    public setSize(size: ViewportSize): void {
         this._perspective.aspect = this._computeAspect(size.width, size.height);
 
         this._perspective.fov = this._computeFov();
@@ -300,7 +300,7 @@ export class RenderCamera {
         return this._yToFov(maxY, zoom);
     }
 
-    private _computeRotation(camera: Camera): IRotation {
+    private _computeRotation(camera: Camera): EulerRotation {
         let direction: THREE.Vector3 = camera.lookat.clone().sub(camera.position);
         let up: THREE.Vector3 = camera.up.clone();
 
diff --git a/src/render/RenderPass.ts b/src/render/RenderPass.ts
new file mode 100644
index 000000000..a62058fe8
--- /dev/null
+++ b/src/render/RenderPass.ts
@@ -0,0 +1,4 @@
+export enum RenderPass {
+    Background,
+    Opaque,
+}
diff --git a/src/render/RenderService.ts b/src/render/RenderService.ts
index 035c321bf..311f8e447 100644
--- a/src/render/RenderService.ts
+++ b/src/render/RenderService.ts
@@ -18,13 +18,13 @@ import {
 
 import { RenderCamera } from "./RenderCamera";
 import { RenderMode } from "./RenderMode";
-import { ISize } from "./interfaces/ISize";
+import { ViewportSize } from "./interfaces/ViewportSize";
 
 import { Spatial } from "../geo/Spatial";
-import { IFrame } from "../state/interfaces/IFrame";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
-interface IRenderCameraOperation {
+interface RenderCameraOperation {
     (rc: RenderCamera): RenderCamera;
 }
 
@@ -32,15 +32,15 @@ export class RenderService {
     private _bearing$: Observable<number>;
 
     private _element: HTMLElement;
-    private _currentFrame$: Observable<IFrame>;
+    private _currentFrame$: Observable<AnimationFrame>;
 
-    private _renderCameraOperation$: Subject<IRenderCameraOperation>;
+    private _renderCameraOperation$: Subject<RenderCameraOperation>;
     private _renderCameraHolder$: Observable<RenderCamera>;
     private _renderCameraFrame$: Observable<RenderCamera>;
     private _renderCamera$: Observable<RenderCamera>;
 
     private _resize$: Subject<void>;
-    private _size$: BehaviorSubject<ISize>;
+    private _size$: BehaviorSubject<ViewportSize>;
 
     private _spatial: Spatial;
 
@@ -48,7 +48,7 @@ export class RenderService {
 
     private _subscriptions: SubscriptionHolder = new SubscriptionHolder();
 
-    constructor(element: HTMLElement, currentFrame$: Observable<IFrame>, renderMode: RenderMode, renderCamera?: RenderCamera) {
+    constructor(element: HTMLElement, currentFrame$: Observable<AnimationFrame>, renderMode: RenderMode, renderCamera?: RenderCamera) {
         this._element = element;
         this._currentFrame$ = currentFrame$;
 
@@ -57,10 +57,10 @@ export class RenderService {
         renderMode = renderMode != null ? renderMode : RenderMode.Fill;
 
         this._resize$ = new Subject<void>();
-        this._renderCameraOperation$ = new Subject<IRenderCameraOperation>();
+        this._renderCameraOperation$ = new Subject<RenderCameraOperation>();
 
         this._size$ =
-            new BehaviorSubject<ISize>(
+            new BehaviorSubject<ViewportSize>(
                 {
                     height: this._element.offsetHeight,
                     width: this._element.offsetWidth,
@@ -69,7 +69,7 @@ export class RenderService {
         const subs = this._subscriptions;
         subs.push(this._resize$.pipe(
             map(
-                (): ISize => {
+                (): ViewportSize => {
                     return { height: this._element.offsetHeight, width: this._element.offsetWidth };
                 }))
             .subscribe(this._size$));
@@ -82,7 +82,7 @@ export class RenderService {
                     return rc;
                 }),
             scan(
-                (rc: RenderCamera, operation: IRenderCameraOperation): RenderCamera => {
+                (rc: RenderCamera, operation: RenderCameraOperation): RenderCamera => {
                     return operation(rc);
                 },
                 !!renderCamera ? renderCamera : new RenderCamera(this._element.offsetWidth, this._element.offsetHeight, renderMode)),
@@ -92,11 +92,11 @@ export class RenderService {
         this._renderCameraFrame$ = this._currentFrame$.pipe(
             withLatestFrom(this._renderCameraHolder$),
             tap(
-                ([frame, rc]: [IFrame, RenderCamera]): void => {
+                ([frame, rc]: [AnimationFrame, RenderCamera]): void => {
                     rc.setFrame(frame);
                 }),
             map(
-                (args: [IFrame, RenderCamera]): RenderCamera => {
+                (args: [AnimationFrame, RenderCamera]): RenderCamera => {
                     return args[1];
                 }),
             publishReplay(1),
@@ -125,7 +125,7 @@ export class RenderService {
         subs.push(this._size$.pipe(
             skip(1),
             map(
-                (size: ISize) => {
+                (size: ViewportSize) => {
                     return (rc: RenderCamera): RenderCamera => {
                         rc.setSize(size);
 
@@ -166,7 +166,7 @@ export class RenderService {
         return this._resize$;
     }
 
-    public get size$(): Observable<ISize> {
+    public get size$(): Observable<ViewportSize> {
         return this._size$;
     }
 
diff --git a/src/render/interfaces/GLFrameRenderer.ts b/src/render/interfaces/GLFrameRenderer.ts
new file mode 100644
index 000000000..8cd30c8c8
--- /dev/null
+++ b/src/render/interfaces/GLFrameRenderer.ts
@@ -0,0 +1,9 @@
+import { GLRenderFunction } from "./GLRenderFunction";
+import { RenderPass } from "../RenderPass";
+
+export interface GLFrameRenderer {
+    frameId: number;
+    needsRender: boolean;
+    render: GLRenderFunction;
+    pass: RenderPass;
+}
diff --git a/src/render/interfaces/IGLRenderFunction.ts b/src/render/interfaces/GLRenderFunction.ts
similarity index 72%
rename from src/render/interfaces/IGLRenderFunction.ts
rename to src/render/interfaces/GLRenderFunction.ts
index 2a589843a..2f1ca55b6 100644
--- a/src/render/interfaces/IGLRenderFunction.ts
+++ b/src/render/interfaces/GLRenderFunction.ts
@@ -1,6 +1,6 @@
 import * as THREE from "three";
 
-export interface IGLRenderFunction extends Function {
+export interface GLRenderFunction extends Function {
     (
         perspectiveCamera: THREE.PerspectiveCamera,
         renderer: THREE.WebGLRenderer,
diff --git a/src/render/interfaces/IGLRender.ts b/src/render/interfaces/IGLRender.ts
deleted file mode 100644
index 4e6ad4ccb..000000000
--- a/src/render/interfaces/IGLRender.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { IGLRenderFunction } from "./IGLRenderFunction";
-import { GLRenderStage } from "../GLRenderStage";
-
-export interface IGLRender {
-    frameId: number;
-    needsRender: boolean;
-    render: IGLRenderFunction;
-    stage: GLRenderStage;
-}
diff --git a/src/render/interfaces/IGLRenderHash.ts b/src/render/interfaces/IGLRenderHash.ts
index a86af8470..e355492c7 100644
--- a/src/render/interfaces/IGLRenderHash.ts
+++ b/src/render/interfaces/IGLRenderHash.ts
@@ -1,6 +1,6 @@
-import { IGLRender } from "./IGLRender";
+import { GLFrameRenderer } from "./GLFrameRenderer";
 
-export interface IGLRenderHash {
+export interface GLRenderHash {
     name: string;
-    render: IGLRender;
+    renderer: GLFrameRenderer;
 }
diff --git a/src/render/interfaces/ISize.ts b/src/render/interfaces/ViewportSize.ts
similarity index 56%
rename from src/render/interfaces/ISize.ts
rename to src/render/interfaces/ViewportSize.ts
index 6052465c0..1d433cf9b 100644
--- a/src/render/interfaces/ISize.ts
+++ b/src/render/interfaces/ViewportSize.ts
@@ -1,4 +1,4 @@
-export interface ISize {
+export interface ViewportSize {
     height: number;
     width: number;
 }
diff --git a/src/render/interfaces/IVNodeHash.ts b/src/render/interfaces/VirtualNodeHash.ts
similarity index 68%
rename from src/render/interfaces/IVNodeHash.ts
rename to src/render/interfaces/VirtualNodeHash.ts
index 408d67593..77e1895e5 100644
--- a/src/render/interfaces/IVNodeHash.ts
+++ b/src/render/interfaces/VirtualNodeHash.ts
@@ -1,6 +1,6 @@
 import * as vd from "virtual-dom";
 
-export interface IVNodeHash {
+export interface VirtualNodeHash {
     name: string;
     vnode: vd.VNode;
 }
diff --git a/src/state/StateContext.ts b/src/state/StateContext.ts
index 31f9fc0eb..fd4368df7 100644
--- a/src/state/StateContext.ts
+++ b/src/state/StateContext.ts
@@ -1,6 +1,6 @@
 import { State } from "./State";
 import { TransitionMode } from "./TransitionMode";
-import { IRotation } from "./interfaces/IRotation";
+import { EulerRotation } from "./interfaces/EulerRotation";
 import { IStateContext } from "./interfaces/IStateContext";
 import { EarthState } from "./states/EarthState";
 import { InteractiveWaitingState } from "./states/InteractiveWaitingState";
@@ -10,7 +10,7 @@ import { WaitingState } from "./states/WaitingState";
 
 import { Camera } from "../geo/Camera";
 import { Transform } from "../geo/Transform";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { Node } from "../graph/Node";
 
 type StateCreators = Map<string, new (state: StateBase) => StateBase>;
@@ -89,7 +89,7 @@ export class StateContext implements IStateContext {
         return this._transitions.getState(this._state);
     }
 
-    public get reference(): ILatLonAlt {
+    public get reference(): LatLonAlt {
         return this._state.reference;
     }
 
@@ -205,15 +205,15 @@ export class StateContext implements IStateContext {
         this._state.set(nodes);
     }
 
-    public rotate(delta: IRotation): void {
+    public rotate(delta: EulerRotation): void {
         this._state.rotate(delta);
     }
 
-    public rotateUnbounded(delta: IRotation): void {
+    public rotateUnbounded(delta: EulerRotation): void {
         this._state.rotateUnbounded(delta);
     }
 
-    public rotateWithoutInertia(delta: IRotation): void {
+    public rotateWithoutInertia(delta: EulerRotation): void {
         this._state.rotateWithoutInertia(delta);
     }
 
@@ -257,7 +257,7 @@ export class StateContext implements IStateContext {
         this._state.dolly(delta);
     }
 
-    public orbit(rotation: IRotation): void {
+    public orbit(rotation: EulerRotation): void {
         this._state.orbit(rotation);
     }
 
diff --git a/src/state/StateService.ts b/src/state/StateService.ts
index 9015e1a5e..a16af87a2 100644
--- a/src/state/StateService.ts
+++ b/src/state/StateService.ts
@@ -25,15 +25,15 @@ import { FrameGenerator } from "./FrameGenerator";
 import { State } from "./State";
 import { StateContext } from "./StateContext";
 import { TransitionMode } from "./TransitionMode";
-import { IFrame } from "./interfaces/IFrame";
-import { IRotation } from "./interfaces/IRotation";
+import { AnimationFrame } from "./interfaces/AnimationFrame";
+import { EulerRotation } from "./interfaces/EulerRotation";
 import { IStateContext } from "./interfaces/IStateContext";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { Camera } from "../geo/Camera";
 import { Node } from "../graph/Node";
 import { Transform } from "../geo/Transform";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
 interface IContextOperation {
@@ -50,14 +50,14 @@ export class StateService {
     private _fps$: Observable<number>;
     private _state$: Observable<State>;
 
-    private _currentState$: Observable<IFrame>;
-    private _lastState$: Observable<IFrame>;
+    private _currentState$: Observable<AnimationFrame>;
+    private _lastState$: Observable<AnimationFrame>;
     private _currentNode$: Observable<Node>;
     private _currentNodeExternal$: Observable<Node>;
     private _currentCamera$: Observable<Camera>;
-    private _currentKey$: BehaviorSubject<string>;
+    private _currentId$: BehaviorSubject<string>;
     private _currentTransform$: Observable<Transform>;
-    private _reference$: Observable<ILatLonAlt>;
+    private _reference$: Observable<LatLonAlt>;
 
     private _inMotionOperation$: Subject<boolean>;
     private _inMotion$: Observable<boolean>;
@@ -138,7 +138,7 @@ export class StateService {
                     fc[2].update(fc[1]);
                 }),
             map(
-                (fc: [number, number, IStateContext]): IFrame => {
+                (fc: [number, number, IStateContext]): AnimationFrame => {
                     return { fps: fc[1], id: fc[0], state: fc[2] };
                 }),
             share());
@@ -147,32 +147,32 @@ export class StateService {
             publishReplay(1),
             refCount());
 
-        let nodeChanged$: Observable<IFrame> = this._currentState$.pipe(
+        let nodeChanged$: Observable<AnimationFrame> = this._currentState$.pipe(
             distinctUntilChanged(
                 undefined,
-                (f: IFrame): string => {
-                    return f.state.currentNode.key;
+                (f: AnimationFrame): string => {
+                    return f.state.currentNode.id;
                 }),
             publishReplay(1),
             refCount());
 
-        let nodeChangedSubject$: Subject<IFrame> = new Subject<IFrame>();
+        let nodeChangedSubject$: Subject<AnimationFrame> = new Subject<AnimationFrame>();
 
         subs.push(nodeChanged$
             .subscribe(nodeChangedSubject$));
 
-        this._currentKey$ = new BehaviorSubject<string>(null);
+        this._currentId$ = new BehaviorSubject<string>(null);
 
         subs.push(nodeChangedSubject$.pipe(
             map(
-                (f: IFrame): string => {
-                    return f.state.currentNode.key;
+                (f: AnimationFrame): string => {
+                    return f.state.currentNode.id;
                 }))
-            .subscribe(this._currentKey$));
+            .subscribe(this._currentId$));
 
         this._currentNode$ = nodeChangedSubject$.pipe(
             map(
-                (f: IFrame): Node => {
+                (f: AnimationFrame): Node => {
                     return f.state.currentNode;
                 }),
             publishReplay(1),
@@ -180,7 +180,7 @@ export class StateService {
 
         this._currentCamera$ = nodeChangedSubject$.pipe(
             map(
-                (f: IFrame): Camera => {
+                (f: AnimationFrame): Camera => {
                     return f.state.currentCamera;
                 }),
             publishReplay(1),
@@ -188,7 +188,7 @@ export class StateService {
 
         this._currentTransform$ = nodeChangedSubject$.pipe(
             map(
-                (f: IFrame): Transform => {
+                (f: AnimationFrame): Transform => {
                     return f.state.currentTransform;
                 }),
             publishReplay(1),
@@ -196,14 +196,14 @@ export class StateService {
 
         this._reference$ = nodeChangedSubject$.pipe(
             map(
-                (f: IFrame): ILatLonAlt => {
+                (f: AnimationFrame): LatLonAlt => {
                     return f.state.reference;
                 }),
             distinctUntilChanged(
-                (r1: ILatLon, r2: ILatLon): boolean => {
+                (r1: LatLon, r2: LatLon): boolean => {
                     return r1.lat === r2.lat && r1.lon === r2.lon;
                 },
-                (reference: ILatLonAlt): ILatLon => {
+                (reference: LatLonAlt): LatLon => {
                     return { lat: reference.lat, lon: reference.lon };
                 }),
             publishReplay(1),
@@ -211,7 +211,7 @@ export class StateService {
 
         this._currentNodeExternal$ = nodeChanged$.pipe(
             map(
-                (f: IFrame): Node => {
+                (f: AnimationFrame): Node => {
                     return f.state.currentNode;
                 }),
             publishReplay(1),
@@ -247,11 +247,11 @@ export class StateService {
                 (): Observable<boolean> => {
                     return this._currentState$.pipe(
                         filter(
-                            (frame: IFrame): boolean => {
+                            (frame: AnimationFrame): boolean => {
                                 return frame.state.nodesAhead === 0;
                             }),
                         map(
-                            (frame: IFrame): [Camera, number] => {
+                            (frame: AnimationFrame): [Camera, number] => {
                                 return [frame.state.camera.clone(), frame.state.zoom];
                             }),
                         pairwise(),
@@ -296,11 +296,11 @@ export class StateService {
                 (): Observable<boolean> => {
                     return this._currentState$.pipe(
                         filter(
-                            (frame: IFrame): boolean => {
+                            (frame: AnimationFrame): boolean => {
                                 return frame.state.nodesAhead === 0;
                             }),
                         map(
-                            (frame: IFrame): THREE.Vector3 => {
+                            (frame: AnimationFrame): THREE.Vector3 => {
                                 return frame.state.camera.position.clone();
                             }),
                         pairwise(),
@@ -334,7 +334,7 @@ export class StateService {
         this._frameGenerator = new FrameGenerator(window);
     }
 
-    public get currentState$(): Observable<IFrame> {
+    public get currentState$(): Observable<AnimationFrame> {
         return this._currentState$;
     }
 
@@ -342,8 +342,8 @@ export class StateService {
         return this._currentNode$;
     }
 
-    public get currentKey$(): Observable<string> {
-        return this._currentKey$;
+    public get currentId$(): Observable<string> {
+        return this._currentId$;
     }
 
     public get currentNodeExternal$(): Observable<Node> {
@@ -362,7 +362,7 @@ export class StateService {
         return this._state$;
     }
 
-    public get reference$(): Observable<ILatLonAlt> {
+    public get reference$(): Observable<LatLonAlt> {
         return this._reference$;
     }
 
@@ -429,17 +429,17 @@ export class StateService {
         this._invokeContextOperation((context: IStateContext) => { context.set(nodes); });
     }
 
-    public rotate(delta: IRotation): void {
+    public rotate(delta: EulerRotation): void {
         this._inMotionOperation$.next(true);
         this._invokeContextOperation((context: IStateContext) => { context.rotate(delta); });
     }
 
-    public rotateUnbounded(delta: IRotation): void {
+    public rotateUnbounded(delta: EulerRotation): void {
         this._inMotionOperation$.next(true);
         this._invokeContextOperation((context: IStateContext) => { context.rotateUnbounded(delta); });
     }
 
-    public rotateWithoutInertia(delta: IRotation): void {
+    public rotateWithoutInertia(delta: EulerRotation): void {
         this._inMotionOperation$.next(true);
         this._invokeContextOperation((context: IStateContext) => { context.rotateWithoutInertia(delta); });
     }
@@ -479,7 +479,7 @@ export class StateService {
         this._invokeContextOperation((context: IStateContext) => { context.dolly(delta); });
     }
 
-    public orbit(rotation: IRotation): void {
+    public orbit(rotation: EulerRotation): void {
         this._inMotionOperation$.next(true);
         this._invokeContextOperation((context: IStateContext) => { context.orbit(rotation); });
     }
@@ -504,7 +504,7 @@ export class StateService {
         return this._lastState$.pipe(
             first(),
             map(
-                (frame: IFrame): number[] => {
+                (frame: AnimationFrame): number[] => {
                     return (<IStateContext>frame.state).getCenter();
                 }));
     }
@@ -513,7 +513,7 @@ export class StateService {
         return this._lastState$.pipe(
             first(),
             map(
-                (frame: IFrame): number => {
+                (frame: AnimationFrame): number => {
                     return frame.state.zoom;
                 }));
     }
diff --git a/src/state/interfaces/AnimationFrame.ts b/src/state/interfaces/AnimationFrame.ts
new file mode 100644
index 000000000..cc7064c28
--- /dev/null
+++ b/src/state/interfaces/AnimationFrame.ts
@@ -0,0 +1,7 @@
+import { IAnimationState } from "./IAnimationState";
+
+export interface AnimationFrame {
+    id: number;
+    fps: number;
+    state: IAnimationState;
+}
diff --git a/src/state/interfaces/IRotation.ts b/src/state/interfaces/EulerRotation.ts
similarity index 53%
rename from src/state/interfaces/IRotation.ts
rename to src/state/interfaces/EulerRotation.ts
index 14a814955..4ec4e4633 100644
--- a/src/state/interfaces/IRotation.ts
+++ b/src/state/interfaces/EulerRotation.ts
@@ -1,4 +1,4 @@
-export interface IRotation {
+export interface EulerRotation {
     phi: number;
     theta: number;
 }
diff --git a/src/state/interfaces/ICurrentState.ts b/src/state/interfaces/IAnimationState.ts
similarity index 80%
rename from src/state/interfaces/ICurrentState.ts
rename to src/state/interfaces/IAnimationState.ts
index e4ca31e2c..f126e5ec2 100644
--- a/src/state/interfaces/ICurrentState.ts
+++ b/src/state/interfaces/IAnimationState.ts
@@ -1,11 +1,11 @@
 import { State } from "../State";
 import { Camera } from "../../geo/Camera";
 import { Transform } from "../../geo/Transform";
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
 import { Node } from "../../graph/Node";
 
-export interface ICurrentState {
-    reference: ILatLonAlt;
+export interface IAnimationState {
+    reference: LatLonAlt;
     alpha: number;
     camera: Camera;
     zoom: number;
diff --git a/src/state/interfaces/IFrame.ts b/src/state/interfaces/IFrame.ts
deleted file mode 100644
index 6640f3e54..000000000
--- a/src/state/interfaces/IFrame.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ICurrentState } from "./ICurrentState";
-
-export interface IFrame {
-    id: number;
-    fps: number;
-    state: ICurrentState;
-}
diff --git a/src/state/interfaces/IInterpolator.ts b/src/state/interfaces/IInterpolator.ts
new file mode 100644
index 000000000..259cf91d1
--- /dev/null
+++ b/src/state/interfaces/IInterpolator.ts
@@ -0,0 +1,3 @@
+export interface Interpolator {
+    solve(x: number): number;
+}
diff --git a/src/state/interfaces/IState.ts b/src/state/interfaces/IStateBase.ts
similarity index 70%
rename from src/state/interfaces/IState.ts
rename to src/state/interfaces/IStateBase.ts
index ac4636c30..2c9069a02 100644
--- a/src/state/interfaces/IState.ts
+++ b/src/state/interfaces/IStateBase.ts
@@ -1,13 +1,13 @@
 import { Camera } from "../../geo/Camera";
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
 import { TransitionMode } from "../TransitionMode";
 import { Node } from "../../graph/Node";
 
-export interface IState {
+export interface IStateBase {
     alpha: number;
     camera: Camera;
     currentIndex: number;
-    reference: ILatLonAlt;
+    reference: LatLonAlt;
     trajectory: Node[];
     transitionMode: TransitionMode;
     zoom: number;
diff --git a/src/state/interfaces/IStateContext.ts b/src/state/interfaces/IStateContext.ts
index 0fb62c0d1..7824f4b88 100644
--- a/src/state/interfaces/IStateContext.ts
+++ b/src/state/interfaces/IStateContext.ts
@@ -1,9 +1,9 @@
-import { ICurrentState } from "./ICurrentState";
-import { IRotation } from "./IRotation";
+import { IAnimationState } from "./IAnimationState";
+import { EulerRotation } from "./EulerRotation";
 import { TransitionMode } from "../TransitionMode";
 import { Node } from "../../graph/Node";
 
-export interface IStateContext extends ICurrentState {
+export interface IStateContext extends IAnimationState {
     earth(): void;
     traverse(): void;
     wait(): void;
@@ -18,9 +18,9 @@ export interface IStateContext extends ICurrentState {
     cut(): void;
     set(nodes: Node[]): void;
 
-    rotate(delta: IRotation): void;
-    rotateUnbounded(delta: IRotation): void;
-    rotateWithoutInertia(delta: IRotation): void;
+    rotate(delta: EulerRotation): void;
+    rotateUnbounded(delta: EulerRotation): void;
+    rotateWithoutInertia(delta: EulerRotation): void;
     rotateBasic(basicRotation: number[]): void;
     rotateBasicUnbounded(basicRotation: number[]): void;
     rotateBasicWithoutInertia(basicRotation: number[]): void;
@@ -37,6 +37,6 @@ export interface IStateContext extends ICurrentState {
     setTransitionMode(mode: TransitionMode): void;
 
     dolly(delta: number): void;
-    orbit(rotation: IRotation): void;
+    orbit(rotation: EulerRotation): void;
     truck(direction: number[]): void;
 }
diff --git a/src/state/states/EarthState.ts b/src/state/states/EarthState.ts
index 474b04b64..7f8e1ab49 100644
--- a/src/state/states/EarthState.ts
+++ b/src/state/states/EarthState.ts
@@ -1,12 +1,12 @@
 import * as THREE from "three";
 
 import { StateBase } from "./StateBase";
-import { IRotation } from "../interfaces/IRotation";
-import { IState } from "../interfaces/IState";
+import { EulerRotation } from "../interfaces/EulerRotation";
+import { IStateBase } from "../interfaces/IStateBase";
 import { Camera } from "../../geo/Camera";
 
 export class EarthState extends StateBase {
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         super(state);
 
         const viewingDirection: THREE.Vector3 = this._camera.lookat
@@ -37,7 +37,7 @@ export class EarthState extends StateBase {
         camera.position.copy(camera.lookat).add(offset);
     }
 
-    public orbit(rotation: IRotation): void {
+    public orbit(rotation: EulerRotation): void {
         const camera: Camera = this._camera;
         const q: THREE.Quaternion = new THREE.Quaternion().setFromUnitVectors(camera.up, new THREE.Vector3(0, 0, 1));
         const qInverse: THREE.Quaternion = q.clone().invert();
diff --git a/src/state/RotationDelta.ts b/src/state/states/EulerRotationDelta.ts
similarity index 84%
rename from src/state/RotationDelta.ts
rename to src/state/states/EulerRotationDelta.ts
index f62737e2d..599225315 100644
--- a/src/state/RotationDelta.ts
+++ b/src/state/states/EulerRotationDelta.ts
@@ -1,6 +1,6 @@
-import { IRotation } from "./interfaces/IRotation";
+import { EulerRotation } from "../interfaces/EulerRotation";
 
-export class RotationDelta implements IRotation {
+export class EulerRotationDelta implements EulerRotation {
     private _phi: number;
     private _theta: number;
 
@@ -29,12 +29,12 @@ export class RotationDelta implements IRotation {
         return this._phi === 0 && this._theta === 0;
     }
 
-    public copy(delta: IRotation): void {
+    public copy(delta: EulerRotation): void {
         this._phi = delta.phi;
         this._theta = delta.theta;
     }
 
-    public lerp(other: IRotation, alpha: number): void {
+    public lerp(other: EulerRotation, alpha: number): void {
         this._phi = (1 - alpha) * this._phi + alpha * other.phi;
         this._theta = (1 - alpha) * this._theta + alpha * other.theta;
     }
diff --git a/src/state/states/InteractiveStateBase.ts b/src/state/states/InteractiveStateBase.ts
index 0947e49b9..086dd4f7a 100644
--- a/src/state/states/InteractiveStateBase.ts
+++ b/src/state/states/InteractiveStateBase.ts
@@ -2,9 +2,9 @@ import * as THREE from "three";
 
 import { StateBase } from "./StateBase";
 
-import { RotationDelta } from "../RotationDelta";
-import { IRotation } from "../interfaces/IRotation";
-import { IState } from "../interfaces/IState";
+import { EulerRotationDelta } from "./EulerRotationDelta";
+import { EulerRotation } from "../interfaces/EulerRotation";
+import { IStateBase } from "../interfaces/IStateBase";
 import { Camera } from "../../geo/Camera";
 import { Transform } from "../../geo/Transform";
 import { Node } from "../../graph/Node";
@@ -17,8 +17,8 @@ export abstract class InteractiveStateBase extends StateBase {
      */
     protected _animationSpeed: number;
 
-    protected _rotationDelta: RotationDelta;
-    protected _requestedRotationDelta: RotationDelta;
+    protected _rotationDelta: EulerRotationDelta;
+    protected _requestedRotationDelta: EulerRotationDelta;
 
     protected _basicRotation: number[];
     protected _requestedBasicRotation: number[];
@@ -37,12 +37,12 @@ export abstract class InteractiveStateBase extends StateBase {
     protected _desiredLookat: THREE.Vector3;
     protected _desiredCenter: number[];
 
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         super(state);
 
         this._animationSpeed = 1 / 40;
 
-        this._rotationDelta = new RotationDelta(0, 0);
+        this._rotationDelta = new EulerRotationDelta(0, 0);
         this._requestedRotationDelta = null;
 
         this._basicRotation = [0, 0];
@@ -64,7 +64,7 @@ export abstract class InteractiveStateBase extends StateBase {
         this._desiredCenter = null;
     }
 
-    public rotate(rotationDelta: IRotation): void {
+    public rotate(rotationDelta: EulerRotation): void {
         if (this._currentNode == null) {
             return;
         }
@@ -81,11 +81,11 @@ export abstract class InteractiveStateBase extends StateBase {
             this._requestedRotationDelta.phi = this._requestedRotationDelta.phi + rotationDelta.phi;
             this._requestedRotationDelta.theta = this._requestedRotationDelta.theta + rotationDelta.theta;
         } else {
-            this._requestedRotationDelta = new RotationDelta(rotationDelta.phi, rotationDelta.theta);
+            this._requestedRotationDelta = new EulerRotationDelta(rotationDelta.phi, rotationDelta.theta);
         }
     }
 
-    public rotateUnbounded(delta: IRotation): void {
+    public rotateUnbounded(delta: EulerRotation): void {
         if (this._currentNode == null) {
             return;
         }
@@ -128,7 +128,7 @@ export abstract class InteractiveStateBase extends StateBase {
             .add(offset.multiplyScalar(length));
     }
 
-    public rotateWithoutInertia(rotationDelta: IRotation): void {
+    public rotateWithoutInertia(rotationDelta: EulerRotation): void {
         if (this._currentNode == null) {
             return;
         }
@@ -139,7 +139,7 @@ export abstract class InteractiveStateBase extends StateBase {
         this._requestedRotationDelta = null;
 
         const threshold: number = Math.PI / (10 * Math.pow(2, this._zoom));
-        const delta: IRotation = {
+        const delta: EulerRotation = {
             phi: this._spatial.clamp(rotationDelta.phi, -threshold, threshold),
             theta: this._spatial.clamp(rotationDelta.theta, -threshold, threshold),
         };
@@ -304,7 +304,7 @@ export abstract class InteractiveStateBase extends StateBase {
         this._desiredZoom = this._zoom;
     }
 
-    protected _applyRotation(delta: IRotation, camera: Camera): void {
+    protected _applyRotation(delta: EulerRotation, camera: Camera): void {
         if (camera == null) {
             return;
         }
diff --git a/src/state/states/InteractiveWaitingState.ts b/src/state/states/InteractiveWaitingState.ts
index 6f13c7bb2..b7e236437 100644
--- a/src/state/states/InteractiveWaitingState.ts
+++ b/src/state/states/InteractiveWaitingState.ts
@@ -1,10 +1,10 @@
 import { InteractiveStateBase } from "./InteractiveStateBase";
-import { IState } from "../interfaces/IState";
+import { IStateBase } from "../interfaces/IStateBase";
 import { Node } from "../../graph/Node";
 import { isSpherical } from "../../geo/Geo";
 
 export class InteractiveWaitingState extends InteractiveStateBase {
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         super(state);
 
         this._adjustCameras();
diff --git a/src/state/states/StateBase.ts b/src/state/states/StateBase.ts
index 974de5fa9..192e7185c 100644
--- a/src/state/states/StateBase.ts
+++ b/src/state/states/StateBase.ts
@@ -1,22 +1,22 @@
 import * as Geo from "../../geo/Geo";
 
 import { TransitionMode } from "../TransitionMode";
-import { IRotation } from "../interfaces/IRotation";
-import { IState } from "../interfaces/IState";
+import { EulerRotation } from "../interfaces/EulerRotation";
+import { IStateBase } from "../interfaces/IStateBase";
 import { ArgumentMapillaryError } from "../../error/ArgumentMapillaryError";
 import { Camera } from "../../geo/Camera";
 import { GeoCoords } from "../../geo/GeoCoords";
 import { Spatial } from "../../geo/Spatial";
 import { Transform } from "../../geo/Transform";
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
 import { Node } from "../../graph/Node";
-import { CameraProjectionType } from "../../api/interfaces/CameraProjectionType";
+import { CameraType } from "../../geo/interfaces/CameraType";
 
-export abstract class StateBase implements IState {
+export abstract class StateBase implements IStateBase {
     protected _spatial: Spatial;
     protected _geoCoords: GeoCoords;
 
-    protected _reference: ILatLonAlt;
+    protected _reference: LatLonAlt;
 
     protected _alpha: number;
     protected _camera: Camera;
@@ -39,7 +39,7 @@ export abstract class StateBase implements IState {
     private _referenceThreshold: number;
     private _transitionMode: TransitionMode;
 
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         this._spatial = new Spatial();
         this._geoCoords = new GeoCoords();
 
@@ -61,18 +61,16 @@ export abstract class StateBase implements IState {
         for (let node of this._trajectory) {
             let translation: number[] = this._nodeToTranslation(node, this._reference);
             let transform: Transform = new Transform(
-                node.orientation,
+                node.exifOrientation,
                 node.width,
                 node.height,
-                node.focal,
                 node.scale,
                 node.rotation,
                 translation,
                 node.image,
                 undefined,
-                node.ck1,
-                node.ck2,
-                <CameraProjectionType>node.cameraType);
+                node.cameraParameters,
+                <CameraType>node.cameraType);
 
             this._trajectoryTransforms.push(transform);
             this._trajectoryCameras.push(new Camera(transform));
@@ -95,7 +93,7 @@ export abstract class StateBase implements IState {
             this._currentCamera.clone();
     }
 
-    public get reference(): ILatLonAlt {
+    public get reference(): LatLonAlt {
         return this._reference;
     }
 
@@ -153,11 +151,11 @@ export abstract class StateBase implements IState {
 
     public moveTo(position: number): void { /*noop*/ }
 
-    public rotate(delta: IRotation): void { /*noop*/ }
+    public rotate(delta: EulerRotation): void { /*noop*/ }
 
-    public rotateUnbounded(delta: IRotation): void { /*noop*/ }
+    public rotateUnbounded(delta: EulerRotation): void { /*noop*/ }
 
-    public rotateWithoutInertia(delta: IRotation): void { /*noop*/ }
+    public rotateWithoutInertia(delta: EulerRotation): void { /*noop*/ }
 
     public rotateBasic(basicRotation: number[]): void { /*noop*/ }
 
@@ -179,7 +177,7 @@ export abstract class StateBase implements IState {
 
     public dolly(delta: number): void { /*noop*/ }
 
-    public orbit(rotation: IRotation): void { /*noop*/ }
+    public orbit(rotation: EulerRotation): void { /*noop*/ }
 
     public truck(direction: number[]): void { /*noop*/ }
 
@@ -321,7 +319,7 @@ export abstract class StateBase implements IState {
 
         this._reference.lat = node.latLon.lat;
         this._reference.lon = node.latLon.lon;
-        this._reference.alt = node.alt;
+        this._reference.alt = node.computedAltitude;
 
         return true;
     }
@@ -365,18 +363,16 @@ export abstract class StateBase implements IState {
 
             let translation: number[] = this._nodeToTranslation(node, this.reference);
             let transform: Transform = new Transform(
-                node.orientation,
+                node.exifOrientation,
                 node.width,
                 node.height,
-                node.focal,
                 node.scale,
                 node.rotation,
                 translation,
                 node.image,
                 undefined,
-                node.ck1,
-                node.ck2,
-                <CameraProjectionType>node.cameraType);
+                node.cameraParameters,
+                <CameraType>node.cameraType);
 
             this._trajectoryTransforms.push(transform);
             this._trajectoryCameras.push(new Camera(transform));
@@ -391,27 +387,25 @@ export abstract class StateBase implements IState {
 
             let translation: number[] = this._nodeToTranslation(node, this.reference);
             let transform: Transform = new Transform(
-                node.orientation,
+                node.exifOrientation,
                 node.width,
                 node.height,
-                node.focal,
                 node.scale,
                 node.rotation,
                 translation,
                 node.image,
                 undefined,
-                node.ck1,
-                node.ck2,
-                <CameraProjectionType>node.cameraType);
+                node.cameraParameters,
+                <CameraType>node.cameraType);
 
             this._trajectoryTransforms.unshift(transform);
             this._trajectoryCameras.unshift(new Camera(transform));
         }
     }
 
-    private _nodeToTranslation(node: Node, reference: ILatLonAlt): number[] {
+    private _nodeToTranslation(node: Node, reference: LatLonAlt): number[] {
         return Geo.computeTranslation(
-            { alt: node.alt, lat: node.latLon.lat, lon: node.latLon.lon },
+            { alt: node.computedAltitude, lat: node.latLon.lat, lon: node.latLon.lon },
             node.rotation,
             reference);
     }
@@ -421,7 +415,7 @@ export abstract class StateBase implements IState {
         let previous: Node = this._previousNode;
 
         return !!current && !!previous &&
-            current.mergeCC === previous.mergeCC;
+            current.mergeConnectedComponent === previous.mergeConnectedComponent;
     }
 
     private _withinOriginalDistance(): boolean {
diff --git a/src/state/states/TraversingState.ts b/src/state/states/TraversingState.ts
index b6beaa750..748ea7fd8 100644
--- a/src/state/states/TraversingState.ts
+++ b/src/state/states/TraversingState.ts
@@ -1,22 +1,22 @@
 import * as THREE from "three";
 
 import { InteractiveStateBase } from "./InteractiveStateBase";
-import { IState } from "../interfaces/IState";
+import { IStateBase } from "../interfaces/IStateBase";
 import { Node } from "../../graph/Node";
-import { IInterpolator } from "../../utils/interfaces/IInterpolator";
+import { Interpolator } from "../interfaces/IInterpolator";
 import { isSpherical } from "../../geo/Geo";
 
 export class TraversingState extends InteractiveStateBase {
-    private static _interpolator: new (...args: number[]) => IInterpolator;
+    private static _interpolator: new (...args: number[]) => Interpolator;
 
     private _baseAlpha: number;
 
     private _speedCoefficient: number;
 
-    private _unitBezier: IInterpolator;
+    private _unitBezier: Interpolator;
     private _useBezier: boolean;
 
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         super(state);
 
         this._adjustCameras();
diff --git a/src/state/states/WaitingState.ts b/src/state/states/WaitingState.ts
index db9ea7d24..2b18d86b4 100644
--- a/src/state/states/WaitingState.ts
+++ b/src/state/states/WaitingState.ts
@@ -1,10 +1,10 @@
 import { StateBase } from "./StateBase";
-import { IState } from "../interfaces/IState";
+import { IStateBase } from "../interfaces/IStateBase";
 import { Node } from "../../graph/Node";
 import { isSpherical } from "../../geo/Geo";
 
 export class WaitingState extends StateBase {
-    constructor(state: IState) {
+    constructor(state: IStateBase) {
         super(state);
 
         this._zoom = 0;
diff --git a/src/tiles/ImageTileLoader.ts b/src/tiles/ImageTileLoader.ts
index e96222003..c9d898652 100644
--- a/src/tiles/ImageTileLoader.ts
+++ b/src/tiles/ImageTileLoader.ts
@@ -56,7 +56,7 @@ export class ImageTileLoader {
             Observable.create(
                 (subscriber: Subscriber<HTMLImageElement>): void => {
                     this._provider
-                        .getImageTile(
+                        .getImageTileBuffer(
                             identifier,
                             x,
                             y,
diff --git a/src/tiles/RegionOfInterestCalculator.ts b/src/tiles/RegionOfInterestCalculator.ts
index e4ca2e865..b93eb4868 100644
--- a/src/tiles/RegionOfInterestCalculator.ts
+++ b/src/tiles/RegionOfInterestCalculator.ts
@@ -1,10 +1,10 @@
-import { IBoundingBox } from "./interfaces/IBoundingBox";
-import { IRegionOfInterest } from "./interfaces/IRegionOfInterest";
+import { TileBoundingBox } from "./interfaces/TileBoundingBox";
+import { TileRegionOfInterest } from "./interfaces/TileRegionOfInterest";
 
 import { Transform } from "../geo/Transform";
 import { ViewportCoords } from "../geo/ViewportCoords";
 import { RenderCamera } from "../render/RenderCamera";
-import { ISize } from "../render/interfaces/ISize";
+import { ViewportSize } from "../render/interfaces/ViewportSize";
 import { isSpherical } from "../geo/Geo";
 
 /**
@@ -20,17 +20,17 @@ export class RegionOfInterestCalculator {
      * and the viewport size.
      *
      * @param {RenderCamera} renderCamera - Render camera used for unprojections.
-     * @param {ISize} size - Viewport size in pixels.
+     * @param {ViewportSize} size - Viewport size in pixels.
      * @param {Transform} transform - Transform used for projections.
      *
-     * @returns {IRegionOfInterest} A region of interest.
+     * @returns {TileRegionOfInterest} A region of interest.
      */
     public computeRegionOfInterest(
         renderCamera: RenderCamera,
-        size: ISize,
-        transform: Transform): IRegionOfInterest {
+        size: ViewportSize,
+        transform: Transform): TileRegionOfInterest {
         let viewportBoundaryPoints: number[][] = this._viewportBoundaryPoints(4);
-        let bbox: IBoundingBox = this._viewportPointsBoundingBox(viewportBoundaryPoints, renderCamera, transform);
+        let bbox: TileBoundingBox = this._viewportPointsBoundingBox(viewportBoundaryPoints, renderCamera, transform);
         this._clipBoundingBox(bbox);
 
         const viewportPixelWidth: number = 2 / size.width;
@@ -42,7 +42,7 @@ export class RegionOfInterestCalculator {
             [-0.5 * viewportPixelWidth, -0.5 * viewportPixelHeight],
         ];
 
-        let cpbox: IBoundingBox = this._viewportPointsBoundingBox(centralViewportPixel, renderCamera, transform);
+        let cpbox: TileBoundingBox = this._viewportPointsBoundingBox(centralViewportPixel, renderCamera, transform);
 
         return {
             bbox: bbox,
@@ -66,7 +66,7 @@ export class RegionOfInterestCalculator {
         return points;
     }
 
-    private _viewportPointsBoundingBox(viewportPoints: number[][], renderCamera: RenderCamera, transform: Transform): IBoundingBox {
+    private _viewportPointsBoundingBox(viewportPoints: number[][], renderCamera: RenderCamera, transform: Transform): TileBoundingBox {
         let basicPoints: number[][] = viewportPoints
             .map(
                 (point: number[]): number[] => {
@@ -85,8 +85,8 @@ export class RegionOfInterestCalculator {
         }
     }
 
-    private _boundingBox(points: number[][]): IBoundingBox {
-        let bbox: IBoundingBox = {
+    private _boundingBox(points: number[][]): TileBoundingBox {
+        let bbox: TileBoundingBox = {
             maxX: Number.NEGATIVE_INFINITY,
             maxY: Number.NEGATIVE_INFINITY,
             minX: Number.POSITIVE_INFINITY,
@@ -103,7 +103,7 @@ export class RegionOfInterestCalculator {
         return bbox;
     }
 
-    private _boundingBoxSpherical(points: number[][]): IBoundingBox {
+    private _boundingBoxSpherical(points: number[][]): TileBoundingBox {
         let xs: number[] = [];
         let ys: number[] = [];
         for (let i: number = 0; i < points.length; ++i) {
@@ -146,7 +146,7 @@ export class RegionOfInterestCalculator {
         }
     }
 
-    private _clipBoundingBox(bbox: IBoundingBox): void {
+    private _clipBoundingBox(bbox: TileBoundingBox): void {
         bbox.minX = Math.max(0, Math.min(1, bbox.minX));
         bbox.maxX = Math.max(0, Math.min(1, bbox.maxX));
         bbox.minY = Math.max(0, Math.min(1, bbox.minY));
diff --git a/src/tiles/TextureProvider.ts b/src/tiles/TextureProvider.ts
index 925e96dcf..a378f5c7d 100644
--- a/src/tiles/TextureProvider.ts
+++ b/src/tiles/TextureProvider.ts
@@ -14,7 +14,7 @@ import {
 
 import { ImageTileLoader } from "./ImageTileLoader";
 import { ImageTileStore } from "./ImageTileStore";
-import { IRegionOfInterest } from "./interfaces/IRegionOfInterest";
+import { TileRegionOfInterest } from "./interfaces/TileRegionOfInterest";
 
 /**
  * @class TextureProvider
@@ -28,7 +28,7 @@ export class TextureProvider {
     private _imageTileStore: ImageTileStore;
     private _renderer: THREE.WebGLRenderer;
     private _renderTarget: THREE.WebGLRenderTarget;
-    private _roi: IRegionOfInterest;
+    private _roi: TileRegionOfInterest;
 
     private _abortFunctions: Function[];
     private _tileSubscriptions: { [key: string]: Subscription };
@@ -43,7 +43,7 @@ export class TextureProvider {
 
     private _disposed: boolean;
     private _height: number;
-    private _key: string;
+    private _id: string;
     private _tileSize: number;
     private _maxLevel: number;
     private _currentLevel: number;
@@ -54,7 +54,7 @@ export class TextureProvider {
     /**
      * Create a new node texture provider instance.
      *
-     * @param {string} key - The identifier of the image for which to request tiles.
+     * @param {string} id - The identifier of the image for which to request tiles.
      * @param {number} width - The full width of the original image.
      * @param {number} height - The full height of the original image.
      * @param {number} tileSize - The size used when requesting tiles.
@@ -64,7 +64,7 @@ export class TextureProvider {
      * @param {THREE.WebGLRenderer} renderer - Renderer used for rendering tiles to texture.
      */
     constructor(
-        key: string,
+        id: string,
         width: number,
         height: number,
         tileSize: number,
@@ -75,10 +75,10 @@ export class TextureProvider {
 
         this._disposed = false;
 
-        this._key = key;
+        this._id = id;
 
         if (width <= 0 || height <= 0) {
-            console.warn(`Original image size (${width}, ${height}) is invalid (${key}). Tiles will not be loaded.`);
+            console.warn(`Original image size (${width}, ${height}) is invalid (${id}). Tiles will not be loaded.`);
         }
 
         this._width = width;
@@ -139,13 +139,13 @@ export class TextureProvider {
     }
 
     /**
-     * Get key.
+     * Get id.
      *
      * @returns {boolean} The identifier of the image for
      * which to render textures.
      */
-    public get key(): string {
-        return this._key;
+    public get id(): string {
+        return this._id;
     }
 
     /**
@@ -197,7 +197,7 @@ export class TextureProvider {
      */
     public dispose(): void {
         if (this._disposed) {
-            console.warn(`Texture already disposed (${this._key})`);
+            console.warn(`Texture already disposed (${this._id})`);
             return;
         }
 
@@ -231,9 +231,9 @@ export class TextureProvider {
      * are fetched from the store or the loader and renderedLevel
      * to the texture.
      *
-     * @param {IRegionOfInterest} roi - Spatial edges to cache.
+     * @param {TileRegionOfInterest} roi - Spatial edges to cache.
      */
-    public setRegionOfInterest(roi: IRegionOfInterest): void {
+    public setRegionOfInterest(roi: TileRegionOfInterest): void {
         if (this._width <= 0 || this._height <= 0) {
             return;
         }
@@ -343,7 +343,7 @@ export class TextureProvider {
         scaledY: number): void {
 
         let getTile: [Observable<HTMLImageElement>, Function] =
-            this._imageTileLoader.getTile(this._key, x, y, w, h, scaledX, scaledY);
+            this._imageTileLoader.getTile(this._id, x, y, w, h, scaledX, scaledY);
 
         let tile$: Observable<HTMLImageElement> = getTile[0];
         let abort: Function = getTile[1];
diff --git a/src/tiles/interfaces/IBoundingBox.ts b/src/tiles/interfaces/TileBoundingBox.ts
similarity index 82%
rename from src/tiles/interfaces/IBoundingBox.ts
rename to src/tiles/interfaces/TileBoundingBox.ts
index 8f9ed2506..7213b14dc 100644
--- a/src/tiles/interfaces/IBoundingBox.ts
+++ b/src/tiles/interfaces/TileBoundingBox.ts
@@ -1,9 +1,9 @@
 /**
  * Interface that describes a bounding box.
  *
- * @interface IBoundingBox
+ * @interface TileBoundingBox
  */
-export interface IBoundingBox {
+export interface TileBoundingBox {
     /**
      * The minimum x value.
      */
diff --git a/src/tiles/interfaces/IRegionOfInterest.ts b/src/tiles/interfaces/TileRegionOfInterest.ts
similarity index 61%
rename from src/tiles/interfaces/IRegionOfInterest.ts
rename to src/tiles/interfaces/TileRegionOfInterest.ts
index 91e098290..e319f50a3 100644
--- a/src/tiles/interfaces/IRegionOfInterest.ts
+++ b/src/tiles/interfaces/TileRegionOfInterest.ts
@@ -1,15 +1,15 @@
-import { IBoundingBox } from "./IBoundingBox";
+import { TileBoundingBox } from "./TileBoundingBox";
 
 /**
- * Interface that describes a region of interest..
+ * Interface that describes a region of interest.
  *
- * @interface IRegionOfInterest
+ * @interface TileRegionOfInterest
  */
-export interface IRegionOfInterest {
+export interface TileRegionOfInterest {
     /**
      * The bounding box for the region of interest in basic coordinates.
      */
-    bbox: IBoundingBox;
+    bbox: TileBoundingBox;
 
     /**
      * Width of the footprint of a canvas pixel in basic coordinates.
diff --git a/src/utils/EventEmitter.ts b/src/utils/EventEmitter.ts
index bc7a29b8b..317122934 100644
--- a/src/utils/EventEmitter.ts
+++ b/src/utils/EventEmitter.ts
@@ -1,59 +1,60 @@
 export class EventEmitter {
-    private _events: { [eventType: string]: any[] };
+    private _events: { [type: string]: ((event: any) => void)[] };
 
-    constructor() {
-        this._events = {};
-    }
+    constructor() { this._events = {}; }
 
     /**
      * Subscribe to an event by its name.
-     * @param {string }eventType - The name of the event to subscribe to.
-     * @param {any} fn - The handler called when the event occurs.
+     * @param {string} type - The name of the event
+     * to subscribe to.
+     * @param {(event: T) => void} handler - The
+     * handler called when the event occurs.
      */
-    public on(eventType: string, fn: any): void {
-        this._events[eventType] = this._events[eventType] || [];
-        this._events[eventType].push(fn);
-        return;
+    public on<T>(
+        type: string,
+        handler: (event: T) => void): void {
+        this._events[type] = this._events[type] || [];
+        this._events[type].push(handler);
     }
 
     /**
      * Unsubscribe from an event by its name.
-     * @param {string} eventType - The name of the event to subscribe to.
-     * @param {any} fn - The handler to remove.
+     * @param {string} type - The name of the event
+     * to unsubscribe from.
+     * @param {(event: T) => void} handler - The
+     * handler to remove.
      */
-    public off(eventType: string, fn: any): void {
-        if (!eventType) {
-            this._events = {};
-            return;
-        }
-
-        if (!this._listens(eventType)) {
-            let idx: number = this._events[eventType].indexOf(fn);
-            if (idx >= 0) {
-                this._events[eventType].splice(idx, 1);
+    public off<T>(
+        type: string,
+        handler: (event: T) => void): void {
+        if (!type) { this._events = {}; return; }
+
+        if (!this._listens(type)) {
+            const index = this._events[type].indexOf(handler);
+            if (index >= 0) {
+                this._events[type].splice(index, 1);
             }
-            if (this._events[eventType].length) {
-                delete this._events[eventType];
+            if (this._events[type].length) {
+                delete this._events[type];
             }
         } else {
-            delete this._events[eventType];
+            delete this._events[type];
         }
-
-        return;
     }
 
-    public fire(eventType: string, data: any): void {
-        if (!this._listens(eventType)) {
-            return;
-        }
-
-        for (let fn of this._events[eventType]) {
-            fn.call(this, data);
+    /**
+     * @ignore
+     */
+    public fire<T>(
+        type: string,
+        event: T): void {
+        if (!this._listens(type)) { return; }
+        for (let fn of this._events[type]) {
+            fn.call(this, event);
         }
-        return;
     }
 
     private _listens(eventType: string): boolean {
-        return !!(this._events && this._events[eventType]);
+        return eventType in this._events;
     }
 }
diff --git a/src/utils/Settings.ts b/src/utils/Settings.ts
deleted file mode 100644
index 89218dfed..000000000
--- a/src/utils/Settings.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { ImageSize } from "../viewer/ImageSize";
-import { IViewerOptions } from "../viewer/interfaces/IViewerOptions";
-
-export class Settings {
-    private static _baseImageSize: number;
-    private static _baseSphericalSize: number;
-    private static _maxImageSize: number;
-
-    public static get baseImageSize(): number {
-        return Settings._baseImageSize;
-    }
-
-    public static get baseSphericalSize(): number {
-        return Settings._baseSphericalSize;
-    }
-
-    public static get maxImageSize(): number {
-        return Settings._maxImageSize;
-    }
-
-    public static setOptions(options: IViewerOptions): void {
-        Settings._baseImageSize = options.baseImageSize != null ?
-            options.baseImageSize :
-            ImageSize.Size640;
-
-        Settings._baseSphericalSize = options.baseSphericalSize != null ?
-            options.baseSphericalSize :
-            ImageSize.Size2048;
-
-        Settings._maxImageSize = options.maxImageSize != null ?
-            options.maxImageSize :
-            ImageSize.Size2048;
-    }
-}
diff --git a/src/utils/Urls.ts b/src/utils/Urls.ts
index d8cb3fffa..d7f1ca37a 100644
--- a/src/utils/Urls.ts
+++ b/src/utils/Urls.ts
@@ -1,4 +1,4 @@
-import { IUrlOptions } from "../viewer/interfaces/IUrlOptions";
+import { UrlOptions } from "../viewer/options/UrlOptions";
 
 export class Urls {
     private static _exploreHost: string = "www.mapillary.com";
@@ -8,15 +8,15 @@ export class Urls {
         return `${Urls._scheme}://${Urls._exploreHost}`;
     }
 
-    public static exploreImage(key: string): string {
-        return `${Urls._scheme}://${Urls._exploreHost}/app/?pKey=${key}&focus=photo`;
+    public static exploreImage(id: string): string {
+        return `${Urls._scheme}://${Urls._exploreHost}/app/?pKey=${id}&focus=photo`;
     }
 
     public static exploreUser(username: string): string {
         return `${Urls._scheme}://${Urls._exploreHost}/app/user/${username}`;
     }
 
-    public static setOptions(options: IUrlOptions): void {
+    public static setOptions(options: UrlOptions): void {
         if (!options) {
             return;
         }
diff --git a/src/utils/interfaces/IInterpolator.ts b/src/utils/interfaces/IInterpolator.ts
deleted file mode 100644
index 34eb0061e..000000000
--- a/src/utils/interfaces/IInterpolator.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface IInterpolator {
-    solve(x: number): number;
-}
diff --git a/src/viewer/CacheService.ts b/src/viewer/CacheService.ts
index 6cf4494d5..f2d9568fd 100644
--- a/src/viewer/CacheService.ts
+++ b/src/viewer/CacheService.ts
@@ -20,9 +20,9 @@ import {
 import { GraphMode } from "../graph/GraphMode";
 import { GraphService } from "../graph/GraphService";
 import { Node } from "../graph/Node";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../graph/interfaces/NavigationEdgeStatus";
 import { StateService } from "../state/StateService";
-import { IFrame } from "../state/interfaces/IFrame";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
 export class CacheService {
@@ -52,19 +52,19 @@ export class CacheService {
         subs.push(this._stateService.currentState$.pipe(
             distinctUntilChanged(
                 undefined,
-                (frame: IFrame): string => {
-                    return frame.state.currentNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.currentNode.id;
                 }),
             map(
-                (frame: IFrame): [string[], string] => {
+                (frame: AnimationFrame): [string[], string] => {
                     const trajectory: Node[] = frame.state.trajectory;
                     const trajectoryKeys: string[] = trajectory
                         .map(
                             (n: Node): string => {
-                                return n.key;
+                                return n.id;
                             });
 
-                    const sequenceKey: string = trajectory[trajectory.length - 1].sequenceKey;
+                    const sequenceKey: string = trajectory[trajectory.length - 1].sequenceId;
 
                     return [trajectoryKeys, sequenceKey];
                 }),
@@ -84,24 +84,24 @@ export class CacheService {
             skip(1),
             withLatestFrom(this._stateService.currentState$),
             switchMap(
-                ([mode, frame]: [GraphMode, IFrame]): Observable<IEdgeStatus> => {
+                ([mode, frame]: [GraphMode, AnimationFrame]): Observable<NavigationEdgeStatus> => {
                     return mode === GraphMode.Sequence ?
                         this._keyToEdges(
-                            frame.state.currentNode.key,
-                            (node: Node): Observable<IEdgeStatus> => {
+                            frame.state.currentNode.id,
+                            (node: Node): Observable<NavigationEdgeStatus> => {
                                 return node.sequenceEdges$;
                             }) :
                         observableFrom(frame.state.trajectory
                             .map(
                                 (node: Node): string => {
-                                    return node.key;
+                                    return node.id;
                                 })
                             .slice(frame.state.currentIndex)).pipe(
                                 mergeMap(
-                                    (key: string): Observable<IEdgeStatus> => {
+                                    (key: string): Observable<NavigationEdgeStatus> => {
                                         return this._keyToEdges(
                                             key,
-                                            (node: Node): Observable<IEdgeStatus> => {
+                                            (node: Node): Observable<NavigationEdgeStatus> => {
                                                 return node.spatialEdges$;
                                             });
                                     },
@@ -110,10 +110,10 @@ export class CacheService {
             .subscribe(() => { /*noop*/ }));
 
         subs.push(this._graphService.dataAdded$.pipe(
-            withLatestFrom(this._stateService.currentKey$),
+            withLatestFrom(this._stateService.currentId$),
             switchMap(
-                ([_, imageKey]: [string, string]): Observable<Node> => {
-                    return this._graphService.cacheNode$(imageKey)
+                ([_, imageId]: [string, string]): Observable<Node> => {
+                    return this._graphService.cacheNode$(imageId)
                 }))
             .subscribe(() => { /*noop*/ }))
 
@@ -127,16 +127,16 @@ export class CacheService {
         this._started = false;
     }
 
-    private _keyToEdges(key: string, nodeToEdgeMap: (node: Node) => Observable<IEdgeStatus>): Observable<IEdgeStatus> {
+    private _keyToEdges(key: string, nodeToEdgeMap: (node: Node) => Observable<NavigationEdgeStatus>): Observable<NavigationEdgeStatus> {
         return this._graphService.cacheNode$(key).pipe(
             switchMap(nodeToEdgeMap),
             first(
-                (status: IEdgeStatus): boolean => {
+                (status: NavigationEdgeStatus): boolean => {
                     return status.cached;
                 }),
             timeout(15000),
             catchError(
-                (error: Error): Observable<IEdgeStatus> => {
+                (error: Error): Observable<NavigationEdgeStatus> => {
                     console.error(`Failed to cache edges (${key}).`, error);
 
                     return observableEmpty();
diff --git a/src/viewer/ComponentController.ts b/src/viewer/ComponentController.ts
index dab9b21c4..bbc39c884 100644
--- a/src/viewer/ComponentController.ts
+++ b/src/viewer/ComponentController.ts
@@ -12,17 +12,15 @@ import {
 import { Container } from "./Container";
 import { Navigator } from "./Navigator";
 import { Observer } from "./Observer";
-import { IComponentOptions } from "./interfaces/IComponentOptions";
+import { ComponentOptions } from "./options/ComponentOptions";
 
 import { Component } from "../component/Component";
 import { ComponentService } from "../component/ComponentService";
-import { CoverComponent } from "../component/CoverComponent";
-import { IComponentConfiguration } from "../component/interfaces/IComponentConfiguration";
-import {
-    CoverState,
-    ICoverConfiguration,
-} from "../component/interfaces/ICoverConfiguration";
+import { CoverComponent } from "../component/cover/CoverComponent";
+import { ComponentConfiguration } from "../component/interfaces/ComponentConfiguration";
+import { CoverConfiguration } from "../component/interfaces/CoverConfiguration";
 import { Node } from "../graph/Node";
+import { CoverState } from "../component/cover/CoverState";
 
 export class ComponentController {
     private _container: Container;
@@ -30,7 +28,7 @@ export class ComponentController {
     private _observer: Observer;
     private _navigator: Navigator;
     private _componentService: ComponentService;
-    private _options: IComponentOptions;
+    private _options: ComponentOptions;
     private _key: string;
     private _navigable: boolean;
     private _configurationSubscription: Subscription;
@@ -40,7 +38,7 @@ export class ComponentController {
         navigator: Navigator,
         observer: Observer,
         key: string,
-        options: IComponentOptions,
+        options: ComponentOptions,
         componentService?: ComponentService) {
         this._container = container;
         this._observer = observer;
@@ -60,7 +58,7 @@ export class ComponentController {
             this._initilizeCoverComponent();
             this._subscribeCoverComponent();
         } else {
-            this._navigator.movedToKey$.pipe(
+            this._navigator.movedToId$.pipe(
                 first(
                     (k: string): boolean => {
                         return k != null;
@@ -69,7 +67,10 @@ export class ComponentController {
                     (k: string): void => {
                         this._key = k;
                         this._componentService.deactivateCover();
-                        this._coverComponent.configure({ key: this._key, state: CoverState.Hidden });
+                        this._coverComponent.configure({
+                            id: this._key,
+                            state: CoverState.Hidden,
+                        });
                         this._subscribeCoverComponent();
                         this._navigator.stateService.start();
                         this._navigator.cacheService.start();
@@ -83,7 +84,7 @@ export class ComponentController {
         return this._navigable;
     }
 
-    public get<TComponent extends Component<IComponentConfiguration>>(name: string): TComponent {
+    public get<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent {
         return this._componentService.get<TComponent>(name);
     }
 
@@ -134,9 +135,9 @@ export class ComponentController {
     }
 
     private _initilizeCoverComponent(): void {
-        let options: IComponentOptions = this._options;
+        let options: ComponentOptions = this._options;
 
-        this._coverComponent.configure({ key: this._key });
+        this._coverComponent.configure({ id: this._key });
         if (options.cover === undefined || options.cover) {
             this.activateCover();
         } else {
@@ -158,23 +159,23 @@ export class ComponentController {
             this._coverComponent.configuration$.pipe(
                 distinctUntilChanged(
                     undefined,
-                    (c: ICoverConfiguration): CoverState => {
+                    (c: CoverConfiguration): CoverState => {
                         return c.state;
                     }))
-                .subscribe((conf: ICoverConfiguration) => {
+                .subscribe((conf: CoverConfiguration) => {
                     if (conf.state === CoverState.Loading) {
-                        this._navigator.stateService.currentKey$.pipe(
+                        this._navigator.stateService.currentId$.pipe(
                             first(),
                             switchMap(
                                 (key: string): Observable<Node> => {
-                                    const keyChanged: boolean = key == null || key !== conf.key;
+                                    const keyChanged: boolean = key == null || key !== conf.id;
 
                                     if (keyChanged) {
                                         this._setNavigable(false);
                                     }
 
                                     return keyChanged ?
-                                        this._navigator.moveToKey$(conf.key) :
+                                        this._navigator.moveTo$(conf.id) :
                                         this._navigator.stateService.currentNode$.pipe(
                                             first());
                                 }))
@@ -200,12 +201,12 @@ export class ComponentController {
                         this._navigator.playService.stop();
                         this._navigator.panService.stop();
                         this._componentService.activateCover();
-                        this._setNavigable(conf.key == null);
+                        this._setNavigable(conf.id == null);
                     }
                 });
     }
 
-    private _uFalse<TConfiguration extends IComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
+    private _uFalse<TConfiguration extends ComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
         if (option === undefined) {
             this._componentService.deactivate(name);
             return;
@@ -222,7 +223,7 @@ export class ComponentController {
         this._componentService.activate(name);
     }
 
-    private _uTrue<TConfiguration extends IComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
+    private _uTrue<TConfiguration extends ComponentConfiguration>(option: boolean | TConfiguration, name: string): void {
         if (option === undefined) {
             this._componentService.activate(name);
             return;
diff --git a/src/viewer/Container.ts b/src/viewer/Container.ts
index 780f2883e..76d53b568 100644
--- a/src/viewer/Container.ts
+++ b/src/viewer/Container.ts
@@ -2,7 +2,7 @@ import { KeyboardService } from "./KeyboardService";
 import { MouseService } from "./MouseService";
 import { SpriteService } from "./SpriteService";
 import { TouchService } from "./TouchService";
-import { IViewerOptions } from "./interfaces/IViewerOptions";
+import { ViewerOptions } from "./options/ViewerOptions";
 
 import { DOMRenderer } from "../render/DOMRenderer";
 import { GLRenderer } from "../render/GLRenderer";
@@ -32,7 +32,7 @@ export class Container {
     private _dom: DOM;
 
     constructor(
-        options: IViewerOptions,
+        options: ViewerOptions,
         stateService: StateService,
         dom?: DOM) {
 
diff --git a/src/viewer/CustomRenderer.ts b/src/viewer/CustomRenderer.ts
index b9a15302a..f5d7b9ef0 100644
--- a/src/viewer/CustomRenderer.ts
+++ b/src/viewer/CustomRenderer.ts
@@ -9,10 +9,10 @@ import { ICustomRenderer } from "./interfaces/ICustomRenderer";
 import { Navigator } from "./Navigator";
 import { Container } from "./Container";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { WebGLRenderer } from "three";
 import { RenderCamera } from "../render/RenderCamera";
-import { Viewer } from "./Viewer";
+import { IViewer } from "./interfaces/IViewer";
 
 export class CustomRenderer {
     private _renderers: {
@@ -28,7 +28,7 @@ export class CustomRenderer {
         this._renderers = {};
     }
 
-    public add(renderer: ICustomRenderer, viewer: Viewer): void {
+    public add(renderer: ICustomRenderer, viewer: IViewer): void {
         const subs = new SubscriptionHolder();
         this._renderers[renderer.id] = { subs, renderer };
 
@@ -40,11 +40,11 @@ export class CustomRenderer {
             .pipe(take(1))
             .subscribe(
                 ([gl, reference]:
-                    [WebGLRenderer, ILatLonAlt]): void => {
+                    [WebGLRenderer, LatLonAlt]): void => {
                     renderer.onAdd(viewer, reference, gl.getContext());
                 }));
 
-        subs.push(this._container.glRenderer.postrender$
+        subs.push(this._container.glRenderer.opaqueRender$
             .pipe(
                 withLatestFrom(
                     this._container.renderService.renderCamera$,
@@ -67,12 +67,12 @@ export class CustomRenderer {
         subs.push(this._navigator.stateService.reference$
             .pipe(skip(1))
             .subscribe(
-                (reference: ILatLonAlt): void => {
+                (reference: LatLonAlt): void => {
                     renderer.onReferenceChanged(viewer, reference);
                 }));
     }
 
-    public dispose(viewer: Viewer): void {
+    public dispose(viewer: IViewer): void {
         for (const id of Object.keys(this._renderers)) {
             this.remove(id, viewer);
         }
@@ -82,7 +82,7 @@ export class CustomRenderer {
         return id in this._renderers;
     }
 
-    public remove(id: string, viewer: Viewer): void {
+    public remove(id: string, viewer: IViewer): void {
         this._renderers[id].subs.unsubscribe();
 
         const renderer = this._renderers[id].renderer;
diff --git a/src/viewer/ImageSize.ts b/src/viewer/ImageSize.ts
deleted file mode 100644
index d11209d73..000000000
--- a/src/viewer/ImageSize.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Enumeration for image sizes
- * @enum {number}
- * @readonly
- * @description Image sizes in pixels for the long side of the image.
- */
-export enum ImageSize {
-    /**
-     * 320 pixels image size
-     */
-    Size320 = 320,
-
-    /**
-     * 640 pixels image size
-     */
-    Size640 = 640,
-
-    /**
-     * 1024 pixels image size
-     */
-    Size1024 = 1024,
-
-    /**
-     * 2048 pixels image size
-     */
-    Size2048 = 2048,
-}
diff --git a/src/viewer/LoadingService.ts b/src/viewer/LoadingService.ts
index 8e88240f1..074765abb 100644
--- a/src/viewer/LoadingService.ts
+++ b/src/viewer/LoadingService.ts
@@ -13,7 +13,7 @@ import {
     Subject,
 } from "rxjs";
 
-interface ILoader {
+interface Loader {
     task: string;
     loading: boolean;
 }
@@ -25,7 +25,7 @@ export class LoadingService {
     constructor() {
         this._loaders$ = this._loadersSubject$.pipe(
             scan(
-                (loaders: { [key: string]: boolean }, loader: ILoader): { [key: string]: boolean } => {
+                (loaders: { [key: string]: boolean }, loader: Loader): { [key: string]: boolean } => {
                     if (loader.task !== undefined) {
                         loaders[loader.task] = loader.loading;
                     }
diff --git a/src/viewer/MouseService.ts b/src/viewer/MouseService.ts
index b8d111938..ada0b459b 100644
--- a/src/viewer/MouseService.ts
+++ b/src/viewer/MouseService.ts
@@ -26,8 +26,8 @@ import {
     withLatestFrom,
 } from "rxjs/operators";
 
-import { IMouseClaim } from "./interfaces/IMouseClaim";
-import { IMouseDeferPixels } from "./interfaces/IMouseDeferPixels";
+import { MouseClaim } from "./interfaces/MouseClaim";
+import { MousePixelDeferral } from "./interfaces/MousePixelDeferral";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
 type Button = 0 | 2;
@@ -83,13 +83,13 @@ export class MouseService {
     private _mouseRightDrag$: Observable<MouseEvent>;
     private _mouseRightDragEnd$: Observable<MouseEvent | FocusEvent>;
 
-    private _deferPixelClaims$: Subject<IMouseDeferPixels>;
+    private _deferPixelClaims$: Subject<MousePixelDeferral>;
     private _deferPixels$: Observable<number>;
     private _proximateClick$: Observable<MouseEvent>;
     private _staticClick$: Observable<MouseEvent>;
 
-    private _claimMouse$: Subject<IMouseClaim>;
-    private _claimWheel$: Subject<IMouseClaim>;
+    private _claimMouse$: Subject<MouseClaim>;
+    private _claimWheel$: Subject<MouseClaim>;
 
     private _mouseOwner$: Observable<string>;
     private _wheelOwner$: Observable<string>;
@@ -113,13 +113,13 @@ export class MouseService {
             publishReplay(1),
             refCount());
 
-        this._claimMouse$ = new Subject<IMouseClaim>();
-        this._claimWheel$ = new Subject<IMouseClaim>();
+        this._claimMouse$ = new Subject<MouseClaim>();
+        this._claimWheel$ = new Subject<MouseClaim>();
 
-        this._deferPixelClaims$ = new Subject<IMouseDeferPixels>();
+        this._deferPixelClaims$ = new Subject<MousePixelDeferral>();
         this._deferPixels$ = this._deferPixelClaims$.pipe(
             scan(
-                (claims: { [key: string]: number }, claim: IMouseDeferPixels): { [key: string]: number } => {
+                (claims: { [key: string]: number }, claim: MousePixelDeferral): { [key: string]: number } => {
                     if (claim.deferPixels == null) {
                         delete claims[claim.name];
                     } else {
@@ -571,10 +571,10 @@ export class MouseService {
                 }));
     }
 
-    private _createOwner$(claim$: Observable<IMouseClaim>): Observable<string> {
+    private _createOwner$(claim$: Observable<MouseClaim>): Observable<string> {
         return claim$.pipe(
             scan(
-                (claims: { [key: string]: number }, claim: IMouseClaim): { [key: string]: number } => {
+                (claims: { [key: string]: number }, claim: MouseClaim): { [key: string]: number } => {
                     if (claim.zindex == null) {
                         delete claims[claim.name];
                     } else {
diff --git a/src/viewer/Navigator.ts b/src/viewer/Navigator.ts
index abcb3055e..484f3538b 100644
--- a/src/viewer/Navigator.ts
+++ b/src/viewer/Navigator.ts
@@ -21,20 +21,20 @@ import { CacheService } from "./CacheService";
 import { LoadingService } from "./LoadingService";
 import { PanService } from "./PanService";
 import { PlayService } from "./PlayService";
-import { IViewerOptions } from "./interfaces/IViewerOptions";
+import { ViewerOptions } from "./options/ViewerOptions";
 
 import { APIWrapper } from "../api/APIWrapper";
 import { DataProviderBase } from "../api/DataProviderBase";
-import { FalcorDataProvider } from "../api/FalcorDataProvider";
+import { FalcorDataProvider } from "../api/falcor/FalcorDataProvider";
 import { AbortMapillaryError } from "../error/AbortMapillaryError";
 import { FilterExpression } from "../graph/FilterExpression";
 import { Graph } from "../graph/Graph";
 import { GraphService } from "../graph/GraphService";
 import { Node } from "../graph/Node";
-import { EdgeDirection } from "../graph/edge/EdgeDirection";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
+import { NavigationDirection } from "../graph/edge/NavigationDirection";
+import { NavigationEdgeStatus } from "../graph/interfaces/NavigationEdgeStatus";
 import { StateService } from "../state/StateService";
-import { IFrame } from "../state/interfaces/IFrame";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 
 export class Navigator {
     private _api: APIWrapper;
@@ -47,15 +47,15 @@ export class Navigator {
     private _playService: PlayService;
     private _stateService: StateService;
 
-    private _keyRequested$: BehaviorSubject<string>;
-    private _movedToKey$: BehaviorSubject<string>;
+    private _idRequested$: BehaviorSubject<string>;
+    private _movedToId$: BehaviorSubject<string>;
 
     private _request$: ReplaySubject<Node>;
     private _requestSubscription: Subscription;
     private _nodeRequestSubscription: Subscription;
 
     constructor(
-        options: IViewerOptions,
+        options: ViewerOptions,
         api?: APIWrapper,
         graphService?: GraphService,
         loadingService?: LoadingService,
@@ -98,8 +98,8 @@ export class Navigator {
             panService :
             new PanService(this._graphService, this._stateService, options.combinedPanning);
 
-        this._keyRequested$ = new BehaviorSubject<string>(null);
-        this._movedToKey$ = new BehaviorSubject<string>(null);
+        this._idRequested$ = new BehaviorSubject<string>(null);
+        this._movedToId$ = new BehaviorSubject<string>(null);
 
         this._request$ = null;
         this._requestSubscription = null;
@@ -122,8 +122,8 @@ export class Navigator {
         return this._loadingService;
     }
 
-    public get movedToKey$(): Observable<string> {
-        return this._movedToKey$;
+    public get movedToId$(): Observable<string> {
+        return this._movedToId$;
     }
 
     public get panService(): PanService {
@@ -148,18 +148,18 @@ export class Navigator {
         this._stateService.dispose();
     }
 
-    public moveToKey$(key: string): Observable<Node> {
-        this._abortRequest(`to key ${key}`);
+    public moveTo$(id: string): Observable<Node> {
+        this._abortRequest(`to id ${id}`);
 
         this._loadingService.startLoading(this._loadingName);
 
-        const node$: Observable<Node> = this._moveToKey$(key);
+        const node$: Observable<Node> = this._moveTo$(id);
 
         return this._makeRequest$(node$);
     }
 
-    public moveDir$(direction: EdgeDirection): Observable<Node> {
-        this._abortRequest(`in dir ${EdgeDirection[direction]}`);
+    public moveDir$(direction: NavigationDirection): Observable<Node> {
+        this._abortRequest(`in dir ${NavigationDirection[direction]}`);
 
         this._loadingService.startLoading(this._loadingName);
 
@@ -167,15 +167,15 @@ export class Navigator {
             first(),
             mergeMap(
                 (node: Node): Observable<string> => {
-                    return ([EdgeDirection.Next, EdgeDirection.Prev].indexOf(direction) > -1 ?
+                    return ([NavigationDirection.Next, NavigationDirection.Prev].indexOf(direction) > -1 ?
                         node.sequenceEdges$ :
                         node.spatialEdges$).pipe(
                             first(),
                             map(
-                                (status: IEdgeStatus): string => {
+                                (status: NavigationEdgeStatus): string => {
                                     for (let edge of status.edges) {
                                         if (edge.data.direction === direction) {
-                                            return edge.to;
+                                            return edge.target;
                                         }
                                     }
 
@@ -183,14 +183,14 @@ export class Navigator {
                                 }));
                 }),
             mergeMap(
-                (directionKey: string) => {
-                    if (directionKey == null) {
+                (directionId: string) => {
+                    if (directionId == null) {
                         this._loadingService.stopLoading(this._loadingName);
 
                         return observableThrowError(new Error(`Direction (${direction}) does not exist for current node.`));
                     }
 
-                    return this._moveToKey$(directionKey);
+                    return this._moveTo$(directionId);
                 }));
 
         return this._makeRequest$(node$);
@@ -199,32 +199,32 @@ export class Navigator {
     public setFilter$(filter: FilterExpression): Observable<void> {
         this._stateService.clearNodes();
 
-        return this._movedToKey$.pipe(
+        return this._movedToId$.pipe(
             first(),
             mergeMap(
-                (key: string): Observable<Node> => {
-                    if (key != null) {
-                        return this._trajectoryKeys$().pipe(
+                (id: string): Observable<Node> => {
+                    if (id != null) {
+                        return this._trajectoryIds$().pipe(
                             mergeMap(
-                                (keys: string[]): Observable<Node> => {
+                                (ids: string[]): Observable<Node> => {
                                     return this._graphService.setFilter$(filter).pipe(
                                         mergeMap(
                                             (): Observable<Node> => {
-                                                return this._cacheKeys$(keys);
+                                                return this._cacheIds$(ids);
                                             }));
                                 }),
                             last());
                     }
 
-                    return this._keyRequested$.pipe(
+                    return this._idRequested$.pipe(
                         first(),
                         mergeMap(
-                            (requestedKey: string): Observable<Node> => {
-                                if (requestedKey != null) {
+                            (requestedId: string): Observable<Node> => {
+                                if (requestedId != null) {
                                     return this._graphService.setFilter$(filter).pipe(
                                         mergeMap(
                                             (): Observable<Node> => {
-                                                return this._graphService.cacheNode$(requestedKey);
+                                                return this._graphService.cacheNode$(requestedId);
                                             }));
                                 }
 
@@ -246,23 +246,23 @@ export class Navigator {
 
         this._stateService.clearNodes();
 
-        return this._movedToKey$.pipe(
+        return this._movedToId$.pipe(
             first(),
             tap(
                 (): void => {
                     this._api.setUserToken(userToken);
                 }),
             mergeMap(
-                (key: string): Observable<void> => {
-                    return key == null ?
+                (id: string): Observable<void> => {
+                    return id == null ?
                         this._graphService.reset$([]) :
-                        this._trajectoryKeys$().pipe(
+                        this._trajectoryIds$().pipe(
                             mergeMap(
-                                (keys: string[]): Observable<Node> => {
-                                    return this._graphService.reset$(keys).pipe(
+                                (ids: string[]): Observable<Node> => {
+                                    return this._graphService.reset$(ids).pipe(
                                         mergeMap(
                                             (): Observable<Node> => {
-                                                return this._cacheKeys$(keys);
+                                                return this._cacheIds$(ids);
                                             }));
                                 }),
                             last(),
@@ -273,11 +273,11 @@ export class Navigator {
                 }));
     }
 
-    private _cacheKeys$(keys: string[]): Observable<Node> {
-        let cacheNodes$: Observable<Node>[] = keys
+    private _cacheIds$(ids: string[]): Observable<Node> {
+        let cacheNodes$: Observable<Node>[] = ids
             .map(
-                (key: string): Observable<Node> => {
-                    return this._graphService.cacheNode$(key);
+                (id: string): Observable<Node> => {
+                    return this._graphService.cacheNode$(id);
                 });
 
         return observableFrom(cacheNodes$).pipe(
@@ -328,14 +328,14 @@ export class Navigator {
         return request$;
     }
 
-    private _moveToKey$(key: string): Observable<Node> {
-        this._keyRequested$.next(key);
+    private _moveTo$(id: string): Observable<Node> {
+        this._idRequested$.next(id);
 
-        return this._graphService.cacheNode$(key).pipe(
+        return this._graphService.cacheNode$(id).pipe(
             tap(
                 (node: Node) => {
                     this._stateService.setNodes([node]);
-                    this._movedToKey$.next(node.key);
+                    this._movedToId$.next(node.id);
                 }),
             finalize(
                 (): void => {
@@ -343,15 +343,15 @@ export class Navigator {
                 }));
     }
 
-    private _trajectoryKeys$(): Observable<string[]> {
+    private _trajectoryIds$(): Observable<string[]> {
         return this._stateService.currentState$.pipe(
             first(),
             map(
-                (frame: IFrame): string[] => {
+                (frame: AnimationFrame): string[] => {
                     return frame.state.trajectory
                         .map(
                             (node: Node): string => {
-                                return node.key;
+                                return node.id;
                             });
                 }));
     }
diff --git a/src/viewer/Observer.ts b/src/viewer/Observer.ts
index dfacae25b..31ae19672 100644
--- a/src/viewer/Observer.ts
+++ b/src/viewer/Observer.ts
@@ -4,7 +4,6 @@ import {
     merge as observableMerge,
     Observable,
     Subject,
-    Subscription,
 } from "rxjs";
 
 import {
@@ -19,44 +18,58 @@ import {
 import { Container } from "./Container";
 import { Navigator } from "./Navigator";
 import { Projection } from "./Projection";
-import { Viewer } from "./Viewer";
-import { IUnprojection } from "./interfaces/IUnprojection";
-import { IViewerMouseEvent } from "./interfaces/IViewerMouseEvent";
+import { Unprojection } from "./interfaces/Unprojection";
+import { ViewerMouseEvent } from "./events/ViewerMouseEvent";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { Transform } from "../geo/Transform";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { Node } from "../graph/Node";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
+import { NavigationEdgeStatus } from "../graph/interfaces/NavigationEdgeStatus";
 import { RenderCamera } from "../render/RenderCamera";
-import { EventEmitter } from "../utils/EventEmitter";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
+import { ViewerEvent } from "./events/ViewerEvent";
+import {
+    ViewerBearingEvent,
+    ViewerLoadingEvent,
+    ViewerNavigableEvent,
+    ViewerNavigationEdgeStatusEvent,
+    ViewerNodeEvent,
+    ViewerStateEvent,
+} from "./events/ViewerStateEvent";
+import { IViewer } from "./interfaces/IViewer";
+
+type UnprojectionParams = [
+    [
+        ViewerMouseEvent['type'],
+        MouseEvent,
+    ],
+    RenderCamera,
+    LatLonAlt,
+    Transform,
+]
 
 export class Observer {
     private _started: boolean;
 
     private _navigable$: Subject<boolean>;
 
-    private _bearingSubscription: Subscription;
-    private _currentNodeSubscription: Subscription;
-    private _fovSubscription: Subscription;
-    private _moveSubscription: Subscription;
-    private _positionSubscription: Subscription;
-    private _povSubscription: Subscription;
-    private _sequenceEdgesSubscription: Subscription;
-    private _spatialEdgesSubscription: Subscription;
-    private _viewerMouseEventSubscription: Subscription;
-
-    private _subscriptions: SubscriptionHolder = new SubscriptionHolder();
+    private _subscriptions: SubscriptionHolder =
+        new SubscriptionHolder();
+    private _emitSubscriptions: SubscriptionHolder =
+        new SubscriptionHolder();
 
     private _container: Container;
-    private _eventEmitter: EventEmitter;
+    private _viewer: IViewer;
     private _navigator: Navigator;
     private _projection: Projection;
 
-    constructor(eventEmitter: EventEmitter, navigator: Navigator, container: Container) {
+    constructor(
+        viewer: IViewer,
+        navigator: Navigator,
+        container: Container) {
         this._container = container;
-        this._eventEmitter = eventEmitter;
+        this._viewer = viewer;
         this._navigator = navigator;
         this._projection = new Projection();
 
@@ -66,17 +79,30 @@ export class Observer {
 
         const subs = this._subscriptions;
 
-        // navigable and loading should always emit, also when cover is activated.
+        // navigable and loading should always emit,
+        // also when cover is activated.
         subs.push(this._navigable$
             .subscribe(
                 (navigable: boolean): void => {
-                    this._eventEmitter.fire(Viewer.navigablechanged, navigable);
+                    const type: ViewerEvent = "navigable";
+                    const event: ViewerNavigableEvent = {
+                        navigable,
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
                 }));
 
         subs.push(this._navigator.loadingService.loading$
             .subscribe(
                 (loading: boolean): void => {
-                    this._eventEmitter.fire(Viewer.loadingchanged, loading);
+                    const type: ViewerEvent = "loading";
+                    const event: ViewerLoadingEvent = {
+                        loading,
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
                 }));
     }
 
@@ -97,14 +123,16 @@ export class Observer {
         this._subscriptions.unsubscribe();
     }
 
-    public project$(latLon: ILatLon): Observable<number[]> {
+    public project$(
+        latLon: LatLon)
+        : Observable<number[]> {
         return observableCombineLatest(
             this._container.renderService.renderCamera$,
             this._navigator.stateService.currentNode$,
             this._navigator.stateService.reference$).pipe(
                 first(),
                 map(
-                    ([render, node, reference]: [RenderCamera, Node, ILatLonAlt]): number[] => {
+                    ([render, node, reference]: [RenderCamera, Node, LatLonAlt]): number[] => {
                         if (this._projection.distanceBetweenLatLons(latLon, node.latLon) > 1000) {
                             return null;
                         }
@@ -121,7 +149,9 @@ export class Observer {
                     }));
     }
 
-    public projectBasic$(basicPoint: number[]): Observable<number[]> {
+    public projectBasic$(
+        basicPoint: number[])
+        : Observable<number[]> {
         return observableCombineLatest(
             this._container.renderService.renderCamera$,
             this._navigator.stateService.currentTransform$).pipe(
@@ -141,38 +171,55 @@ export class Observer {
     }
 
     public startEmit(): void {
-        if (this._started) {
-            return;
-        }
+        if (this._started) { return; }
 
         this._started = true;
+        const subs = this._emitSubscriptions;
 
-        this._currentNodeSubscription = this._navigator.stateService.currentNodeExternal$
+        subs.push(this._navigator.stateService.currentNodeExternal$
             .subscribe((node: Node): void => {
-                this._eventEmitter.fire(Viewer.nodechanged, node);
-            });
+                const type: ViewerEvent = "node";
+                const event: ViewerNodeEvent = {
+                    node,
+                    target: this._viewer,
+                    type,
+                }
+                this._viewer.fire(type, event);
+            }));
 
-        this._sequenceEdgesSubscription = this._navigator.stateService.currentNodeExternal$.pipe(
+        subs.push(this._navigator.stateService.currentNodeExternal$.pipe(
             switchMap(
-                (node: Node): Observable<IEdgeStatus> => {
+                (node: Node): Observable<NavigationEdgeStatus> => {
                     return node.sequenceEdges$;
                 }))
             .subscribe(
-                (status: IEdgeStatus): void => {
-                    this._eventEmitter.fire(Viewer.sequenceedgeschanged, status);
-                });
+                (status: NavigationEdgeStatus): void => {
+                    const type: ViewerEvent = "sequenceedges";
+                    const event: ViewerNavigationEdgeStatusEvent = {
+                        status,
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
+                }));
 
-        this._spatialEdgesSubscription = this._navigator.stateService.currentNodeExternal$.pipe(
+        subs.push(this._navigator.stateService.currentNodeExternal$.pipe(
             switchMap(
-                (node: Node): Observable<IEdgeStatus> => {
+                (node: Node): Observable<NavigationEdgeStatus> => {
                     return node.spatialEdges$;
                 }))
             .subscribe(
-                (status: IEdgeStatus): void => {
-                    this._eventEmitter.fire(Viewer.spatialedgeschanged, status);
-                });
+                (status: NavigationEdgeStatus): void => {
+                    const type: ViewerEvent = "spatialedges";
+                    const event: ViewerNavigationEdgeStatusEvent = {
+                        status,
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
+                }));
 
-        this._moveSubscription = observableCombineLatest(
+        subs.push(observableCombineLatest(
             this._navigator.stateService.inMotion$,
             this._container.mouseService.active$,
             this._container.touchService.active$).pipe(
@@ -183,14 +230,15 @@ export class Observer {
                 distinctUntilChanged())
             .subscribe(
                 (started: boolean) => {
-                    if (started) {
-                        this._eventEmitter.fire(Viewer.movestart, null);
-                    } else {
-                        this._eventEmitter.fire(Viewer.moveend, null);
-                    }
-                });
+                    const type: ViewerEvent = started ? "movestart" : "moveend";
+                    const event: ViewerStateEvent = {
+                        target: this._viewer,
+                        type,
+                    };
+                    this._viewer.fire(type, event);
+                }));
 
-        this._bearingSubscription = this._container.renderService.bearing$.pipe(
+        subs.push(this._container.renderService.bearing$.pipe(
             auditTime(100),
             distinctUntilChanged(
                 (b1: number, b2: number): boolean => {
@@ -198,10 +246,16 @@ export class Observer {
                 }))
             .subscribe(
                 (bearing): void => {
-                    this._eventEmitter.fire(Viewer.bearingchanged, bearing);
-                });
+                    const type: ViewerEvent = "bearing";
+                    const event: ViewerBearingEvent = {
+                        bearing,
+                        target: this._viewer,
+                        type,
+                    };
+                    this._viewer.fire(type, event);
+                }));
 
-        const mouseMove$: Observable<MouseEvent> = this._container.mouseService.active$.pipe(
+        const mouseMove$ = this._container.mouseService.active$.pipe(
             switchMap(
                 (active: boolean): Observable<MouseEvent> => {
                     return active ?
@@ -209,23 +263,41 @@ export class Observer {
                         this._container.mouseService.mouseMove$;
                 }));
 
-        this._viewerMouseEventSubscription = observableMerge(
-            this._mapMouseEvent$(Viewer.click, this._container.mouseService.staticClick$),
-            this._mapMouseEvent$(Viewer.contextmenu, this._container.mouseService.contextMenu$),
-            this._mapMouseEvent$(Viewer.dblclick, this._container.mouseService.dblClick$),
-            this._mapMouseEvent$(Viewer.mousedown, this._container.mouseService.mouseDown$),
-            this._mapMouseEvent$(Viewer.mousemove, mouseMove$),
-            this._mapMouseEvent$(Viewer.mouseout, this._container.mouseService.mouseOut$),
-            this._mapMouseEvent$(Viewer.mouseover, this._container.mouseService.mouseOver$),
-            this._mapMouseEvent$(Viewer.mouseup, this._container.mouseService.mouseUp$)).pipe(
+        subs.push(observableMerge(
+            this._mapMouseEvent$(
+                "click",
+                this._container.mouseService.staticClick$),
+            this._mapMouseEvent$(
+                "contextmenu",
+                this._container.mouseService.contextMenu$),
+            this._mapMouseEvent$(
+                "dblclick",
+                this._container.mouseService.dblClick$),
+            this._mapMouseEvent$(
+                "mousedown",
+                this._container.mouseService.mouseDown$),
+            this._mapMouseEvent$(
+                "mousemove",
+                mouseMove$),
+            this._mapMouseEvent$(
+                "mouseout",
+                this._container.mouseService.mouseOut$),
+            this._mapMouseEvent$(
+                "mouseover",
+                this._container.mouseService.mouseOver$),
+            this._mapMouseEvent$(
+                "mouseup",
+                this._container.mouseService.mouseUp$))
+            .pipe(
                 withLatestFrom(
                     this._container.renderService.renderCamera$,
                     this._navigator.stateService.reference$,
                     this._navigator.stateService.currentTransform$),
                 map(
-                    ([[type, event], render, reference, transform]:
-                        [[string, MouseEvent], RenderCamera, ILatLonAlt, Transform]): IViewerMouseEvent => {
-                        const unprojection: IUnprojection =
+                    ([[type, event], render, reference, transform]
+                        : UnprojectionParams)
+                        : ViewerMouseEvent => {
+                        const unprojection: Unprojection =
                             this._projection.eventToUnprojection(
                                 event,
                                 this._container.container,
@@ -238,16 +310,16 @@ export class Observer {
                             latLon: unprojection.latLon,
                             originalEvent: event,
                             pixelPoint: unprojection.pixelPoint,
-                            target: <Viewer>this._eventEmitter,
+                            target: this._viewer,
                             type: type,
                         };
                     }))
             .subscribe(
-                (event: IViewerMouseEvent): void => {
-                    this._eventEmitter.fire(event.type, event);
-                });
+                (event: ViewerMouseEvent): void => {
+                    this._viewer.fire(event.type, event);
+                }));
 
-        this._positionSubscription = this._container.renderService.renderCamera$.pipe(
+        subs.push(this._container.renderService.renderCamera$.pipe(
             distinctUntilChanged(
                 ([x1, y1], [x2, y2]): boolean => {
                     return this._closeTo(x1, x2, 1e-2) &&
@@ -258,15 +330,15 @@ export class Observer {
                 }))
             .subscribe(
                 (): void => {
-                    this._eventEmitter.fire(
-                        Viewer.positionchanged,
-                        {
-                            target: this._eventEmitter,
-                            type: Viewer.positionchanged,
-                        });
-                });
-
-        this._povSubscription = this._container.renderService.renderCamera$.pipe(
+                    const type: ViewerEvent = "position";
+                    const event: ViewerStateEvent = {
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
+                }));
+
+        subs.push(this._container.renderService.renderCamera$.pipe(
             distinctUntilChanged(
                 ([phi1, theta1], [phi2, theta2]): boolean => {
                     return this._closeTo(phi1, phi2, 1e-3) &&
@@ -277,15 +349,15 @@ export class Observer {
                 }))
             .subscribe(
                 (): void => {
-                    this._eventEmitter.fire(
-                        Viewer.povchanged,
-                        {
-                            target: this._eventEmitter,
-                            type: Viewer.povchanged,
-                        });
-                });
-
-        this._fovSubscription = this._container.renderService.renderCamera$.pipe(
+                    const type: ViewerEvent = "pov";
+                    const event: ViewerStateEvent = {
+                        target: this._viewer,
+                        type,
+                    }
+                    this._viewer.fire(type, event);
+                }));
+
+        subs.push(this._container.renderService.renderCamera$.pipe(
             distinctUntilChanged(
                 (fov1, fov2): boolean => {
                     return this._closeTo(fov1, fov2, 1e-2);
@@ -295,52 +367,31 @@ export class Observer {
                 }))
             .subscribe(
                 (): void => {
-                    this._eventEmitter.fire(
-                        Viewer.fovchanged,
-                        {
-                            target: this._eventEmitter,
-                            type: Viewer.fovchanged,
-                        });
-                });
+                    const type: ViewerEvent = "fov";
+                    const event: ViewerStateEvent = {
+                        target: this._viewer,
+                        type,
+                    };
+                    this._viewer.fire(type, event);
+                }));
     }
 
     public stopEmit(): void {
-        if (!this.started) {
-            return;
-        }
+        if (!this.started) { return; }
 
+        this._emitSubscriptions.unsubscribe();
         this._started = false;
-
-        this._bearingSubscription.unsubscribe();
-        this._currentNodeSubscription.unsubscribe();
-        this._fovSubscription.unsubscribe();
-        this._moveSubscription.unsubscribe();
-        this._positionSubscription.unsubscribe();
-        this._povSubscription.unsubscribe();
-        this._sequenceEdgesSubscription.unsubscribe();
-        this._spatialEdgesSubscription.unsubscribe();
-        this._viewerMouseEventSubscription.unsubscribe();
-
-        this._bearingSubscription = null;
-        this._currentNodeSubscription = null;
-        this._fovSubscription = null;
-        this._moveSubscription = null;
-        this._positionSubscription = null;
-        this._povSubscription = null;
-        this._sequenceEdgesSubscription = null;
-        this._spatialEdgesSubscription = null;
-        this._viewerMouseEventSubscription = null;
     }
 
-    public unproject$(canvasPoint: number[]): Observable<ILatLon> {
+    public unproject$(canvasPoint: number[]): Observable<LatLon> {
         return observableCombineLatest(
             this._container.renderService.renderCamera$,
             this._navigator.stateService.reference$,
             this._navigator.stateService.currentTransform$).pipe(
                 first(),
                 map(
-                    ([render, reference, transform]: [RenderCamera, ILatLonAlt, Transform]): ILatLon => {
-                        const unprojection: IUnprojection =
+                    ([render, reference, transform]: [RenderCamera, LatLonAlt, Transform]): LatLon => {
+                        const unprojection: Unprojection =
                             this._projection.canvasToUnprojection(
                                 canvasPoint,
                                 this._container.container,
@@ -367,14 +418,22 @@ export class Observer {
                     }));
     }
 
-    private _closeTo(v1: number, v2: number, absoluteTolerance: number): boolean {
+    private _closeTo(
+        v1: number,
+        v2: number,
+        absoluteTolerance: number)
+        : boolean {
         return Math.abs(v1 - v2) <= absoluteTolerance;
     }
 
-    private _mapMouseEvent$(type: string, mouseEvent$: Observable<MouseEvent>): Observable<[string, MouseEvent]> {
-        return mouseEvent$.pipe(map(
-            (event: MouseEvent): [string, MouseEvent] => {
-                return [type, event];
-            }));
+    private _mapMouseEvent$(
+        type: ViewerEvent,
+        mouseEvent$: Observable<MouseEvent>)
+        : Observable<[ViewerEvent, MouseEvent]> {
+        return mouseEvent$.pipe(
+            map(
+                (event: MouseEvent): [ViewerEvent, MouseEvent] => {
+                    return [type, event];
+                }));
     }
 }
diff --git a/src/viewer/PanService.ts b/src/viewer/PanService.ts
index 845a1bbf1..633594b34 100644
--- a/src/viewer/PanService.ts
+++ b/src/viewer/PanService.ts
@@ -22,19 +22,19 @@ import {
 
 import * as Geo from "../geo/Geo";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { GeoCoords } from "../geo/GeoCoords";
 import { Spatial } from "../geo/Spatial";
 import { Transform } from "../geo/Transform";
 import { ViewportCoords } from "../geo/ViewportCoords";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { GraphCalculator } from "../graph/GraphCalculator";
 import { GraphService } from "../graph/GraphService";
 import { Node } from "../graph/Node";
 import { StateService } from "../state/StateService";
-import { IFrame } from "../state/interfaces/IFrame";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
-import { CameraProjectionType } from "../api/interfaces/CameraProjectionType";
+import { CameraType } from "../geo/interfaces/CameraType";
 import { isSpherical } from "../geo/Geo";
 
 enum PanMode {
@@ -132,13 +132,13 @@ export class PanService {
 
                     const current$: Observable<Node> = observableOf(current);
 
-                    const bounds: ILatLon[] = this._graphCalculator.boundingBoxCorners(current.latLon, 20);
+                    const bounds: LatLon[] = this._graphCalculator.boundingBoxCorners(current.latLon, 20);
 
                     const adjacent$: Observable<Node[]> = this._graphService
                         .cacheBoundingBox$(bounds[0], bounds[1]).pipe(
                             catchError(
                                 (error: Error): Observable<Node> => {
-                                    console.error(`Failed to cache periphery bounding box (${current.key})`, error);
+                                    console.error(`Failed to cache periphery bounding box (${current.id})`, error);
 
                                     return observableEmpty();
                                 }),
@@ -151,11 +151,11 @@ export class PanService {
                                     const potential: Node[] = [];
 
                                     for (const node of nodes) {
-                                        if (node.key === current.key) {
+                                        if (node.id === current.id) {
                                             continue;
                                         }
 
-                                        if (node.mergeCC !== current.mergeCC) {
+                                        if (node.mergeConnectedComponent !== current.mergeConnectedComponent) {
                                             continue;
                                         }
 
@@ -176,10 +176,10 @@ export class PanService {
                     return observableCombineLatest(current$, adjacent$).pipe(
                         withLatestFrom(this._stateService.reference$),
                         map(
-                            ([[cn, adjacent], reference]: [[Node, Node[]], ILatLonAlt]): [Node, Transform, number][] => {
+                            ([[cn, adjacent], reference]: [[Node, Node[]], LatLonAlt]): [Node, Transform, number][] => {
                                 const currentDirection: THREE.Vector3 = this._spatial.viewingDirection(cn.rotation);
                                 const currentTranslation: number[] = Geo.computeTranslation(
-                                    { lat: cn.latLon.lat, lon: cn.latLon.lon, alt: cn.alt },
+                                    { lat: cn.latLon.lat, lon: cn.latLon.lon, alt: cn.computedAltitude },
                                     cn.rotation,
                                     reference);
                                 const currentTransform: Transform = this._createTransform(cn, currentTranslation);
@@ -200,7 +200,7 @@ export class PanService {
 
                                 for (const a of adjacent) {
                                     const translation: number[] = Geo.computeTranslation(
-                                        { lat: a.latLon.lat, lon: a.latLon.lon, alt: a.alt },
+                                        { lat: a.latLon.lat, lon: a.latLon.lon, alt: a.computedAltitude },
                                         a.rotation,
                                         reference);
 
@@ -289,7 +289,7 @@ export class PanService {
 
         this._panNodesSubscription = this._stateService.currentState$.pipe(
             map(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.nodesAhead > 0;
                 }),
             distinctUntilChanged(),
@@ -320,10 +320,10 @@ export class PanService {
         const [x, y, z]: number[] = this._geoCoords.geodeticToEnu(
             node.latLon.lat,
             node.latLon.lon,
-            node.alt,
+            node.computedAltitude,
             reference.latLon.lat,
             reference.latLon.lon,
-            reference.alt);
+            reference.computedAltitude);
 
         return Math.sqrt(x * x + y * y + z * z);
     }
@@ -334,18 +334,16 @@ export class PanService {
 
     private _createTransform(node: Node, translation: number[]): Transform {
         return new Transform(
-            node.orientation,
+            node.exifOrientation,
             node.width,
             node.height,
-            node.focal,
             node.scale,
             node.rotation,
             translation,
             node.assetsCached ? node.image : undefined,
             undefined,
-            node.ck1,
-            node.ck2,
-            <CameraProjectionType>node.cameraType);
+            node.cameraParameters,
+            <CameraType>node.cameraType);
     }
 
     private _computeProjectedPoints(transform: Transform): number[][] {
diff --git a/src/viewer/PlayService.ts b/src/viewer/PlayService.ts
index 961b1fbc3..4d036579d 100644
--- a/src/viewer/PlayService.ts
+++ b/src/viewer/PlayService.ts
@@ -29,18 +29,18 @@ import {
     withLatestFrom,
 } from "rxjs/operators";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { GraphCalculator } from "../graph/GraphCalculator";
 import { GraphMode } from "../graph/GraphMode";
 import { GraphService } from "../graph/GraphService";
 import { Node } from '../graph/Node';
 import { Sequence } from "../graph/Sequence";
-import { EdgeDirection } from "../graph/edge/EdgeDirection";
-import { IEdgeStatus } from "../graph/interfaces/IEdgeStatus";
+import { NavigationDirection } from "../graph/edge/NavigationDirection";
+import { NavigationEdgeStatus } from "../graph/interfaces/NavigationEdgeStatus";
 import { State } from "../state/State";
 import { StateService } from "../state/StateService";
-import { ICurrentState } from "../state/interfaces/ICurrentState";
-import { IFrame } from "../state/interfaces/IFrame";
+import { IAnimationState } from "../state/interfaces/IAnimationState";
+import { AnimationFrame } from "../state/interfaces/AnimationFrame";
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
 
 export class PlayService {
@@ -54,8 +54,8 @@ export class PlayService {
     private _playing: boolean;
     private _speed: number;
 
-    private _direction$: Observable<EdgeDirection>;
-    private _directionSubject$: Subject<EdgeDirection>;
+    private _direction$: Observable<NavigationDirection>;
+    private _directionSubject$: Subject<NavigationDirection>;
     private _playing$: Observable<boolean>;
     private _playingSubject$: Subject<boolean>;
     private _speed$: Observable<number>;
@@ -78,9 +78,9 @@ export class PlayService {
 
         const subs = this._subscriptions;
 
-        this._directionSubject$ = new Subject<EdgeDirection>();
+        this._directionSubject$ = new Subject<NavigationDirection>();
         this._direction$ = this._directionSubject$.pipe(
-            startWith(EdgeDirection.Next),
+            startWith(NavigationDirection.Next),
             publishReplay(1),
             refCount());
 
@@ -113,7 +113,7 @@ export class PlayService {
         return this._playing;
     }
 
-    public get direction$(): Observable<EdgeDirection> {
+    public get direction$(): Observable<NavigationDirection> {
         return this._direction$;
     }
 
@@ -149,26 +149,26 @@ export class PlayService {
             this._stateService.currentNode$.pipe(
                 map(
                     (node: Node): [string, string] => {
-                        return [node.sequenceKey, node.key];
+                        return [node.sequenceId, node.id];
                     }),
                 distinctUntilChanged(
                     undefined,
-                    ([sequenceKey, nodeKey]: [string, string]): string => {
-                        return sequenceKey;
+                    ([sequenceId, nodeKey]: [string, string]): string => {
+                        return sequenceId;
                     })),
             this._graphService.graphMode$,
             this._direction$).pipe(
                 switchMap(
-                    ([[sequenceKey, nodeKey], mode, direction]: [[string, string], GraphMode, EdgeDirection]):
-                        Observable<[Sequence, EdgeDirection]> => {
+                    ([[sequenceId, nodeKey], mode, direction]: [[string, string], GraphMode, NavigationDirection]):
+                        Observable<[Sequence, NavigationDirection]> => {
 
-                        if (direction !== EdgeDirection.Next && direction !== EdgeDirection.Prev) {
-                            return observableOf<[Sequence, EdgeDirection]>([undefined, direction]);
+                        if (direction !== NavigationDirection.Next && direction !== NavigationDirection.Prev) {
+                            return observableOf<[Sequence, NavigationDirection]>([undefined, direction]);
                         }
 
                         const sequence$: Observable<Sequence> = (mode === GraphMode.Sequence ?
-                            this._graphService.cacheSequenceNodes$(sequenceKey, nodeKey) :
-                            this._graphService.cacheSequence$(sequenceKey)).pipe(
+                            this._graphService.cacheSequenceNodes$(sequenceId, nodeKey) :
+                            this._graphService.cacheSequence$(sequenceId)).pipe(
                                 retry(3),
                                 catchError(
                                     (error: Error): Observable<Sequence> => {
@@ -182,20 +182,20 @@ export class PlayService {
                             observableOf(direction));
                     }),
                 switchMap(
-                    ([sequence, direction]: [Sequence, EdgeDirection]): Observable<string> => {
+                    ([sequence, direction]: [Sequence, NavigationDirection]): Observable<string> => {
                         if (sequence === undefined) {
                             return observableEmpty();
                         }
 
-                        const sequenceKeys: string[] = sequence.keys.slice();
-                        if (direction === EdgeDirection.Prev) {
-                            sequenceKeys.reverse();
+                        const imageIds: string[] = sequence.imageIds.slice();
+                        if (direction === NavigationDirection.Prev) {
+                            imageIds.reverse();
                         }
 
                         return this._stateService.currentState$.pipe(
                             map(
-                                (frame: IFrame): [string, number] => {
-                                    return [frame.state.trajectory[frame.state.trajectory.length - 1].key, frame.state.nodesAhead];
+                                (frame: AnimationFrame): [string, number] => {
+                                    return [frame.state.trajectory[frame.state.trajectory.length - 1].id, frame.state.nodesAhead];
                                 }),
                             scan(
                                 (
@@ -207,20 +207,20 @@ export class PlayService {
                                         lastRequestKey = lastTrajectoryKey;
                                     }
 
-                                    const lastIndex: number = sequenceKeys.length - 1;
-                                    if (nodesAhead >= this._nodesAhead || sequenceKeys[lastIndex] === lastRequestKey) {
+                                    const lastIndex: number = imageIds.length - 1;
+                                    if (nodesAhead >= this._nodesAhead || imageIds[lastIndex] === lastRequestKey) {
                                         return [lastRequestKey, []];
                                     }
 
-                                    const current: number = sequenceKeys.indexOf(lastTrajectoryKey);
-                                    const start: number = sequenceKeys.indexOf(lastRequestKey) + 1;
+                                    const current: number = imageIds.indexOf(lastTrajectoryKey);
+                                    const start: number = imageIds.indexOf(lastRequestKey) + 1;
                                     const end: number = Math.min(lastIndex, current + this._nodesAhead - nodesAhead) + 1;
 
                                     if (end <= start) {
                                         return [lastRequestKey, []];
                                     }
 
-                                    return [sequenceKeys[end - 1], sequenceKeys.slice(start, end)];
+                                    return [imageIds[end - 1], imageIds.slice(start, end)];
                                 },
                                 [undefined, []]),
                             mergeMap(
@@ -241,23 +241,23 @@ export class PlayService {
 
         this._playingSubscription = this._stateService.currentState$.pipe(
             filter(
-                (frame: IFrame): boolean => {
+                (frame: AnimationFrame): boolean => {
                     return frame.state.nodesAhead < this._nodesAhead;
                 }),
             distinctUntilChanged(
                 undefined,
-                (frame: IFrame): string => {
-                    return frame.state.lastNode.key;
+                (frame: AnimationFrame): string => {
+                    return frame.state.lastNode.id;
                 }),
             map(
-                (frame: IFrame): [Node, boolean] => {
+                (frame: AnimationFrame): [Node, boolean] => {
                     const lastNode: Node = frame.state.lastNode;
                     const trajectory: Node[] = frame.state.trajectory;
                     let increasingTime: boolean = undefined;
 
                     for (let i: number = trajectory.length - 2; i >= 0; i--) {
                         const node: Node = trajectory[i];
-                        if (node.sequenceKey !== lastNode.sequenceKey) {
+                        if (node.sequenceId !== lastNode.sequenceId) {
                             break;
                         }
 
@@ -271,22 +271,22 @@ export class PlayService {
                 }),
             withLatestFrom(this._direction$),
             switchMap(
-                ([[node, increasingTime], direction]: [[Node, boolean], EdgeDirection]): Observable<Node> => {
+                ([[node, increasingTime], direction]: [[Node, boolean], NavigationDirection]): Observable<Node> => {
                     return observableZip(
-                        ([EdgeDirection.Next, EdgeDirection.Prev].indexOf(direction) > -1 ?
+                        ([NavigationDirection.Next, NavigationDirection.Prev].indexOf(direction) > -1 ?
                             node.sequenceEdges$ :
                             node.spatialEdges$).pipe(
                                 first(
-                                    (status: IEdgeStatus): boolean => {
+                                    (status: NavigationEdgeStatus): boolean => {
                                         return status.cached;
                                     }),
                                 timeout(15000)),
-                        observableOf<EdgeDirection>(direction)).pipe(
+                        observableOf<NavigationDirection>(direction)).pipe(
                             map(
-                                ([s, d]: [IEdgeStatus, EdgeDirection]): string => {
+                                ([s, d]: [NavigationEdgeStatus, NavigationDirection]): string => {
                                     for (let edge of s.edges) {
                                         if (edge.data.direction === d) {
-                                            return edge.to;
+                                            return edge.target;
                                         }
                                     }
 
@@ -296,11 +296,7 @@ export class PlayService {
                                 (key: string): Observable<Node> => {
                                     return key != null ?
                                         this._graphService.cacheNode$(key) :
-                                        this._bridge$(node, increasingTime).pipe(
-                                            filter(
-                                                (n: Node): boolean => {
-                                                    return !!n;
-                                                }));
+                                        observableEmpty();
                                 }));
                 }))
             .subscribe(
@@ -323,23 +319,23 @@ export class PlayService {
 
         const currentLastNodes$: Observable<Node> = this._stateService.currentState$.pipe(
             map(
-                (frame: IFrame): ICurrentState => {
+                (frame: AnimationFrame): IAnimationState => {
                     return frame.state;
                 }),
             distinctUntilChanged(
                 ([kc1, kl1]: [string, string], [kc2, kl2]: [string, string]): boolean => {
                     return kc1 === kc2 && kl1 === kl2;
                 },
-                (state: ICurrentState): [string, string] => {
-                    return [state.currentNode.key, state.lastNode.key];
+                (state: IAnimationState): [string, string] => {
+                    return [state.currentNode.id, state.lastNode.id];
                 }),
             filter(
-                (state: ICurrentState): boolean => {
-                    return state.currentNode.key === state.lastNode.key &&
+                (state: IAnimationState): boolean => {
+                    return state.currentNode.id === state.lastNode.id &&
                         state.currentIndex === state.trajectory.length - 1;
                 }),
             map(
-                (state: ICurrentState): Node => {
+                (state: IAnimationState): Node => {
                     return state.currentNode;
                 }));
 
@@ -347,28 +343,28 @@ export class PlayService {
             currentLastNodes$,
             this._direction$).pipe(
                 switchMap(
-                    ([node, direction]: [Node, EdgeDirection]): Observable<boolean> => {
-                        const edgeStatus$: Observable<IEdgeStatus> = (
-                            [EdgeDirection.Next, EdgeDirection.Prev].indexOf(direction) > -1 ?
+                    ([node, direction]: [Node, NavigationDirection]): Observable<boolean> => {
+                        const edgeStatus$: Observable<NavigationEdgeStatus> = (
+                            [NavigationDirection.Next, NavigationDirection.Prev].indexOf(direction) > -1 ?
                                 node.sequenceEdges$ :
                                 node.spatialEdges$).pipe(
                                     first(
-                                        (status: IEdgeStatus): boolean => {
+                                        (status: NavigationEdgeStatus): boolean => {
                                             return status.cached;
                                         }),
                                     timeout(15000),
                                     catchError(
-                                        (error: Error): Observable<IEdgeStatus> => {
+                                        (error: Error): Observable<NavigationEdgeStatus> => {
                                             console.error(error);
 
-                                            return observableOf<IEdgeStatus>({ cached: false, edges: [] });
+                                            return observableOf<NavigationEdgeStatus>({ cached: false, edges: [] });
                                         }));
 
                         return observableCombineLatest(
                             observableOf(direction),
                             edgeStatus$).pipe(
                                 map(
-                                    ([d, es]: [EdgeDirection, IEdgeStatus]): boolean => {
+                                    ([d, es]: [NavigationDirection, NavigationEdgeStatus]): boolean => {
                                         for (const edge of es.edges) {
                                             if (edge.data.direction === d) {
                                                 return true;
@@ -435,7 +431,7 @@ export class PlayService {
         this._subscriptions.unsubscribe();
     }
 
-    public setDirection(direction: EdgeDirection): void {
+    public setDirection(direction: NavigationDirection): void {
         this._directionSubject$.next(direction);
     }
 
@@ -494,51 +490,6 @@ export class PlayService {
         this._setPlaying(false);
     }
 
-    private _bridge$(node: Node, increasingTime: boolean): Observable<Node> {
-        if (increasingTime === undefined) {
-            return observableOf(null);
-        }
-
-        const boundingBox: ILatLon[] = this._graphCalculator.boundingBoxCorners(node.latLon, 25);
-
-        this._bridging$ = this._graphService.cacheBoundingBox$(boundingBox[0], boundingBox[1]).pipe(
-            mergeMap(
-                (nodes: Node[]): Observable<Node> => {
-                    let nextNode: Node = null;
-                    for (const n of nodes) {
-                        if (n.sequenceKey === node.sequenceKey ||
-                            !n.cameraUuid ||
-                            n.cameraUuid !== node.cameraUuid ||
-                            n.capturedAt === node.capturedAt ||
-                            n.capturedAt > node.capturedAt !== increasingTime) {
-                            continue;
-                        }
-
-                        const delta: number = Math.abs(n.capturedAt - node.capturedAt);
-
-                        if (delta > 15000) {
-                            continue;
-                        }
-
-                        if (!nextNode || delta < Math.abs(nextNode.capturedAt - node.capturedAt)) {
-                            nextNode = n;
-                        }
-                    }
-
-                    return !!nextNode ?
-                        this._graphService.cacheNode$(nextNode.key) :
-                        observableOf(null);
-                }),
-            finalize(
-                (): void => {
-                    this._bridging$ = null;
-                }),
-            publish(),
-            refCount());
-
-        return this._bridging$;
-    }
-
     private _mapSpeed(speed: number): number {
         const x: number = 2 * speed - 1;
 
diff --git a/src/viewer/Projection.ts b/src/viewer/Projection.ts
index 7c5763cbe..62ba69e28 100644
--- a/src/viewer/Projection.ts
+++ b/src/viewer/Projection.ts
@@ -1,13 +1,13 @@
 import * as THREE from "three";
 
-import { IUnprojection } from "./interfaces/IUnprojection";
+import { Unprojection } from "./interfaces/Unprojection";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { GeoCoords } from "../geo/GeoCoords";
 import { Spatial } from "../geo/Spatial";
 import { Transform } from "../geo/Transform";
 import { ViewportCoords } from "../geo/ViewportCoords";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { RenderCamera } from "../render/RenderCamera";
 
 export class Projection {
@@ -51,8 +51,8 @@ export class Projection {
         event: MouseEvent | Touch,
         container: HTMLElement,
         render: RenderCamera,
-        reference: ILatLonAlt,
-        transform: Transform): IUnprojection {
+        reference: LatLonAlt,
+        transform: Transform): Unprojection {
 
         const pixelPoint: number[] = this._viewportCoords.canvasPosition(event, container);
 
@@ -63,8 +63,8 @@ export class Projection {
         canvasPoint: number[],
         container: HTMLElement,
         render: RenderCamera,
-        reference: ILatLonAlt,
-        transform: Transform): IUnprojection {
+        reference: LatLonAlt,
+        transform: Transform): Unprojection {
 
         const canvasX: number = canvasPoint[0];
         const canvasY: number = canvasPoint[1];
@@ -83,7 +83,7 @@ export class Projection {
         const direction3d: THREE.Vector3 = point3d.clone().sub(render.camera.position).normalize();
         const dist: number = -2 / direction3d.z;
 
-        let latLon: ILatLon = null;
+        let latLon: LatLon = null;
         if (dist > 0 && dist < 100 && !!basicPoint) {
             const point: THREE.Vector3 = direction3d.clone().multiplyScalar(dist).add(render.camera.position);
             const latLonArray: number[] = this._geoCoords
@@ -99,7 +99,7 @@ export class Projection {
             latLon = { lat: latLonArray[0], lon: latLonArray[1] };
         }
 
-        const unprojection: IUnprojection = {
+        const unprojection: Unprojection = {
             basicPoint: basicPoint,
             latLon: latLon,
             pixelPoint: [canvasX, canvasY],
@@ -108,7 +108,7 @@ export class Projection {
         return unprojection;
     }
 
-    public cameraToLatLon(render: RenderCamera, reference: ILatLonAlt): ILatLon {
+    public cameraToLatLon(render: RenderCamera, reference: LatLonAlt): LatLon {
         const position: THREE.Vector3 = render.camera.position;
         const [lat, lon]: number[] = this._geoCoords.enuToGeodetic(
             position.x,
@@ -122,10 +122,10 @@ export class Projection {
     }
 
     public latLonToCanvas(
-        latLon: ILatLon,
+        latLon: LatLon,
         container: HTMLElement,
         render: RenderCamera,
-        reference: ILatLonAlt): number[] {
+        reference: LatLonAlt): number[] {
 
         const point3d: number[] = this._geoCoords.geodeticToEnu(
             latLon.lat,
@@ -143,7 +143,7 @@ export class Projection {
         return canvas;
     }
 
-    public distanceBetweenLatLons(latLon1: ILatLon, latLon2: ILatLon): number {
+    public distanceBetweenLatLons(latLon1: LatLon, latLon2: LatLon): number {
         return this._spatial.distanceFromLatLon(
             latLon1.lat,
             latLon1.lon,
diff --git a/src/viewer/SpriteService.ts b/src/viewer/SpriteService.ts
index 0852ac442..6b5350afa 100644
--- a/src/viewer/SpriteService.ts
+++ b/src/viewer/SpriteService.ts
@@ -14,15 +14,15 @@ import {
     Subscription,
 } from "rxjs";
 
-import { Alignment } from "./Alignment";
+import { Alignment } from "./enums/Alignment";
 import { ISpriteAtlas } from "./interfaces/ISpriteAtlas";
 
 export class SpriteAtlas implements ISpriteAtlas {
     private _image: HTMLImageElement;
     private _texture: THREE.Texture;
-    private _json: ISprites;
+    private _json: Sprites;
 
-    public set json(value: ISprites) {
+    public set json(value: Sprites) {
         this._json = value;
     }
 
@@ -41,7 +41,7 @@ export class SpriteAtlas implements ISpriteAtlas {
             throw new Error("Sprites cannot be retrieved before the atlas is loaded.");
         }
 
-        let definition: ISprite = this._json[name];
+        let definition: Sprite = this._json[name];
 
         if (!definition) {
             console.warn("Sprite with key" + name + "does not exist in sprite definition.");
@@ -77,7 +77,7 @@ export class SpriteAtlas implements ISpriteAtlas {
             float = Alignment.Center;
         }
 
-        let definition: ISprite = this._json[name];
+        let definition: Sprite = this._json[name];
 
         if (!definition) {
             console.warn("Sprite with key" + name + "does not exist in sprite definition.");
@@ -159,7 +159,7 @@ export class SpriteAtlas implements ISpriteAtlas {
     }
 }
 
-interface ISprite {
+interface Sprite {
     width: number;
     height: number;
     x: number;
@@ -167,18 +167,18 @@ interface ISprite {
     pixelRatio: number;
 }
 
-interface ISprites {
-    [key: string]: ISprite;
+interface Sprites {
+    [key: string]: Sprite;
 }
 
-interface ISpriteAtlasOperation {
+interface SpriteAtlasOperation {
     (atlas: SpriteAtlas): SpriteAtlas;
 }
 
 export class SpriteService {
     private _retina: boolean;
 
-    private _spriteAtlasOperation$: Subject<ISpriteAtlasOperation>;
+    private _spriteAtlasOperation$: Subject<SpriteAtlasOperation>;
     private _spriteAtlas$: Observable<SpriteAtlas>;
 
     private _atlasSubscription: Subscription;
@@ -186,15 +186,15 @@ export class SpriteService {
     constructor(sprite?: string) {
         this._retina = window.devicePixelRatio > 1;
 
-        this._spriteAtlasOperation$ = new Subject<ISpriteAtlasOperation>();
+        this._spriteAtlasOperation$ = new Subject<SpriteAtlasOperation>();
 
         this._spriteAtlas$ = this._spriteAtlasOperation$.pipe(
             startWith(
-                (atlas: SpriteAtlas): SpriteAtlas => {
+                (atlas: ISpriteAtlas): ISpriteAtlas => {
                     return atlas;
                 }),
             scan(
-                (atlas: SpriteAtlas, operation: ISpriteAtlasOperation): SpriteAtlas => {
+                (atlas: SpriteAtlas, operation: SpriteAtlasOperation): SpriteAtlas => {
                     return operation(atlas);
                 },
                 new SpriteAtlas()),
@@ -238,7 +238,7 @@ export class SpriteService {
         jsonXmlHTTP.open("GET", sprite + format + ".json", true);
         jsonXmlHTTP.responseType = "text";
         jsonXmlHTTP.onload = () => {
-            let json: ISprites = <ISprites>JSON.parse(jsonXmlHTTP.response);
+            let json: Sprites = <Sprites>JSON.parse(jsonXmlHTTP.response);
 
             this._spriteAtlasOperation$.next(
                 (atlas: SpriteAtlas): SpriteAtlas => {
@@ -255,7 +255,7 @@ export class SpriteService {
         jsonXmlHTTP.send();
     }
 
-    public get spriteAtlas$(): Observable<ISpriteAtlas> {
+    public get spriteAtlas$(): Observable<SpriteAtlas> {
         return this._spriteAtlas$;
     }
 
diff --git a/src/viewer/TouchService.ts b/src/viewer/TouchService.ts
index f29014489..b92ae5c00 100644
--- a/src/viewer/TouchService.ts
+++ b/src/viewer/TouchService.ts
@@ -25,10 +25,10 @@ import {
 } from "rxjs/operators";
 
 import { SubscriptionHolder } from "../utils/SubscriptionHolder";
-import { IPinch } from "./interfaces/IPinch";
+import { TouchPinch } from "./interfaces/TouchPinch";
 
-interface IPinchOperation {
-    (pinch: IPinch): IPinch;
+interface PinchOperation {
+    (pinch: TouchPinch): TouchPinch;
 }
 
 export class TouchService {
@@ -45,11 +45,11 @@ export class TouchService {
     private _singleTouchDragEnd$: Observable<TouchEvent>;
     private _singleTouchMove$: Observable<TouchEvent>;
 
-    private _pinchOperation$: Subject<IPinchOperation>;
-    private _pinch$: Observable<IPinch>;
+    private _pinchOperation$: Subject<PinchOperation>;
+    private _pinch$: Observable<TouchPinch>;
     private _pinchStart$: Observable<TouchEvent>;
     private _pinchEnd$: Observable<TouchEvent>;
-    private _pinchChange$: Observable<IPinch>;
+    private _pinchChange$: Observable<TouchPinch>;
 
     private _doubleTap$: Observable<TouchEvent>;
 
@@ -193,11 +193,11 @@ export class TouchService {
                     return te.touches.length !== 2 || te.targetTouches.length !== 2;
                 }));
 
-        this._pinchOperation$ = new Subject<IPinchOperation>();
+        this._pinchOperation$ = new Subject<PinchOperation>();
 
         this._pinch$ = this._pinchOperation$.pipe(
             scan(
-                (pinch: IPinch, operation: IPinchOperation): IPinch => {
+                (pinch: TouchPinch, operation: PinchOperation): TouchPinch => {
                     return operation(pinch);
                 },
                 {
@@ -224,8 +224,8 @@ export class TouchService {
                     return te.touches.length === 2 && te.targetTouches.length === 2;
                 }),
             map(
-                (te: TouchEvent): IPinchOperation => {
-                    return (previous: IPinch): IPinch => {
+                (te: TouchEvent): PinchOperation => {
+                    return (previous: TouchPinch): TouchPinch => {
                         let touch1: Touch = te.touches[0];
                         let touch2: Touch = te.touches[1];
 
@@ -254,7 +254,7 @@ export class TouchService {
                         let changeX: number = distanceX - previous.distanceX;
                         let changeY: number = distanceY - previous.distanceY;
 
-                        let current: IPinch = {
+                        let current: TouchPinch = {
                             changeX: changeX,
                             changeY: changeY,
                             clientX: centerClientX,
@@ -281,7 +281,7 @@ export class TouchService {
 
         this._pinchChange$ = this._pinchStart$.pipe(
             switchMap(
-                (): Observable<IPinch> => {
+                (): Observable<TouchPinch> => {
                     return this._pinch$.pipe(
                         skip(1),
                         takeUntil(this._pinchEnd$));
@@ -328,7 +328,7 @@ export class TouchService {
         return this._singleTouchDragEnd$;
     }
 
-    public get pinch$(): Observable<IPinch> {
+    public get pinch$(): Observable<TouchPinch> {
         return this._pinchChange$;
     }
 
diff --git a/src/viewer/Viewer.ts b/src/viewer/Viewer.ts
index cb219f93d..4f75d3a4c 100644
--- a/src/viewer/Viewer.ts
+++ b/src/viewer/Viewer.ts
@@ -7,33 +7,35 @@ import {
     first,
 } from "rxjs/operators";
 
-import { ILatLon } from "../api/interfaces/ILatLon";
+import { LatLon } from "../api/interfaces/LatLon";
 import { Component } from "../component/Component";
-import { IComponentConfiguration } from "../component/interfaces/IComponentConfiguration";
-import { ILatLonAlt } from "../geo/interfaces/ILatLonAlt";
+import { ComponentConfiguration } from "../component/interfaces/ComponentConfiguration";
+import { LatLonAlt } from "../api/interfaces/LatLonAlt";
 import { FilterExpression } from "../graph/FilterExpression";
 import { Node } from "../graph/Node";
-import { EdgeDirection } from "../graph/edge/EdgeDirection";
+import { NavigationDirection } from "../graph/edge/NavigationDirection";
 import { RenderCamera } from "../render/RenderCamera";
 import { RenderMode } from "../render/RenderMode";
 import { TransitionMode } from "../state/TransitionMode";
 import { EventEmitter } from "../utils/EventEmitter";
-import { Settings } from "../utils/Settings";
 import { Urls } from "../utils/Urls";
 
 import { ICustomRenderer } from "./interfaces/ICustomRenderer";
-import { IPointOfView } from "./interfaces/IPointOfView";
-import { IViewerOptions } from "./interfaces/IViewerOptions";
+import { PointOfView } from "./interfaces/PointOfView";
+import { ViewerOptions } from "./options/ViewerOptions";
 import { ComponentController } from "./ComponentController";
 import { Container } from "./Container";
 import { Navigator } from "./Navigator";
 import { Observer } from "./Observer";
 import { CustomRenderer } from "./CustomRenderer";
+import { ViewerEvent } from "./events/ViewerEvent";
+import { IViewer } from "./interfaces/IViewer";
+import { ViewerStateEvent } from "./events/ViewerStateEvent";
 /**
  * @class Viewer
  *
  * @classdesc The Viewer object represents the navigable image viewer.
- * Create a Viewer by specifying a container, client ID, image key and
+ * Create a Viewer by specifying a container, client ID, image id and
  * other options. The viewer exposes methods and events for programmatic
  * interaction.
  *
@@ -81,175 +83,7 @@ import { CustomRenderer } from "./CustomRenderer";
  * zoomed independently of the size of the viewer container resulting in
  * different conversion results for different viewing directions.
  */
-export class Viewer extends EventEmitter {
-    /**
-     * Fired when the viewing direction of the camera changes.
-     *
-     * @description Related to the computed compass angle
-     * ({@link Node.computedCA}) from SfM, not the original EXIF compass
-     * angle.
-     *
-     * @event
-     * @type {number} bearing - Value indicating the current bearing
-     * measured in degrees clockwise with respect to north.
-     */
-    public static bearingchanged: string = "bearingchanged";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is pressed and released at
-     * the same point in the viewer.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static click: string = "click";
-
-    /**
-     * Fired when the right button of the mouse is clicked within the viewer.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static contextmenu: string = "contextmenu";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is clicked twice at
-     * the same point in the viewer.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static dblclick: string = "dblclick";
-
-    /**
-     * Fired when the viewer's vertical field of view changes.
-     *
-     * @event
-     * @type  {@link IViewerEvent} event - The event object.
-     */
-    public static fovchanged: string = "fovchanged";
-
-    /**
-     * Fired when the viewer is loading more data.
-     * @event
-     * @type {boolean} loading - Boolean indicating whether the viewer is loading.
-     */
-    public static loadingchanged: string = "loadingchanged";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is pressed within the viewer.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static mousedown: string = "mousedown";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is moved within the viewer.
-     * @description Will not fire when the mouse is actively used, e.g. for drag pan.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static mousemove: string = "mousemove";
-
-    /**
-     * Fired when a pointing device (usually a mouse) leaves the viewer's canvas.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static mouseout: string = "mouseout";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is moved onto the viewer's canvas.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static mouseover: string = "mouseover";
-
-    /**
-     * Fired when a pointing device (usually a mouse) is released within the viewer.
-     * @event
-     * @type  {@link IViewerMouseEvent} event - Viewer mouse event data.
-     */
-    public static mouseup: string = "mouseup";
-
-    /**
-     * Fired when the viewer motion stops and it is in a fixed
-     * position with a fixed point of view.
-     * @event
-     */
-    public static moveend: string = "moveend";
-
-    /**
-     * Fired when the motion from one view to another start,
-     * either by changing the position (e.g. when changing node) or
-     * when changing point of view (e.g. by interaction such as pan and zoom).
-     * @event
-     */
-    public static movestart: string = "movestart";
-
-    /**
-     * Fired when the navigable state of the viewer changes.
-     *
-     * @description The navigable state indicates if the viewer supports
-     * moving, i.e. calling the `moveToKey` and `moveDir`
-     * methods. The viewer will not be in a navigable state if the cover
-     * is activated and the viewer has been supplied a key. When the cover
-     * is deactivated or activated without being supplied a key it will
-     * be navigable.
-     *
-     * @event
-     * @type {boolean} navigable - Boolean indicating whether the viewer is navigable.
-     */
-    public static navigablechanged: string = "navigablechanged";
-
-    /**
-     * Fired every time the viewer navigates to a new node.
-     *
-     * @event
-     * @type  {@link Node} node - Current node.
-     */
-    public static nodechanged: string = "nodechanged";
-
-    /**
-     * Fired when the viewer's position changes.
-     *
-     * @description The viewer's position changes when transitioning
-     * between nodes.
-     *
-     * @event
-     * @type  {@link IViewerEvent} event - The event object.
-     */
-    public static positionchanged: string = "positionchanged";
-
-    /**
-     * Fired when the viewer's point of view changes. The point of view changes
-     * when the bearing, or tilt changes.
-     *
-     * @event
-     * @type  {@link IViewerEvent} event - The event object.
-     */
-    public static povchanged: string = "povchanged";
-
-    /**
-     * Fired when the viewer is removed. After this event is emitted
-     * you must not call any methods on the viewer.
-     *
-     * @event
-     * @type  {@link IViewerEvent} event - The event object.
-     */
-    public static removed: string = "removed";
-
-    /**
-     * Fired every time the sequence edges of the current node changes.
-     * @event
-     * @type  {@link IEdgeStatus} status - The edge status object.
-     */
-    public static sequenceedgeschanged: string = "sequenceedgeschanged";
-
-    /**
-     * Fired every time the spatial edges of the current node changes.
-     * @event
-     * @type  {@link IEdgeStatus} status - The edge status object.
-     */
-    public static spatialedgeschanged: string = "spatialedgeschanged";
-
+export class Viewer extends EventEmitter implements IViewer {
     /**
      * Private component controller object which manages component states.
      */
@@ -283,36 +117,36 @@ export class Viewer extends EventEmitter {
      * Create a new viewer instance.
      *
      * @description It is possible to initialize the viewer with or
-     * without a key.
+     * without a id.
      *
      * When you want to show a specific image in the viewer from
-     * the start you should initialize it with a key.
+     * the start you should initialize it with a id.
      *
-     * When you do not know the first image key at implementation
+     * When you do not know the first image id at implementation
      * time, e.g. in a map-viewer application you should initialize
-     * the viewer without a key and call `moveToKey` instead.
+     * the viewer without a id and call `moveTo` instead.
      *
-     * When initializing with a key the viewer is bound to that key
-     * until the node for that key has been successfully loaded.
-     * Also, a cover with the image of the key will be shown.
-     * If the data for that key can not be loaded because the key is
+     * When initializing with a id the viewer is bound to that id
+     * until the node for that id has been successfully loaded.
+     * Also, a cover with the image of the id will be shown.
+     * If the data for that id can not be loaded because the id is
      * faulty or other errors occur it is not possible to navigate
-     * to another key because the viewer is not navigable. The viewer
-     * becomes navigable when the data for the key has been loaded and
+     * to another id because the viewer is not navigable. The viewer
+     * becomes navigable when the data for the id has been loaded and
      * the image is shown in the viewer. This way of initializing
      * the viewer is mostly for embedding in blog posts and similar
      * where one wants to show a specific image initially.
      *
-     * If the viewer is initialized without a key (with null or
-     * undefined) it is not bound to any particular key and it is
-     * possible to move to any key with `viewer.moveToKey("<my-image-key>")`.
-     * If the first move to a key fails it is possible to move to another
-     * key. The viewer will show a black background until a move
+     * If the viewer is initialized without a id (with null or
+     * undefined) it is not bound to any particular id and it is
+     * possible to move to any id with `viewer.moveTo("<my-image-id>")`.
+     * If the first move to a id fails it is possible to move to another
+     * id. The viewer will show a black background until a move
      * succeeds. This way of intitializing is suited for a map-viewer
-     * application when the initial key is not known at implementation
+     * application when the initial id is not known at implementation
      * time.
      *
-     * @param {IViewerOptions} options - Optional configuration object
+     * @param {ViewerOptions} options - Optional configuration object
      * specifing Viewer's and the components' initial setup.
      *
      * @example
@@ -323,12 +157,10 @@ export class Viewer extends EventEmitter {
      * });
      * ```
      */
-    constructor(options: IViewerOptions) {
+    constructor(options: ViewerOptions) {
         super();
 
-        Settings.setOptions(options);
         Urls.setOptions(options.url);
-
         this._navigator = new Navigator(options);
         this._container = new Container(options, this._navigator.stateService);
         this._observer = new Observer(this, this._navigator, this._container);
@@ -336,7 +168,7 @@ export class Viewer extends EventEmitter {
             this._container,
             this._navigator,
             this._observer,
-            options.imageKey,
+            options.imageId,
             options.component);
         this._customRenderer = new CustomRenderer(this._container, this._navigator);
     }
@@ -345,12 +177,12 @@ export class Viewer extends EventEmitter {
      * Return a boolean indicating if the viewer is in a navigable state.
      *
      * @description The navigable state indicates if the viewer supports
-     * moving, i.e. calling the {@link moveToKey} and {@link moveDir}
+     * moving, i.e. calling the {@link moveTo} and {@link moveDir}
      * methods or changing the authentication state,
      * i.e. calling {@link setUserToken}. The viewer will not be in a navigable
-     * state if the cover is activated and the viewer has been supplied a key.
+     * state if the cover is activated and the viewer has been supplied a id.
      * When the cover is deactivated or the viewer is activated without being
-     * supplied a key it will be navigable.
+     * supplied a id it will be navigable.
      *
      * @returns {boolean} Boolean indicating whether the viewer is navigable.
      */
@@ -391,6 +223,9 @@ export class Viewer extends EventEmitter {
     /**
      * Add a custom renderer to the viewer's rendering pipeline.
      *
+     * @description During a render pass, custom renderers
+     * are called in the order they were added.
+     *
      * @param renderer - The custom renderer implementation.
      */
     public addCustomRenderer(renderer: ICustomRenderer): void {
@@ -530,7 +365,7 @@ export class Viewer extends EventEmitter {
      * var mouseComponent = viewer.getComponent("mouse");
      * ```
      */
-    public getComponent<TComponent extends Component<IComponentConfiguration>>(name: string): TComponent {
+    public getComponent<TComponent extends Component<ComponentConfiguration>>(name: string): TComponent {
         return this._componentController.get<TComponent>(name);
     }
 
@@ -575,7 +410,7 @@ export class Viewer extends EventEmitter {
     /**
      * Get the viewer's current point of view.
      *
-     * @returns {Promise<IPointOfView>} Promise to the current point of view
+     * @returns {Promise<PointOfView>} Promise to the current point of view
      * of the viewer camera.
      *
      * @example
@@ -583,9 +418,9 @@ export class Viewer extends EventEmitter {
      * viewer.getPointOfView().then((pov) => { console.log(pov); });
      * ```
      */
-    public getPointOfView(): Promise<IPointOfView> {
-        return new Promise<IPointOfView>(
-            (resolve: (value: IPointOfView) => void, reject: (reason: Error) => void): void => {
+    public getPointOfView(): Promise<PointOfView> {
+        return new Promise<PointOfView>(
+            (resolve: (value: PointOfView) => void, reject: (reason: Error) => void): void => {
                 observableCombineLatest(
                     this._container.renderService.renderCamera$,
                     this._container.renderService.bearing$).pipe(
@@ -606,7 +441,7 @@ export class Viewer extends EventEmitter {
     /**
      * Get the viewer's current position
      *
-     * @returns {Promise<ILatLon>} Promise to the viewers's current
+     * @returns {Promise<LatLon>} Promise to the viewers's current
      * position.
      *
      * @example
@@ -614,15 +449,15 @@ export class Viewer extends EventEmitter {
      * viewer.getPosition().then((pos) => { console.log(pos); });
      * ```
      */
-    public getPosition(): Promise<ILatLon> {
-        return new Promise<ILatLon>(
-            (resolve: (value: ILatLon) => void, reject: (reason: Error) => void): void => {
+    public getPosition(): Promise<LatLon> {
+        return new Promise<LatLon>(
+            (resolve: (value: LatLon) => void, reject: (reason: Error) => void): void => {
                 observableCombineLatest(
                     this._container.renderService.renderCamera$,
                     this._navigator.stateService.reference$).pipe(
                         first())
                     .subscribe(
-                        ([render, reference]: [RenderCamera, ILatLonAlt]): void => {
+                        ([render, reference]: [RenderCamera, LatLonAlt]): void => {
                             resolve(this._observer.projection.cameraToLatLon(render, reference));
                         },
                         (error: Error): void => {
@@ -665,8 +500,8 @@ export class Viewer extends EventEmitter {
      * @returns {boolean} Value indicating whether the customer
      * renderer has been added.
      */
-    public hasCustomRenderer(id: string): boolean {
-        return this._customRenderer.has(id);
+    public hasCustomRenderer(rendererId: string): boolean {
+        return this._customRenderer.has(rendererId);
     }
 
     /**
@@ -674,7 +509,7 @@ export class Viewer extends EventEmitter {
      *
      * @description This method has to be called through EdgeDirection enumeration as in the example.
      *
-     * @param {EdgeDirection} dir - Direction in which which to move.
+     * @param {NavigationDirection} direction - Direction in which which to move.
      * @returns {Promise<Node>} Promise to the node that was navigated to.
      * @throws {Error} If the current node does not have the edge direction
      * or the edges has not yet been cached.
@@ -690,9 +525,9 @@ export class Viewer extends EventEmitter {
      *     (e) => { console.error(e); });
      * ```
      */
-    public moveDir(dir: EdgeDirection): Promise<Node> {
+    public moveDir(direction: NavigationDirection): Promise<Node> {
         const moveDir$: Observable<Node> = this.isNavigable ?
-            this._navigator.moveDir$(dir) :
+            this._navigator.moveDir$(direction) :
             observableThrowError(new Error("Calling moveDir is not supported when viewer is not navigable."));
 
         return new Promise<Node>(
@@ -708,30 +543,30 @@ export class Viewer extends EventEmitter {
     }
 
     /**
-     * Navigate to a given image key.
+     * Navigate to a given image id.
      *
-     * @param {string} key - A valid Mapillary image key.
+     * @param {string} imageId - Id of the image to move to.
      * @returns {Promise<Node>} Promise to the node that was navigated to.
      * @throws {Error} Propagates any IO errors to the caller.
      * @throws {Error} When viewer is not navigable.
-     * @throws {@link AbortMapillaryError} When a subsequent move request is made
-     * before the move to key call has completed.
+     * @throws {@link AbortMapillaryError} When a subsequent
+     * move request is made before the move to id call has completed.
      *
      * @example
      * ```
-     * viewer.moveToKey("<my key>").then(
+     * viewer.moveTo("<my-image-id>").then(
      *     (n) => { console.log(n); },
      *     (e) => { console.error(e); });
      * ```
      */
-    public moveToKey(key: string): Promise<Node> {
-        const moveToKey$: Observable<Node> = this.isNavigable ?
-            this._navigator.moveToKey$(key) :
-            observableThrowError(new Error("Calling moveToKey is not supported when viewer is not navigable."));
+    public moveTo(imageId: string): Promise<Node> {
+        const moveTo$: Observable<Node> = this.isNavigable ?
+            this._navigator.moveTo$(imageId) :
+            observableThrowError(new Error("Calling moveTo is not supported when viewer is not navigable."));
 
         return new Promise<Node>(
             (resolve: (value: Node) => void, reject: (reason: Error) => void): void => {
-                moveToKey$.subscribe(
+                moveTo$.subscribe(
                     (node: Node): void => {
                         resolve(node);
                     },
@@ -741,6 +576,24 @@ export class Viewer extends EventEmitter {
             });
     }
 
+    /**
+     * @inheritdoc
+     */
+    public off<T>(
+        type: ViewerEvent,
+        handler: (event: T) => void): void {
+        super.off(type, handler);
+    }
+
+    /**
+     * @inheritdoc
+     */
+    public on<T>(
+        type: ViewerEvent,
+        handler: (event: T) => void): void {
+        super.on(type, handler);
+    }
+
     /**
      * Project an ILatLon representing geographicalcoordinates to
      * canvas pixel coordinates.
@@ -760,7 +613,7 @@ export class Viewer extends EventEmitter {
      * Note that whenever the camera moves, the result of the method will be
      * different.
      *
-     * @param {ILatLon} latLon - Geographical coordinates to project.
+     * @param {LatLon} latLon - Geographical coordinates to project.
      * @returns {Promise<Array<number>>} Promise to the pixel coordinates corresponding
      * to the latLon.
      *
@@ -776,7 +629,7 @@ export class Viewer extends EventEmitter {
      *     });
      * ```
      */
-    public project(latLon: ILatLon): Promise<number[]> {
+    public project(latLon: LatLon): Promise<number[]> {
         return new Promise<number[]>(
             (resolve: (value: number[]) => void, reject: (reason: Error) => void): void => {
                 this._observer.project$(latLon)
@@ -848,7 +701,12 @@ export class Viewer extends EventEmitter {
         this._navigator.dispose();
         this._container.remove();
 
-        this.fire(Viewer.removed, { type: Viewer.removed });
+        const type: ViewerEvent = "remove";
+        const event: ViewerStateEvent = {
+            target: this,
+            type,
+        }
+        this.fire(type, event);
     }
 
     /**
@@ -856,8 +714,8 @@ export class Viewer extends EventEmitter {
      *
      * @param id - Unique id of the custom renderer.
      */
-    public removeCustomRenderer(id: string): void {
-        this._customRenderer.remove(id, this);
+    public removeCustomRenderer(rendererId: string): void {
+        this._customRenderer.remove(rendererId, this);
     }
 
     /**
@@ -875,51 +733,6 @@ export class Viewer extends EventEmitter {
         this._container.renderService.resize$.next(null);
     }
 
-    /**
-     * Set a user bearer token for authenticated API requests of
-     * protected resources.
-     *
-     * @description When the supplied user token is null or undefined,
-     * any previously set user bearer token will be cleared and the
-     * viewer will make unauthenticated requests.
-     *
-     * Calling setUserToken aborts all outstanding move requests.
-     * The promises of those move requests will be rejected with a
-     * {@link AbortMapillaryError} the rejections need to be caught.
-     *
-     * Calling setUserToken also resets the complete viewer cache
-     * so it should not be called repeatedly.
-     *
-     * @param {string} [userToken] userToken - User bearer token.
-     * @returns {Promise<void>} Promise that resolves after token
-     * is set.
-     *
-     * @throws {Error} When viewer is not navigable.
-     *
-     * @example
-     * ```
-     * viewer.setUserToken("<my user token>")
-     *     .then(() => { console.log("user token set"); });
-     * ```
-     */
-    public setUserToken(userToken?: string): Promise<void> {
-        const setUserToken$: Observable<void> = this.isNavigable ?
-            this._navigator.setUserToken$(userToken) :
-            observableThrowError(new Error("Calling setUserToken is not supported when viewer is not navigable."));
-
-        return new Promise<void>(
-            (resolve: (value: void) => void, reject: (reason: Error) => void): void => {
-                setUserToken$
-                    .subscribe(
-                        (): void => {
-                            resolve(undefined);
-                        },
-                        (error: Error): void => {
-                            reject(error);
-                        });
-            });
-    }
-
     /**
      * Set the basic coordinates of the current image to be in the
      * center of the viewport.
@@ -941,6 +754,32 @@ export class Viewer extends EventEmitter {
         this._navigator.stateService.setCenter(center);
     }
 
+    /**
+     * Set the viewer's current vertical field of view.
+     *
+     * @description Sets the vertical field of view rendered
+     * on the viewer canvas measured in degrees. The value
+     * will be clamped to be able to set a valid zoom level
+     * based on the projection model of the current image and
+     * the viewer's current render mode.
+     *
+     * @param {number} fov - Vertical field of view in degrees.
+     *
+     * @example
+     * ```
+     * viewer.setFieldOfView(45);
+     * ```
+     */
+    public setFieldOfView(fov: number): void {
+        this._container.renderService.renderCamera$.pipe(
+            first())
+            .subscribe(
+                (rc: RenderCamera): void => {
+                    const zoom: number = rc.fovToZoom(fov);
+                    this._navigator.stateService.setZoom(zoom);
+                });
+    }
+
     /**
      * Set the filter selecting nodes to use when calculating
      * the spatial edges.
@@ -983,11 +822,11 @@ export class Viewer extends EventEmitter {
      * in a filter) and common use cases:
      *
      * ```
-     * cameraType      // Show only spherical or not
-     * organizationKey // Show images from one or several organizations
-     * sequenceKey     // Show images from one or several sequences
-     * userKey         // Show images from one or several users
-     * capturedAt      // Show images from a certain time interval
+     * cameraType     // Show only spherical or not
+     * ownerId        // Show images from one or several owners
+     * sequenceId     // Show images from one or several sequences
+     * creatorId      // Show images from one or several creators
+     * capturedAt     // Show images from a certain time interval
      * ```
      *
      * @param {FilterExpression} filter - The filter expression.
@@ -995,13 +834,13 @@ export class Viewer extends EventEmitter {
      *
      * @example
      * ```
-     * viewer.setFilter(["==", "sequenceKey", "<my sequence key>"]);
+     * viewer.setFilter(["==", "sequenceId", "<my-sequence-id>"]);
      *
      * // Other examples
-     * // viewer.setFilter(["==", "organizationKey", "<my organization key>"]);
-     * // viewer.setFilter(["in", "userKey", "<my user key #1>", "<my user key #2>"]);
-     * // viewer.setFilter(["==", "cameraType", "equirectangular"]);
-     * // viewer.setFilter([">=", "capturedAt", <my time stamp>]);
+     * // viewer.setFilter(["==", "ownerId", "<my-owner-id>"]);
+     * // viewer.setFilter(["in", "creatorId", "<my-creator-id-#1>", "<my-creator-id-#2>"]);
+     * // viewer.setFilter(["==", "cameraType", "spherical"]);
+     * // viewer.setFilter([">=", "capturedAt", <my-time-stamp>]);
      * ```
      */
     public setFilter(filter: FilterExpression): Promise<void> {
@@ -1018,32 +857,6 @@ export class Viewer extends EventEmitter {
             });
     }
 
-    /**
-     * Set the viewer's current vertical field of view.
-     *
-     * @description Sets the vertical field of view rendered
-     * on the viewer canvas measured in degrees. The value
-     * will be clamped to be able to set a valid zoom level
-     * based on the projection model of the current image and
-     * the viewer's current render mode.
-     *
-     * @param {number} fov - Vertical field of view in degrees.
-     *
-     * @example
-     * ```
-     * viewer.setFieldOfView(45);
-     * ```
-     */
-    public setFieldOfView(fov: number): void {
-        this._container.renderService.renderCamera$.pipe(
-            first())
-            .subscribe(
-                (rc: RenderCamera): void => {
-                    const zoom: number = rc.fovToZoom(fov);
-                    this._navigator.stateService.setZoom(zoom);
-                });
-    }
-
     /**
      * Set the viewer's render mode.
      *
@@ -1072,6 +885,51 @@ export class Viewer extends EventEmitter {
         this._navigator.stateService.setTransitionMode(transitionMode);
     }
 
+    /**
+     * Set a user bearer token for authenticated API requests of
+     * protected resources.
+     *
+     * @description When the supplied user token is null or undefined,
+     * any previously set user bearer token will be cleared and the
+     * viewer will make unauthenticated requests.
+     *
+     * Calling setUserToken aborts all outstanding move requests.
+     * The promises of those move requests will be rejected with a
+     * {@link AbortMapillaryError} the rejections need to be caught.
+     *
+     * Calling setUserToken also resets the complete viewer cache
+     * so it should not be called repeatedly.
+     *
+     * @param {string} [userToken] userToken - User bearer token.
+     * @returns {Promise<void>} Promise that resolves after token
+     * is set.
+     *
+     * @throws {Error} When viewer is not navigable.
+     *
+     * @example
+     * ```
+     * viewer.setUserToken("<my user token>")
+     *     .then(() => { console.log("user token set"); });
+     * ```
+     */
+    public setUserToken(userToken?: string): Promise<void> {
+        const setUserToken$: Observable<void> = this.isNavigable ?
+            this._navigator.setUserToken$(userToken) :
+            observableThrowError(new Error("Calling setUserToken is not supported when viewer is not navigable."));
+
+        return new Promise<void>(
+            (resolve: (value: void) => void, reject: (reason: Error) => void): void => {
+                setUserToken$
+                    .subscribe(
+                        (): void => {
+                            resolve(undefined);
+                        },
+                        (error: Error): void => {
+                            reject(error);
+                        });
+            });
+    }
+
     /**
      * Set the image's current zoom level.
      *
@@ -1115,7 +973,7 @@ export class Viewer extends EventEmitter {
      * the altitude with respect to the ground plane for the returned latLon is zero.
      *
      * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
-     * @returns {Promise<ILatLon>} Promise to the latLon corresponding to the pixel point.
+     * @returns {Promise<LatLon>} Promise to the latLon corresponding to the pixel point.
      *
      * @example
      * ```
@@ -1123,12 +981,12 @@ export class Viewer extends EventEmitter {
      *     .then((latLon) => { console.log(latLon); });
      * ```
      */
-    public unproject(pixelPoint: number[]): Promise<ILatLon> {
-        return new Promise<ILatLon>(
-            (resolve: (value: ILatLon) => void, reject: (reason: Error) => void): void => {
+    public unproject(pixelPoint: number[]): Promise<LatLon> {
+        return new Promise<LatLon>(
+            (resolve: (value: LatLon) => void, reject: (reason: Error) => void): void => {
                 this._observer.unproject$(pixelPoint)
                     .subscribe(
-                        (latLon: ILatLon): void => {
+                        (latLon: LatLon): void => {
                             resolve(latLon);
                         },
                         (error: Error): void => {
@@ -1146,7 +1004,7 @@ export class Viewer extends EventEmitter {
      * be `null`.
      *
      * @param {Array<number>} pixelPoint - Pixel coordinates to unproject.
-     * @returns {Promise<ILatLon>} Promise to the basic coordinates corresponding
+     * @returns {Promise<LatLon>} Promise to the basic coordinates corresponding
      * to the pixel point.
      *
      * @example
diff --git a/src/viewer/Alignment.ts b/src/viewer/enums/Alignment.ts
similarity index 100%
rename from src/viewer/Alignment.ts
rename to src/viewer/enums/Alignment.ts
diff --git a/src/viewer/enums/RenderPass.ts b/src/viewer/enums/RenderPass.ts
new file mode 100644
index 000000000..a4f4533b6
--- /dev/null
+++ b/src/viewer/enums/RenderPass.ts
@@ -0,0 +1,6 @@
+export enum RenderPass {
+    /**
+     * Occurs after the background render pass.
+     */
+    Opaque,
+}
diff --git a/src/viewer/events/ViewerEvent.ts b/src/viewer/events/ViewerEvent.ts
new file mode 100644
index 000000000..95f599c92
--- /dev/null
+++ b/src/viewer/events/ViewerEvent.ts
@@ -0,0 +1,358 @@
+export type ViewerEvent =
+    /**
+     * Fired when the viewing direction of the camera changes.
+     *
+     * @event bearing
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerBearingStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("bearing", function() {
+     *   console.log("A bearing event has occurred.");
+     * });
+     */
+    | "bearing"
+
+    /**
+     * Fired when a pointing device (usually a mouse) is
+     * pressed and released at the same point in the viewer.
+     *
+     * @event click
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("click", function() {
+     *   console.log("A click event has occurred.");
+     * });
+     */
+    | "click"
+
+    /**
+     * Fired when the right button of the mouse is clicked
+     * within the viewer.
+     *
+     * @event contextmenu
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("contextmenu", function() {
+     *   console.log("A contextmenu event has occurred.");
+     * });
+     */
+    | "contextmenu"
+
+    /**
+     * Fired when a pointing device (usually a mouse) is clicked twice at
+     * the same point in the viewer.
+     *
+     * @event dblclick
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("dblclick", function() {
+     *   console.log("A dblclick event has occurred.");
+     * });
+     */
+    | "dblclick"
+
+    /**
+     * Fired when the viewer's vertical field of view changes.
+     *
+     * @event fov
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("fov", function() {
+     *   console.log("A fov event has occurred.");
+     * });
+     */
+    | "fov"
+
+    /**
+     * Fired when the viewer is loading data.
+     *
+     * @event loading
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerLoadingEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("loading", function() {
+     *   console.log("A loading event has occurred.");
+     * });
+     */
+    | "loading"
+
+    /**
+     * Fired when a pointing device (usually a mouse) is pressed
+     * within the viewer.
+     *
+     * @event mousedown
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("mousedown", function() {
+     *   console.log("A mousedown event has occurred.");
+     * });
+     */
+    | "mousedown"
+
+    /**
+     * Fired when a pointing device (usually a mouse)
+     * is moved within the viewer.
+     *
+     * @event mousemove
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("mousemove", function() {
+     *   console.log("A mousemove event has occurred.");
+     * });
+     */
+    | "mousemove"
+
+    /**
+     * Fired when a pointing device (usually a mouse)
+     * leaves the viewer's canvas.
+     *
+     * @event mouseout
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("mouseout", function() {
+     *   console.log("A mouseout event has occurred.");
+     * });
+     */
+    | "mouseout"
+
+    /**
+     * Fired when a pointing device (usually a mouse)
+     * is moved onto the viewer's canvas.
+     *
+     * @event mouseover
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("mouseover", function() {
+     *   console.log("A mouseover event has occurred.");
+     * });
+     */
+    | "mouseover"
+
+    /**
+     * Fired when a pointing device (usually a mouse)
+     * is released within the viewer.
+     *
+     * @event mouseup
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerMouseEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("mouseup", function() {
+     *   console.log("A mouseup event has occurred.");
+     * });
+     */
+    | "mouseup"
+
+
+    /**
+     * Fired when the viewer motion stops and it is in a fixed
+     * position with a fixed point of view.
+     *
+     * @event moveend
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("moveend", function() {
+     *   console.log("A moveend event has occurred.");
+     * });
+     */
+    | "moveend"
+
+    /**
+     * Fired when the motion from one view to another start,
+     * either by changing the position (e.g. when changing node)
+     * or when changing point of view
+     * (e.g. by interaction such as pan and zoom).
+     *
+     * @event movestart
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("movestart", function() {
+     *   console.log("A movestart event has occurred.");
+     * });
+     */
+    | "movestart"
+
+    /**
+     * Fired when the navigable state of the viewer changes.
+     *
+     * @event navigable
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerNavigableEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("navigable", function() {
+     *   console.log("A navigable event has occurred.");
+     * });
+     */
+    | "navigable"
+
+    /**
+     * Fired every time the viewer navigates to a new node.
+     *
+     * @event node
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerNodeEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("node", function() {
+     *   console.log("A node event has occurred.");
+     * });
+     */
+    | "node"
+
+    /**
+     * Fired when the viewer's position changes.
+     *
+     * @description The viewer's position changes when transitioning
+     * between nodes.
+     *
+     * @event position
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("position", function() {
+     *   console.log("A position event has occurred.");
+     * });
+     */
+    | "position"
+
+    /**
+     * Fired when the viewer's point of view changes. The
+     * point of view changes when the bearing, or tilt changes.
+     *
+     * @event pov
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("pov", function() {
+     *   console.log("A pov event has occurred.");
+     * });
+     */
+    | "pov"
+
+    /**
+     * Fired when the viewer is removed. After this event is emitted
+     * you must not call any methods on the viewer.
+     *
+     * @event remove
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerStateEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("remove", function() {
+     *   console.log("A remove event has occurred.");
+     * });
+     */
+    | "remove"
+
+    /**
+     * Fired every time the sequence edges of the current node changes.
+     *
+     * @event sequenceedges
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerNavigationEdgeStatusEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("sequenceedges", function() {
+     *   console.log("A sequenceedges event has occurred.");
+     * });
+     */
+    | "sequenceedges"
+
+    /**
+     * Fired every time the spatial edges of the current node changes.
+     *
+     * @event spatialedges
+     * @memberof Viewer
+     * @instance
+     * @type {ViewerNavigationEdgeStatusEvent}
+     * @example
+     * // Initialize the viewer
+     * var viewer = new Mapillary.Viewer({ // viewer options });
+     * // Set an event listener
+     * viewer.on("spatialedges", function() {
+     *   console.log("A spatialedges event has occurred.");
+     * });
+     */
+    | "spatialedges"
diff --git a/src/viewer/interfaces/IViewerMouseEvent.ts b/src/viewer/events/ViewerMouseEvent.ts
similarity index 60%
rename from src/viewer/interfaces/IViewerMouseEvent.ts
rename to src/viewer/events/ViewerMouseEvent.ts
index 186545841..1ed929308 100644
--- a/src/viewer/interfaces/IViewerMouseEvent.ts
+++ b/src/viewer/events/ViewerMouseEvent.ts
@@ -1,12 +1,22 @@
-import { Viewer } from "../Viewer";
-import { ILatLon } from "../../api/interfaces/ILatLon";
+import { LatLon } from "../../api/interfaces/LatLon";
+import { IViewer } from "../interfaces/IViewer";
 
 /**
- * @interface IViewerMouseEvent
+ * @interface ViewerMouseEvent
  *
- * Interface that represents a mouse event occuring in the viewer target element.
+ * `ViewerMouseEvent` is the event type for mouse-related
+ * viewer events.
+ *
+ * @example
+ * // The `click` event is an example of a `ViewerMouseEvent`.
+ * // Set up an event listener on the viewer.
+ * viewer.on('click', function(e) {
+ *   // The event object (e) contains information like the
+ *   // coordinates of the point in the viewer that was clicked.
+ *   console.log('A click event has occurred at ' + e.latLon);
+ * });
  */
-export interface IViewerMouseEvent {
+export interface ViewerMouseEvent {
     /**
      * The basic coordinates in the current image of the mouse
      * event target.
@@ -29,7 +39,7 @@ export interface IViewerMouseEvent {
      * geographic location for the mouse event target. In that case the
      * geographic coordinates will be `null`.
      */
-    latLon: ILatLon;
+    latLon: LatLon;
 
     /**
      * The pixel coordinates of the mouse event target, relative to
@@ -45,10 +55,18 @@ export interface IViewerMouseEvent {
     /**
      * The viewer object that fired the event.
      */
-    target: Viewer;
+    target: IViewer;
 
     /**
      * The event type.
      */
-    type: string;
+    type:
+    | "click"
+    | "dblclick"
+    | "contextmenu"
+    | "mousedown"
+    | "mousemove"
+    | "mouseout"
+    | "mouseover"
+    | "mouseup";
 }
diff --git a/src/viewer/events/ViewerStateEvent.ts b/src/viewer/events/ViewerStateEvent.ts
new file mode 100644
index 000000000..7bf760408
--- /dev/null
+++ b/src/viewer/events/ViewerStateEvent.ts
@@ -0,0 +1,84 @@
+import { NavigationEdgeStatus } from "../../graph/interfaces/NavigationEdgeStatus";
+import { Node } from "../../graph/Node";
+import { IViewer } from "../interfaces/IViewer";
+
+/**
+ * @interface ViewerStateEvent
+ *
+ * `ViewerStateEvent` is the event type for viewer state changes.
+ *
+ * @example
+ * // The `bearing` event is an example of a `ViewerStateEvent`.
+ * // Set up an event listener on the viewer.
+ * viewer.on('bearing', function(e) {
+ *   console.log('A bearing event has occured ' + e.bearing);
+ * });
+ */
+export interface ViewerStateEvent {
+    /**
+     * The viewer object that fired the event.
+     */
+    target: IViewer;
+
+    /**
+     * The event type.
+     */
+    type:
+    | "bearing"
+    | "fov"
+    | "loading"
+    | "moveend"
+    | "movestart"
+    | "navigable"
+    | "node"
+    | "position"
+    | "pov"
+    | "remove"
+    | "sequenceedges"
+    | "spatialedges";
+}
+
+export interface ViewerBearingEvent extends ViewerStateEvent {
+    /**
+     * Bearing is measured in degrees
+     * clockwise with respect to north.
+     *
+     * @description Bearing is related to the computed
+     * compass angle ({@link Node.computedCompassAngle})
+     * from SfM, not the original EXIF compass angle.
+     */
+    bearing: number;
+}
+
+export interface ViewerLoadingEvent extends ViewerStateEvent {
+    /**
+     * Indicates if the viewer is loading data.
+     */
+    loading: boolean;
+}
+
+export interface ViewerNavigableEvent extends ViewerStateEvent {
+    /**
+     * The navigable state indicates if the viewer supports
+     * moving, i.e. calling the `moveTo` and `moveDir`
+     * methods. The viewer will not be in a navigable state if the cover
+     * is activated and the viewer has been supplied a id. When the cover
+     * is deactivated or activated without being supplied a id it will
+     * be navigable.
+     */
+    navigable: boolean;
+}
+
+export interface ViewerNodeEvent extends ViewerStateEvent {
+    /**
+     * The viewer's current node.
+     */
+    node: Node;
+}
+
+export interface ViewerNavigationEdgeStatusEvent extends ViewerStateEvent {
+    /**
+     * The viewer's current node edge status.
+     */
+    status: NavigationEdgeStatus;
+}
diff --git a/src/viewer/interfaces/ICustomRenderer.ts b/src/viewer/interfaces/ICustomRenderer.ts
index 117fa9e88..081a25766 100644
--- a/src/viewer/interfaces/ICustomRenderer.ts
+++ b/src/viewer/interfaces/ICustomRenderer.ts
@@ -1,5 +1,6 @@
-import { ILatLonAlt } from "../../geo/interfaces/ILatLonAlt";
-import { Viewer } from "../Viewer";
+import { LatLonAlt } from "../../api/interfaces/LatLonAlt";
+import { RenderPass } from "../enums/RenderPass";
+import { IViewer } from "./IViewer";
 
 /**
  * @interface
@@ -22,6 +23,9 @@ import { Viewer } from "../Viewer";
  * of their objects using the reference parameter of the
  * renderer interface methods and the {GeoCoords#geodeticToEnu}
  * method.
+ *
+ * @description During a render pass, custom renderers
+ * are called in the order they were added.
  */
 export interface ICustomRenderer {
     /**
@@ -29,6 +33,14 @@ export interface ICustomRenderer {
      */
     id: string;
 
+    /**
+     * The custom renderers's render pass.
+     *
+     * @description The ICustomRenderer#render method
+     * will be called during this render pass.
+     */
+    renderPass: RenderPass;
+
     /**
      * Method called when the renderer has been added to the
      * viewer with {Viewer#addCustomRenderer}. This gives the
@@ -39,16 +51,16 @@ export interface ICustomRenderer {
      * for scene objects using the provided reference and
      * the {GeoCoords#geodeticToEnu} method.
      *
-     * @param {Viewer} viewer - The viewer this custom renderer
+     * @param {IViewer} viewer - The viewer this custom renderer
      * was just added to.
-     * @param {ILatLonAlt} reference - The viewer's current
+     * @param {LatLonAlt} reference - The viewer's current
      * reference position.
      * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
      * The viewer's gl context.
      */
     onAdd(
-        viewer: Viewer,
-        reference: ILatLonAlt,
+        viewer: IViewer,
+        reference: LatLonAlt,
         context: WebGLRenderingContext | WebGL2RenderingContext): void;
 
     /**
@@ -59,14 +71,14 @@ export interface ICustomRenderer {
      * for scene objects using the provided reference and
      * the {GeoCoords#geodeticToEnu} method.
      *
-     * @param {Viewer} viewer - The viewer this custom renderer
+     * @param {IViewer} viewer - The viewer this custom renderer
      * is added to.
-     * @param {ILatLonAlt} reference - The viewer's current
+     * @param {LatLonAlt} reference - The viewer's current
      * reference position.
      */
     onReferenceChanged(
-        viewer: Viewer,
-        reference: ILatLonAlt): void;
+        viewer: IViewer,
+        reference: LatLonAlt): void;
 
     /**
      * Method called when the renderer has been removed from the
@@ -74,13 +86,13 @@ export interface ICustomRenderer {
      * renderer a chance to clean up gl resources and event
      * listeners.
      *
-     * @param {Viewer} viewer - The viewer this custom renderer
+     * @param {IViewer} viewer - The viewer this custom renderer
      * was just removed from.
      * @param {WebGLRenderingContext | WebGL2RenderingContext} context -
      * The viewer's gl context.
      */
     onRemove(
-        viewer: Viewer,
+        viewer: IViewer,
         context: WebGLRenderingContext | WebGL2RenderingContext): void;
 
     /**
diff --git a/src/viewer/interfaces/ISpriteAtlas.ts b/src/viewer/interfaces/ISpriteAtlas.ts
index 938e243e5..19d75d015 100644
--- a/src/viewer/interfaces/ISpriteAtlas.ts
+++ b/src/viewer/interfaces/ISpriteAtlas.ts
@@ -1,7 +1,7 @@
 import * as THREE from "three";
 import * as vd from "virtual-dom";
 
-import { Alignment } from "../Alignment";
+import { Alignment } from "../enums/Alignment";
 
 export interface ISpriteAtlas {
     loaded: boolean;
diff --git a/src/viewer/interfaces/IUnprojection.ts b/src/viewer/interfaces/IUnprojection.ts
deleted file mode 100644
index 13d400965..000000000
--- a/src/viewer/interfaces/IUnprojection.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ILatLon } from "../../api/interfaces/ILatLon";
-
-export interface IUnprojection {
-    basicPoint: number[];
-    latLon: ILatLon;
-    pixelPoint: number[];
-}
diff --git a/src/viewer/interfaces/IViewer.ts b/src/viewer/interfaces/IViewer.ts
new file mode 100644
index 000000000..4ca69c7bd
--- /dev/null
+++ b/src/viewer/interfaces/IViewer.ts
@@ -0,0 +1,62 @@
+import { LatLon } from "../../api/interfaces/LatLon";
+import { Component } from "../../component/Component";
+import { ComponentConfiguration }
+    from "../../component/interfaces/ComponentConfiguration";
+import { NavigationDirection } from "../../graph/edge/NavigationDirection";
+import { FilterExpression } from "../../graph/FilterExpression";
+import { Node } from "../../graph/Node";
+import { RenderMode } from "../../render/RenderMode";
+import { TransitionMode } from "../../state/TransitionMode";
+import { ViewerEvent } from "../events/ViewerEvent";
+
+import { ICustomRenderer } from "./ICustomRenderer";
+import { PointOfView } from "./PointOfView";
+
+export interface IViewer {
+    readonly isNavigable: boolean;
+    activateCombinedPanning(): void;
+    activateComponent(name: string): void;
+    activateCover(): void;
+    addCustomRenderer(renderer: ICustomRenderer): void;
+    deactivateCombinedPanning(): void;
+    deactivateComponent(name: string): void;
+    deactivateCover(): void;
+    fire<T>(
+        type: ViewerEvent,
+        event: T): void;
+    getBearing(): Promise<number>;
+    getCanvas(): HTMLCanvasElement;
+    getCanvasContainer(): HTMLDivElement;
+    getCenter(): Promise<number[]>;
+    getComponent<TComponent extends Component<ComponentConfiguration>>(
+        name: string): TComponent;
+    getContainer(): HTMLElement;
+    getFieldOfView(): Promise<number>;
+    getPointOfView(): Promise<PointOfView>;
+    getPosition(): Promise<LatLon>;
+    getZoom(): Promise<number>;
+    hasCustomRenderer(rendererId: string): boolean;
+    moveDir(direction: NavigationDirection): Promise<Node>;
+    moveTo(imageId: string): Promise<Node>;
+    off<T>(
+        type: ViewerEvent,
+        handler: (event: T) => void): void;
+    on<T>(
+        type: ViewerEvent,
+        handler: (event: T) => void): void;
+    project(latLon: LatLon): Promise<number[]>;
+    projectFromBasic(basicPoint: number[]): Promise<number[]>;
+    remove(): void;
+    removeCustomRenderer(rendererId: string): void;
+    resize(): void;
+    setCenter(center: number[]): void;
+    setFieldOfView(fov: number): void;
+    setFilter(filter: FilterExpression): Promise<void>;
+    setRenderMode(renderMode: RenderMode): void;
+    setTransitionMode(transitionMode: TransitionMode): void;
+    setUserToken(userToken?: string): Promise<void>;
+    setZoom(zoom: number): void;
+    triggerRerender(): void;
+    unproject(pixelPoint: number[]): Promise<LatLon>;
+    unprojectToBasic(pixelPoint: number[]): Promise<number[]>;
+}
diff --git a/src/viewer/interfaces/IViewerEvent.ts b/src/viewer/interfaces/IViewerEvent.ts
deleted file mode 100644
index 15a65f851..000000000
--- a/src/viewer/interfaces/IViewerEvent.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Viewer } from "../Viewer";
-
-/**
- * @interface IViewerEvent
- *
- * Interface that represents an event occuring with the viewer as target.
- */
-export interface IViewerEvent {
-    /**
-     * The viewer object that fired the event.
-     */
-    target: Viewer;
-
-    /**
-     * The event type.
-     */
-    type: string;
-}
diff --git a/src/viewer/interfaces/IMouseClaim.ts b/src/viewer/interfaces/MouseClaim.ts
similarity index 56%
rename from src/viewer/interfaces/IMouseClaim.ts
rename to src/viewer/interfaces/MouseClaim.ts
index df53fc58a..4be052dca 100644
--- a/src/viewer/interfaces/IMouseClaim.ts
+++ b/src/viewer/interfaces/MouseClaim.ts
@@ -1,4 +1,4 @@
-export interface IMouseClaim {
+export interface MouseClaim {
     name: string;
     zindex: number;
 }
diff --git a/src/viewer/interfaces/IMouseDeferPixels.ts b/src/viewer/interfaces/MousePixelDeferral.ts
similarity index 54%
rename from src/viewer/interfaces/IMouseDeferPixels.ts
rename to src/viewer/interfaces/MousePixelDeferral.ts
index 5ed60716f..40d81f8fc 100644
--- a/src/viewer/interfaces/IMouseDeferPixels.ts
+++ b/src/viewer/interfaces/MousePixelDeferral.ts
@@ -1,4 +1,4 @@
-export interface IMouseDeferPixels {
+export interface MousePixelDeferral {
     name: string;
     deferPixels: number;
 }
diff --git a/src/viewer/interfaces/IPointOfView.ts b/src/viewer/interfaces/PointOfView.ts
similarity index 88%
rename from src/viewer/interfaces/IPointOfView.ts
rename to src/viewer/interfaces/PointOfView.ts
index db2ee7776..bdd5fdc13 100644
--- a/src/viewer/interfaces/IPointOfView.ts
+++ b/src/viewer/interfaces/PointOfView.ts
@@ -1,9 +1,9 @@
 /**
- * @interface IPointOfView
+ * @interface PointOfView
  *
  * Interface that represents the point of view of the viewer.
  */
-export interface IPointOfView {
+export interface PointOfView {
     /**
      * Value indicating the current bearing of the viewer
      * measured in degrees clockwise with respect to north.
diff --git a/src/viewer/interfaces/IPinch.ts b/src/viewer/interfaces/TouchPinch.ts
similarity index 97%
rename from src/viewer/interfaces/IPinch.ts
rename to src/viewer/interfaces/TouchPinch.ts
index 1abdb2f41..ae335f832 100644
--- a/src/viewer/interfaces/IPinch.ts
+++ b/src/viewer/interfaces/TouchPinch.ts
@@ -1,4 +1,4 @@
-export interface IPinch {
+export interface TouchPinch {
     /**
      * X client coordinate for center of pinch.
      */
diff --git a/src/viewer/interfaces/Unprojection.ts b/src/viewer/interfaces/Unprojection.ts
new file mode 100644
index 000000000..42e7502da
--- /dev/null
+++ b/src/viewer/interfaces/Unprojection.ts
@@ -0,0 +1,7 @@
+import { LatLon } from "../../api/interfaces/LatLon";
+
+export interface Unprojection {
+    basicPoint: number[];
+    latLon: LatLon;
+    pixelPoint: number[];
+}
diff --git a/src/viewer/interfaces/IComponentOptions.ts b/src/viewer/options/ComponentOptions.ts
similarity index 57%
rename from src/viewer/interfaces/IComponentOptions.ts
rename to src/viewer/options/ComponentOptions.ts
index fce4ad623..829965e30 100644
--- a/src/viewer/interfaces/IComponentOptions.ts
+++ b/src/viewer/options/ComponentOptions.ts
@@ -1,22 +1,22 @@
-import { IBearingConfiguration } from "../../component/interfaces/IBearingConfiguration";
-import { ICacheConfiguration } from "../../component/interfaces/ICacheConfiguration";
-import { IDirectionConfiguration } from "../../component/interfaces/IDirectionConfiguration";
-import { IKeyboardConfiguration } from "../../component/interfaces/IKeyboardConfiguration";
-import { IMarkerConfiguration } from "../../component/interfaces/IMarkerConfiguration";
-import { IMouseConfiguration } from "../../component/interfaces/IMouseConfiguration";
-import { INavigationConfiguration } from "../../component/interfaces/INavigationConfiguration";
-import { ISequenceConfiguration } from "../../component/interfaces/ISequenceConfiguration";
-import { ISliderConfiguration } from "../../component/interfaces/ISliderConfiguration";
-import { ISpatialDataConfiguration } from "../../component/interfaces/ISpatialDataConfiguration";
-import { ITagConfiguration } from "../../component/interfaces/ITagConfiguration";
-import { IZoomConfiguration } from "../../component/interfaces/IZoomConfiguration";
+import { BearingConfiguration } from "../../component/interfaces/BearingConfiguration";
+import { CacheConfiguration } from "../../component/interfaces/CacheConfiguration";
+import { DirectionConfiguration } from "../../component/interfaces/DirectionConfiguration";
+import { KeyboardConfiguration } from "../../component/interfaces/KeyboardConfiguration";
+import { MarkerConfiguration } from "../../component/interfaces/MarkerConfiguration";
+import { MouseConfiguration } from "../../component/interfaces/MouseConfiguration";
+import { NavigationConfiguration } from "../../component/interfaces/NavigationConfiguration";
+import { SequenceConfiguration } from "../../component/interfaces/SequenceConfiguration";
+import { SliderConfiguration } from "../../component/interfaces/SliderConfiguration";
+import { SpatialDataConfiguration } from "../../component/interfaces/SpatialDataConfiguration";
+import { TagConfiguration } from "../../component/interfaces/TagConfiguration";
+import { ZoomConfiguration } from "../../component/interfaces/ZoomConfiguration";
 
 /**
  * Interface for the component options that can be provided to the viewer.
  *
  * @interface
  */
-export interface IComponentOptions {
+export interface ComponentOptions {
     /**
      * Show attribution.
      *
@@ -24,26 +24,19 @@ export interface IComponentOptions {
      */
     attribution?: boolean;
 
-    /**
-     * Display a background if no key is set.
-     *
-     * @default false
-     */
-    background?: boolean;
-
     /**
      * Show indicator for bearing and field of view.
      *
      * @default true
      */
-    bearing?: boolean | IBearingConfiguration;
+    bearing?: boolean | BearingConfiguration;
 
     /**
      * Cache images around the current one.
      *
      * @default true
      */
-    cache?: boolean | ICacheConfiguration;
+    cache?: boolean | CacheConfiguration;
 
     /**
      * Use a cover and avoid loading initial data from Mapillary.
@@ -52,12 +45,6 @@ export interface IComponentOptions {
      */
     cover?: boolean;
 
-    /**
-     * Show debug interface.
-     * @default false
-     */
-    debug?: boolean;
-
     /**
      * Show spatial direction arrows for navigation.
      *
@@ -66,7 +53,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    direction?: boolean | IDirectionConfiguration;
+    direction?: boolean | DirectionConfiguration;
 
     /**
      * Show static images without pan, zoom, or transitions.
@@ -93,7 +80,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    keyboard?: boolean | IKeyboardConfiguration;
+    keyboard?: boolean | KeyboardConfiguration;
 
     /**
      * Enable an interface for showing 3D markers in the viewer.
@@ -102,7 +89,7 @@ export interface IComponentOptions {
      *
      * @default false
      */
-    marker?: boolean | IMarkerConfiguration;
+    marker?: boolean | MarkerConfiguration;
 
     /**
      * Enable mouse and touch interaction for zoom and pan.
@@ -111,7 +98,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    mouse?: boolean | IMouseConfiguration;
+    mouse?: boolean | MouseConfiguration;
 
     /**
      * Show static navigation arrows in the corners.
@@ -120,7 +107,7 @@ export interface IComponentOptions {
      *
      * @default false
      */
-    navigation?: boolean | INavigationConfiguration;
+    navigation?: boolean | NavigationConfiguration;
 
     /**
      * Show HTML popups over images.
@@ -131,13 +118,6 @@ export interface IComponentOptions {
      */
     popup?: boolean;
 
-    /**
-     * Create a route with a story.
-     *
-     * @default false
-     */
-    route?: boolean;
-
     /**
      * Show sequence related navigation.
      *
@@ -145,7 +125,7 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    sequence?: boolean | ISequenceConfiguration;
+    sequence?: boolean | SequenceConfiguration;
 
     /**
      * Show a slider for transitioning between image planes.
@@ -154,7 +134,7 @@ export interface IComponentOptions {
      *
      * @default false
      */
-    slider?: boolean | ISliderConfiguration;
+    slider?: boolean | SliderConfiguration;
 
     /**
      * Enable an interface for showing spatial data in the viewer.
@@ -163,7 +143,7 @@ export interface IComponentOptions {
      *
      * @default false
      */
-    spatialData?: boolean | ISpatialDataConfiguration;
+    spatialData?: boolean | SpatialDataConfiguration;
 
     /**
      * Enable an interface for drawing 2D geometries on top of images.
@@ -172,7 +152,7 @@ export interface IComponentOptions {
      *
      * @default false
      */
-    tag?: boolean | ITagConfiguration;
+    tag?: boolean | TagConfiguration;
 
     /**
      * Show buttons for zooming in and out.
@@ -181,5 +161,5 @@ export interface IComponentOptions {
      *
      * @default true
      */
-    zoom?: boolean | IZoomConfiguration;
+    zoom?: boolean | ZoomConfiguration;
 }
diff --git a/src/viewer/interfaces/IUrlOptions.ts b/src/viewer/options/UrlOptions.ts
similarity index 93%
rename from src/viewer/interfaces/IUrlOptions.ts
rename to src/viewer/options/UrlOptions.ts
index 310b0f2f6..8e1bd7d34 100644
--- a/src/viewer/interfaces/IUrlOptions.ts
+++ b/src/viewer/options/UrlOptions.ts
@@ -3,7 +3,7 @@
  *
  * @interface
  */
-export interface IUrlOptions {
+export interface UrlOptions {
     /**
      * Explore host.
      *
diff --git a/src/viewer/interfaces/IViewerOptions.ts b/src/viewer/options/ViewerOptions.ts
similarity index 62%
rename from src/viewer/interfaces/IViewerOptions.ts
rename to src/viewer/options/ViewerOptions.ts
index 26de49067..c2f12dba7 100644
--- a/src/viewer/interfaces/IViewerOptions.ts
+++ b/src/viewer/options/ViewerOptions.ts
@@ -1,7 +1,6 @@
-import { IComponentOptions } from "./IComponentOptions";
-import { IUrlOptions } from "./IUrlOptions";
+import { ComponentOptions } from "./ComponentOptions";
+import { UrlOptions } from "./UrlOptions";
 
-import { ImageSize } from "../ImageSize";
 import { DataProviderBase } from "../../api/DataProviderBase";
 import { RenderMode } from "../../render/RenderMode";
 import { TransitionMode } from "../../state/TransitionMode";
@@ -11,7 +10,7 @@ import { TransitionMode } from "../../state/TransitionMode";
  *
  * @interface
  */
-export interface IViewerOptions {
+export interface ViewerOptions {
     /**
      * A data provider class instance for API and static
      * resource requests or a `Mapillary API ClientID`
@@ -23,18 +22,6 @@ export interface IViewerOptions {
      */
     apiClient: string | DataProviderBase;
 
-    /**
-     * Default size of the thumbnail used in the viewer
-     * @default {ImageSize.Size640}
-     */
-    baseImageSize?: ImageSize;
-
-    /**
-     * Default size of the thumbnail used for spherical in the viewer
-     * @default {ImageSize.Size2048}
-     */
-    baseSphericalSize?: ImageSize;
-
     /**
      * Value specifying if combined panning should be enabled.
      * @default true
@@ -44,7 +31,7 @@ export interface IViewerOptions {
     /**
      * Component options.
      */
-    component?: IComponentOptions;
+    component?: ComponentOptions;
 
     /**
      * The HTML element in which
@@ -54,21 +41,14 @@ export interface IViewerOptions {
     container: string | HTMLElement;
 
     /**
-     * Optional `image-key` to start from. The key
-     * can be any Mapillary image. If a key is provided the viewer is
-     * bound to that key until it has been fully loaded. If null is provided
+     * Optional `image-id` to start from. The id
+     * can be any Mapillary image. If a id is provided the viewer is
+     * bound to that id until it has been fully loaded. If null is provided
      * no image is loaded at viewer initialization and the viewer is not
-     * bound to any particular key. Any image can then be navigated to
-     * with e.g. `viewer.moveToKey("<my-image-key>")`.
-     */
-    imageKey?: string;
-
-    /**
-     * The max size of an image shown in the viewer
-     * will be used when user pauses.
-     * @default {ImageSize.Size2048}
+     * bound to any particular id. Any image can then be navigated to
+     * with e.g. `viewer.moveToId("<my-image-id>")`.
      */
-    maxImageSize?: ImageSize;
+    imageId?: string;
 
     /**
      * The render mode in the viewer.
@@ -97,5 +77,5 @@ export interface IViewerOptions {
     /**
      * The URL options.
      */
-    url?: IUrlOptions;
+    url?: UrlOptions;
 }
diff --git a/tsconfig.test.json b/tsconfig.test.json
index b08cb3f7e..58a3461cb 100644
--- a/tsconfig.test.json
+++ b/tsconfig.test.json
@@ -4,6 +4,6 @@
         "declaration": false,
         "module": "commonjs",
         "outDir": "build/cjs/",
-        "target": "ES5",
+        "target": "ES5"
     }
 }