diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 9a0d33156c75c65c03712d3cfd3d6427dea93fef..ca4966cf9a9766e877af1038448be7902572b7f1 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -10,3 +10,4 @@
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+<script type="module" src="https://unpkg.com/hbp-connectivity-component@0.6.1/dist/connectivity-component/connectivity-component.js" defer></script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
index fe04984a5e0c3167a2b17260d1e0e6e1768f7871..957e7cbef107fa2c3191e57245241fb901983f17 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,7 +1,6 @@
import { setCompodocJson } from "@storybook/addon-docs/angular";
import docJson from "../documentation.json";
setCompodocJson(docJson);
-import * as ConnectivityComponent from 'hbp-connectivity-component/dist/loader'
import 'src/theme.scss'
@@ -19,5 +18,3 @@ export const parameters = {
current: 'light'
}
}
-
-ConnectivityComponent.defineCustomElements(window)
diff --git a/package.json b/package.json
index 1f40f209625896e132951ce623c78cbbfa1e90eb..e770b3c4658f596c78789b7fd855bd9c51730bc9 100644
--- a/package.json
+++ b/package.json
@@ -71,7 +71,6 @@
"acorn": "^8.4.1",
"export-nehuba": "0.0.12",
"file-loader": "^6.2.0",
- "hbp-connectivity-component": "^0.6.1",
"jszip": "^3.6.0",
"postcss": "^8.3.6",
"raw-loader": "^4.0.2",
diff --git a/src/index.html b/src/index.html
index 0928ef9d4a1e014365a41dedc3481534b08f68f5..ed31896f683eeb6ca359e959ba1dac65e4aa72a7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,7 +15,8 @@
<script src="https://unpkg.com/kg-dataset-previewer@1.2.0/dist/kg-dataset-previewer/kg-dataset-previewer.js" defer></script>
<script src="https://unpkg.com/three-surfer@0.0.10/dist/bundle.js" defer></script>
<script type="module" src="https://unpkg.com/ng-layer-tune@0.0.5/dist/ng-layer-tune/ng-layer-tune.esm.js"></script>
-
+ <script type="module" src="https://unpkg.com/hbp-connectivity-component@0.6.1/dist/connectivity-component/connectivity-component.js" ></script>
+
<title>Interactive Atlas Viewer</title>
</head>
<body>
diff --git a/src/main-common.ts b/src/main-common.ts
index 3bfc08878e14626e0a9cc0c95d26806ed27a47e3..f927f25516b9280f7f21416551c27a338117177e 100644
--- a/src/main-common.ts
+++ b/src/main-common.ts
@@ -28,7 +28,6 @@ import '!!file-loader?name=version.css!src/version.css'
import 'zone.js'
import { enableProdMode } from '@angular/core';
-import * as ConnectivityComponent from 'hbp-connectivity-component/dist/loader'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { MainModule } from './main.module';
@@ -39,5 +38,3 @@ if (PRODUCTION) { console.log(`Siibra Explorer: ${VERSION}::${GIT_HASH}`) }
platformBrowserDynamic().bootstrapModule(MainModule)
-
-ConnectivityComponent.defineCustomElements(window)
\ No newline at end of file