Feature/embed (#474)

* fix the html loader result

* add type

* embed path

* make sure the loading overlay shows

* style title

* remove extra color

* remove log

* remove unused code

src/components/EmbedOverlay/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+import styles from "./style.css";
+
+interface ViewerOverlayTargetProps {
+    title: string;
+}
+
+const EmbedOverlay = ({
+    title,
+}: ViewerOverlayTargetProps): JSX.Element | null => {
+    return (
+        <div className={styles.container}>
+            <h4>{title}</h4>
+        </div>
+    );
+};
+
+export default EmbedOverlay;

src/components/EmbedOverlay/style.css

@@ -0,0 +1,13 @@
+.container{
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    z-index: 300;
+    display: flex;
+    pointer-events: none;
+}
+
+.container h4 {
+    color: var(--dark-theme-text-color);
+    margin: 0 auto;
+}

src/components/SideBar/index.tsx

@@ -13,6 +13,7 @@ interface SiderProps {
     type: string;
     onCollapse: (open: boolean) => void;
     children?: React.ReactNode;
+    isEmbedded?: boolean;
 }
 
 interface SiderState {
@@ -36,12 +37,12 @@ export default class SideBar extends React.Component<SiderProps, SiderState> {
     };
 
     public render(): JSX.Element {
-        const { type, children } = this.props;
-
+        const { type, children, isEmbedded } = this.props;
         // Ex) class="style__sider--30dA5 style__left--1KLfS"
         const siderClass: string = classNames({
             [styles.sider]: true,
             [styles[type]]: true,
+            [styles.embed]: isEmbedded,
         });
 
         // Ex) class="style__trigger--30dA5 style__left--1KLfS style__collapsed--ncLRy"

src/components/SideBar/style.css

@@ -8,6 +8,9 @@
     background-color: var(--dark-theme-sidebar-bg);
     padding: 0 10px 0 0;
 }
+.sider.embed {
+    height: 100vh;
+}
 
 .sider.right {
     right: 0;

src/containers/Simularium/index.tsx

@@ -50,6 +50,9 @@ import {
 const { Content } = Layout;
 
 import styles from "./style.css";
+import classNames from "classnames";
+import { EMBED_PATHNAME } from "../../routes";
+import EmbedOverlay from "../../components/EmbedOverlay";
 
 interface AppProps {
     onSidePanelCollapse: (number: number) => void;
@@ -194,32 +197,54 @@ class App extends React.Component<AppProps, AppState> {
         }
     }
 
-    public render(): JSX.Element {
+    public renderOverlay(isEmbedded: boolean) {
         const {
-            simulariumController,
-            changeToLocalSimulariumFile,
+            simulariumFile,
             resetDragOverViewer,
+            changeToLocalSimulariumFile,
             viewerStatus,
             fileIsDraggedOverViewer,
             setViewerStatus,
             clearSimulariumFile,
             setError,
         } = this.props;
+        if (isEmbedded) {
+            return <EmbedOverlay title={simulariumFile.name} />;
+        } else {
+            return (
+                <ViewerOverlayTarget
+                    key="drop"
+                    clearSimulariumFile={clearSimulariumFile}
+                    loadLocalFile={changeToLocalSimulariumFile}
+                    isLoading={viewerStatus === VIEWER_LOADING}
+                    resetDragOverViewer={resetDragOverViewer}
+                    fileIsDraggedOver={fileIsDraggedOverViewer}
+                    setViewerStatus={setViewerStatus}
+                    setError={setError}
+                />
+            );
+        }
+    }
+
+    public render(): JSX.Element {
+        const { simulariumController, changeToLocalSimulariumFile } =
+            this.props;
+        const isEmbedded = location.pathname === EMBED_PATHNAME;
         return (
-            <Layout className={styles.container}>
+            <Layout
+                className={classNames([
+                    styles.container,
+                    { [styles.embed]: isEmbedded },
+                ])}
+            >
                 <div ref={this.interactiveContent}>
                     <Layout className={styles.content}>
-                        <ViewerOverlayTarget
-                            key="drop"
-                            clearSimulariumFile={clearSimulariumFile}
-                            loadLocalFile={changeToLocalSimulariumFile}
-                            isLoading={viewerStatus === VIEWER_LOADING}
-                            resetDragOverViewer={resetDragOverViewer}
-                            fileIsDraggedOver={fileIsDraggedOverViewer}
-                            setViewerStatus={setViewerStatus}
-                            setError={setError}
-                        />
-                        <SideBar onCollapse={this.onPanelCollapse} type="left">
+                        {this.renderOverlay(isEmbedded)}
+                        <SideBar
+                            onCollapse={this.onPanelCollapse}
+                            isEmbedded={isEmbedded}
+                            type="left"
+                        >
                             <ModelPanel />
                         </SideBar>
                         <Content>
@@ -230,7 +255,11 @@ class App extends React.Component<AppProps, AppState> {
                                 />
                             )}
                         </Content>
-                        <SideBar onCollapse={this.onPanelCollapse} type="right">
+                        <SideBar
+                            onCollapse={this.onPanelCollapse}
+                            isEmbedded={isEmbedded}
+                            type="right"
+                        >
                             <ResultsPanel />
                         </SideBar>
                     </Layout>

src/containers/Simularium/style.css

@@ -15,6 +15,12 @@
     background: var(--dark-theme-body-bg);
 }
 
+.container.embed :global(.ant-layout-content) {
+    height: 100vh;
+    /* Prevents a light gray background from flashing upon collapsing the right sidebar */
+    background: var(--dark-theme-body-bg);
+}
+
 .content {
     position: relative;
     height: 100%;

src/index.tsx

@@ -11,7 +11,7 @@ import { BrowserRouter, Switch, Route, useLocation } from "react-router-dom";
 import { APP_ID } from "./constants";
 
 import { createReduxStore } from "./state";
-import routes, { VIEWER_PATHNAME } from "./routes";
+import routes, { EMBED_PATHNAME, VIEWER_PATHNAME } from "./routes";
 import ScrollToTop from "./components/ScrollToTop";
 import AppHeader from "./containers/AppHeader";
 
@@ -32,7 +32,10 @@ function useLocationChange() {
     const dispatch = useDispatch();
 
     React.useEffect(() => {
-        if (location.pathname !== VIEWER_PATHNAME) {
+        if (
+            location.pathname !== VIEWER_PATHNAME &&
+            location.pathname !== EMBED_PATHNAME
+        ) {
             batch(() => {
                 // if we're navigating away from the viewer, stop playing and reset state
                 dispatch(setIsPlaying(false));
@@ -76,9 +79,11 @@ const App = () => {
                     }
                 >
                     <ScrollToTop />
-                    <Header>
-                        <AppHeader />
-                    </Header>
+                    {location.pathname !== EMBED_PATHNAME && (
+                        <Header>
+                            <AppHeader />
+                        </Header>
+                    )}
                     <RouterSwitch />
                 </BrowserRouter>
             </Layout>

src/routes/index.tsx

@@ -4,6 +4,7 @@ import Simularium from "../containers/Simularium";
 
 export const VIEWER_PATHNAME = "/viewer";
 export const TUTORIAL_PATHNAME = "/tutorial";
+export const EMBED_PATHNAME = "/embed";
 
 export default [
     {
@@ -21,4 +22,9 @@ export default [
         component: Simularium,
         path: VIEWER_PATHNAME,
     },
+    {
+        name: "Embed",
+        component: Simularium,
+        path: EMBED_PATHNAME,
+    },
 ];