diff --git a/Dockerfile b/Dockerfile
index 97f9e87..83c03fa 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -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
\ No newline at end of file
diff --git a/README.md b/README.md
index 30b101c..c4dae68 100644
--- a/README.md
+++ b/README.md
@@ -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.
@@ -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
diff --git a/deploy/k8s/codefresh.yaml b/deploy/k8s/codefresh.yaml
new file mode 100644
index 0000000..1b2f2dd
--- /dev/null
+++ b/deploy/k8s/codefresh.yaml
@@ -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}}
\ No newline at end of file
diff --git a/deploy/k8s/ingress_tpl.yaml b/deploy/k8s/ingress.yaml
old mode 100755
new mode 100644
similarity index 57%
rename from deploy/k8s/ingress_tpl.yaml
rename to deploy/k8s/ingress.yaml
index befd530..5edc109
--- a/deploy/k8s/ingress_tpl.yaml
+++ b/deploy/k8s/ingress.yaml
@@ -1,29 +1,26 @@
-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: filippo@metacell.us
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}}"
@@ -31,7 +28,7 @@ spec:
paths:
- backend:
service:
- name: sds_viewer
+ name: sds-viewer
port:
number: 80
path: /
@@ -39,4 +36,4 @@ spec:
tls:
- hosts:
- "{{DOMAIN}}"
- secretName: sds_viewer-tls
+ secretName: sds-viewer-tls
diff --git a/deploy/k8s/sds_viewer.yaml b/deploy/k8s/sds_viewer.yaml
new file mode 100644
index 0000000..7b67d58
--- /dev/null
+++ b/deploy/k8s/sds_viewer.yaml
@@ -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
diff --git a/deploy/k8s/sds_viewer_tpl.yaml b/deploy/k8s/sds_viewer_tpl.yaml
deleted file mode 100755
index 95bb514..0000000
--- a/deploy/k8s/sds_viewer_tpl.yaml
+++ /dev/null
@@ -1,39 +0,0 @@
-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: "{{REGISTRY}}sds_viewer:{{TAG}}"
- imagePullPolicy: "IfNotPresent"
- ports:
- - containerPort: 80
- resources:
- requests:
- memory: "64Mi"
- cpu: "25m"
- limits:
- memory: "128Mi"
- cpu: "100m"
----
-apiVersion: v1
-kind: Service
-metadata:
- name: sds_viewer
-spec:
- type: LoadBalancer
- ports:
- - port: 80
- targetPort: 80
- selector:
- app: sds_viewer
diff --git a/nginx/default.conf b/nginx/default.conf
new file mode 100644
index 0000000..8c5795f
--- /dev/null
+++ b/nginx/default.conf
@@ -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/;
+ }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 48b1431..c6376f4 100644
--- a/package.json
+++ b/package.json
@@ -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",
@@ -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",
diff --git a/public/images/graph/age.svg b/public/images/graph/age.svg
index fdeb314..fd6f908 100644
--- a/public/images/graph/age.svg
+++ b/public/images/graph/age.svg
@@ -1,38 +1,38 @@
-
+
\ No newline at end of file
diff --git a/public/images/graph/dataset.svg b/public/images/graph/dataset.svg
index 0bd9038..569b878 100644
--- a/public/images/graph/dataset.svg
+++ b/public/images/graph/dataset.svg
@@ -1,3 +1,223 @@
-