Site Sider

create_config_prod.js

@@ -1,22 +1,23 @@
-const parseBoolean = (value) => ["true", "1", "yes"].includes((value || "").toLocaleLowerCase());
+const parseBoolean = (value) => ['true', '1', 'yes'].includes((value || '').toLocaleLowerCase());
 
 const siteConfig = {
-    CLIENT_NAME: process.env.BENTO_PUBLIC_CLIENT_NAME || null,
-    PORTAL_URL: process.env.BENTO_PUBLIC_PORTAL_URL || null,
-    TRANSLATED: parseBoolean(process.env.BENTO_PUBLIC_TRANSLATED),
-    BEACON_URL: process.env.BEACON_URL || null,
-    BEACON_UI_ENABLED: parseBoolean(process.env.BENTO_BEACON_UI_ENABLED),
+  CLIENT_NAME: process.env.BENTO_PUBLIC_CLIENT_NAME || null,
+  PORTAL_URL: process.env.BENTO_PUBLIC_PORTAL_URL || null,
+  CUSTOM_LOGO: parseBoolean(process.env.BENTO_PUBLIC_CUSTOM_LOGO),
+  TRANSLATED: parseBoolean(process.env.BENTO_PUBLIC_TRANSLATED),
+  BEACON_URL: process.env.BEACON_URL || null,
+  BEACON_UI_ENABLED: parseBoolean(process.env.BENTO_BEACON_UI_ENABLED),
 
-    // Authentication
-    PUBLIC_URL: process.env.BENTO_PUBLIC_URL || null,
-    CLIENT_ID: process.env.CLIENT_ID || null,
-    OPENID_CONFIG_URL: process.env.OPENID_CONFIG_URL || null,
+  // Authentication
+  PUBLIC_URL: process.env.BENTO_PUBLIC_URL || null,
+  CLIENT_ID: process.env.CLIENT_ID || null,
+  OPENID_CONFIG_URL: process.env.OPENID_CONFIG_URL || null,
 };
 
-if (typeof require !== "undefined" && require.main === module) {
-    process.stdout.write(`BENTO_PUBLIC_CONFIG = ${JSON.stringify(siteConfig, null, 2)};\n`);
+if (typeof require !== 'undefined' && require.main === module) {
+  process.stdout.write(`BENTO_PUBLIC_CONFIG = ${JSON.stringify(siteConfig, null, 2)};\n`);
 }
 
 module.exports = {
-    siteConfig,
+  siteConfig,
 };

src/js/components/Beacon/BeaconQueryUi.tsx

@@ -237,60 +237,63 @@ const BeaconQueryUi = () => {
   const isFetchingBeaconQuery = useAppSelector((state) => state.beaconQuery.isFetchingQueryResponse);
 
   return (
-    <div style={WRAPPER_STYLE}>
-      <BeaconSearchResults />
-      <Card
-        title={td('Search')}
-        style={{ borderRadius: '10px', maxWidth: '1200px', width: '100%', ...BOX_SHADOW }}
-        styles={CARD_STYLES}
-      >
-        <p style={{ margin: '-8px 0 8px 0', padding: '0', color: 'grey' }}>{td(uiInstructions)}</p>
-        <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
-          <Row gutter={FORM_ROW_GUTTERS}>
-            {hasVariants && (
-              <Col xs={24} lg={12}>
+    <>
+      <Typography.Title level={2}>{td('Beacon Search')}</Typography.Title>
+      <div style={WRAPPER_STYLE}>
+        <BeaconSearchResults />
+        <Card
+          title={td('Search')}
+          style={{ borderRadius: '10px', maxWidth: '1200px', width: '100%', ...BOX_SHADOW }}
+          styles={CARD_STYLES}
+        >
+          <p style={{ margin: '-8px 0 8px 0', padding: '0', color: 'grey' }}>{td(uiInstructions)}</p>
+          <Form form={form} onFinish={handleFinish} layout="vertical" onValuesChange={handleValuesChange}>
+            <Row gutter={FORM_ROW_GUTTERS}>
+              {hasVariants && (
+                <Col xs={24} lg={12}>
+                  <Card
+                    title={td('Variants')}
+                    style={CARD_STYLE}
+                    styles={CARD_STYLES}
+                    extra={<SearchToolTip>{variantsInstructions}</SearchToolTip>}
+                  >
+                    <VariantsForm beaconAssemblyIds={beaconAssemblyIds} />
+                  </Card>
+                </Col>
+              )}
+              <Col xs={24} lg={hasVariants ? 12 : 24}>
                 <Card
-                  title={td('Variants')}
+                  title={td('Metadata')}
                   style={CARD_STYLE}
                   styles={CARD_STYLES}
-                  extra={<SearchToolTip>{variantsInstructions}</SearchToolTip>}
+                  extra={<SearchToolTip>{metadataInstructions} </SearchToolTip>}
                 >
-                  <VariantsForm beaconAssemblyIds={beaconAssemblyIds} />
+                  <Filters filters={filters} setFilters={setFilters} form={form} querySections={querySections} />
                 </Card>
               </Col>
-            )}
-            <Col xs={24} lg={hasVariants ? 12 : 24}>
-              <Card
-                title={td('Metadata')}
-                style={CARD_STYLE}
-                styles={CARD_STYLES}
-                extra={<SearchToolTip>{metadataInstructions} </SearchToolTip>}
-              >
-                <Filters filters={filters} setFilters={setFilters} form={form} querySections={querySections} />
-              </Card>
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              {showError && (
-                <BeaconErrorMessage
-                  message={`${td('Beacon error')}: ${errorMessage}`}
-                  onClose={() => setErrorAlertClosed(true)}
-                />
-              )}
-              <div style={BUTTON_AREA_STYLE}>
-                <Button type="primary" htmlType="submit" loading={isFetchingBeaconQuery} style={BUTTON_STYLE}>
-                  {td('Search Beacon')}
-                </Button>
-                <Button onClick={handleClearForm} style={BUTTON_STYLE}>
-                  {td('Clear Form')}
-                </Button>
-              </div>
-            </Col>
-          </Row>
-        </Form>
-      </Card>
-    </div>
+            </Row>
+            <Row>
+              <Col span={24}>
+                {showError && (
+                  <BeaconErrorMessage
+                    message={`${td('Beacon error')}: ${errorMessage}`}
+                    onClose={() => setErrorAlertClosed(true)}
+                  />
+                )}
+                <div style={BUTTON_AREA_STYLE}>
+                  <Button type="primary" htmlType="submit" loading={isFetchingBeaconQuery} style={BUTTON_STYLE}>
+                    {td('Search Beacon')}
+                  </Button>
+                  <Button onClick={handleClearForm} style={BUTTON_STYLE}>
+                    {td('Clear Form')}
+                  </Button>
+                </div>
+              </Col>
+            </Row>
+          </Form>
+        </Card>
+      </div>
+    </>
   );
 };
 

src/js/components/Beacon/BeaconSvg.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const BeaconSvg = () => (
+  <svg width="1em" height="1em" viewBox="0 0 200 200" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <g transform="translate(-140 465) scale(0.23-0.23)">
+      <path
+        d="M944 1921 c-55 -43 -109 -81 -122 -85 -20 -7 -22 -12 -17 -39 4 -18
+10 -35 14 -39 3 -4 33 0 66 9 81 22 240 22 324 0 35 -10 66 -16 68 -13 2 2 6
+19 10 39 4 30 2 36 -17 42 -12 4 -66 43 -119 86 -54 43 -100 79 -103 79 -3 0
+-50 -35 -104 -79z"
+      />
+      <path
+        d="M965 1763 c-120 -25 -120 -24 -99 -127 16 -81 19 -87 38 -81 40 13
+234 18 267 6 18 -6 34 -9 37 -6 3 3 13 41 22 85 20 90 19 92 -48 110 -45 12
+-182 20 -217 13z"
+      />
+      <path
+        d="M970 1549 c-30 -4 -73 -14 -95 -22 -38 -14 -40 -17 -38 -52 2 -21 4
+-39 5 -41 2 -1 37 7 78 18 87 23 206 20 280 -6 24 -8 46 -13 48 -11 2 2 7 20
+12 39 l8 36 -67 19 c-83 25 -160 31 -231 20z"
+      />
+      <path
+        d="M890 1395 c-20 -24 -3 -45 60 -73 33 -15 60 -29 60 -32 0 -3 -27 -15
+-59 -28 -82 -32 -107 -60 -116 -129 -5 -44 -3 -59 9 -71 14 -15 14 -18 -9 -42
+-36 -38 -56 -174 -33 -223 16 -33 105 -108 180 -151 21 -11 38 -23 38 -26 0
+-3 -37 -28 -83 -57 -102 -64 -190 -142 -221 -196 -17 -29 -33 -89 -50 -187
+-15 -80 -28 -153 -30 -162 -8 -34 3 -17 42 65 49 105 127 180 341 330 176 124
+157 122 260 30 74 -66 84 -62 79 33 -3 51 -9 67 -37 103 -33 41 -33 42 -17 75
+19 40 19 67 2 164 -16 91 -45 124 -160 183 l-80 42 65 33 c35 18 75 42 88 55
+21 19 22 27 16 73 -3 30 -15 60 -26 72 -13 14 -17 24 -10 29 6 3 11 22 11 42
+0 34 -1 35 -17 21 -51 -44 -70 -46 -154 -17 -43 16 -92 35 -108 43 -25 14 -30
+14 -41 1z m276 -160 c20 -8 33 -19 29 -25 -8 -13 -66 -43 -165 -85 l-78 -32
+-36 20 c-20 12 -35 26 -33 32 4 12 80 51 161 81 74 28 77 28 122 9z m42 -389
+c34 -22 62 -43 62 -47 0 -9 -95 -89 -105 -89 -13 0 -208 112 -267 153 -32 22
+-58 45 -58 51 0 6 23 26 51 43 l51 31 101 -51 c56 -27 130 -68 165 -91z"
+      />
+    </g>
+  </svg>
+);
+
+export default BeaconSvg;

src/js/components/BentoAppRouter.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { useAutoAuthenticate, useIsAuthenticated } from 'bento-auth-js';
+
+import { makeGetConfigRequest, makeGetServiceInfoRequest } from '@/features/config/config.store';
+import { makeGetAboutRequest } from '@/features/content/content.store';
+import { makeGetDataRequestThunk } from '@/features/data/data.store';
+import { makeGetSearchFields } from '@/features/search/query.store';
+import { makeGetProvenanceRequest } from '@/features/provenance/provenance.store';
+import { getBeaconConfig } from '@/features/beacon/beaconConfig.store';
+import { fetchGohanData, fetchKatsuData } from '@/features/ingestion/lastIngestion.store';
+
+import PublicOverview from './Overview/PublicOverview';
+import Search from './Search/Search';
+import ProvenanceTab from './Provenance/ProvenanceTab';
+import BeaconQueryUi from './Beacon/BeaconQueryUi';
+import { useAppDispatch } from '@/hooks';
+import { makeGetDataTypes } from '@/features/dataTypes/dataTypes.store';
+import SitePageLoading from './SitePageLoading';
+
+const BentoAppRouter = () => {
+  const dispatch = useAppDispatch();
+
+  const { isAutoAuthenticating } = useAutoAuthenticate();
+  const isAuthenticated = useIsAuthenticated();
+
+  useEffect(() => {
+    dispatch(makeGetConfigRequest()).then(() => dispatch(getBeaconConfig()));
+    dispatch(makeGetAboutRequest());
+    dispatch(makeGetDataRequestThunk());
+    dispatch(makeGetSearchFields());
+    dispatch(makeGetProvenanceRequest());
+    dispatch(fetchKatsuData());
+    dispatch(fetchGohanData());
+    dispatch(makeGetServiceInfoRequest());
+    //TODO: Dispatch makeGetDataTypes to get the data types from service-registry
+    if (isAuthenticated) {
+      dispatch(makeGetDataTypes());
+    }
+  }, [isAuthenticated]);
+
+  if (isAutoAuthenticating) {
+    return <SitePageLoading />;
+  }
+
+  return (
+    // <div style={{ paddingTop: '10px' }}>
+    <div>
+      <Routes>
+        <Route path="/overview" element={<PublicOverview />} />
+        <Route path="/search/*" element={<Search />} />
+        <Route path="/beacon/*" element={<BeaconQueryUi />} />
+        <Route path="/provenance/*" element={<ProvenanceTab />} />
+        <Route path="/*" element={<PublicOverview />} />
+      </Routes>
+    </div>
+  );
+};
+
+export default BentoAppRouter;

src/js/components/Overview/PublicOverview.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Row, Col, FloatButton, Card, Skeleton } from 'antd';
+import { Row, Col, FloatButton, Card, Skeleton, Typography } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
 import { convertSequenceAndDisplayData, saveValue } from '@/utils/localStorage';
@@ -10,23 +10,22 @@ import { BOX_SHADOW, LOCALSTORAGE_CHARTS_KEY } from '@/constants/overviewConstan
 import OverviewSection from './OverviewSection';
 import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
 import Counts from './Counts';
-import { useAppSelector } from '@/hooks';
+import { useAppSelector, useTranslationDefault } from '@/hooks';
 import { useTranslation } from 'react-i18next';
 import LastIngestionInfo from './LastIngestion';
 
 const ABOUT_CARD_STYLE = { borderRadius: '11pX', ...BOX_SHADOW };
 const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
 
 const PublicOverview = () => {
-  const { sections } = useAppSelector((state) => state.data);
+  const { i18n } = useTranslation();
+  const td = useTranslationDefault();
 
   const [drawerVisible, setDrawerVisible] = useState(false);
-
-  const { isFetchingAbout, about } = useAppSelector((state) => state.content);
-
   const [aboutContent, setAboutContent] = useState('');
 
-  const { i18n } = useTranslation();
+  const { sections } = useAppSelector((state) => state.data);
+  const { isFetchingAbout, about } = useAppSelector((state) => state.content);
 
   useEffect(() => {
     // Save sections to localStorage when they change
@@ -51,6 +50,7 @@ const PublicOverview = () => {
   return (
     <>
       <div className="container">
+        <Typography.Title level={2}>{td('Overview')}</Typography.Title>
         <Row>
           <Col flex={1}>
             <Card style={ABOUT_CARD_STYLE}>

src/js/components/Provenance/ProvenanceTab.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { Row } from 'antd';
+import { Row, Typography } from 'antd';
 import DatasetProvenance from './DatasetProvenance';
-import { useAppSelector } from '@/hooks';
+import { useAppSelector, useTranslationDefault } from '@/hooks';
 
 const ProvenanceTab = () => {
+  const td = useTranslationDefault();
   const { data, isFetching: loading } = useAppSelector((state) => state.provenance);
 
   return (
-    <Row justify="center">
-      {data.map((dataset, i) => (
-        <DatasetProvenance key={i} metadata={dataset} loading={loading} />
-      ))}
-    </Row>
+    <>
+      <Typography.Title level={2}>{td('Provenance')}</Typography.Title>
+      <Row justify="center">
+        {data.map((dataset, i) => (
+          <DatasetProvenance key={i} metadata={dataset} loading={loading} />
+        ))}
+      </Row>
+    </>
   );
 };
 

src/js/components/Search/Search.tsx

@@ -99,6 +99,7 @@ const Search: React.FC = () => {
 
   return (
     <>
+      <Typography.Title level={2}>{t('Search')}</Typography.Title>
       <Row justify="center">
         <Space direction="vertical" align="center" style={WIDTH_100P_STYLE} styles={SEARCH_SPACE_ITEM_STYLE}>
           <SearchResults />

src/js/components/SiteHeader.tsx

@@ -38,9 +38,6 @@ const SiteHeader = () => {
       <Row align="middle" justify="space-between" style={{ height: '64px' }}>
         <Col style={{ height: '100%' }}>
           <Space align="start" size={20}>
-            <a href="/">
-              <img style={{ marginTop: '15px', height: '32px' }} src="/public/assets/branding.png" alt="logo" />
-            </a>
             <Typography.Title level={1} style={{ fontSize: '18px', margin: 0, lineHeight: '64px' }} type="secondary">
               {CLIENT_NAME}
             </Typography.Title>