Skip to content

Commit

Permalink
Merge pull request #229 from MetaCell/development
Browse files Browse the repository at this point in the history
Merge development into master
  • Loading branch information
jrmartin authored Jun 10, 2024
2 parents d135da2 + 2c3ceb2 commit 07d4c7d
Show file tree
Hide file tree
Showing 55 changed files with 2,668 additions and 1,361 deletions.
34 changes: 23 additions & 11 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
# node-sass 4.14.1 requires node version <= 14 for Alpine Linux
# See: https://github.com/sass/node-sass/releases/tag/v4.14.1
FROM node:16-alpine as build-deps
WORKDIR /usr/src/app
RUN pwd && ls
COPY yarn.lock ./
ARG NODE_PARENT=node:16-alpine

FROM ${NODE_PARENT} as frontend

ENV BUILDDIR=/app

RUN apk add git
RUN npm i -g @craco/craco

WORKDIR ${BUILDDIR}
COPY package.json ${BUILDDIR}
COPY yarn.lock ${BUILDDIR}
COPY nginx/default.conf ${BUILDDIR}

RUN yarn install
COPY . ./
COPY . ${BUILDDIR}
RUN yarn build

COPY public/ ./public/
COPY src/ ./src/
FROM nginx:1.19.3-alpine

RUN cat /etc/nginx/conf.d/default.conf

COPY --from=frontend /app/default.conf /etc/nginx/conf.d/default.conf

COPY --from=frontend /app/build /usr/share/nginx/html/

EXPOSE 3000
CMD yarn run start
EXPOSE 80
30 changes: 20 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ Deployed version : https://metacell.github.io/sds-viewer/

The SDS Viewer can now be launched directly from datasets and models on the SPARC Portal (https://sparc.science/). From the landing page for your dataset or model of interest, simply click the SDS Viewer button, it will launch the viewer with it already loaded. In addition, users can load SPARC datasets using two other methods:

1) Loading a SPARC Dataset from list:
1) Loading a SPARC Dataset from app:
- Click on 'SPARC Datasets' button, it's located on the lower left corner.
- On the window that opens up, select the dataset you want to load.
- On the window that opens up, select the dataset you want to load. You can search
by dataset title and id.
![image](https://user-images.githubusercontent.com/4562825/166984322-83b4a8c2-aa29-4e6d-96e9-bcf4d125a3a9.png)
- After selection, click 'Done'
- Dataset will be loaded.
Expand All @@ -21,27 +22,36 @@ The SDS Viewer can now be launched directly from datasets and models on the SPAR
This will open up the SDS Viewer with the dataset already loaded.

##### Loaded dataset example #####
![Screenshot 2023-09-21 at 3 50 49 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/e7247cf1-df5e-498d-a418-4cbc7f4c4de2)
![image](https://github.com/MetaCell/sds-viewer/assets/4562825/9ea43afd-28cc-4b37-8c72-96be2f821f1a)

##### SPARC Dataset used #####
![Screenshot 2023-09-21 at 3 53 33 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/f3e287ed-f93a-436b-b3b0-b85cb1c0857c)
![image](https://github.com/MetaCell/sds-viewer/assets/4562825/16d878e2-d5bb-4dbd-9695-dfbd7ae5207f)

### Navigating the SDS Viewer
- Users can search for subjects, folders and files on the sidebar. Selecting an item on the sidebar will display the Metadata for it and zoom the Graph to its corresponding node.
![Screenshot 2023-09-21 at 4 04 23 PM](https://github.com/MetaCell/sds-viewer/assets/4562825/b64ea659-607f-42f7-b58f-edb01e31ab40)
- Users can search for subjects, folders and files on the sidebar. Selecting an item on the sidebar will display the Metadata for it and zoom the Graph to its corresponding folder or file.
![image](https://github.com/MetaCell/sds-viewer/assets/4562825/7b013f5a-eead-4996-b7d2-20b3bf35a294)


- Selecting an item on the Graph will display its Metadata.
- Selecting an item on the Graph will display its Metadata. Users can view Metadata for the Dataset's Subjects and Samples, along with its folders and files contents. Users can find links to the SPARC Portal for Subjects, Samples, Folders and Files.

![image](https://user-images.githubusercontent.com/4562825/186723085-c6573146-82dc-4fb7-ae95-588f7b1e4842.png)

- Navigating the Graph Viewer can be done with the mouse. There's also controlers on the bottom right that allows the user to change the Layout view, zoom in/out, reset the view to its original state and expand all data in the viewer.

- Navigating the Graph Viewer can be done with the mouse. There are also controllers on the bottom right that allow user to change the Graph Layout view, zoom in/out of the graph, reset the Layout to its original state and expand/collapse all data in the viewer.

![controllers](https://github.com/MetaCell/sds-viewer/assets/99416933/30aa8bb3-ec61-46d8-9f83-55ade15b95c0)

- Multiple Datasets can be loaded at the same time, which will open a new Graph Viewer Component for each dataset.

![multiple](https://github.com/MetaCell/sds-viewer/assets/99416933/a74fa033-ccd4-4609-b50f-852ce44d347a)
- Use the Metadata Settings button to control which properties to view on the Metadata panel. Toggle on and off properties on each Object type and click Save.

![image](https://github.com/MetaCell/sds-viewer/assets/4562825/6385b5a1-3598-4815-8aa1-f1223debe063)
![image](https://github.com/MetaCell/sds-viewer/assets/4562825/d5876581-2dfd-4f13-9213-d46907e443c8)


- Multiple Datasets can be loaded at the same time, a new Graph Viewer Component will be opened for each dataset.

![Multiple](https://github.com/MetaCell/sds-viewer/assets/4562825/9abe621a-a406-4e6b-8d6a-165622014425)


### Datasets Used
Expand Down
34 changes: 34 additions & 0 deletions deploy/k8s/codefresh.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
version: "1.0"
stages:
- "clone"
- "build"
- "deploy"
steps:
clone:
stage: "clone"
title: "Cloning SDS Viewer"
type: "git-clone"
repo: "metacell/sds-viewer"
revision: "${{CF_BRANCH}}"
build:
stage: "build"
title: "Building SDS Viewer"
type: "build"
image_name: "sds-viewer"
tag: "${{CF_SHORT_REVISION}}"
dockerfile: Dockerfile
working_directory: ./sds-viewer
buildkit: true
registry: "${{CODEFRESH_REGISTRY}}"
deploy:
stage: "deploy"
title: "Deploying SDS Viewer"
image: codefresh/cf-deploy-kubernetes
tag: latest
working_directory: ./sds-viewer/deploy/k8s
commands:
- /cf-deploy-kubernetes sds_viewer.yaml
- /cf-deploy-kubernetes ingress.yaml
environment:
- KUBECONTEXT=${{CLUSTER_NAME}}
- KUBERNETES_NAMESPACE=${{NAMESPACE}}
19 changes: 8 additions & 11 deletions deploy/k8s/ingress_tpl.yaml → deploy/k8s/ingress.yaml
100755 → 100644
Original file line number Diff line number Diff line change
@@ -1,42 +1,39 @@
apiVersion: cert-manager.io/v1alpha2
apiVersion: cert-manager.io/v1
kind: Issuer
metadata:
name: 'letsencrypt-sds_viewer'
name: 'letsencrypt-sds-viewer'
spec:
acme:
server: https://acme-v02.api.letsencrypt.org/directory
email: [email protected]
privateKeySecretRef:
name: letsencrypt-sds_viewer
name: letsencrypt-sds-viewer
solvers:
- http01:
ingress:
ingressName: sds_viewer
class: nginx
---
apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
annotations:
cert-manager.io/issuer: letsencrypt-sds_viewer
cert-manager.io/issuer: letsencrypt-sds-viewer
kubernetes.io/ingress.class: nginx
kubernetes.io/tls-acme: 'true'
nginx.ingress.kubernetes.io/ssl-redirect: 'true'
nginx.ingress.kubernetes.io/proxy-body-size: 512m
nginx.ingress.kubernetes.io/from-to-www-redirect: 'true'
name: sds_viewer
name: sds-viewer-nginx-ingress
spec:
rules:
- host: "{{DOMAIN}}"
http:
paths:
- backend:
service:
name: sds_viewer
name: sds-viewer
port:
number: 80
path: /
pathType: ImplementationSpecific
tls:
- hosts:
- "{{DOMAIN}}"
secretName: sds_viewer-tls
secretName: sds-viewer-tls
57 changes: 57 additions & 0 deletions deploy/k8s/sds_viewer.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
apiVersion: apps/v1
kind: Deployment
metadata:
name: sds-viewer
spec:
selector:
matchLabels:
app: sds-viewer
replicas: 1
template:
metadata:
labels:
app: sds-viewer
spec:
containers:
- name: sds-viewer
image: "gcr.io/metacellllc/sds-viewer:{{CF_SHORT_REVISION}}"
imagePullPolicy: "IfNotPresent"
ports:
- containerPort: 80
livenessProbe:
failureThreshold: 3
httpGet:
path: /index.html
port: 80
scheme: HTTP
initialDelaySeconds: 45
periodSeconds: 30
timeoutSeconds: 2
readinessProbe:
failureThreshold: 3
httpGet:
path: /index.html
port: 80
scheme: HTTP
initialDelaySeconds: 15
periodSeconds: 30
timeoutSeconds: 2
resources:
limits:
cpu: 1500m
memory: 768Mi
requests:
cpu: 500m
memory: 768Mi
---
apiVersion: v1
kind: Service
metadata:
name: sds-viewer
spec:
type: ClusterIP
ports:
- port: 80
targetPort: 80
selector:
app: sds-viewer
39 changes: 0 additions & 39 deletions deploy/k8s/sds_viewer_tpl.yaml

This file was deleted.

32 changes: 32 additions & 0 deletions nginx/default.conf
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
upstream sds-viewer {
server sds-viewer:8000;
}

server {
listen 80;

location / {
root /usr/share/nginx/html/;
# index index.html index.htm;
try_files $uri /index.html;
}

location /sds-viewer/ {
root /usr/share/nginx/html/;
# index index.html index.htm;
try_files $uri /index.html;
}

location ~* ^/(admin|api|logged-out|login|sds-viewer|complete|disconnect|__debug__)/.*$ {
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
proxy_redirect off;
proxy_pass http://sds-viewer;
}

location /static/ {
autoindex on;
alias /usr/share/nginx/html/static/;
}
}
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"version": "0.1.0",
"license": "MIT",
"private": true,
"homepage": "http://metacell.github.io/sds-viewer",
"homepage": "./",
"dependencies": {
"@craco/craco": "^6.1.2",
"@frogcat/ttl2jsonld": "^0.0.7",
Expand Down Expand Up @@ -31,6 +31,7 @@
"n3": "^1.13.0",
"puppeteer": "13.5.1",
"react": "^17.0.2",
"react-beautiful-dnd": "^13.1.1",
"react-dom": "^17.0.2",
"react-hot-loader": "^4.13.0",
"react-redux": "^7.2.4",
Expand Down
Loading

0 comments on commit 07d4c7d

Please sign in to comment.