Merge pull request #48 from application-research/feat/replication-fil…

…tering Feat/replication filtering
application-research · May 17, 2023 · 198bf12 · 198bf12
2 parents 70b1325 + a96a103
commit 198bf12
Show file tree

Hide file tree

Showing 56 changed files with 1,178 additions and 688 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,7 +1,7 @@
 import '@root/global.scss';
 
-import Application from '@components/Application';
+import Main from '@components/Main';
 
 export default async function Page(props) {
-  return <Application />;
+  return <Main />;
 }
diff --git a/common/navigation.ts b/common/navigation.ts
@@ -12,4 +12,9 @@ export const tooltipStates = {
   addWallet: 4,
   addReplication: 5,
   associateWallet: 6,
-};
+};
+
+export const apps = {
+  ddm: 'ddm',
+  ptolemy: 'ptolemy',
+}
diff --git a/components/Application.tsx b/components/Application.tsx
diff --git a/components/DatasetSelect.tsx b/components/DatasetSelect.tsx
@@ -1,8 +1,8 @@
-import Select from '@components/Select';
+import Select from '@components/basic/Select';
 
 export default function ProviderSelect(props) {
   return (
-    <Select default={'select a dataset...'} {...props}>
+    <Select placeholder={'select a dataset...'} {...props}>
       {props.datasets?.map((dataset, i) => {
         return (
           <option value={dataset.name}>{dataset.name}</option>

diff --git a/components/DefaultLayout.module.scss b/components/DefaultLayout.module.scss
@@ -34,15 +34,13 @@
   width: 100%;
   min-width: 10%;
   border-left: 1px solid var(--color-border);
-  position: relative;
 }
 
 .right {
   width: 100%;
   min-width: 10%;
   min-height: calc(100vh - 56px);
   border-left: 1px solid var(--color-border);
-  position: relative;
 }
 
 .appTitle {

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
@@ -3,48 +3,68 @@ import { navigationStates } from '@root/common/navigation';
 
 import * as React from 'react';
 
-export default function DefaultLayout(props) {
+export default function DefaultLayout(props: {
+  apps: string[],
+  activeApp: string,
+  onSwitchApp: (app: string) => void,
+  children: any,
+}) {
+  let title = props.children?.find(child => child.type === AppTitle);
+  let version = props.children?.find(child => child.type === AppVersion);
+  let nav = props.children?.find(child => child.type === AppNav);
+  let body = props.children?.find(child => child.type === AppBody);
+
+  // NOTE(@elijaharita): this works right now because there are only 2 apps
+  // (ptolemy and ddm). It will need to be changed in the future if more apps
+  // are added.
+  function toggleApp() {
+    let otherApp = props.apps.filter(app => app != props.activeApp)[0];
+    props.onSwitchApp(otherApp);
+    console.log('switching to app ' + otherApp);
+  }
+
   return (
     <div className={styles.body}>
       <div className={styles.top}>
         <div className={styles.left}>
-          <div className={styles.appTitle}>{props.appTitle}</div>
+          <div className={styles.appTitle}>
+            <span onClick={e => toggleApp()}>{title}</span>
+          </div>
         </div>
         <div className={styles.topRight}>
-          <div className={styles.appVersion}>{props.appVersion}</div>
+          <div className={styles.appVersion}>{version}</div>
         </div>
       </div>
       <div className={styles.bottom}>
         <div className={styles.left}>
-          <nav className={styles.appNavigation}>
-            <span className={styles.appNavigationItem} onClick={props.onClickDatasets}>
-              Datasets {props.appNavigationState === navigationStates.datasets && '➝'}
-            </span>
-            <span className={styles.appNavigationSubItem} onClick={props.onNewDataset}>
-              + New dataset
-            </span>
-            <span className={styles.appNavigationItem} onClick={props.onClickProviders}>
-              Providers {props.appNavigationState === navigationStates.providers && '➝'}
-            </span>
-            <span className={styles.appNavigationSubItem} onClick={props.onAddProviders}>
-              + Add provider
-            </span>
-            <span className={styles.appNavigationItem} onClick={props.onClickReplications}>
-              Replications {props.appNavigationState === navigationStates.replications && '➝'}
-            </span>
-            <span className={styles.appNavigationSubItem} onClick={props.onAddReplication}>
-              + Add replication
-            </span>
-            <span className={styles.appNavigationItem} onClick={props.onClickWallets}>
-              Wallets {props.appNavigationState === navigationStates.wallets && '➝'}
-            </span>
-            <span className={styles.appNavigationSubItem} onClick={props.onAddWallet}>
-              + Add wallet
-            </span>
-          </nav>
+          <nav className={styles.appNavigation}>{nav}</nav>
         </div>
-        <div className={styles.right}>{props.children}</div>
+        <div className={styles.right}>{body}</div>
       </div>
     </div>
   );
 }
+
+export function AppTitle(props) {
+  return <>{props.children}</>;
+}
+
+export function AppVersion(props) {
+  return <>{props.children}</>;
+}
+
+export function AppNav(props) {
+  return <div>{props.children}</div>;
+}
+
+export function AppNavItem(props) {
+  return <span className={styles.appNavigationItem} onClick={props.onClick}>{props.children}</span>;
+}
+
+export function AppNavSubItem(props) {
+  return <span className={styles.appNavigationSubItem} onClick={props.onClick}>{props.children}</span>;
+}
+
+export function AppBody(props) {
+  return <div>{props.children}</div>;
+}