Merge pull request #293 from XpressAI/fahreza/cache-fetch-component

✨ / 🐛 Cache Fetch Component List

Author: MFA-X-AI

src/context-menu/ComponentsPanel.tsx

@@ -1,9 +1,5 @@
-import ComponentList from '../tray_library/Component';
-
 import React, { useEffect, useState } from 'react';
-
 import styled from '@emotion/styled';
-
 import { JupyterFrontEnd } from '@jupyterlab/application';
 
 import {
@@ -17,6 +13,7 @@ import {
 import { DefaultLinkModel, DiagramEngine } from '@projectstorm/react-diagrams';
 import { TrayPanel } from './TrayPanel';
 import { TrayItemPanel } from './TrayItemPanel';
+import { ComponentList } from '../tray_library/Component';
 
 export const Body = styled.div`
   display: flex;

src/tray_library/AdvanceComponentLib.tsx

@@ -1,5 +1,5 @@
 import { CustomNodeModel } from "../components/node/CustomNodeModel";
-import ComponentList from "./Component";
+import { ComponentList } from "./Component";
 
 interface AdvancedComponentLibraryProps {
     model: any;

src/tray_library/Component.tsx

@@ -1,39 +1,43 @@
 import { showDialog, Dialog } from '@jupyterlab/apputils';
-
 import { requestAPI } from "../server/handler";
 import React from 'react';
 
-async function get_all_components_method() {
+let componentsCache = {
+  data: null
+};
+
+async function fetchComponents() {
+  console.log("Fetching all components... this might take a while.")
+  try {
+    const componentsResponse = await requestAPI<any>('components/');
+    const components = componentsResponse["components"];
+    const error_msg = componentsResponse["error_msg"];
 
-    try {
-      // Trigger the load library config on refresh
-      await requestAPI('library/reload_config', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
-  
-      // Proceed with the GET request to fetch components
-      const componentsResponse = await requestAPI<any>('components/');
-      const components = componentsResponse["components"];
-      const error_msg = componentsResponse["error_msg"];
-  
-      if (error_msg) {
-        showDialog({
-          title: 'Parse Component Failed',
-          body: (
-            <pre>{error_msg}</pre>
-          ),
-          buttons: [Dialog.warnButton({ label: 'OK' })]
-        });
-      }
-  
-      return components;
-    } catch (error) {
-      console.error('Failed to get components or trigger library reload', error);
-      // Handle the error appropriately in your application
+    if (error_msg) {
+      showDialog({
+        title: 'Parse Component Failed',
+        body: (
+          <pre>{error_msg}</pre>
+        ),
+        buttons: [Dialog.warnButton({ label: 'OK' })]
+      });
     }
+    console.log("Fetch complete.")
+    return components;
+  } catch (error) {
+    console.error('Failed to get components', error);
   }
-  
+}
+
+export async function ComponentList() {
 
-export default async function ComponentList() {
-    let component_list_result: string[] = await get_all_components_method();
+  if (!componentsCache.data) {
+    componentsCache.data = await fetchComponents();
+  }
+
+  return componentsCache.data;
+}
 
-    return component_list_result;
+export async function refreshComponentListCache() {
+  componentsCache.data = await fetchComponents();
 }

src/tray_library/Sidebar.tsx

@@ -1,9 +1,10 @@
-import ComponentList from './Component';
-import React, { useEffect, useState, useRef } from 'react';
+import { ComponentList, refreshComponentListCache } from './Component';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { TrayItemWidget } from './TrayItemWidget';
 import { TrayWidget } from './TrayWidget';
 import { JupyterFrontEnd } from '@jupyterlab/application';
+import { requestAPI } from '../server/handler';
 
 import {
     Accordion,
@@ -101,7 +102,15 @@ export default function Sidebar(props: SidebarProps) {
     }
 
     const fetchComponentList = async () => {
-          // get the component list 
+
+        try {
+            // Trigger the load library config on refresh
+            await requestAPI('library/reload_config', { method: 'POST', headers: { 'Content-Type': 'application/json' } });
+        } catch (error){
+            console.error('Failed to reload config: ', error);
+        }
+
+        // get the component list 
         const component_list = await ComponentList();
 
         // get the header from the components
@@ -126,6 +135,7 @@ export default function Sidebar(props: SidebarProps) {
     }, [category, componentList]);
 
     function handleRefreshOnClick() {
+        refreshComponentListCache()
         fetchComponentList();
     }