Merge pull request #23 from HIP-infrastructure/feat/id.thehip.app

Feat/id.thehip.app

README.md

@@ -49,3 +49,7 @@ action: 'import',
 })
 
 trackPageView { documentTitle: route }
+
+## Acknowledgement
+
+This research was supported by the EBRAINS research infrastructure, funded from the European Union’s Horizon 2020 Framework Programme for Research and Innovation under the Specific Grant Agreement No. 945539 (Human Brain Project SGA3).

lib/Controller/PageController.php

@@ -44,13 +44,16 @@ public function index()
 		$csp->addAllowedFrameDomain('gpu1.thehip.app');
 		$csp->addAllowedFrameDomain('cpu1.thehip.app');
 		$csp->addAllowedFrameDomain('cpu2.thehip.app');
-		$csp->addAllowedFrameDomain('hip-infrastructure.github.io');
 		$csp->addAllowedFrameDomain('backend.thehip.app');
 		$csp->addAllowedFrameDomain('iam.ebrains.eu');
 		$csp->addAllowedFrameDomain('iam-int.ebrains.eu');
 		$csp->addAllowedFrameDomain('hip.local:9001');
 		$csp->addAllowedFrameDomain('hip.collab.local:9001');
 		$csp->addAllowedFrameDomain('collab-dev.thehip.app');
+		$csp->addAllowedFrameDomain('keycloak.thehip.app');
+		$csp->addAllowedFrameDomain('id.thehip.app');
+		$csp->addAllowedFrameDomain('dev.id.thehip.app');
+		$csp->addAllowedFrameDomain('hip-infrastructure.github.io');
 
 		$csp->addAllowedConnectDomain('gpu1.thehip.app');
 		$csp->addAllowedConnectDomain('cpu1.thehip.app');
@@ -60,11 +63,12 @@ public function index()
 		$csp->addAllowedConnectDomain('iam-int.ebrains.eu');
 		$csp->addAllowedConnectDomain('hip.local:9001');
 		$csp->addAllowedConnectDomain('hip.collab.local:9001');
-		$csp->addAllowedConnectDomain('stats.humanbrainproject.eu');
 		$csp->addAllowedConnectDomain('collab-dev.thehip.app');
-
-		$csp->addAllowedScriptDomain('stats.humanbrainproject.eu');
-
+		$csp->addAllowedConnectDomain('keycloak.thehip.app');
+		$csp->addAllowedConnectDomain('id.thehip.app');
+		$csp->addAllowedConnectDomain('dev.id.thehip.app');
+		$csp->addAllowedConnectDomain('stats.humanbrainproject.eu');
+
 		$response->setContentSecurityPolicy($csp);
 
 		return $response;

src/App.tsx

@@ -3,10 +3,10 @@ import { Box, Typography } from '@mui/material'
 import CssBaseline from '@mui/material/CssBaseline'
 import { Outlet, Route, Routes } from 'react-router-dom'
 import './App.css'
-import Admin from './components/Center/Admin'
 import AppList from './components/Documentation/AppList'
-import Dataset from './components/BIDS/Dataset'
-import Datasets from './components/BIDS/Datasets'
+import Dataset from './components/UI/BIDS/Dataset'
+import CenterDatasets from './components/Center/Datasets'
+import PublicDatasets from './components/Public/Datasets'
 import Centers from './components/Centers'
 import CenterWorkspace from './components/Center/Workspace'
 import About from './components/Documentation/About'
@@ -78,14 +78,13 @@ const App = () => (
 			<Route index element={<GettingStarted />} />
 			<Route path={'apps'} element={<AppList />} />
 			<Route path={'about'} element={<About />} />
-			<Route path={'admin'} element={<Admin />} />
 			<Route path={'centers'} element={<Outlet />}>
 				<Route index element={<Centers />} />
 				<Route path={':centerId'} element={<CenterWorkspace />} />
 				<Route path={':centerId/desktops'} element={<CenterDesktops />} />
 				<Route path={':centerId/files'} element={<MyFiles />} />
 				<Route path={':centerId/datasets'} element={<Outlet />}>
-					<Route index element={<Datasets />} />
+					<Route index element={<CenterDatasets />} />
 					<Route path={':datasetId'} element={<Dataset />} />
 				</Route>
 			</Route>
@@ -103,6 +102,7 @@ const App = () => (
 					</Route>
 				</Route>
 			</Route>
+			<Route path={'public'} element={<PublicDatasets />}></Route>
 			<Route
 				path='*'
 				element={

src/api/bids.tsx

@@ -13,6 +13,18 @@ import {
 	BIDSDatasetsQueryResponse,
 } from './types'
 
+export const publishDatasetToPublicSpace = async (path: string) => {
+	const url = `${API_GATEWAY}/tools/bids/datasets/publish?path=${path}`
+	fetch(url, {
+		headers: {
+			'Content-Type': 'application/json',
+			requesttoken: window.OC.requestToken,
+		},
+	})
+		.then(checkForError)
+		.catch(catchError)
+}
+
 export const createBidsDatasetsIndex = async () => {
 	const url = `${API_GATEWAY}/tools/bids/datasets/create_index`
 	fetch(url, {

src/components/Center/Cards/DataCard.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import {
+	Box,
+	Card,
+	CardContent,
+	CardMedia,
+	CircularProgress,
+	Typography,
+} from '@mui/material'
+import { BIDSDataset, Container } from '../../../api/types'
+import { API_GATEWAY } from '../../../api/gatewayClientAPI'
+
+const DataCard = ({
+	bidsDatasets,
+	sessions,
+}: {
+	bidsDatasets?: BIDSDataset[]
+	sessions?: Container[]
+}) => {
+	return (
+		<>
+			{!bidsDatasets && (
+				<CircularProgress
+					size={32}
+					color='secondary'
+					sx={{ position: 'absolute', top: 10, left: 10 }}
+				/>
+			)}
+
+			<Card
+				sx={{
+					width: 320,
+					height: 440,
+				}}
+				key={`data-group`}
+			>
+				<CardMedia
+					component='img'
+					height='160'
+					title={
+						'Image generated by DreamStudio, Text-to-Image Generative Art, https://beta.dreamstudio.ai/dream'
+					}
+					src={`${API_GATEWAY}/public/media/1375898092_synapses__data___database__information__network__neural_path__futuristic_and_medical__realistic__8k__pic_of_the_day.png`}
+				/>
+
+				<CardContent>
+					<Typography variant='h5'>Data</Typography>
+
+					<Typography
+						sx={{ mt: 2 }}
+						gutterBottom
+						variant='body2'
+						color='text.secondary'
+					>
+						Private space for your center data.
+					</Typography>
+					<>
+						<Typography sx={{ mt: 2 }} variant='body2'>
+							{sessions?.length} Opened desktop
+						</Typography>
+						<Box sx={{ display: 'flex', alignItems: 'center' }}>
+							<Box sx={{ mr: 0.5 }}>
+								<Typography variant='subtitle2'>
+									{!bidsDatasets && <CircularProgress size={12} />}
+									{bidsDatasets?.reduce(
+										(a, b) => a + (b?.ParticipantsCount || 0),
+										0
+									)}{' '}
+									subjects in {''}
+									{bidsDatasets?.length} BIDS datasets
+								</Typography>
+							</Box>
+						</Box>
+					</>
+				</CardContent>
+			</Card>
+		</>
+	)
+}
+
+export default DataCard

src/components/Center/MainCard.tsx → src/components/Center/Cards/MainCard.tsx

@@ -17,9 +17,9 @@ import {
 	Link,
 	Typography,
 } from '@mui/material'
-import { HIPCenter } from '../../api/types'
-import { linkStyle } from '../../constants'
-import { API_GATEWAY } from '../../api/gatewayClientAPI'
+import { HIPCenter } from '../../../api/types'
+import { linkStyle } from '../../../constants'
+import { API_GATEWAY } from '../../../api/gatewayClientAPI'
 
 const MainCard = ({ group }: { group?: HIPCenter }) => {
 	const SocialButton = ({ network, url }: { network: string; url: string }) => {

src/components/Center/Members.tsx → src/components/Center/Cards/MembersCard.tsx

@@ -8,9 +8,9 @@ import {
 	Stack,
 	Typography,
 } from '@mui/material'
-import { API_GATEWAY } from '../../api/gatewayClientAPI'
-import { HIPCenter, User } from '../../api/types'
-import UserInfo from '../UI/UserInfo'
+import { API_GATEWAY } from '../../../api/gatewayClientAPI'
+import { HIPCenter, User } from '../../../api/types'
+import UserInfo from '../../UI/UserInfo'
 
 const Members = ({ group, users }: { group?: HIPCenter; users?: User[] }) => {
 	return (

src/components/Center/Tools.tsx → src/components/Center/Cards/ToolsCard.tsx

@@ -9,8 +9,8 @@ import {
 	Typography,
 } from '@mui/material'
 import * as React from 'react'
-import { API_GATEWAY, scanUserFiles } from '../../api/gatewayClientAPI'
-import { useAppStore } from '../../Store'
+import { API_GATEWAY, scanUserFiles } from '../../../api/gatewayClientAPI'
+import { useAppStore } from '../../../Store'
 
 const Tools = () => {
 	const {