week_1-1: Module C — Pydantic contracts + config loader

.env.example

@@ -0,0 +1,44 @@
+# ------------------------------------------------------------------------------
+# OpenCRE Environment Configuration
+# ------------------------------------------------------------------------------
+# Copy this file to `.env` and update the values for your environment.
+# Never commit your real `.env` file to version control.
+# ------------------------------------------------------------------------------
+# Database
+
+DEV_DATABASE_URL=postgresql://user:password@localhost:5432/opencre
+
+# Neo4j
+
+NEO4J_URL=neo4j://neo4j:password@localhost:7687
+
+# Redis
+
+REDIS_HOST=localhost
+REDIS_PORT=6379
+REDIS_URL=redis://localhost:6379
+REDIS_NO_SSL=false
+
+# Flask
+
+FLASK_CONFIG=development
+INSECURE_REQUESTS=false
+
+# Embeddings
+
+NO_GEN_EMBEDDINGS=false
+
+# Google Auth
+
+GOOGLE_CLIENT_ID=your-client-id
+GOOGLE_CLIENT_SECRET=your-client-secret
+GOOGLE_SECRET_JSON=path/to/secret.json
+LOGIN_ALLOWED_DOMAINS=example.com
+
+# GCP
+
+GCP_NATIVE=false
+
+# Spreadsheet Auth
+
+OpenCRE_gspread_Auth=path/to/credentials.json

README.md

@@ -216,23 +216,28 @@ make docker-dev
 
 The environment variables used by OpenCRE are:
 
+## Environment Configuration
+
+Copy the example configuration file:
+
+```bash
+cp .env.example .env
 ```
-- NEO4J_URL
-- NO_GEN_EMBEDDINGS
-- FLASK_CONFIG
-- DEV_DATABASE_URL
-- INSECURE_REQUESTS
-- REDIS_HOST
-- REDIS_PORT
-- REDIS_NO_SSL
-- REDIS_URL
-- GCP_NATIVE
-- GOOGLE_SECRET_JSON
-- GOOGLE_CLIENT_ID
-- GOOGLE_CLIENT_SECRET
-- LOGIN_ALLOWED_DOMAINS
-- OpenCRE_gspread_Auth
-```
+
+Then edit `.env` and provide values appropriate for your environment.
+
+### Variables
+
+* Database: `DEV_DATABASE_URL`
+* Neo4j: `NEO4J_URL`
+* Redis: `REDIS_HOST`, `REDIS_PORT`, `REDIS_URL`, `REDIS_NO_SSL`
+* Flask: `FLASK_CONFIG`, `INSECURE_REQUESTS`
+* Embeddings: `NO_GEN_EMBEDDINGS`
+* Google Auth: `GOOGLE_CLIENT_ID`, `GOOGLE_CLIENT_SECRET`, `GOOGLE_SECRET_JSON`, `LOGIN_ALLOWED_DOMAINS`
+* GCP: `GCP_NATIVE`
+* Spreadsheet Auth: `OpenCRE_gspread_Auth`
+
+See `.env.example` for full list and defaults.
 
 You can run the containers with:
 

application/config.py

@@ -1,6 +1,7 @@
 import os
 
 basedir = os.path.abspath(os.path.dirname(__file__))
+ENABLE_MYOPENCRE = os.getenv("ENABLE_MYOPENCRE", "false").lower() == "true"
 
 
 class Config:

application/database/db.py

@@ -2060,7 +2060,7 @@ def dbNodeFromCode(code: cre_defs.Node) -> Node:
     code = cast(cre_defs.Code, code)
     tags = ""
     if code.tags:
-        tags = ",".join(tags)
+        tags = ",".join(code.tags)
     return Node(
         name=code.name,
         ntype=code.doctype.value,

application/frontend/src/app.scss

@@ -9,21 +9,27 @@ body {
   width: 100%;
   margin: 0;
   padding: 0;
+  overscroll-behavior-y: none;
 }
 
 html {
   text-size-adjust: 100%;
+  background-color: white;
 }
 
 body {
-  background-color: #010817;
+  background-color: white;
+  overflow: hidden;
 }
 
 #mount {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior-y: none;
 }
 
 .app {
-  height: 100%;
+  min-height: 100%;
 }

application/frontend/src/components/DocumentNode/DocumentNode.tsx

@@ -2,18 +2,26 @@ import './documentNode.scss';
 
 import axios from 'axios';
 import React, { FunctionComponent, useContext, useEffect, useMemo, useState } from 'react';
-import { Link, useHistory } from 'react-router-dom';
+import { Link, useHistory, useLocation } from 'react-router-dom';
 import { Icon } from 'semantic-ui-react';
 
-import { TYPE_AUTOLINKED_TO, TYPE_CONTAINS, TYPE_IS_PART_OF, TYPE_RELATED } from '../../const';
+import {
+  CRE,
+  TYPE_AUTOLINKED_TO,
+  TYPE_CONTAINS,
+  TYPE_IS_PART_OF,
+  TYPE_LINKED_TO,
+  TYPE_RELATED,
+} from '../../const';
 import { useEnvironment } from '../../hooks';
 import { applyFilters } from '../../hooks/applyFilters';
 import { Document } from '../../types';
-import { getDocumentDisplayName, groupLinksByType } from '../../utils';
-import { getApiEndpoint, getDocumentTypeText, getInternalUrl } from '../../utils/document';
+import { groupLinksByType } from '../../utils';
+import { getApiEndpoint, getDocumentTypeText, getInternalUrl, getTopicDisplayName } from '../../utils/document';
 import { FilterButton } from '../FilterButton/FilterButton';
 import { LoadingAndErrorIndicator } from '../LoadingAndErrorIndicator';
 
+const MAX_LENGTH_FOR_AUTO_EXPAND = 5;
 export interface DocumentNode {
   node: Document;
   linkType: string;
@@ -23,13 +31,15 @@ export interface DocumentNode {
 const linkTypesToNest = [TYPE_IS_PART_OF, TYPE_RELATED, TYPE_AUTOLINKED_TO];
 const linkTypesExcludedInNesting = [TYPE_CONTAINS];
 const linkTypesExcludedWhenNestingRelatedTo = [TYPE_RELATED, TYPE_IS_PART_OF, TYPE_CONTAINS];
+const linkDisplayOrder = [TYPE_LINKED_TO, TYPE_AUTOLINKED_TO, TYPE_CONTAINS, TYPE_IS_PART_OF, TYPE_RELATED];
 
 export const DocumentNode: FunctionComponent<DocumentNode> = ({
   node,
   linkType,
   hasLinktypeRelatedParent,
 }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
+  const [showAll, setShowAll] = useState<Record<number, boolean>>({});
   const isStandard = node.doctype in ['Tool', 'Code', 'Standard'];
   const { apiUrl } = useEnvironment();
   const [nestedNode, setNestedNode] = useState<Document>();
@@ -42,6 +52,30 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
   const hasExternalLink = Boolean(usedNode.hyperlink);
   const linksByType = useMemo(() => groupLinksByType(usedNode), [usedNode]);
   let currentUrlParams = new URLSearchParams(window.location.search);
+  const { pathname } = useLocation();
+  const isCrePath = useMemo(() => pathname.includes(CRE), [pathname]);
+
+  const isNestedInRelated = hasLinktypeRelatedParent || linkType === TYPE_RELATED;
+
+  const getTopicsToDisplayOrderdByLinkType = () => {
+    return linkDisplayOrder
+      .map((type) => [type, linksByType[type]] as [string, any])
+      .filter(([_, links]) => Array.isArray(links) && links.length > 0)
+      .filter(([type, _]) => !linkTypesExcludedInNesting.includes(type))
+      .filter(([type, _]) =>
+        isNestedInRelated ? !linkTypesExcludedWhenNestingRelatedTo.includes(type) : true
+      );
+  };
+
+  const topicsToDisplay = useMemo(() => getTopicsToDisplayOrderdByLinkType(), [linksByType, isNestedInRelated]);
+
+  useEffect(() => {
+    const isAllowedToAutoExpandByLength =
+      topicsToDisplay.map(([, links]) => links).reduce((prev, cur) => prev.concat(cur), []).length <=
+      MAX_LENGTH_FOR_AUTO_EXPAND;
+    const shouldCollapseRelatedByDefault = linkType === TYPE_RELATED;
+    setExpanded(isCrePath && !shouldCollapseRelatedByDefault ? isAllowedToAutoExpandByLength : false);
+  }, [topicsToDisplay, isCrePath, linkType]);
 
   useEffect(() => {
     if (!isStandard && linkTypesToNest.includes(linkType)) {
@@ -51,34 +85,22 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         .then(function (response) {
           setLoading(false);
           setNestedNode(response.data.data);
-          setExpanded(true);
+          setExpanded(linkType !== TYPE_RELATED);
           setError('');
         })
         .catch(function (axiosError) {
           setLoading(false);
           setError(axiosError);
         });
     }
-  }, [id]);
+  }, [id, linkType]);
 
   const fetchedNodeHasLinks = () => {
     return usedNode.links && usedNode.links.length > 0;
   };
 
   const hasActiveLinks = () => {
-    return getTopicsToDisplayOrderdByLinkType().length > 0;
-  };
-
-  const isNestedInRelated = (): Boolean => {
-    return hasLinktypeRelatedParent || linkType === TYPE_RELATED;
-  };
-
-  const getTopicsToDisplayOrderdByLinkType = () => {
-    return Object.entries(linksByType)
-      .filter(([type, _]) => !linkTypesExcludedInNesting.includes(type))
-      .filter(([type, _]) =>
-        isNestedInRelated() ? !linkTypesExcludedWhenNestingRelatedTo.includes(type) : true
-      );
+    return topicsToDisplay.length > 0;
   };
 
   const Hyperlink = (hyperlink) => {
@@ -93,6 +115,9 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
           {' '}
           {hyperlink.hyperlink}
         </a>
+        <a href={hyperlink.hyperlink} target="_blank" rel="noopener noreferrer" aria-label="Open reference in new tab">
+          <Icon name="external" />
+        </a>
       </>
     );
   };
@@ -114,7 +139,7 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         <div className={`title external-link document-node f2`}>
           <Link to={getInternalUrl(usedNode)}>
             <i aria-hidden="true" className="circle icon"></i>
-            {getDocumentDisplayName(usedNode)}
+            {getTopicDisplayName(usedNode)}
           </Link>
           <HyperlinkIcon hyperlink={usedNode.hyperlink} />
         </div>
@@ -129,42 +154,44 @@ export const DocumentNode: FunctionComponent<DocumentNode> = ({
         <LoadingAndErrorIndicator loading={loading} error={error} />
         <div className={`title ${active} document-node`} onClick={() => setExpanded(!expanded)}>
           <i aria-hidden="true" className="dropdown icon"></i>
-          <Link to={getInternalUrl(usedNode)}>{getDocumentDisplayName(usedNode)}</Link>
+          <Link to={getInternalUrl(usedNode)}>{getTopicDisplayName(usedNode)}</Link>
         </div>
         <div className={`content${active} document-node`}>
           <Hyperlink hyperlink={usedNode.hyperlink} />
           {expanded &&
-            getTopicsToDisplayOrderdByLinkType().map(([type, links], idx) => {
-              const sortedResults = links.sort((a, b) =>
-                getDocumentDisplayName(a.document).localeCompare(getDocumentDisplayName(b.document))
+            topicsToDisplay.map(([type, links], idx) => {
+              const sortedResults = [...links].sort((a, b) =>
+                getTopicDisplayName(a.document).localeCompare(getTopicDisplayName(b.document))
               );
-              let lastDocumentName = sortedResults[0].document.name;
               return (
-                <div className="document-node__link-type-container" key={type}>
+                <div className="document-node__link-type-container" key={`${type}-${idx}`}>
                   {idx > 0 && <hr style={{ borderColor: 'transparent', margin: '20px 0' }} />}
                   <div>
                     <b>Which {getDocumentTypeText(type, links[0].document.doctype, node.doctype)}</b>:
                     {/* Risk here of mixed doctype in here causing odd output */}
                   </div>
                   <div>
                     <div className="accordion ui fluid styled f0">
-                      {sortedResults.map((link, i) => {
-                        const temp = (
-                          <div key={Math.random()}>
-                            {lastDocumentName !== link.document.name && <span style={{ margin: '5px' }} />}
-                            <DocumentNode
-                              node={link.document}
-                              linkType={type}
-                              hasLinktypeRelatedParent={isNestedInRelated()}
-                              key={Math.random()}
-                            />
-                            <FilterButton document={link.document} />
-                          </div>
-                        );
-                        lastDocumentName = link.document.name;
-                        return temp;
-                      })}
+                      {sortedResults.slice(0, showAll[idx] ? sortedResults.length : MAX_LENGTH_FOR_AUTO_EXPAND).map((link, i) => (
+                        <div key={`document-node-container-${type}-${idx}-${i}`} style={{ marginBottom: '4px' }}>
+                          <DocumentNode
+                            node={link.document}
+                            linkType={type}
+                            hasLinktypeRelatedParent={isNestedInRelated as boolean}
+                            key={`document-sub-node-${type}-${idx}-${i}`}
+                          />
+                          <FilterButton document={link.document} />
+                        </div>
+                      ))}
                     </div>
+                    {sortedResults.length > MAX_LENGTH_FOR_AUTO_EXPAND && (
+                      <button
+                        onClick={() => setShowAll(prev => ({ ...prev, [idx]: !prev[idx] }))}
+                        style={{ marginTop: '8px', cursor: 'pointer' }}
+                      >
+                        {showAll[idx] ? 'Show less ▲' : 'Show more ▼'}
+                      </button>
+                    )}
                   </div>
                 </div>
               );

application/frontend/src/components/DocumentNode/documentNode.scss

@@ -35,6 +35,12 @@
   &__link-type-container hr {
     margin: 15px 0;
   }
+
+  &__link-type-container {
+    border-left: 3px solid rgba(33, 133, 208, 0.2);
+    margin-left: 0.5rem;
+    padding-left: 0.75rem;
+  }
 }
 
 

application/frontend/src/const.ts

@@ -9,11 +9,11 @@ export const TYPE_AUTOLINKED_TO = 'Automatically linked to';
 
 export const DOCUMENT_TYPE_NAMES = {
   [TYPE_AUTOLINKED_TO]: ' has been automatically mapped to',
-  [TYPE_LINKED_TO]: ' is linked to sources',
-  [TYPE_IS_PART_OF]: ' is part of CREs',
-  [TYPE_LINKED_FROM]: 'is linked from CREs',
-  [TYPE_CONTAINS]: ' contains CREs',
-  [TYPE_RELATED]: ' is related to CREs',
+  [TYPE_LINKED_TO]: ' refers to sources',
+  [TYPE_IS_PART_OF]: ' is child of Requirements',
+  [TYPE_LINKED_FROM]: ' is referenced by Requirements',
+  [TYPE_CONTAINS]: ' contains Requirements',
+  [TYPE_RELATED]: ' is related to Requirements',
 };
 
 export const DOCUMENT_TYPES = {

application/frontend/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useEnvironment } from './useEnvironment';
 export { useLocationFromOutsideRoute } from './useLocationFromOutsideRoute';
+export { useCapabilities } from './useCapabilities';