active chart menu, using markdown to jsx

packages/web/src/appobj/DatabaseObjectAppObject.js

@@ -9,6 +9,8 @@ import ImportExportModal from '../modals/ImportExportModal';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { AppObjectCore } from './AppObjectCore';
 import useShowModal from '../modals/showModal';
+import { findEngineDriver } from 'dbgate-tools';
+import useExtensions from '../utility/useExtensions';
 
 const icons = {
   tables: 'img table',
@@ -39,6 +41,10 @@ const menus = {
       label: 'Open in free table editor',
       isOpenFreeTable: true,
     },
+    {
+      label: 'Open active chart',
+      isActiveChart: true,
+    },
   ],
   views: [
     {
@@ -65,6 +71,10 @@ const menus = {
       label: 'Open structure',
       tab: 'TableStructureTab',
     },
+    {
+      label: 'Open active chart',
+      isActiveChart: true,
+    },
   ],
   procedures: [
     {
@@ -120,6 +130,15 @@ export async function openDatabaseObjectDetail(
 function Menu({ data }) {
   const showModal = useShowModal();
   const setOpenedTabs = useSetOpenedTabs();
+  const extensions = useExtensions();
+
+  const getDriver = async () => {
+    const conn = await getConnectionInfo(data);
+    if (!conn) return;
+    const driver = findEngineDriver(conn, extensions);
+    return driver;
+  };
+
   return (
     <>
       {menus[data.objectTypeField].map((menu) => (
@@ -159,6 +178,26 @@ function Menu({ data }) {
                   },
                 },
               });
+            } else if (menu.isActiveChart) {
+              const driver = await getDriver();
+              const dmp = driver.createDumper();
+              dmp.put('^select * from %f', data);
+              openNewTab(
+                setOpenedTabs,
+                {
+                  title: data.pureName,
+                  icon: 'img chart',
+                  tabComponent: 'ChartTab',
+                  props: {
+                    conid: data.conid,
+                    database: data.database,
+                  },
+                },
+                {
+                  config: { chartType: 'bar' },
+                  sql: dmp.s,
+                }
+              );
             } else {
               openDatabaseObjectDetail(setOpenedTabs, menu.tab, menu.sqlTemplate, data);
             }

packages/web/src/charts/ChartEditor.js

@@ -16,6 +16,7 @@ import { findEngineDriver } from 'dbgate-tools';
 import { FormFieldTemplateTiny } from '../utility/formStyle';
 import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
 import { presetPrimaryColors } from '@ant-design/colors';
+import ErrorInfo from '../widgets/ErrorInfo';
 
 const LeftContainer = styled.div`
   background-color: ${(props) => props.theme.manager_background};
@@ -27,6 +28,7 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
   const [managerSize, setManagerSize] = React.useState(0);
   const theme = useTheme();
   const extensions = useExtensions();
+  const [error, setError] = React.useState(null);
 
   const [availableColumnNames, setAvailableColumnNames] = React.useState([]);
   const [loadedData, setLoadedData] = React.useState(null);
@@ -41,8 +43,12 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
   const handleLoadColumns = async () => {
     const driver = await getDriver();
     if (!driver) return;
-    const columns = await loadChartStructure(driver, conid, database, sql);
-    setAvailableColumnNames(columns);
+    try {
+      const columns = await loadChartStructure(driver, conid, database, sql);
+      setAvailableColumnNames(columns);
+    } catch (err) {
+      setError(err.message);
+    }
   };
 
   const handleLoadData = async () => {
@@ -75,6 +81,14 @@ export default function ChartEditor({ data, config, setConfig, sql, conid, datab
     }
   }, [config, sql, conid, database, availableColumnNames]);
 
+  if (error) {
+    return (
+      <div>
+        <ErrorInfo message={error} />
+      </div>
+    );
+  }
+
   return (
     <FormProviderCore values={config} setValues={setConfig} template={FormFieldTemplateTiny}>
       <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>

packages/web/src/charts/chartDataLoader.ts

@@ -18,6 +18,7 @@ export async function loadChartStructure(driver: EngineDriver, conid, database,
   const dmp = driver.createDumper();
   dumpSqlSelect(dmp, select);
   const resp = await axios.post('database-connections/query-data', { conid, database, sql: dmp.s });
+  if (resp.data.errorMessage) throw new Error(resp.data.errorMessage);
   return resp.data.columns.map((x) => x.columnName);
 }
 

packages/web/src/tabs/PluginTab.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import _ from 'lodash';
-import ReactMarkdown from 'react-markdown';
+import Markdown from 'markdown-to-jsx';
 import useTheme from '../theme/useTheme';
 import useFetch from '../utility/useFetch';
 import LoadingInfo from '../widgets/LoadingInfo';
@@ -109,7 +109,7 @@ function PluginTabCore({ packageName }) {
           </HeaderLine>
         </HeaderBody>
       </Header>
-      <ReactMarkdown>{readme}</ReactMarkdown>
+      <Markdown>{readme}</Markdown>
     </>
   );
 }