Add example query / perspective

SampoUI_Server/docker-compose.dev.yml

@@ -1,5 +1,6 @@
 services:
   sampo-ui: 
+    platform: linux/x86_64
     container_name: rocrate-sampo-ui
     build:
       context: .
@@ -15,14 +16,14 @@ services:
       - "3001:3001"
     volumes:
       - node_modules:/usr/src/app/node_modules/
-      #- ./sampo-ui/src:/usr/src/app/src/
-      #- ./frontend/src/client/translations/cebeme:/usr/src/app/src/client/translations/cebeme/
-      #- ./frontend/src/client/components/perspectives/cebeme:/usr/src/app/src/client/components/perspectives/cebeme/
-      #- ./frontend/src/configs:/usr/src/app/src/configs/
-      #- ./frontend/src/server/sparql/cebeme/sparql_queries:/usr/src/app/src/server/sparql/cebeme/sparql_queries/
-
+      - ./frontend/src/configs/rocrate:/usr/src/app/src/configs/rocrate
+      - ./frontend/src/client/components/perspectives/rocrate:/usr/src/app/src/client/components/perspectives/rocrate
+      - ./frontend/src/client/translations/rocrate:/usr/src/app/src/client/translations/rocrate
+      - ./frontend/src/server/sparql/rocrate:/usr/src/app/src/server/sparql/rocrate
+      - ./frontend/src/configs/portalConfig.json:/usr/src/app/src/configs/portalConfig.json
 
   jena-fuseki:
+    platform: linux/x86_64
     container_name: rocrate-jena-fuseki
     image: stain/jena-fuseki
     restart: unless-stopped
@@ -31,6 +32,7 @@ services:
       - "3030:3030"
     volumes:
       - jena-fuseki-data:/fuseki
+      - ./fuseki/config.ttl:/fuseki/config.ttl
     # secrets:
     #   - admin_password
     environment:

SampoUI_Server/frontend/src/client/components/perspectives/rocrate/Footer.js

@@ -0,0 +1,114 @@
+import React from 'react'
+import Paper from '@mui/material/Paper'
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import aaltoLogo from '../../../img/logos/Aalto_SCI_EN_13_BLACK_2_cropped.png'
+import hyLogo from '../../../img/logos/university-of-helsinki-logo-transparent-black.png'
+import heldigLogo from '../../../img/logos/heldig-logo-transparent-black.png'
+
+/**
+ * A component for creating a footer. The logos are imported inside this component.
+ */
+const Footer = props => {
+  return (
+    <Paper
+      sx={theme => ({
+        boxShadow: '0 -20px 20px -20px #333',
+        borderRadius: 0,
+        display: 'flex',
+        justifyContent: 'space-evenly',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        rowGap: theme.spacing(2),
+        columnGap: theme.spacing(3),
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
+        [theme.breakpoints.down(496)]: {
+          paddingTop: theme.spacing(2),
+          paddingBottom: theme.spacing(2)
+        },
+        minHeight: {
+          xs: props.layoutConfig.footer.reducedHeight,
+          hundredPercentHeight: props.layoutConfig.footer.reducedHeight,
+          reducedHeight: props.layoutConfig.footer.defaultHeight
+        }
+      })}
+    >
+      <Box
+        component='a'
+        href='https://www.aalto.fi/en/school-of-science'
+        target='_blank'
+        rel='noopener noreferrer'
+        sx={theme => ({
+          width: 143,
+          height: 29,
+          [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+            width: 167,
+            height: 34
+          }
+        })}
+      >
+        <Box
+          component='img'
+          src={aaltoLogo}
+          alt='Aalto University logo'
+          sx={{
+            height: '100%'
+          }}
+        />
+      </Box>
+      <Box
+        component='a'
+        href='https://www.helsinki.fi/en'
+        target='_blank'
+        rel='noopener noreferrer'
+        sx={theme => ({
+          width: 155,
+          height: 40,
+          [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+            width: 168,
+            height: 45
+          }
+        })}
+      >
+        <Box
+          component='img'
+          src={hyLogo}
+          alt='University of Helsinki logo'
+          sx={{
+            height: '100%'
+          }}
+        />
+      </Box>
+      <Box
+        component='a'
+        href='https://www.helsinki.fi/en/helsinki-centre-for-digital-humanities'
+        target='_blank'
+        rel='noopener noreferrer'
+        sx={theme => ({
+          width: 118,
+          height: 30,
+          [theme.breakpoints.up(props.layoutConfig.reducedHeightBreakpoint)]: {
+            width: 130,
+            height: 33
+          }
+        })}
+      >
+        <Box
+          component='img'
+          src={heldigLogo}
+          alt='Helsinki Centre for Digital Humanities logo'
+          sx={{
+            height: '100%'
+          }}
+        />
+      </Box>
+    </Paper>
+  )
+}
+
+Footer.propTypes = {
+  layoutConfig: PropTypes.object.isRequired
+}
+
+export default Footer

SampoUI_Server/frontend/src/client/components/perspectives/rocrate/Footer.stories.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import Footer from './Footer'
+
+export default {
+  component: Footer,
+  title: 'Sampo-UI/perspectives/sampo/Footer'
+}
+
+export const basic = () => <Footer />

SampoUI_Server/frontend/src/client/components/perspectives/rocrate/Main.js

@@ -0,0 +1,195 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import intl from 'react-intl-universal'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import has from 'lodash'
+import MainCard from './MainCard'
+import { getSpacing } from '../../../helpers/helpers'
+
+/**
+ * A component for generating a front page for a semantic portal.
+ */
+const Main = props => {
+  const { perspectives, screenSize, layoutConfig } = props
+  const { mainPage } = layoutConfig
+  let headingVariant = 'h5'
+  let subheadingVariant = 'body1'
+  let descriptionVariant = 'body1'
+  switch (screenSize) {
+    case 'xs':
+      headingVariant = 'h5'
+      subheadingVariant = 'body1'
+      descriptionVariant = 'body1'
+      break
+    case 'sm':
+      headingVariant = 'h4'
+      subheadingVariant = 'h6'
+      descriptionVariant = 'h6'
+      break
+    case 'md':
+      headingVariant = 'h3'
+      subheadingVariant = 'h6'
+      descriptionVariant = 'h6'
+      break
+    case 'lg':
+      headingVariant = 'h2'
+      subheadingVariant = 'h5'
+      descriptionVariant = 'h6'
+      break
+    case 'xl':
+      headingVariant = 'h1'
+      subheadingVariant = 'h4'
+      descriptionVariant = 'h6'
+      break
+  }
+
+  return (
+    <Box
+      sx={theme => {
+        const defaultHeightReduction = layoutConfig.topBar.defaultHeight +
+          layoutConfig.footer.defaultHeight + getSpacing(theme, 2)
+        const reducedHeightReduction = layoutConfig.topBar.reducedHeight +
+          layoutConfig.footer.reducedHeight + getSpacing(theme, 2)
+        return {
+          paddingBottom: theme.spacing(2),
+          height: {
+            hundredPercentHeight: `calc(100% - ${reducedHeightReduction}px)`,
+            reducedHeight: `calc(100% - ${defaultHeightReduction}px)`
+          },
+          overflow: {
+            hundredPercentHeight: 'auto'
+          }
+        }
+      }}
+    >
+      <Box
+        sx={theme => ({
+          background: mainPage.bannerBackround,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          height: mainPage.bannerMobileHeight,
+          [theme.breakpoints.up('md')]: {
+            height: mainPage.bannerReducedHeight
+          },
+          [theme.breakpoints.up('xl')]: {
+            height: mainPage.bannerDefaultHeight
+          },
+          boxShadow: '0 -15px 15px 0px #bdbdbd inset',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        })}
+      >
+        <Box
+          sx={{
+            color: '#fff'
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: 'center'
+            }}
+          >
+            <Typography component='h1' variant={headingVariant} align='center'>
+              {intl.getHTML('appTitle.long')}
+            </Typography>
+          </Box>
+          <Box
+            sx={theme => ({
+              marginTop: theme.spacing(1.5),
+              ...(mainPage.wrapSubheading) && {
+                [theme.breakpoints.up('md')]: {
+                  display: 'flex',
+                  '& div': {
+                    flexGrow: 1,
+                    width: 0
+                  }
+                }
+              }
+            })}
+          >
+            <Box>
+              <Typography component='p' variant={subheadingVariant} align='center'>
+                {intl.getHTML('appTitle.subheading')}
+              </Typography>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+      <Box
+        sx={theme => ({
+          marginLeft: theme.spacing(1),
+          marginRight: theme.spacing(1),
+          [theme.breakpoints.up(800 + getSpacing(theme, 6))]: {
+            width: 800,
+            marginLeft: 'auto',
+            marginRight: 'auto'
+          }
+        })}
+      >
+        <Box
+          sx={theme => ({
+            paddingBottom: theme.spacing(1)
+          })}
+        >
+          <Typography variant={descriptionVariant} color='textPrimary' paragraph>
+            {intl.getHTML('appDescription')}
+          </Typography>
+          <Typography variant={descriptionVariant} align='center' color='textPrimary' paragraph>
+            {intl.get('selectPerspective')}
+          </Typography>
+        </Box>
+        <Grid
+          container spacing={screenSize === 'sm' ? 2 : 1}
+          justifyContent={screenSize === 'xs' || screenSize === 'sm' ? 'center' : 'flex-start'}
+        >
+          {perspectives.map(perspective => {
+            const hideCard = (has(perspective.hideCardOnFrontPage) && perspective.hideCardOnFrontPage)
+            if (!hideCard) {
+              return (
+                <MainCard
+                  key={perspective.id}
+                  perspective={perspective}
+                  cardHeadingVariant='h5'
+                  rootUrl={props.rootUrl}
+                />
+              )
+            }
+            return null
+          })}
+        </Grid>
+        <Box
+          sx={theme => ({
+            marginTop: theme.spacing(1),
+            display: 'flex',
+            justifyContent: 'center'
+          })}
+        >
+          <Typography
+            sx={theme => ({
+              marginTop: theme.spacing(0.5),
+              fontSize: '0.7em'
+            })}
+          >
+            {intl.getHTML('mainPageImageLicence')}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+Main.propTypes = {
+  /**
+   * An array of objects used for configuration. Each object represents a single perspective.
+   */
+  perspectives: PropTypes.array.isRequired,
+  screenSize: PropTypes.string.isRequired,
+  rootUrl: PropTypes.string.isRequired
+}
+
+export default Main

SampoUI_Server/frontend/src/client/components/perspectives/rocrate/Main.stories.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import Main from './Main'
+const perspectiveConfig = []
+
+export default {
+  component: Main,
+  title: 'Sampo-UI/main_layout/Main'
+}
+
+export const medium = () => {
+  return (
+    <Main
+      perspectives={perspectiveConfig}
+      screenSize='md'
+      rootUrl=''
+    />
+  )
+}
+
+export const small = () => {
+  return (
+    <Main
+      perspectives={perspectiveConfig}
+      screenSize='sm'
+      rootUrl=''
+    />
+  )
+}
+
+export const extraLarge = () => {
+  return (
+    <Main
+      perspectives={perspectiveConfig}
+      screenSize='xl'
+      rootUrl=''
+    />
+  )
+}