fanzor

src/contents/engineering.tsx

@@ -4,6 +4,8 @@ import { LoremShort } from "../components/Loremipsum";
 import { useEffect } from "react";
 import { useLocation } from "react-router-dom";
 import { openElement } from "../utils/openElement";
+import FanzorViewer from '../components/Fanzorviewer.tsx';
+
 
 
 export function Engineering() {
@@ -28,6 +30,10 @@ export function Engineering() {
               selectedTab.style.display = 'block';
           }
       }
+      <div className="container">
+            <h1>Protein Structure Viewer</h1>
+            <FanzorViewer />
+          </div>
 
       // Scroll to the section specified by collapseId after opening the tab
       if (collapseId) {

src/contents/example.tsx

@@ -9,7 +9,6 @@ import SimpleSlider from "../components/Slider";
 import React from 'react';
 import { Bar, Doughnut, PolarArea } from 'react-chartjs-2';
 import { Chart as ChartJS, Tooltip, Legend, BarElement, CategoryScale, LinearScale, Title, RadialLinearScale } from 'chart.js';
-import FanzorViewer from '../components/Fanzorviewer.tsx';
 
 
 ChartJS.register(
@@ -25,10 +24,7 @@ ChartJS.register(
 export function Example() {
     return (
       <>
-       <div className="container">
-            <h1>Protein Structure Viewer</h1>
-            <FanzorViewer />
-          </div>
+       
       <h1> Here you can see what we can use</h1>
       <h2>Collapisbles</h2>
       <div className="row">