Secure skat preliminarily enabled

src/components/instructions/TabContent.tsx

@@ -154,6 +154,43 @@ const TabContent: React.FC<TabContentProps> = ({ activeTab, tabType }) => {
               </div>
             </div>
           </div>
+          <div
+            className={`container tab-pane fade ${activeTab === "data-sfskat" ? "show active" : ""}`}
+            id="data-sfskat"
+          >
+            <div className="row mt-3">
+              <div>
+                SF-SKAT does not run data preparation itself. Before registering your data with sfkit, you must have
+                already run <code>secure-rvas prepare</code> (from{" "}
+                <a
+                  className="text-decoration-none"
+                  href="https://github.com/swanhong/secure-skat"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  secure-skat
+                </a>
+                ) locally to produce a <code>prepared/</code> directory. The absolute path you register with sfkit
+                should be the directory that <i>contains</i> <code>prepared/</code> (i.e. the tool's{" "}
+                <code>run_dir</code>), and it must contain, for every configured ancestry and chromosome:
+                <ul>
+                  <li>
+                    <code>prepared/&lt;ancestry&gt;/chr&lt;chromosome&gt;/genes.txt</code> and{" "}
+                    <code>block_sizes.txt</code> - the gene panel and per-gene variant counts for that chromosome.
+                  </li>
+                  <li>
+                    <code>prepared/&lt;ancestry&gt;/chr&lt;chromosome&gt;/A/{"{"}cov.txt,pheno.txt{"}"}</code> for
+                    whichever participant is registered as Cohort A.
+                  </li>
+                  <li>
+                    <code>prepared/&lt;ancestry&gt;/chr&lt;chromosome&gt;/B/{"{"}cov.txt,pheno.txt{"}"}</code> for
+                    whichever participant is registered as Cohort B.
+                  </li>
+                </ul>
+                The auxiliary participant (CP0) does not register any data.
+              </div>
+            </div>
+          </div>
         </>
       ) : (
         <>

src/components/instructions/TabNavigation.tsx

@@ -15,6 +15,7 @@ const TabNavigation: React.FC<TabNavigationProps> = ({ activeTab, setActiveTab,
     { id: "data-sfgwas", label: "SF-GWAS workflow" },
     { id: "data-sfpca", label: "SF-PCA workflow" },
     { id: "data-sfrelate", label: "SF-Relate workflow" },
+    { id: "data-sfskat", label: "SF-SKAT workflow" },
     { id: "data-securedti", label: "Secure-DTI workflow" },
   ];
 

src/components/studies/ChooseWorkflow.tsx

@@ -27,6 +27,7 @@ const ChooseWorkflow: React.FC = () => {
     { id: "sfgwas", value: "SF-GWAS", label: "SF-GWAS" },
     { id: "pca", value: "PCA", label: "SF-PCA" },
     { id: "sfrelate", value: "SF-RELATE", label: "SF-RELATE" },
+    { id: "sfskat", value: "SF-SKAT", label: "SF-SKAT" },
     { id: "securedti", value: "Secure-DTI", label: "Secure-DTI" },
   ];
 

src/components/studies/DisplayStudy.tsx

@@ -25,7 +25,8 @@ const DisplayStudy: React.FC<StudyProps> = ({ study, userId, idToken, user }) =>
   const isUserRequested = () => study.requested_participants && userId in study.requested_participants;
   const isStudyFull = () =>
     (study.study_type === "MPC-GWAS" && study.participants.length === 3) ||
-    (study.study_type === "Secure-DTI" && study.participants.length === 4);
+    (study.study_type === "Secure-DTI" && study.participants.length === 4) ||
+    (study.study_type === "SF-SKAT" && study.participants.length === 3);
 
   const handleJoinRequest = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();

src/components/tutorials/ResultsSection.tsx

@@ -97,6 +97,20 @@ const ResultsSection: React.FC<SectionProps> = ({ activeTab, setActiveTab }) =>
                 />
               </div>
             </div>
+
+            <div
+              className={`container tab-pane fade ${activeTab === "data-sfskat" ? "show active" : ""}`}
+              id="results-sfskat"
+            >
+              <div className="text-center">
+                <img
+                  className="img-fluid border border-secondary"
+                  style={{ maxWidth: "75%" }}
+                  // src={resultsSfskat} TODO: Add image
+                  alt=""
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>

src/components/tutorials/SampleDataSection.tsx

@@ -129,6 +129,19 @@ const SampleDataSection: React.FC<SectionProps> = ({ activeTab, setActiveTab })
               </a>
             </div>
           </div>
+          <div
+            className={`container tab-pane fade ${activeTab === "data-sfskat" ? "show active" : ""}`}
+            id="data-sfskat"
+          >
+            <div className="d-flex justify-content-around align-items-center">
+              <a className="btn btn-secondary" href={`${BASE_URL}/sfskat_cohorta.zip`}>
+                Cohort A SF-SKAT Sample Data
+              </a>
+              <a className="btn btn-secondary" href={`${BASE_URL}/sfskat_cohortb.zip`}>
+                Cohort B SF-SKAT Sample Data
+              </a>
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/components/tutorials/SetUpYourStudySection.tsx

@@ -9,6 +9,7 @@ import sfgwas1 from "../../static/images/sample_parameters/sfgwas1.png";
 import sfgwas2 from "../../static/images/sample_parameters/sfgwas2.png";
 import sfpca from "../../static/images/sample_parameters/sfpca.png";
 import sfrelate from "../../static/images/sample_parameters/sfrelate.png";
+// import sfskat from "../../static/images/sample_parameters/sfksat.png"; // TODO
 // import securedti from "../../static/images/sample_parameters/securedti.png";
 import approveRequest from "../../static/images/tutorial/approve_request.png";
 import pcaPrepareProject from "../../static/images/tutorial/pca_prepare_project.png";
@@ -106,6 +107,21 @@ const SetUpYourStudySection: React.FC<SectionProps> = ({ activeTab, setActiveTab
                 </div>
               </div>
             </div>
+
+            <div
+              className={`tab-pane fade ${activeTab === "data-sfskat" ? "show active" : ""}`}
+              id="parameters-sfskat"
+            >
+              <div className="row justify-content-center mt-2">
+                <div className="col-md-6">
+                  <img
+                    className="img-fluid border border-secondary"
+                    // src={sfskat} TODO: Add image
+                    alt=""
+                  />
+                </div>
+              </div>
+            </div>
           </div>
         </div>
 

src/pages/Workflows.tsx

@@ -158,6 +158,25 @@ const Workflows: React.FC = () => {
           </p>
         </div>
 
+        <div>
+          <h4 className="my-4 fw-normal">SF-SKAT</h4>
+          <p>
+            SF-SKAT is a secure, federated implementation of rare-variant Burden and SKAT association tests, based on{" "}
+            <a
+              className="text-decoration-none"
+              href="https://github.com/swanhong/secure-skat"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              secure-skat
+            </a>
+            . It lets two cohorts jointly test the association between rare genetic variants and a phenotype, with the
+            help of a third, auxiliary compute party, without either cohort ever revealing its individual-level
+            genotype, phenotype, or covariate data. All statistics are computed under secure multiparty computation
+            (MPC) and homomorphic encryption (HE).
+          </p>
+        </div>
+
         <div>
           <h4 className="my-4 fw-normal">Secure-DTI</h4>
           <p>
@@ -184,6 +203,7 @@ const Workflows: React.FC = () => {
             This workflow currently supports joint analyses between pairs of collaborators.
           </p>
         </div>
+
       </div>
     </section>
   );