more options

samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/SpSiteErDiagram.tsx

@@ -5,11 +5,14 @@ import getSPSiteData from './helpers/SPSiteData';
 import { initDiagram } from './helpers/GoJSHelper';
 import getGoJSNodesFromSPSiteData from './helpers/SPSiteDataToGoJSER';
 import { CommandBar, ProgressIndicator } from 'office-ui-fabric-react';
+import { WebPartContext } from '@microsoft/sp-webpart-base';
 
 export interface ISpSiteDiagramProps { 
-  context: any 
+  context: WebPartContext 
 }
 const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramProps) => {
+  // Refs
+  const diagramRef = React.useRef();
   // State: Data
   const [loadingProgress, setLoadingProgress] = React.useState(0);
   const [nodeDataArray, setNodeDataArray] = React.useState([]);
@@ -17,6 +20,8 @@ const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramPro
   // State: Options
   const [optionRelationOnly, setOptionRelationOnly] = React.useState(true);
   const [useInternalName, setUseInternalName] = React.useState(true);
+  const [alertsActive, setAlertsActive] = React.useState(true);
+  const [fieldsActive, setFieldsActive] = React.useState(true);
 
   const loadDiagram = async (refresh: boolean) => {
     if(refresh) { setLoadingProgress(0); setNodeDataArray([]); }
@@ -24,7 +29,7 @@ const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramPro
     let spSiteData = await getSPSiteData(props.context, refresh, (progress) => {setLoadingProgress(progress);});
     console.log("SPSiteData", spSiteData);
     // Transform to GoJS Model
-    let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData, useInternalName ? "name" : "displayName");
+    let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData, useInternalName ? "name" : "displayName", alertsActive, fieldsActive);
     // Set State
     setNodeDataArray(goJSNodes.nodeDataArray.filter((n) => 
       optionRelationOnly && goJSNodes.linkDataArray.some(l => l.from == n.key || l.to == n.key) || !optionRelationOnly // Filter optionRelationOnly
@@ -35,21 +40,35 @@ const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramPro
   // "ComponentDitMount"
   React.useEffect(() => {
     loadDiagram(false);
-  }, [optionRelationOnly, useInternalName]);
+  }, [optionRelationOnly, useInternalName, alertsActive, fieldsActive]);
+
+  const downloadAsImage = () => {
+    if(diagramRef && diagramRef.current) {
+      let canvas = (diagramRef.current as any).divRef.current.firstChild;
+      console.log((diagramRef.current as any).divRef.current);
+      var link = document.createElement('a');
+      link.download = props.context.pageContext.web.title + '_ERDiagram.png';
+      link.href = canvas.toDataURL()
+      link.click();
+    }
+  }
 
   return (
     <div style={{height: "100%", padding: "0px"}}>
       <CommandBar items={[
         {key: '1', text: 'Refresh', iconProps: { iconName: 'Refresh' }, onClick: () => { loadDiagram(true); }},
-        {key: '2', text: 'Only Lists with Relations', iconProps: { iconName: optionRelationOnly ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setOptionRelationOnly(!optionRelationOnly); }},
-        {key: '3', text: useInternalName ? "InternalName" : "DisplayName", iconProps: { iconName: useInternalName ? 'ToggleLeft' : 'ToggleRight' }, onClick: () => { setUseInternalName(!useInternalName); }}
+        {key: '2', text: 'Only lists with relations', iconProps: { iconName: optionRelationOnly ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setOptionRelationOnly(!optionRelationOnly); }},
+        {key: '2', text: 'Show alerts', iconProps: { iconName: alertsActive ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setAlertsActive(!alertsActive); }},
+        {key: '2', text: 'Show fields', iconProps: { iconName: fieldsActive ? 'CheckboxComposite' : 'Checkbox' }, onClick: () => { setFieldsActive(!fieldsActive); }},
+        {key: '3', text: useInternalName ? "InternalName" : "DisplayName", iconProps: { iconName: useInternalName ? 'ToggleLeft' : 'ToggleRight' }, onClick: () => { setUseInternalName(!useInternalName); }},
+        {key: '4', text: "Download as image", iconProps: { iconName: 'Share' }, onClick: () => { downloadAsImage() }}
       ]} />
       <div className={styles.spSiteErDiagram} style={{height: "calc(100% - 44px)", padding: "0px"}}>
         { loadingProgress != 100 && nodeDataArray.length == 0 ?
         <div style={{ padding: "8%" }}>
           <ProgressIndicator label={`Loading Lists and Columns ${loadingProgress.toFixed(0)}%`} percentComplete={loadingProgress/100} />
         </div> : 
-        <ReactDiagram //ref={diagramRef} 
+        <ReactDiagram ref={diagramRef} 
           divClassName='diagram-component'
           style={{ backgroundColor: '#eee' }}
           initDiagram={initDiagram}

samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteData.ts

@@ -84,9 +84,14 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
                 });  
 
             // Table Alerts
-            !list.EnableVersioning && table.alerts.push({ title: "no versioning activated", type: "Error" });
+            list.ItemCount > 3500 && list.ItemCount < 5000 && table.alerts.push({ title: `Itemcount (${list.ItemCount}) will reach soon 5k => check if all necessary columns are indexed !!`, type:"Error" });
+            list.ItemCount > 5000 && table.alerts.push({ title: `Itemcount (${list.ItemCount}) > 5k. Filter or sorting might not work anymore`, type:"Error" });
+            !list.EnableVersioning && table.alerts.push({ title: "no versioning activated", type: "Warning" });
             list.MajorVersionLimit && list.MajorVersionLimit > 100 && table.alerts.push({ title: `high max. version limit (${list.MajorVersionLimit})`, type: "Warning" });
-            table.alerts.push({ title: `Crawling is ${list.NoCrawl ? 'inactive' : 'active'}`, type:"Info" })
+            // Infos
+            table.alerts.push({ title: `Crawling is ${list.NoCrawl ? 'inactive' : 'active'}`, type:"Info" });
+            table.alerts.push({ title: `Item Count: ${list.ItemCount}`, type:"Info" });
+            table.alerts.push({ title: `ContentTypes ${list.ContentTypesEnabled ? 'enabled' : 'disabled'}`, type:"Info" });
 
             // add Table
             spSiteData.tables.push(table);

samples/react-pnpjs-spsite-er-diagram/src/webparts/spSiteErDiagram/components/helpers/SPSiteDataToGoJSER.ts

@@ -76,7 +76,7 @@ export interface GoJSLink {
     text: string,
     toText: string
 }
-const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: string = "name") : { nodeDataArray: GoJSNode[], linkDataArray:  GoJSLink[] } => {
+const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: string = "name", alertsActive = true, fieldsActive = true) : { nodeDataArray: GoJSNode[], linkDataArray:  GoJSLink[] } => {
 
     let nodeDataArray: GoJSNode[] = [];
     let linkDataArray: GoJSLink[] = [];
@@ -84,8 +84,8 @@ const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: s
     nodeDataArray = spSiteData.tables.map(t => { return {
         key: t.title,
         items: [
-            ...t.alerts.map(a => getNodeItemFromAlert(a)),
-            ...t.fields.map(f => getNodeItemFromField(f, fieldNameProperty))
+            ...(alertsActive ? t.alerts.map(a => getNodeItemFromAlert(a)) : []),
+            ...(fieldsActive ? t.fields.map(f => getNodeItemFromField(f, fieldNameProperty)) : [])
         ].sort((a,b) => a.order.charCodeAt(0) - b.order.charCodeAt(0))
     }})