Merge development into master

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

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

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}}

deploy/k8s/ingress_tpl.yaml → deploy/k8s/ingress.yaml

@@ -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

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

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/;
+    }
+}

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",