Dev

ontology-manager-client/public/index.html

@@ -7,7 +7,8 @@
         <meta name="theme-color" content="#000000" />
         <meta
             name="description"
-            content="Web site created using create-react-app"
+            content="Empowering the research on plant-derived natural products for the treatment of diseases
+            using an advanced data collection, exchange and analysis platform, with focus on the flora and epidemiological needs of Latin-America"
         />
         <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
         <!--

ontology-manager-client/public/manifest.json

@@ -1,6 +1,6 @@
 {
-    "short_name": "React App",
-    "name": "Create React App Sample",
+    "short_name": "One Health",
+    "name": "Natural One Health",
     "icons": [
         {
             "src": "favicon.ico",

ontology-manager-client/src/Style.scss

@@ -49,9 +49,18 @@
     max-width: 0px;
 }
 
-.page-container {
+.page-container-wide {
+    padding-top: 30px;
     padding-left: 5%;
     padding-right: 5%;
+    padding-bottom: 30px;
+}
+
+.page-container-narrow {
+    padding-top: 30px;
+    padding-left: 15%;
+    padding-right: 15%;
+    padding-bottom: 30px;
 }
 
 .one-health-panel {

ontology-manager-client/src/features/modules/visualization/neighborhood-explorer/neighborhood-explorer.component.tsx

@@ -15,7 +15,7 @@ import { DataView } from 'primereact/dataview';
 import { IQueryGraph } from '../../../query-history/query-history-graph/graph-query';
 import { MessageServiceContext } from '../../../shared/messages';
 import { dependencyFactory } from '../../../shared/injection';
-import { IEntityTypeService, IGeneralSearchService, IGraphVisualizationHistoryService, SERVICES } from '../../../../services';
+import { IEntityService, IEntityTypeService, IGeneralSearchService, IGraphVisualizationHistoryService, SERVICES } from '../../../../services';
 import { ISavedGraphVisualization } from '../visualization-history/models/saved-graph-visualization';
 import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
 import { Divider } from 'primereact/divider';
@@ -30,6 +30,7 @@ import { IconField } from "primereact/iconfield";
 import { InputIcon } from "primereact/inputicon";
 import { IEntityType } from '../../metadata/entity-types';
 import { Checkbox } from 'primereact/checkbox';
+import * as XLSX from 'xlsx';
 
 
 const React = require('react');
@@ -62,6 +63,7 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
 
 
     const myComponentRef : RefObject<CytoscapeInteractiveChartComponent> = useRef<CytoscapeInteractiveChartComponent>(null);
+    const entityService = dependencyFactory.get<IEntityService>(SERVICES.IEntityService);
 
 
     const [elements, setElements] = useState<any>([]);
@@ -134,6 +136,20 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
     )
 
     const downloadOptions = [
+        {
+            label: 'XLXS',
+            command: async () => {
+
+                const results = await entityService.getGraphReferences(myComponentRef.current!.getNodes(), messageService!);
+
+
+                const ws = XLSX.utils.json_to_sheet(results);
+                const wb = XLSX.utils.book_new();
+                XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+                XLSX.writeFile(wb, 'co-ocurrences.xlsx');
+
+            }
+        },
         {
             label: 'Cytoscape JSON',
             command: () => {
@@ -463,6 +479,8 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
                                         onClick={ async (e) => {
                                             const elements = myComponentRef.current!.getElements();
 
+
+
                                             savedVisualization = {
                                                 id: "",
                                                 name: "Untitled",
@@ -484,6 +502,17 @@ const NeighborhoodExplorerComponent: React.FC<GraphExplorerProps> = ({graphServi
                                 model={downloadOptions} 
                                 tooltip="Download graph"
                                 tooltipOptions={{position: 'bottom', showDelay: 1000}}
+                                onClick={async () => {
+
+                                    const results = await entityService.getGraphReferences(myComponentRef.current!.getNodes(), messageService!);
+
+
+                                    const ws = XLSX.utils.json_to_sheet(results);
+                                    const wb = XLSX.utils.book_new();
+                                    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+                                    XLSX.writeFile(wb, 'co-ocurrences.xlsx');
+
+                                }}
 
                             />
                         </div>

ontology-manager-client/src/features/shared/cytoscape-interactive-chart/cytoscape-interactive-chart.component.tsx

@@ -162,6 +162,13 @@ class CytoscapeInteractiveChartComponent extends Component<CytoscapeInteractiveC
         })
     }
 
+    getNodes() {
+        const nodes = this.cytoscapeCore.elements().jsons()
+                                        .filter((x:any) => x.group==="nodes" && x.data.id !== HIGHLIGHT)
+                                        .map((x:any) => x.data.id);
+        return nodes;
+    }
+
     getElements() {
         const elements = this.cytoscapeCore.json().elements;
         return JSON.stringify(elements);

ontology-manager-client/src/layout/app.component.scss

@@ -2,7 +2,7 @@
 
 .content {
     background-color: white;
-    padding-top: $app-header-height + 30px;
+    padding-top: $app-header-height;
     padding-bottom: 80px;
     max-width: 1920px;
     flex: 1;

ontology-manager-client/src/layout/footer.component.scss

@@ -7,4 +7,7 @@
     position: fixed;
     bottom: 0;
     z-index: 1000;
+    width: 100%;
+    padding: 10px;
+    margin: 0;
 }