internalName switch

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

@@ -15,7 +15,8 @@ const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramPro
   const [nodeDataArray, setNodeDataArray] = React.useState([]);
   const [linkDataArray, setLinkDataArray] = React.useState([]);
   // State: Options
-  const [optionRelationOnly, setOptionRelationOnly] = React.useState(false);
+  const [optionRelationOnly, setOptionRelationOnly] = React.useState(true);
+  const [useInternalName, setUseInternalName] = React.useState(true);
 
   const loadDiagram = async (refresh: boolean) => {
     if(refresh) { setLoadingProgress(0); setNodeDataArray([]); }
@@ -23,7 +24,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);
+    let goJSNodes = getGoJSNodesFromSPSiteData(spSiteData, useInternalName ? "name" : "displayName");
     // Set State
     setNodeDataArray(goJSNodes.nodeDataArray.filter((n) => 
       optionRelationOnly && goJSNodes.linkDataArray.some(l => l.from == n.key || l.to == n.key) || !optionRelationOnly // Filter optionRelationOnly
@@ -34,14 +35,14 @@ const SpSiteErDiagram: React.FC<ISpSiteDiagramProps> = (props: ISpSiteDiagramPro
   // "ComponentDitMount"
   React.useEffect(() => {
     loadDiagram(false);
-  }, [optionRelationOnly]);
-
+  }, [optionRelationOnly, useInternalName]);
 
   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: '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); }}
       ]} />
       <div className={styles.spSiteErDiagram} style={{height: "calc(100% - 44px)", padding: "0px"}}>
         { loadingProgress != 100 && nodeDataArray.length == 0 ?

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

@@ -124,7 +124,7 @@ export const initDiagram = () => {
             {
             textAlign: "center",
             font: "bold 16px sans-serif",
-            stroke: "#fdb400",
+            stroke: "#333333",
             segmentIndex: 0,
             segmentOffset: new go.Point(NaN, NaN),
             segmentOrientation: go.Link.OrientUpright
@@ -134,7 +134,7 @@ export const initDiagram = () => {
             {
             textAlign: "center",
             font: "bold 16px sans-serif",
-            stroke: "#fdb400",
+            stroke: "#333333",
             segmentIndex: -1,
             segmentOffset: new go.Point(NaN, NaN),
             segmentOrientation: go.Link.OrientUpright

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

@@ -20,6 +20,7 @@ export interface SPTableField {
     name: string,
     displayName: string,
     iskey: boolean,
+    isunique: boolean,
     type: string
 }
 export interface SPTableAlert {
@@ -67,12 +68,15 @@ const getSPSiteData = async (spfxContext: any, force?: boolean, progress?: (numb
             let table: SPTable = { id: list.Id, title: list.Title, fields: [], alerts: [] };
             // Fields
             let fields = (await sp.web.lists.getById(list.Id).fields.filter("Hidden ne 1")())
-            .filter(f => !f.Hidden).sort((a,b) => a.TypeDisplayName.charCodeAt(0) - b.TypeDisplayName.charCodeAt(0) );
+            .filter(f => !f.Hidden && (f as any).LookupList != "AppPrincipals" && ((f as any).CanBeDeleted || (f as any).InternalName == "Title"))
+            .sort((a,b) => a.InternalName.charCodeAt(0) - b.InternalName.charCodeAt(0) );
             table.fields = fields.map(f => {
+                f.InternalName.indexOf("_") > -1 && console.log(f);
                 return { 
                     name: f.InternalName, 
                     displayName: f.Title, 
                     iskey: (f as any).TypeDisplayName == "Lookup" && (f as any).IsRelationship && (f as any).LookupList != '' && (f as any).LookupList != "AppPrincipals",
+                    isunique: f.EnforceUniqueValues,
                     type: f.TypeDisplayName
                     } 
                 });  

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

@@ -16,7 +16,7 @@ const colors = {
 }
 const configByFieldType: any = {
     'default': { color: colors.purple, figure: "Ellipse" },
-    'Lookup': { color: colors.orange, figure: "TriangleRight" },
+    'Lookup': { color: colors.purple, figure: "TriangleLeft" },
     'Counter': { color: colors.keycolor, figure: "Diamond" },
     "Attachments": { color: colors.blue, figure: "Rectangle" },
     "Person or Group": { color: colors.green, figure: "RoundedRectangle" },
@@ -27,11 +27,11 @@ const configByFieldType: any = {
     "Choice": { color: colors.blue, figure: "Ellipse" },
     "Hyperlink or Picture": { color: colors.blue, figure: "Ellipse" }
 }
-const getNodeItemFromField = (f: SPTableField) : GoJSNodeItem => {
+const getNodeItemFromField = (f: SPTableField, fieldNameProperty: string = "name") : GoJSNodeItem => {
     let c = configByFieldType[f.type] || configByFieldType['default'];
     let prefix = f.type == "Counter" ? "PK | " : (f.iskey && f.type == "Lookup" ? "FK | " : "");
     return { 
-        name: prefix + f.name + ` (${f.type})`, 
+        name: prefix + (f as any)[fieldNameProperty] + ` (${f.type})`, 
         iskey: f.iskey, 
         figure: c.figure, 
         color: f.iskey ? colors.keycolor : c.color
@@ -68,7 +68,7 @@ export interface GoJSLink {
     text: string,
     toText: string
 }
-const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData) : { nodeDataArray: GoJSNode[], linkDataArray:  GoJSLink[] } => {
+const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData, fieldNameProperty: string = "name") : { nodeDataArray: GoJSNode[], linkDataArray:  GoJSLink[] } => {
 
     let nodeDataArray: GoJSNode[] = [];
     let linkDataArray: GoJSLink[] = [];
@@ -77,7 +77,7 @@ const getGoJSNodesFromSPSiteData = (spSiteData: SPSiteData) : { nodeDataArray: G
         key: t.title,
         items: [
             ...t.alerts.map(a => getNodeItemFromAlert(a)),
-            ...t.fields.map(f => getNodeItemFromField(f))
+            ...t.fields.map(f => getNodeItemFromField(f, fieldNameProperty))
         ]
     }})