Merge pull request #27 from primeqa/25-label-changes

feat (ux): Implements #25 (Label changes)

src/components/application/index.js

@@ -157,7 +157,7 @@ function Application() {
             {!application || !application.name ? (
               <SkeletonText heading={true} />
             ) : (
-              <h4>{application.name}</h4>
+              <h3>{application.name}</h3>
             )}
             <div className="container__application__tools">
               <Button

src/components/application/styles.scss

@@ -87,6 +87,11 @@
     display: flex;
     flex-direction: column;
 
+    h3 {
+      font-weight: 600;
+      color: $blue-90;
+    }
+
     h4 {
       font-weight: bold;
     }

src/components/applications/index.js

@@ -26,6 +26,7 @@ import HeaderContent from "../header/index";
 import Notifications from "../notifications";
 import Navigation from "../navigation";
 import ApplicationCard from "../application-card/index";
+import AuxiliaryContent from "../auxiliary-content/index";
 
 import * as settingsAPI from "../../api/settings";
 import {
@@ -50,7 +51,7 @@ export async function listApplicationsIfRequired(applications, dispatch) {
       const fetchedApplications = [
         {
           applicationId: "retrieval",
-          name: "Retrieval",
+          name: "primeqa.retrieve",
           description:
             "Search a document collection using dense and sparse information retrieval techniques",
           githubLink: "https://github.com/primeqa/primeqa",
@@ -59,15 +60,15 @@ export async function listApplicationsIfRequired(applications, dispatch) {
         },
         {
           applicationId: "reading",
-          name: "Reading",
+          name: "primeqa.read",
           description: "Find answer to questions based on a given context",
           githubLink: "https://github.com/primeqa/primeqa",
           feedbackLink: "https://github.com/primeqa/primeqa/issues/new",
           settings: settings,
         },
         {
           applicationId: "qa",
-          name: "Question Answering",
+          name: "primeqa.answer",
           description:
             "Find answers to question from retrieved evidence blocks",
           githubLink: "https://github.com/primeqa/primeqa",
@@ -178,6 +179,11 @@ function Applications() {
               })
             : null}
         </div>
+        <AuxiliaryContent>
+          <p>
+            PrimeQA is a public open source repository that enables researchers and developers to train state-of-the-art models for question answering (QA). This page lets you try out sample demos of PrimeQA capabilities. Check out PrimeQA here: <a href="https://github.com/primeqa/primeqa">https://github.com/primeqa/primeqa</a>
+          </p>
+        </AuxiliaryContent>
       </div>
     </React.Fragment>
   );

src/components/auxiliary-content/index.js

@@ -0,0 +1,33 @@
+/**
+*
+* Copyright 2022 PrimeQA Team
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*
+*/
+import React from "react";
+
+import "./styles.scss";
+
+function AuxiliaryContent(props) {
+  return (
+    <div className="auxiliary" >
+      { props.children }
+    </div>
+  );
+}
+
+AuxiliaryContent.defaultProps = { };
+AuxiliaryContent.propTypes = { };
+
+export default AuxiliaryContent;

src/components/auxiliary-content/styles.scss

@@ -0,0 +1,24 @@
+/**
+*
+* Copyright 2022 PrimeQA Team
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*
+*/
+
+.auxiliary {
+  padding-top: 3rem;
+  padding-left: 96px;
+  padding-right: 96px;
+}
+

src/components/collections/index.js

@@ -143,7 +143,11 @@ function Collections({
           <Select
             id="select-corpus"
             labelText="Corpus"
-            helperText="Select a corpus"
+            helperText={
+              selectedCollection
+                ? selectedCollection.description
+                : 'Select a corpus'
+            }
             value={
               selectedCollection
                 ? selectedCollection.collection_id