diff --git a/_ur_addons/comment/ac-comment.ts b/_ur_addons/comment/ac-comment.ts
index 3ea3546f2..641d3c870 100644
--- a/_ur_addons/comment/ac-comment.ts
+++ b/_ur_addons/comment/ac-comment.ts
@@ -8,34 +8,35 @@
   
     COMMENTCOLLECTION ccol
     -----------------
-    A COMMENTCOLLECTION is the main data source for the CommentBtn.
+    A COMENTCOLLECTION is the main data source for the CommentBtn.
     It primarily shows summary information for the three states of the button:
     * has no comments
     * has unread comments
     * has read comments
+    * number of non-deleted comments in the collection
     It passes on the collection_ref to the CommentThread components.
     
       interface CommentCollection {
         cref: any; // collection_ref
         hasUnreadComments: boolean;
         hasReadComments: boolean;
+        commentCount: number; 
       }
 
       
     COMMENTUISTATE cui
     --------------
-    COMMENTUISTATE keeps track of the `isOpen` state of currently selected/open 
-    comment ui buttons.
-    Comments can be opened and closed from multiple UI elements.
+    A COMMENTUISTATE object can be opened and closed from multiple UI elements.
+    COMMENTUI keeps track of the `isOpen` status based on the UI element.
     e.g. a comment button in a node can open a comment but the same comment can
-    be opened from the node table view.
+    be opeend from the node table view.
     
       COMMENTUISTATE Map<uiref, {cref, isOpen}>
     
     
     OPENCOMMENTS
-    ---------------
-    OPENCOMMENTS keeps track of currently open comments.  This is 
+    ------------
+    OPENCOMMENTS keeps track of currently open comment buttons.  This is 
     used prevent two comment buttons from opening the same comment collection,
     e.g. if the user opens a node and a node table comment at the same time.
     
@@ -68,8 +69,6 @@
         isMarkedRead: boolean;
         isReplyToMe: boolean;
         allowReply: boolean;
-        
-        markedRead: boolean;
       }
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * /////////////////////////////////////*/
@@ -96,6 +95,7 @@ type TCommentCollection = {
   collection_ref: TCollectionRef;
   hasUnreadComments?: boolean;
   hasReadComments?: boolean;
+  commentCount?: number;
 };
 
 type TCommentUIRef = string; // comment button id, e.g. `n32-isTable`, not just TCollectionRef
@@ -113,9 +113,8 @@ type TCommentVisualObject = {
   isBeingEdited: boolean;
   isEditable: boolean;
   isMarkedRead: boolean;
-  isReplyToMe: boolean;
-  allowReply: boolean;
-  markedRead: boolean;
+  isReplyToMe?: boolean;
+  allowReply?: boolean;
 };
 
 type TCommentCollectionMap = Map<TCollectionRef, TCommentCollection>;
@@ -154,6 +153,12 @@ function LoadTemplate(commentTypes: Array<TCommentType>) {
  * @param {any} data JSON data
  */
 function LoadDB(data) {
+  COMMENTCOLLECTION.clear();
+  COMMENTUISTATE.clear();
+  OPENCOMMENTS.clear();
+  COMMENTS_BEING_EDITED.clear();
+  COMMENTVOBJS.clear();
+
   if (DBG) console.log(PR, 'LoadDB', data);
   DCCOMMENTS.LoadDB(data);
   if (DBG) console.log('COMMENTCOLLECTION', COMMENTCOLLECTION);
@@ -203,6 +208,23 @@ function CloseCommentCollection(
   DeriveThreadedViewObjects(cref, uid);
 }
 
+/**
+ * Close comment collections WITHOUT marking them read
+ * Used by comment status when user is quickly opening
+ * comments for review
+ */
+function CloseAllCommentCollections(uid: TUserID) {
+  COMMENTUISTATE.forEach((state, uiref) => {
+    if (state.isOpen) {
+      // Set isOpen status
+      COMMENTUISTATE.set(uiref, { cref: state.cref, isOpen: false });
+      OPENCOMMENTS.set(state.cref, undefined);
+      // Update Derived Lists to update Marked status
+      DeriveThreadedViewObjects(state.cref, uid);
+    }
+  });
+}
+
 function MarkRead(cref: TCollectionRef, uid: TUserID) {
   // Mark Read
   const commentVObjs = COMMENTVOBJS.get(cref);
@@ -232,14 +254,16 @@ function GetCommentStats(uid: TUserID): {
   COMMENTVOBJS.forEach(cvobjs => {
     cvobjs.forEach(cvobj => {
       if (!cvobj.isMarkedRead) {
-        // count unread
-        countUnread++;
-        // count repliesToMe
         const comment = DCCOMMENTS.GetComment(cvobj.comment_id);
-        if (rootCidsWithRepliesToMe.includes(comment.comment_id_parent)) {
-          // HACK: Update cvobj by reference!
-          cvobj.isReplyToMe = true;
-          countRepliesToMe++;
+        if (!comment.comment_isMarkedDeleted) {
+          // count unread
+          countUnread++;
+          // count repliesToMe
+          if (rootCidsWithRepliesToMe.includes(comment.comment_id_parent)) {
+            // HACK: Update cvobj by reference!
+            cvobj.isReplyToMe = true;
+            countRepliesToMe++;
+          }
         }
       }
     });
@@ -265,16 +289,23 @@ function GetOpenComments(cref: TCollectionRef): TCommentUIRef {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// EDITABLE COMMENTS
 
-function m_RegisterCommentBeingEdited(cid: TCommentID) {
+function RegisterCommentBeingEdited(cid: TCommentID) {
   COMMENTS_BEING_EDITED.set(cid, cid);
 }
-function m_DeRegisterCommentBeingEdited(cid: TCommentID) {
+function DeRegisterCommentBeingEdited(cid: TCommentID) {
   COMMENTS_BEING_EDITED.delete(cid);
 }
-
 function GetCommentBeingEdited(cid: TCommentID): TCommentID {
   return COMMENTS_BEING_EDITED.get(cid);
 }
+/// ANY comment is being edited
+function GetCommentsAreBeingEdited(): boolean {
+  return COMMENTS_BEING_EDITED.size > 0;
+}
+
+function GetCommentsBeingEdited(): TCommentsBeingEditedMap {
+  return COMMENTS_BEING_EDITED;
+}
 
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// UNREAD COMMENTS
@@ -302,6 +333,8 @@ function GetUnreadComments(): TComment[] {
 /// COMMENT THREAD VIEW OBJECTS
 
 function DeriveAllThreadedViewObjects(uid: TUserID) {
+  COMMENTCOLLECTION.clear();
+  COMMENTVOBJS.clear();
   const crefs = DCCOMMENTS.GetCrefs();
   crefs.forEach(cref => DeriveThreadedViewObjects(cref, uid));
 }
@@ -317,12 +350,14 @@ function DeriveThreadedViewObjects(
 ): TCommentVisualObject[] {
   if (cref === undefined)
     throw new Error(`m_DeriveThreadedViewObjects cref: "${cref}" must be defined!`);
-  const commentVObjs = [];
+  const commentVObjs: TCommentVisualObject[] = [];
+  let commentCount = 0;
   const threadIds = DCCOMMENTS.GetThreadedCommentIds(cref);
   threadIds.forEach(cid => {
     const comment = DCCOMMENTS.GetComment(cid);
     if (comment === undefined)
       console.error('GetThreadedViewObjects for cid not found', cid, 'in', threadIds);
+    if (!comment.comment_isMarkedDeleted) commentCount++;
     const level = comment.comment_id_parent === '' ? 0 : 1;
     commentVObjs.push({
       comment_id: cid,
@@ -367,6 +402,7 @@ function DeriveThreadedViewObjects(
   });
   ccol.hasUnreadComments = hasUnreadComments;
   ccol.hasReadComments = hasReadComments;
+  ccol.commentCount = commentCount;
   COMMENTCOLLECTION.set(cref, ccol);
   return commentReplyVObjs;
 }
@@ -385,21 +421,15 @@ function GetThreadedViewObjects(
     : commentVObjs;
 }
 
-/**
- * @param {string} cref
- * @param {string} uid -- User ID is used to determine read/unread status
- * @returns {number} Returns the number of comments in a collection
- */
-function GetThreadedViewObjectsCount(cref: TCollectionRef, uid: TUserID): number {
-  return GetThreadedViewObjects(cref, uid).length;
-}
-
 function GetCOMMENTVOBJS(): TCommentVisualObjectsMap {
   return COMMENTVOBJS;
 }
 
 function GetCommentVObj(cref: TCollectionRef, cid: TCommentID): TCommentVisualObject {
   const thread = COMMENTVOBJS.get(cref);
+  if (thread === undefined)
+    // fail gracefully if thread not found -- this can happen if the comment has been deleted
+    return;
   const cvobj = thread.find(c => c.comment_id === cid);
   return cvobj;
 }
@@ -428,7 +458,7 @@ function AddComment(data: {
       COMMENTVOBJS
     );
   cvobj.isBeingEdited = true;
-  m_RegisterCommentBeingEdited(comment.comment_id);
+  RegisterCommentBeingEdited(comment.comment_id);
 
   commentVObjs = commentVObjs.map(c =>
     c.comment_id === cvobj.comment_id ? cvobj : c
@@ -454,7 +484,7 @@ function UpdateComment(cobj: TComment, uid: TUserID) {
   const cvobj = GetCommentVObj(cobj.collection_ref, cobj.comment_id);
   if (cvobj === undefined)
     throw new Error(
-      `ac-comment.UpdateComment could not find cobj ${cobj.comment_id}.  Maybe it hasn't been created yet? ${COMMENTVOBJS}`
+      `ac-comment.UpdateComment could not find cvobj ${cobj.comment_id}.  Maybe it hasn't been created yet? ${COMMENTVOBJS}`
     );
 
   // mark it unread
@@ -462,7 +492,7 @@ function UpdateComment(cobj: TComment, uid: TUserID) {
   DCCOMMENTS.MarkCommentUnread(cvobj.comment_id, uid);
 
   cvobj.isBeingEdited = false;
-  m_DeRegisterCommentBeingEdited(cobj.comment_id);
+  DeRegisterCommentBeingEdited(cobj.comment_id);
   cvobj.modifytime_string = GetDateString(cobj.comment_modifytime);
   commentVObjs = commentVObjs.map(c =>
     c.comment_id === cvobj.comment_id ? cvobj : c
@@ -523,8 +553,9 @@ function RemoveAllCommentsForCref(parms: {
  * Does NOT trigger a database update
  * (Contrast this with RemoveComment above)
  */
-function HandleRemovedComments(comment_ids: TCommentID[]) {
+function HandleRemovedComments(comment_ids: TCommentID[], uid: TUserID) {
   DCCOMMENTS.HandleRemovedComments(comment_ids);
+  DeriveAllThreadedViewObjects(uid);
 }
 
 /// PASS-THROUGH METHODS //////////////////////////////////////////////////////
@@ -567,6 +598,7 @@ export {
   GetCommentCollection,
   UpdateCommentUIState,
   CloseCommentCollection,
+  CloseAllCommentCollections,
   MarkRead,
   GetCommentStats,
   // Comment UI State
@@ -574,7 +606,11 @@ export {
   // Open Comments
   GetOpenComments,
   // Editable Comments
+  RegisterCommentBeingEdited,
+  DeRegisterCommentBeingEdited,
   GetCommentBeingEdited,
+  GetCommentsAreBeingEdited,
+  GetCommentsBeingEdited,
   // Unread Comments
   GetUnreadRepliesToMe,
   GetUnreadComments,
@@ -582,7 +618,6 @@ export {
   DeriveAllThreadedViewObjects,
   DeriveThreadedViewObjects,
   GetThreadedViewObjects,
-  GetThreadedViewObjectsCount,
   GetCOMMENTVOBJS,
   GetCommentVObj,
   // Comment Objects
diff --git a/_ur_addons/comment/dc-comment.ts b/_ur_addons/comment/dc-comment.ts
index f73214424..a6c4283cd 100644
--- a/_ur_addons/comment/dc-comment.ts
+++ b/_ur_addons/comment/dc-comment.ts
@@ -3,7 +3,8 @@
   dc-comments
   
   Data Care Comments
-      
+  Ported from Net.Create a5a947d5007bfef213bb107c521c59547fa72714
+
   DATA
   
     COMMENTS
@@ -24,6 +25,8 @@
 
         commenter_id: any;
         commenter_text: string[];
+        
+        id: number;
       };
 
       
@@ -62,6 +65,10 @@
              r2    "r3 Third Comment"                    r4
              r4    "r4 Fourth Comment"                   
 
+      "thread" -- a sequence starting with the first
+                  e.g. [r1, r2, r3, r4]
+                  e.g. [r2.1, r2.2, r2.3]
+      
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * /////////////////////////////////////*/
 
 const DBG = false;
@@ -80,7 +87,16 @@ type TUserObject = {
 // REVIEW CType needs to be defined after we figure out how to handle templates
 //        Eventually we will dynamically define them.
 // Comment Template Type Slug
-export type CType = 'cmt' | 'tellmemore' | 'source' | 'demo';
+export type CType =
+  | 'cmt'
+  | 'tellmemore'
+  | 'source'
+  | 'evidence'
+  | 'clarity'
+  | 'steps'
+  | 'response'
+  | string; // allow other slugs
+
 type CPromptFormat =
   | 'text'
   | 'dropdown'
@@ -88,6 +104,8 @@ type CPromptFormat =
   | 'radio'
   | 'likert'
   | 'discrete-slider';
+
+export type TDBRecordId = number;
 export type TCommentID = string;
 export type TCommentType = {
   slug: CType;
@@ -99,16 +117,18 @@ type TCommentPrompt = {
   prompt: string;
   options?: string[];
   help: string;
-  feedback: string;
+  feedback?: string;
 };
 
 export type TCollectionRef = any;
 export type TComment = {
+  id?: TDBRecordId; // gets added by pmcData after it's added to the db
+
   collection_ref: TCollectionRef; // aka 'cref'
   comment_id: TCommentID;
   comment_id_parent: any;
   comment_id_previous: any;
-  comment_type: string;
+  comment_type: CType; // slug
   comment_createtime: number;
   comment_modifytime: number;
   comment_isMarkedDeleted: boolean;
@@ -132,9 +152,13 @@ type TLokiData = {
 };
 
 export type TCommentQueueActions =
+  | TCommentQueueAction_ID
   | TCommentQueueAction_RemoveCommentID
   | TCommentQueueAction_RemoveCollectionRef
   | TCommentQueueAction_Update;
+type TCommentQueueAction_ID = {
+  id: number;
+};
 type TCommentQueueAction_RemoveCommentID = {
   commentID: TCommentID;
 };
@@ -195,126 +219,113 @@ export type CPromptFormatOption_RadioData = string; // selected item string, e.g
 export type CPromptFormatOption_LikertData = string; // selected item string, e.g. '💚'
 export type CPromptFormatOption_DiscreteSliderData = string; // selected item 0-based index e.g. "2"
 
+// Generic Comment Type
+// If DEFAULT_CommentTypes is not defined, fall back to using a basic comment.
+const DEFAULT_COMMENTTYPE: TCommentType = {
+  slug: 'cmt',
+  label: 'Comment', // comment type label
+  prompts: [
+    {
+      format: 'text',
+      prompt: 'Comment', // prompt label
+      help: 'Use this for any general comment.', // displayed below prompt
+      feedback: '' // displayed below input field
+    }
+  ]
+};
+// DEFAULT_CommentTypes
+// Use this to fall back to a common set of comment types for project templates without
+// comment type definitions, e.g. if you're spinining up multiple servers from a common code base.
+// This "burns in" basic DEFAULT_CommentTypes.
+// Comment types defined in the the project template will override DEFAULT_CommentTypes.
 const DEFAULT_CommentTypes: Array<TCommentType> = [
-  // Add default comment type if none are defined
+  DEFAULT_COMMENTTYPE,
   {
-    slug: 'cmt',
-    label: 'Comment', // comment type label
+    slug: 'tellmemore',
+    label: 'Tell me more', // comment type label
     prompts: [
       {
         format: 'text',
-        prompt: 'Comment', // prompt label
-        help: 'Use this for any general comment.',
-        feedback: ''
+        prompt: 'Please tell me more', // prompt label
+        help: 'Can you tell me more about ... ', // displayed below prompt
+        feedback: '' // displayed below input field
       }
     ]
   }
-  // Temporarily moved into template 2024-07-30
-  // Move eventually to new templating system
+  // OTHER EXAMPLES of different types
   //
   // {
-  //   slug: 'demo',
-  //   label: 'Demo',
+  //   slug: 'evidence',
+  //   label: 'Evidence Critique or Suggestion',
   //   prompts: [
   //     {
-  //       format: 'text',
-  //       prompt: 'Comment', // prompt label
-  //       help: 'Use this for any general comment.',
-  //       feedback: 'Just enter text'
-  //     },
-  //     {
   //       format: 'dropdown',
-  //       prompt: 'How often did you use "Dropdown"', // prompt label
-  //       options: ['🥲 No', '🤔 A little', '😀 A lot'],
-  //       help: 'Select one.',
-  //       feedback: 'Single selection via dropdown menu'
-  //     },
-  //     {
-  //       format: 'checkbox',
-  //       prompt: 'What types of fruit did you "Checkbox"?', // prompt label
-  //       options: ['Apple Pie', 'Orange, Lime', 'Banana'],
-  //       help: 'Select as many as you want.',
-  //       feedback: 'Supports multiple selections'
-  //     },
-  //     {
-  //       format: 'radio',
-  //       prompt: 'What do you think "Radio"?', // prompt label
-  //       options: [
-  //         'It makes sense',
-  //         'I disagree',
-  //         "I don't know",
-  //         'Handle, comma, please'
-  //       ],
-  //       help: 'Select only one.',
-  //       feedback: 'Mutually exclusive single selections'
-  //     },
-  //     {
-  //       format: 'likert',
-  //       prompt: 'How did you like it "likert"?', // prompt label
-  //       options: ['💙', '💚', '💛', '🧡', '🩷'],
-  //       help: 'Select one of a series listed horizontally',
-  //       feedback: 'Select with a single click.  Supports emojis.'
-  //     },
-  //     {
-  //       format: 'discrete-slider',
-  //       prompt: 'Star Rating "discrete-slider"?', // prompt label
-  //       options: ['★', '★', '★', '★', '★'],
-  //       help: 'Select one of a series stacked horizontally',
-  //       feedback: 'Select with a single click.  Supports emojis.'
-  //     },
-  //     {
-  //       format: 'text',
-  //       prompt: 'Comment 2', // prompt label
-  //       help: 'Use this for any general comment.',
-  //       feedback: 'Just enter text'
+  //       prompt: 'Is this supported by evidence?', // prompt label
+  //       options: ['😀 Yes', '🤔 Some', '🥲 No'],
+  //       help: 'Select one.'
   //     },
   //     {
   //       format: 'text',
-  //       prompt: 'Comment 3', // prompt label
-  //       help: 'Use this for any general comment.',
-  //       feedback: 'Just enter text'
+  //       prompt: 'What would you change?', // prompt label
+  //       help: 'Please be specific to help your friend.'
   //     }
   //   ]
-  // },
+  // }
   // {
-  //   slug: 'cmt',
-  //   label: 'Comment', // comment type label
+  //   slug: 'clarity',
+  //   label: 'Clarity Critique or Suggestion',
   //   prompts: [
   //     {
+  //       format: 'discrete-slider',
+  //       prompt: 'How clear is this model to you?', // prompt label
+  //       options: ['★', '★', '★', '★', '★'],
+  //       help: 'More stars means more clear!',
+  //       feedback: 'We can also have help here'
+  //     },
+  //     {
   //       format: 'text',
-  //       prompt: 'Comment', // prompt label
-  //       help: 'Use this for any general comment.',
-  //       feedback: ''
+  //       prompt: 'What made you pick that number?', // prompt label
+  //       help: 'Please be specific to help your friend.'
   //     }
   //   ]
   // },
   // {
-  //   slug: 'tellmemore',
-  //   label: 'Tell me more', // comment type label
+  //   slug: 'steps',
+  //   label: 'All the Steps Critique or Suggestion',
   //   prompts: [
   //     {
+  //       format: 'dropdown',
+  //       prompt: 'Does this include all of the useful steps?', // prompt label
+  //       options: ['😀 Yes', '🤔 Mostly', '🥲 No', '🥲 Too many'],
+  //       help: 'Select one.'
+  //     },
+  //     {
   //       format: 'text',
-  //       prompt: 'Please tell me more', // prompt label
-  //       help: 'Can you tell me more about ... ',
-  //       feedback: ''
+  //       prompt: 'What made you pick that number?', // prompt label
+  //       help: 'Please be specific to help your friend.'
   //     }
   //   ]
   // },
   // {
-  //   slug: 'source',
-  //   label: 'Source', // comment type label
+  //   slug: 'response',
+  //   label: 'Response',
   //   prompts: [
   //     {
-  //       format: 'text',
-  //       prompt: 'Is this well sourced?', // prompt label
-  //       help: 'Yes/No',
-  //       feedback: ''
+  //       format: 'radio',
+  //       prompt: 'Do you agree with this comment, critique, or suggestion?', // prompt label
+  //       options: ['Yes', 'Somewhat', 'No'],
+  //       help: 'Select only one.'
+  //     },
+  //     {
+  //       format: 'radio',
+  //       prompt: 'Will you make any changes?', // prompt label
+  //       options: ['Yes', 'Some', 'No'],
+  //       help: 'Select only one.'
   //     },
   //     {
   //       format: 'text',
-  //       prompt: 'Changes', // prompt label
-  //       help: 'What about the sourcing could be improved?',
-  //       feedback: ''
+  //       prompt: 'Why or why not?', // prompt label
+  //       help: 'Please be specific so your friend understands.'
   //     }
   //   ]
   // }
@@ -326,6 +337,7 @@ function m_LoadUsers(dbUsers: TUserObject[]) {
   dbUsers.forEach(u => USERS.set(u.id, u.name));
 }
 function m_LoadCommentTypes(commentTypes: TCommentType[]) {
+  COMMENTTYPES.clear();
   commentTypes.forEach(t => COMMENTTYPES.set(t.slug, t));
 }
 function m_LoadComments(comments: TComment[]) {
@@ -347,7 +359,14 @@ function Init() {
 }
 
 function LoadTemplate(commentTypes: Array<TCommentType>) {
-  const types = commentTypes || DEFAULT_CommentTypes; // fall back to simple comment if it's not defined
+  // fall back order: template.toml > DEFAULT_CommentTypes > DEFAULT_COMMENTTYPE
+  // fall back to DEFAULT_CommentTypes if DEFAULT_CommentTypes is not in dc-comments
+  // or a single DEFAULT_COMMENTTYPE if it's completely missing
+  const types =
+    commentTypes ||
+    (DEFAULT_CommentTypes && DEFAULT_CommentTypes.length > 0
+      ? DEFAULT_CommentTypes
+      : [DEFAULT_COMMENTTYPE]);
   m_LoadCommentTypes(types);
 }
 
@@ -360,9 +379,21 @@ function LoadTemplate(commentTypes: Array<TCommentType>) {
  */
 function LoadDB(data: TLokiData) {
   if (DBG) console.log(PR, 'LoadDB');
+  USERS.clear();
+  // COMMENTTYPES.clear(); // MEME reads types from db, but NC reads from template, so don't clear for NC
+  COMMENTS.clear();
+  READBY.clear();
+  ROOTS.clear();
+  REPLY_ROOTS.clear();
+  NEXT.clear();
+
   // Load Data!
-  if (data.commenttypes) m_LoadCommentTypes(data.commenttypes);
-  else m_LoadCommentTypes(DEFAULT_CommentTypes); // load default comments if db has none
+
+  // MEME loads comment types in the db
+  // But NC relies on template to define comment types, so don't load commenttypes here for NC
+  //  if (data.commenttypes) m_LoadCommentTypes(data.commenttypes);
+  //  else m_LoadCommentTypes(DEFAULT_CommentTypes); // load default comments if db has none
+
   if (data.users) m_LoadUsers(data.users);
   if (data.comments) m_LoadComments(data.comments);
   if (data.readby) m_LoadReadBy(data.readby);
@@ -392,20 +423,27 @@ function GetCurrentUser(): TUserName {
 function GetCommentTypes(): TCommentTypeMap {
   return COMMENTTYPES;
 }
-function GetCommentType(typeid): TCommentType {
-  return COMMENTTYPES.get(typeid);
+function GetCommentType(slug: CType): TCommentType {
+  return COMMENTTYPES.get(slug);
 }
 function GetDefaultCommentType(): TCommentType {
   // returns the first comment type object
-  if (DEFAULT_CommentTypes.length < 1)
+  if (COMMENTTYPES.size < 1)
     throw new Error('dc-comments: No comment types defined!');
-  return GetCommentType(DEFAULT_CommentTypes[0].slug);
+  return GetCommentType(GetDefaultCommentTypeSlug());
+}
+function GetDefaultCommentTypeSlug(): CType {
+  // returns the first comment type slug
+  // fall back order: template.toml > DEFAULT_CommentTypes > DEFAULT_COMMENTTYPE
+  if (COMMENTTYPES.size < 1)
+    throw new Error('dc-comments: No comment types defined!');
+  return COMMENTTYPES.keys().next().value;
 }
 
 function GetCOMMENTS(): TCommentMap {
   return COMMENTS;
 }
-function GetComment(cid): TComment {
+function GetComment(cid: TCommentID): TComment {
   return COMMENTS.get(cid);
 }
 
@@ -440,7 +478,7 @@ function AddComment(data): TComment {
     comment_id: data.comment_id, // thread
     comment_id_parent,
     comment_id_previous,
-    comment_type: 'cmt', // default type, no prompts
+    comment_type: GetDefaultCommentTypeSlug(), // default type, no prompts
     comment_createtime: new Date().getTime(),
     comment_modifytime: null,
     comment_isMarkedDeleted: data.comment_isMarkedDeleted,
@@ -470,10 +508,11 @@ function UpdateComment(cobj: TComment) {
 function m_UpdateComment(cobj: TComment) {
   // Fake modify date until we get DB roundtrip
   cobj.comment_modifytime = new Date().getTime();
-  console.log(
-    'REVIEW: UpdateComment...modify time should use loki time???',
-    cobj.comment_modifytime
-  );
+  // console.log(
+  //   'REVIEW: UpdateComment...modify time should use loki time???',
+  //   cobj.comment_id,
+  //   cobj.comment_modifytime
+  // );
   COMMENTS.set(cobj.comment_id, cobj);
 }
 /**
@@ -485,6 +524,21 @@ function HandleUpdatedComments(cobjs: TComment[]) {
   m_DeriveValues();
 }
 
+/**
+ * Safely delete a comment and queue it for deletion
+ * This is necessary to also return the `id`
+ * @param {string} cid comment_id
+ * @returns {Object} TCommentQueueActions
+ */
+function m_safeDeleteAndQueue(cid): TCommentQueueActions {
+  if (COMMENTS.has(cid)) {
+    const cmt = COMMENTS.get(cid);
+    const id = cmt ? cmt.id : undefined; // this should not happen
+    COMMENTS.delete(cid);
+    return { id, commentID: cid };
+  }
+  throw new Error(`Comment ${cid} not found.  This should not happen!`);
+}
 /**
  * @param {Object} parms
  * @param {Object} parms.collection_ref
@@ -496,7 +550,7 @@ function HandleUpdatedComments(cobjs: TComment[]) {
  */
 function RemoveComment(parms): TCommentQueueActions[] {
   const { collection_ref, comment_id, uid, isAdmin } = parms;
-  const queuedActions = [];
+  const queuedActions: TCommentQueueActions[] = [];
 
   // MAIN PROCESS: `xxxToDelete`
   // A. Determine the comment to remove
@@ -564,8 +618,7 @@ function RemoveComment(parms): TCommentQueueActions[] {
         childThreadIds.push(cobj.comment_id);
     });
     childThreadIds.forEach(cid => {
-      COMMENTS.delete(cid);
-      queuedActions.push({ commentID: cid });
+      queuedActions.push(m_safeDeleteAndQueue(cid));
     });
   }
 
@@ -574,8 +627,7 @@ function RemoveComment(parms): TCommentQueueActions[] {
     if (DBG) console.log(`deleteTargetAndNext`);
     const nextIds = m_GetNexts(cidToDelete);
     nextIds.forEach(cid => {
-      COMMENTS.delete(cid);
-      queuedActions.push({ commentID: cid });
+      queuedActions.push(m_safeDeleteAndQueue(cid));
     });
   }
 
@@ -601,8 +653,7 @@ function RemoveComment(parms): TCommentQueueActions[] {
   if (deleteTarget || deleteTargetAndNext || deleteRootAndChildren) {
     // DELETE TARGET
     if (DBG) console.log('deleteTarget or Root', cidToDelete);
-    COMMENTS.delete(cidToDelete);
-    queuedActions.push({ commentID: cidToDelete });
+    queuedActions.push(m_safeDeleteAndQueue(cidToDelete));
   } else if (markDeleted) {
     // MARK TARGET DELETED
     if (DBG) console.log('markDeleted', cidToDelete);
@@ -643,15 +694,13 @@ function RemoveComment(parms): TCommentQueueActions[] {
     const replyIds = m_GetReplies(rootId);
     replyIds.forEach(cid => {
       if (COMMENTS.has(cid)) {
-        COMMENTS.delete(cid);
-        queuedActions.push({ commentID: cid });
+        queuedActions.push(m_safeDeleteAndQueue(cid));
       }
     });
 
     // also delete the root
     if (COMMENTS.has(rootId)) {
-      COMMENTS.delete(rootId);
-      queuedActions.push({ commentID: rootId });
+      queuedActions.push(m_safeDeleteAndQueue(rootId));
     }
   }
 
@@ -666,8 +715,7 @@ function RemoveComment(parms): TCommentQueueActions[] {
       const cobj = COMMENTS.get(cid);
       if (cobj && cobj.comment_isMarkedDeleted) {
         // is already marked deleted so remove it
-        COMMENTS.delete(cid);
-        queuedActions.push({ commentID: cid });
+        queuedActions.push(m_safeDeleteAndQueue(cid));
       } else if (cobj && !cobj.comment_isMarkedDeleted) {
         // found an undeleted item, stop!
         break;
@@ -892,7 +940,7 @@ export default {
   IsMarkedDeleted,
   GetThreadedCommentIds,
   GetThreadedCommentData,
-  // GetThreadedCommentDataForRoot,
+  // GetThreadedCommentDataForRoot, // NOT USED?
   // READBY
   GetReadby,
   // ROOTS
diff --git a/app-templates/_default.template.toml b/app-templates/_default.template.toml
index c88398622..7a81395b1 100644
--- a/app-templates/_default.template.toml
+++ b/app-templates/_default.template.toml
@@ -28,6 +28,26 @@ sourceColor = "#FFa500"
 text = "No citation set"
 hidden = false
 
+[[commentTypes]]
+slug = "cmt"
+label = "Comment"
+
+  [[commentTypes.prompts]]
+  format = "text"
+  prompt = "Comment"
+  help = "Use this for any general comment."
+  feedback = ""
+
+[[commentTypes]]
+slug = "tellmemore"
+label = "Evidence Critique or Suggestion"
+
+  [[commentTypes.prompts]]
+  format = "text"
+  prompt = "Tell me more"
+  help = "Can you tell me more about ... "
+  feedback = ""
+
 [nodeDefs.id]
 type = "number"
 displayLabel = "Id"
@@ -39,7 +59,7 @@ hidden = false
 
 [nodeDefs.label]
 type = "string"
-displayLabel = "label"
+displayLabel = "Label"
 exportLabel = "Label"
 help = "Display name of the node"
 includeInGraphTooltip = true
@@ -78,7 +98,7 @@ isProvenance = false
 hidden = false
 
 [nodeDefs.infoSource]
-type = "string"
+type = "infoOrigin"
 displayLabel = "Info Source"
 exportLabel = "InfoSource"
 help = "Who created this?  (aka Source)"
@@ -100,7 +120,6 @@ displayLabel = "Created"
 exportLabel = "Created"
 help = "Date and time node was created"
 includeInGraphTooltip = true
-isProvenance = true
 hidden = false
 
 [nodeDefs.createdBy]
@@ -108,7 +127,6 @@ displayLabel = "Created By"
 help = "Author who created the node"
 exportLabel = "Created By"
 includeInGraphTooltip = true
-isProvenance = true
 hidden = false
 
 [nodeDefs.updated]
@@ -116,7 +134,6 @@ displayLabel = "Updated"
 exportLabel = "Updated"
 help = "Date and time node was last modified"
 includeInGraphTooltip = true
-isProvenance = true
 hidden = false
 
 [nodeDefs.updatedBy]
@@ -124,7 +141,6 @@ displayLabel = "Updated By"
 exportLabel = "Updated By"
 help = "Author who updated the node"
 includeInGraphTooltip = true
-isProvenance = true
 hidden = false
 
 [nodeDefs.revision]
@@ -132,7 +148,6 @@ displayLabel = "Revision"
 exportLabel = "Revision"
 help = "Number of times this node has been revised"
 includeInGraphTooltip = true
-isProvenance = true
 hidden = true
 
 [edgeDefs.id]
@@ -178,14 +193,6 @@ help = "Significance of the connection"
 isProvenance = false
 hidden = false
 
-[edgeDefs.info]
-type = "number"
-displayLabel = "Date"
-exportLabel = "Date"
-help = '"YYYY-MM-DD" format"'
-isProvenance = false
-hidden = false
-
 [edgeDefs.weight]
 type = "number"
 defaultValue = 1
@@ -227,7 +234,6 @@ displayLabel = "Created"
 exportLabel = "Created"
 includeInGraphTooltip = true
 help = "Date and time edge was created"
-isProvenance = true
 hidden = false
 
 [edgeDefs.createdBy]
@@ -235,7 +241,6 @@ displayLabel = "Created By"
 exportLabel = "Created By"
 includeInGraphTooltip = true
 help = "Author who created the edge"
-isProvenance = true
 hidden = false
 
 [edgeDefs.updated]
@@ -243,7 +248,6 @@ displayLabel = "Updated"
 exportLabel = "Updated"
 includeInGraphTooltip = true
 help = "Date and time edge was last modified"
-isProvenance = true
 hidden = false
 
 [edgeDefs.updatedBy]
@@ -251,7 +255,6 @@ displayLabel = "Updated By"
 exportLabel = "Updated By"
 includeInGraphTooltip = true
 help = "Author who updated the nodedgee"
-isProvenance = true
 hidden = false
 
 [edgeDefs.revision]
@@ -259,5 +262,4 @@ displayLabel = "Revision"
 exportLabel = "Revision"
 includeInGraphTooltip = true
 help = "Number of times this edge has been revised"
-isProvenance = true
 hidden = true
diff --git a/app/system/util/hdate.js b/app/system/util/hdate.js
index 86168ef7d..20125bb66 100644
--- a/app/system/util/hdate.js
+++ b/app/system/util/hdate.js
@@ -3,7 +3,7 @@
   Historical Date Utilities
 
   Used by the URDateField component to parse and format historical dates.
-  Also used in NodeTablea nd EdgeTable for sorting and filtering.
+  Also used in NodeTablea and EdgeTable for sorting and filtering.
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 import * as chrono from 'chrono-node';
@@ -17,19 +17,19 @@ const HDATE = {};
 HDATE.erasChrono = chrono.casual.clone();
 HDATE.erasChrono.parsers.push(
   {
-  pattern: () => {
+    pattern: () => {
       // match year if "BC/AD/BCE/CE" (case insensitive)
       //   "10bc"  -- without space
       //   "10 bc" -- with space
       return /(\d+)\s*(BCE|CE|BC|AD)?/i;
-  },
-  extract: (context, match) => {
-    const year = parseInt(match[1], 10);
+    },
+    extract: (context, match) => {
+      const year = parseInt(match[1], 10);
       const era = match[2] ? match[2].toUpperCase() : 'CE'; // default to CE
-    // Adjust the year based on the era
-    const adjustedYear = era === 'BCE' || era === 'BC' ? -year : year;
-    return { year: adjustedYear };
-  }
+      // Adjust the year based on the era
+      const adjustedYear = era === 'BCE' || era === 'BC' ? -year : year;
+      return { year: adjustedYear };
+    }
   }
 
   // ALTERNATIVE APPROACH: Any 3 digits is a year
@@ -52,14 +52,12 @@ HDATE.erasChrono.parsers.push(
   //   }
   // },
 );
-HDATE.erasChrono.refiners.push(
-  {
-    refine: (context, results) => {
-      // placeholder if we decide we want to add a refiner
-      return results;
-    }
+HDATE.erasChrono.refiners.push({
+  refine: (context, results) => {
+    // placeholder if we decide we want to add a refiner
+    return results;
   }
-);
+});
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -141,28 +139,28 @@ HDATE.DATEFORMAT = {
 HDATE.u_pad = num => {
   if (!num) return '';
   return num.toString().padStart(2, '0');
-}
+};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 HDATE.u_monthAbbr = num => {
   const date = new Date(2000, num - 1, 1);
   return date.toLocaleDateString('default', { month: 'short' });
-}
+};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 HDATE.u_monthName = num => {
   const date = new Date(2000, num - 1, 1);
   return date.toLocaleDateString('default', { month: 'long' });
-}
+};
 
 /// HDATE METHODS //////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 HDATE.Parse = dateInputStr => {
   return HDATE.erasChrono.parse(dateInputStr);
-}
+};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /** Show how the raw input string is parsed into date information by breaking
-  *  down the known values (e.g. `day`, and `month`) into a human-readable string.
-  *  @param {Array} ParsedResult - a chrono array of parsed date objects
-  */
+ *  down the known values (e.g. `day`, and `month`) into a human-readable string.
+ *  @param {Array} ParsedResult - a chrono array of parsed date objects
+ */
 HDATE.ShowValidationResults = ParsedResult => {
   // Show interpreted values
   if (ParsedResult.length > 0) {
@@ -174,7 +172,7 @@ HDATE.ShowValidationResults = ParsedResult => {
     return dateValidationStr;
   }
   return undefined;
-}
+};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /** Show the list of available format types with previews based on the values
  *  parsed from the input string. e.g. `April 1, 2024` will show formats
@@ -186,9 +184,7 @@ HDATE.ShowMatchingFormats = (ParsedResult, dateFormat, allowFormatSelection) =>
   let options = [{ value: 'AS_ENTERED', preview: 'as entered' }];
   if (ParsedResult.length < 1) {
     if (allowFormatSelection) return options;
-    else return [
-      { value: dateFormat, preview: HDATE.DATEFORMAT[dateFormat] }
-    ];
+    else return [{ value: dateFormat, preview: HDATE.DATEFORMAT[dateFormat] }];
   }
 
   let matchingTypes = [];
@@ -200,7 +196,10 @@ HDATE.ShowMatchingFormats = (ParsedResult, dateFormat, allowFormatSelection) =>
   if (!allowFormatSelection) {
     // force the format to use the defined format
     const options = [
-      { value: dateFormat, preview: HDATE.GetPreviewStr(dateInputStr, knownValues, dateFormat) }
+      {
+        value: dateFormat,
+        preview: HDATE.GetPreviewStr(dateInputStr, knownValues, dateFormat)
+      }
     ];
     return options;
   }
@@ -267,11 +266,14 @@ HDATE.ShowMatchingFormats = (ParsedResult, dateFormat, allowFormatSelection) =>
   }
 
   additionalOptions = matchingTypes.map(type => {
-    return { value: type, preview: HDATE.GetPreviewStr(dateInputStr, knownValues, type) };
+    return {
+      value: type,
+      preview: HDATE.GetPreviewStr(dateInputStr, knownValues, type)
+    };
   });
   options = [...additionalOptions, ...options];
   return options;
-}
+};
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /** Show the formatted date string using the parsed result information
  *  @param {String} dateInputStr - the raw input string
@@ -330,7 +332,9 @@ HDATE.GetPreviewStr = (dateInputStr, knownValues, format) => {
         : `${month}/${day}/${year} ${HDATE.ERAS.post}`;
     case 'HISTORICAL_MONTHDAYYEAR_PAD':
       return year < 1
-        ? `${HDATE.u_pad(month)}/${HDATE.u_pad(day)}/${Math.abs(year)} ${HDATE.ERAS.pre}`
+        ? `${HDATE.u_pad(month)}/${HDATE.u_pad(day)}/${Math.abs(year)} ${
+            HDATE.ERAS.pre
+          }`
         : `${HDATE.u_pad(month)}/${HDATE.u_pad(day)}/${year} ${HDATE.ERAS.post}`;
     case 'HISTORICAL_YEARMONTHDAY_ABBR':
       return year < 1
@@ -346,7 +350,9 @@ HDATE.GetPreviewStr = (dateInputStr, knownValues, format) => {
         : `${year}/${month}/${day} ${HDATE.ERAS.post}`;
     case 'HISTORICAL_YEARMONTHDAY_PAD':
       return year < 1
-        ? `${Math.abs(year)}/${HDATE.u_pad(month)}/${HDATE.u_pad(day)} ${HDATE.ERAS.pre}`
+        ? `${Math.abs(year)}/${HDATE.u_pad(month)}/${HDATE.u_pad(day)} ${
+            HDATE.ERAS.pre
+          }`
         : `${year}/${HDATE.u_pad(month)}/${HDATE.u_pad(day)} ${HDATE.ERAS.post}`;
     case 'MONTHYEAR_ABBR':
       return `${HDATE.u_monthAbbr(month)} ${year}`;
@@ -399,13 +405,15 @@ HDATE.GetPreviewStr = (dateInputStr, knownValues, format) => {
     case 'YEAR':
       return `${year}`;
     case 'HISTORICALYEAR':
-      return year < 1 ? `${Math.abs(year)} ${HDATE.ERAS.pre}` : `${year} ${HDATE.ERAS.post}`;
+      return year < 1
+        ? `${Math.abs(year)} ${HDATE.ERAS.pre}`
+        : `${year} ${HDATE.ERAS.post}`;
     case 'AS_ENTERED':
     default:
       // console.log('showprevieow...showing as entered', dateInputStr);
       return `${dateInputStr}` || '...';
   }
-}
+};
 
 /// MODULE EXPORTS ////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/app/view/netcreate/NetCreate.css b/app/view/netcreate/NetCreate.css
index 4b04e78da..b160c084c 100644
--- a/app/view/netcreate/NetCreate.css
+++ b/app/view/netcreate/NetCreate.css
@@ -9,6 +9,7 @@
       2000  comment-bar
       1500  FiltersPanel
       1030  bootstrap .fixed-top
+       101  URTable tabletip
        100  Node/EdgeTable thead
         15  NCAutoSuggest .matchlist
         15  NCNode .ncedge
@@ -118,4 +119,5 @@ button svg {
   left: 1px;
   right: 10px;
   background-color: #eafcff;
+  font-size: 0.75em;
 }
diff --git a/app/view/netcreate/comment-mgr.js b/app/view/netcreate/comment-mgr.js
index d1b62e026..7d3ea32b8 100644
--- a/app/view/netcreate/comment-mgr.js
+++ b/app/view/netcreate/comment-mgr.js
@@ -23,6 +23,8 @@ const SETTINGS = require('settings');
 const DBG = true;
 const PR = 'comment-mgr: ';
 
+const CMTBTNOFFSET = 10;
+
 /// INITIALIZE MODULE /////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 let MOD = UNISYS.NewModule(module.id);
@@ -78,103 +80,45 @@ MOD.Hook('APP_READY', function (info) {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.LoadDB = data => {
   const TEMPLATE = UDATA.AppState('TEMPLATE');
-  COMMENT.LoadTemplate(TEMPLATE.COMMENTTYPES);
+  COMMENT.LoadTemplate(TEMPLATE.commentTypes);
   COMMENT.LoadDB(data);
+
+  // After loading db, derive the view objects
+  // This is needed to force update of the project comment count
+  const uid = MOD.GetCurrentUserId();
+  COMMENT.DeriveAllThreadedViewObjects(uid);
+  const COMMENTCOLLECTION = COMMENT.GetCommentCollections();
+  UDATA.SetAppState('COMMENTCOLLECTION', COMMENTCOLLECTION);
 };
 
 /// HELPER FUNCTIONS //////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
-MOD.COMMENTICON = (
-  <svg id="comment-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42">
-    <path d="M21,0C9.4,0,0,9.4,0,21c0,4.12,1.21,7.96,3.26,11.2l-2.26,9.8,11.56-1.78c2.58,1.14,5.44,1.78,8.44,1.78,11.6,0,21-9.4,21-21S32.6,0,21,0Z" />
-  </svg>
-);
 // From Evan O'Neil https://drive.google.com/drive/folders/1fJ5WiLMVQxxaqghrCOFwegmnYoOvst7E
-// NOTE viewbox is set to y=1 to better center the text
-MOD.ICN_COMMENT_UNREAD = (
-  <svg
-    id="icn-comment-unread"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 1 16 16"
-  >
-    <path
-      fill="#FFE143"
-      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 9.15705 1.28072 10.2485 1.77778 11.21V15H8Z"
-    />
-    <path
-      fill="#FFE143"
-      d="M3.17778 10.8696V13.6H8C11.0928 13.6 13.6 11.0928 13.6 8C13.6 4.90721 11.0928 2.4 8 2.4C4.90721 2.4 2.4 4.90721 2.4 8C2.4 8.92813 2.62469 9.79968 3.02143 10.5671L3.17778 10.8696Z"
-    />
-  </svg>
-);
-MOD.ICN_COMMENT_UNREAD_SELECTED = (
-  <svg
-    id="icn-comment-unread"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 1 16 16"
-  >
-    <path
-      fill="#D44127"
-      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 9.15705 1.28072 10.2485 1.77778 11.21V15H8Z"
-    />
-    <path
-      fill="#FFE143"
-      d="M3.17778 10.8696V13.6H8C11.0928 13.6 13.6 11.0928 13.6 8C13.6 4.90721 11.0928 2.4 8 2.4C4.90721 2.4 2.4 4.90721 2.4 8C2.4 8.92813 2.62469 9.79968 3.02143 10.5671L3.17778 10.8696Z"
-    />
-  </svg>
-);
-MOD.ICN_COMMENT_READ = (
-  <svg
-    id="icn-comment-unread"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 1 16 16"
-  >
-    <path
-      fill="#696969"
-      d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 9.15705 1.28072 10.2485 1.77778 11.21V15H8Z"
-    />
-    <path
-      fill="#696969"
-      d="M3.17778 10.8696V13.6H8C11.0928 13.6 13.6 11.0928 13.6 8C13.6 4.90721 11.0928 2.4 8 2.4C4.90721 2.4 2.4 4.90721 2.4 8C2.4 8.92813 2.62469 9.79968 3.02143 10.5671L3.17778 10.8696Z"
-    />
-  </svg>
-);
-MOD.ICN_COMMENT_READ_SELECTED = (
-  <svg
-    id="icn-comment-unread"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 1 16 16"
-  >
+MOD.COMMENTICON = (
+  <g transform="matrix(1.6,0,0,1.6,4,0)">
     <path
-      fill="#D44127"
+      className="svg-fill"
       d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 9.15705 1.28072 10.2485 1.77778 11.21V15H8Z"
-    />
+    ></path>
     <path
-      fill="#696969"
-      d="M3.17778 10.8696V13.6H8C11.0928 13.6 13.6 11.0928 13.6 8C13.6 4.90721 11.0928 2.4 8 2.4C4.90721 2.4 2.4 4.90721 2.4 8C2.4 8.92813 2.62469 9.79968 3.02143 10.5671L3.17778 10.8696Z"
-    />
-  </svg>
+      className="svg-outline"
+      d="M3.17778 10.8696V13.6H8C11.0928 13.6 13.6 11.0928 13.6 8C13.6 4.90721 11.0928 2.4 8 2.4C4.90721 2.4 2.4 4.90721 2.4 8C2.4 8.92813 2.62469 9.79968 3.02143 10.5671L3.17778 10.8696ZM15 8C15 11.866 11.866 15 8 15H1.77778V11.21C1.28072 10.2485 1 9.15705 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z"
+    ></path>
+    <path fill="none" d="M0 0h24v24H0z"></path>
+  </g>
 );
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_SetAppStateCommentCollections() {
   const COMMENTCOLLECTION = COMMENT.GetCommentCollections();
   UDATA.SetAppState('COMMENTCOLLECTION', COMMENTCOLLECTION);
 }
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_SetAppStateCommentVObjs() {
   const COMMENTVOBJS = COMMENT.GetCOMMENTVOBJS();
   UDATA.SetAppState('COMMENTVOBJS', COMMENTVOBJS);
 }
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_UpdateComment(comment) {
   const cobj = {
     collection_ref: comment.collection_ref,
@@ -191,17 +135,17 @@ function m_UpdateComment(comment) {
   const uid = MOD.GetCurrentUserId();
   COMMENT.UpdateComment(cobj, uid);
 }
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_UpdatePermissions(data) {
   UDATA.NetCall('SRV_GET_EDIT_STATUS').then(data => {
     // disable comment button if someone is editing a comment
     UDATA.LocalCall('COMMENT_UPDATE_PERMISSIONS', data);
   });
 }
+
 /// API METHODS ///////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// CONSTANTS
 MOD.VIEWMODE = NCUI.VIEWMODE;
 
@@ -213,12 +157,13 @@ MOD.GetEdgeCREF = edgeId => `e${edgeId}`;
 MOD.GetProjectCREF = projectId => `p${projectId}`;
 
 /// deconstructs "n32" into {type: "n", id: 32}
-MOD.DeconstructCref = cref => {
+MOD.DeconstructCREF = cref => {
   const type = cref.substring(0, 1);
   const id = cref.substring(1);
   return { type, id };
 };
 
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Generate a human friendly label based on the cref (e.g. `n21`, `e4`)
  * e.g. "n32" becomes {typeLabel "Node", sourceLabel: "32"}
@@ -226,7 +171,7 @@ MOD.DeconstructCref = cref => {
  * @returns { typeLabel, sourceLabel } sourceLabel is undefined if the source has been deleted
  */
 MOD.GetCREFSourceLabel = cref => {
-  const { type, id } = MOD.DeconstructCref(cref);
+  const { type, id } = MOD.DeconstructCREF(cref);
   let typeLabel;
   let node, edge, nodes, sourceNode, targetNode;
   let sourceLabel; // undefined if not found
@@ -248,17 +193,54 @@ MOD.GetCREFSourceLabel = cref => {
         sourceLabel = `${sourceNode.label}${ARROW_RIGHT}${targetNode.label}`;
       break;
     case 'p':
-      typeLabel = 'Project';
+      typeLabel = 'Project'; // reserve for future use
       sourceLabel = id;
       break;
   }
   return { typeLabel, sourceLabel };
 };
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * Returns the position for the comment button
+ * Adjusting for window position is done via GetCommentCollectionPosition
+ */
+MOD.GetCommentBtnPosition = cref => {
+  const btn = document.getElementById(cref);
+  if (!btn)
+    throw new Error(`${PR}GetCommentCollectionPosition: Button not found ${cref}`);
+  const bbox = btn.getBoundingClientRect();
+  return { x: bbox.left, y: bbox.top };
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * Returns the comment window position for the comment button
+ * shifting the window to the left if it's too close to the edge of the screen.
+ * or shifting it up if it's too close to the bottom of the screen.
+ * x,y is the position of the comment button, offsets are then caclulated
+ */
+MOD.GetCommentCollectionPosition = ({ x, y }, isExpanded) => {
+  const windowWidth = Math.min(screen.width, window.innerWidth);
+  const windowHeight = Math.min(screen.height, window.innerHeight);
+  let newX;
+  if (windowWidth - x < 500) {
+    newX = x - 410;
+  } else {
+    newX = x + CMTBTNOFFSET * 2;
+  }
+  let newY = y + window.scrollY;
+  if (windowHeight - y < 250) {
+    if (isExpanded) newY = y - 250;
+    else newY = y - 150;
+  } else {
+    newY = y - CMTBTNOFFSET;
+  }
+  return { x: newX, y: newY };
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// Open the object that the comment refers to
 /// e.g. in Net.Create it's a node or edge object
 MOD.OpenReferent = cref => {
-  const { type, id } = MOD.DeconstructCref(cref);
+  const { type, id } = MOD.DeconstructCREF(cref);
   let edge;
   switch (type) {
     case 'n':
@@ -270,15 +252,15 @@ MOD.OpenReferent = cref => {
         UDATA.LocalCall('EDGE_SELECT', { edgeId: edge.id });
       });
       break;
-    case 'p':
+    case 'p': // reserve for future use
       // do something?
       break;
   }
 };
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// Open comment using a comment id
 MOD.OpenComment = (cref, cid) => {
-  const { type, id } = MOD.DeconstructCref(cref);
+  const { type, id } = MOD.DeconstructCREF(cref);
   let edge;
   switch (type) {
     case 'n':
@@ -300,7 +282,7 @@ MOD.OpenComment = (cref, cid) => {
         });
       });
       break;
-    case 'p':
+    case 'p': // reserve for future use
       // do something?
       break;
   }
@@ -342,44 +324,178 @@ MOD.MarkAllRead = () => {
   m_SetAppStateCommentCollections();
 };
 
+/// COMMENT COLLECTIONS ///////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// Comment Collections
 MOD.GetCommentCollection = uiref => {
   return COMMENT.GetCommentCollection(uiref);
 };
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-MOD.OpenCommentCollection = (uiref, cref, position) => {
-  MOD.UpdateCommentUIState(uiref, { cref, isOpen: true });
-  UDATA.LocalCall('CTHREADMGR_THREAD_OPENED', { uiref, cref, position });
+/*
+  OpenCommentCollection
+
+  The requests come from four sources:
+    * Node Editor
+    * Edge Editor
+    * Node Table
+    * Edge Table
+
+  URCommentVBtn is a UI component that passes clicks
+  to URCommentCollectionMgr via UR.Publish(`CMT_COLLECTION_SHOW`) calls
+
+  URCommentSVGBtn is a purely visual component that renders SVG buttons
+  as symbols and displays the comment count and selection status.
+  It pases the click events to URCommentVBtn.
+
+  MAP
+    * URCommentStatus
+      > URCommentCollectionMgr
+        > URCommentThread
+          > URCommentVBtn
+            > URCommentSVGBtn
+
+
+  HOW IT WORKS
+  When a Node Editor, Edge Editor, Node Table, or Edge Table clicks on the
+  URCommentVBtn, URCommentCollectionMgr will:
+  * Add the requested Thread to the URCommentCollectionMgr
+  * Open the URCommentThread
+  * When the URCommentThread is closed, it will be removed from the URCommentCollectionMgr
+
+*/
+MOD.OpenCommentCollection = (cref, position) => {
+  // Validate
+  if (cref === undefined)
+    throw new Error(
+      `comment-mgr.OpenCommentCollection: missing cref data ${JSON.stringify(cref)}`
+    );
+  if (position === undefined || position.x === undefined || position.y === undefined)
+    throw new Error(
+      `comment-mgr.OpenCommentCollection: missing position data ${JSON.stringify(
+        position
+      )}`
+    );
+  position.x = parseInt(position.x); // handle net call data
+  position.y = parseInt(position.y);
+  // 0. If the comment is already open, do nothing
+  const openComments = MOD.GetOpenComments(cref);
+  if (openComments) {
+    MOD.CloseCommentCollection(cref, cref, MOD.GetCurrentUserId());
+    return; // already open, close it
+  }
+  // 1. Position the window to the right of the click
+  const commentThreadWindowIsExpanded = MOD.GetCommentCollectionCount(cref);
+  const collectionPosition = MOD.GetCommentCollectionPosition(
+    position,
+    commentThreadWindowIsExpanded
+  );
+
+  // 2. Update the state
+  MOD.UpdateCommentUIState(cref, { cref, isOpen: true });
+  // 3. Open the collection in the collection manager
+  UDATA.LocalCall('CMT_COLLECTION_SHOW', { cref, position: collectionPosition });
 };
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
- * Used by NCNodeTable and NCEdgeTable to open/close the comment thread
- * If a comment is already opened by one button (e.g. node), and the user
- * clicks on another comment button (e.g. NodeTable), the new one will open,
- * and the old one closed.
- * Called by URCommentBtn, NCNodeTable, and NCEdgeTable
- * @param {TCommentUIRef} uiref comment button id
- * @param {TCollectionRef} cref collection_ref
- * @param {Object} position x, y position of the comment button
+ * Called by URCommentVBtn
+ * @param {string} cref
  */
-MOD.ToggleCommentCollection = (uiref, cref, position) => {
-  const uid = MOD.GetCurrentUserId();
-  // is the comment already open?
-  const open_uiref = MOD.GetOpenComments(cref);
-  if (open_uiref === uiref) {
-    // already opened by THIS uiref, so toggle it closed.
-    MOD.CloseCommentCollection(uiref, cref, uid);
-  } else if (open_uiref !== undefined) {
-    // already opened by SOMEONE ELSE, so close it, then open the new one
-    MOD.CloseCommentCollection(open_uiref, cref, uid);
-    MOD.OpenCommentCollection(uiref, cref, position);
-  } else {
-    // no comment is open, so open the new one
-    MOD.OpenCommentCollection(uiref, cref, position);
+MOD.OpenCommentCollectionByCref = cref => {
+  const cmtPosition = MOD.GetCommentBtnPosition(cref);
+  MOD.OpenCommentCollection(cref, {
+    x: cmtPosition.x + CMTBTNOFFSET,
+    y: cmtPosition.y + CMTBTNOFFSET
+  });
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/// Open comment inside a collection using a comment id
+/// NOTE this is NOT used by SVGButtons
+MOD.OpenCommentStatusComment = (cref, cid) => {
+  const { type, id } = MOD.DeconstructCREF(cref);
+  let parms;
+
+  // if a comment is being edited...
+  // - don't close all comments
+  // - don't open a new one
+  if (MOD.GetCommentsAreBeingEdited()) {
+    UR.Publish('DIALOG_OPEN', {
+      text: `Please finish editing your comment before opening a different comment!`
+    });
+    return;
+  }
+
+  MOD.CloseAllCommentCollectionsWithoutMarkingRead();
+
+  let edge;
+  switch (type) {
+    case 'p': // project (from MEME, currently not used) reserved for future use
+      MOD.OpenCommentCollectionByCref('projectcmt');
+      break;
+    case 'n':
+      UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [parseInt(id)] }).then(() => {
+        MOD.OpenCommentCollectionByCref(cref);
+        // wait for the comment to open before scrolling to the current comment
+        // REVIEW: Do this as a callback?
+        //         Problem is that this is a long chain for the callback
+        //         - OpenCommentCollectionByCref
+        //         - OpenCommentCollection
+        //         - UpdateCommentUIState
+        //         - m_SetAppStateCommentCollections
+        //         - UDATA.SetAppState('COMMENTCOLLECTION)
+        setTimeout(() => {
+          const commentEl = document.getElementById(cid);
+          commentEl.scrollIntoView({ behavior: 'smooth' });
+        }, 100);
+      });
+      break;
+    case 'e':
+      edge = UDATA.AppState('NCDATA').edges.find(e => e.id === Number(id));
+      UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [edge.source] }).then(() => {
+        UDATA.LocalCall('EDGE_SELECT', { edgeId: edge.id }).then(() => {
+          MOD.OpenCommentCollectionByCref(cref);
+          // wait for the comment to open before scrolling to the current comment
+          // REVIEW: Do this as a callback?
+          setTimeout(() => {
+            const commentEl = document.getElementById(cid);
+            commentEl.scrollIntoView({ behavior: 'smooth' });
+          });
+        });
+      });
+      break;
   }
 };
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/// DEPRECATED -- URCommentVBtn handles this currently
+///               But we might want to restore the ability to toggle in place.
+// /**
+//  * Used by NCNodeTable and NCEdgeTable to open/close the comment thread
+//  * If a comment is already opened by one button (e.g. node), and the user
+//  * clicks on another comment button (e.g. NodeTable), the new one will open,
+//  * and the old one closed.
+//  * Called by URCommentBtn, NCNodeTable, and NCEdgeTable
+//  * @param {TCommentUIRef} uiref comment button id
+//  * @param {TCollectionRef} cref collection_ref
+//  * @param {Object} position x, y position of the comment button
+//  */
+// MOD.ToggleCommentCollection = (uiref, cref, position) => {
+//   const uid = MOD.GetCurrentUserId();
+//   // is the comment already open?
+//   const open_uiref = MOD.GetOpenComments(cref);
+//   if (open_uiref === uiref) {
+//     // already opened by THIS uiref, so toggle it closed.
+//     MOD.CloseCommentCollection(uiref, cref, uid);
+//   } else if (open_uiref !== undefined) {
+//     // already opened by SOMEONE ELSE, so close it, then open the new one
+//     MOD.CloseCommentCollection(open_uiref, cref, uid);
+//     // REVIEW remove uiref?
+//     MOD.OpenCommentCollection(uiref, cref, position);
+//   } else {
+//     // no comment is open, so open the new one
+//     // REVIEW remove uiref?
+//     MOD.OpenCommentCollection(uiref, cref, position);
+//   }
+// };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Marks a comment as read, and closes the component.
  * Called by NCCommentBtn when clicking "Close"
@@ -396,11 +512,49 @@ MOD.CloseCommentCollection = (uiref, cref, uid) => {
     return;
   }
   // OK to close
+  UDATA.LocalCall('CMT_COLLECTION_HIDE', { cref });
+  COMMENT.CloseCommentCollection(uiref, cref, uid);
+  m_SetAppStateCommentCollections();
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * Marks a comment as read, and closes the component.
+ * Called by NCCommentBtn when clicking "Close"
+ * @param {Object} uiref comment button id (note kept for Net.Create compatibility)
+ * @param {Object} cref collection_ref
+ * @param {Object} uid user id
+ */
+MOD.CloseCommentCollectionAndMarkRead = (uiref, cref, uid) => {
+  if (!MOD.OKtoClose(cref)) {
+    // Comment is still being edited, prevent close
+    alert(
+      'This comment is still being edited!  Please Save or Cancel before closing the comment.'
+    );
+    return;
+  }
+  // OK to close
+  UDATA.LocalCall('CMT_COLLECTION_HIDE', { cref });
+  // Update the readby
   m_DBUpdateReadBy(cref, uid);
   COMMENT.CloseCommentCollection(uiref, cref, uid);
   m_SetAppStateCommentCollections();
-  // call to broadcast state AFTER derived state changes
-  UDATA.LocalCall('CTHREADMGR_THREAD_CLOSED', { cref });
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * Closes all comment collections without marking them as read.
+ * Used by comment status when user clicks on status updates to display
+ * updated comments.
+ * @param {*} uid
+ */
+MOD.CloseAllCommentCollectionsWithoutMarkingRead = () => {
+  const uid = MOD.GetCurrentUserId();
+  UDATA.LocalCall('CMT_COLLECTION_HIDE_ALL');
+  COMMENT.CloseAllCommentCollections(uid);
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+MOD.GetCommentCollectionCount = cref => {
+  const ccol = COMMENT.GetCommentCollection(cref);
+  return ccol ? ccol.commentCount : '';
 };
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.GetCommentStats = () => {
@@ -431,6 +585,7 @@ MOD.GetCommentThreadPosition = commentButtonId => {
 MOD.GetCommentUIState = uiref => {
   return COMMENT.GetCommentUIState(uiref);
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Used to open/close the comment thread
  * @param {string} uiref
@@ -446,8 +601,26 @@ MOD.UpdateCommentUIState = (uiref, openState) => {
 MOD.GetOpenComments = cref => COMMENT.GetOpenComments(cref);
 
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/// Editable Comments (comments being ddited)
+/// Editable Comments (comments being edited)
+MOD.RegisterCommentBeingEdited = cid => {
+  COMMENT.RegisterCommentBeingEdited(cid);
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+MOD.DeRegisterCommentBeingEdited = cid => {
+  return COMMENT.DeRegisterCommentBeingEdited(cid);
+};
+
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/// Are ANY comments being edited?
+/// Returns True if ANY comment is being edited
+/// * Used by comment status when user clicks on a comment id to view a saved comment
+///   to prevent closing the comment collection if a comment is being edited.
+/// * Also used by URCommentThread to determine whether "Click to add" is displayed
+MOD.GetCommentsAreBeingEdited = () => {
+  return COMMENT.GetCommentsAreBeingEdited();
+};
 
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.OKtoClose = cref => {
   const cvobjs = MOD.GetThreadedViewObjects(cref);
   let isBeingEdited = false;
@@ -462,9 +635,6 @@ MOD.OKtoClose = cref => {
 MOD.GetThreadedViewObjects = (cref, uid) => {
   return COMMENT.GetThreadedViewObjects(cref, uid);
 };
-MOD.GetThreadedViewObjectsCount = (cref, uid) => {
-  return COMMENT.GetThreadedViewObjectsCount(cref, uid);
-};
 
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// Comment View Objects
@@ -477,14 +647,16 @@ MOD.GetCommentVObj = (cref, cid) => {
 MOD.GetComment = cid => {
   return COMMENT.GetComment(cid);
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.GetUnreadRepliesToMe = uid => {
   return COMMENT.GetUnreadRepliesToMe(uid);
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.GetUnreadComments = () => {
   return COMMENT.GetUnreadComments();
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
- *
  * @param {Object} cobj Comment Object
  */
 MOD.AddComment = cobj => {
@@ -495,6 +667,34 @@ MOD.AddComment = cobj => {
     m_SetAppStateCommentVObjs();
   });
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** User clicks Edit on a comment
+ *  @param {TCommentID} comment_id
+ */
+MOD.UIEditComment = comment_id => {
+  MOD.RegisterCommentBeingEdited(comment_id);
+  MOD.LockComment(comment_id);
+  UDATA.NetCall('COMMENT_UPDATE_PERMISSIONS');
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** User clicks Cancel on a comment
+ *  @param {TCommentID} comment_id
+ */
+MOD.UICancelComment = comment_id => {
+  MOD.DeRegisterCommentBeingEdited(comment_id);
+  MOD.UnlockComment(comment_id);
+  UDATA.NetCall('COMMENT_UPDATE_PERMISSIONS');
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** User clicks Save coment
+ *  @param {TComment} cobj
+ */
+MOD.UISaveComment = cobj => {
+  MOD.UnlockComment(cobj.comment_id);
+  MOD.DeRegisterCommentBeingEdited(cobj.comment_id);
+  MOD.UpdateComment(cobj);
+};
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Update the ac/dc comments, then save it to the db
  * This will also broadcast COMMENT_UPDATE so other clients on the network
@@ -506,6 +706,7 @@ MOD.UpdateComment = cobj => {
   m_DBUpdateComment(cobj);
   m_SetAppStateCommentVObjs();
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Removing a comment can affect multiple comments, so this is done
  * via a batch operation.  We queue up all of the comment changes
@@ -515,42 +716,57 @@ MOD.UpdateComment = cobj => {
  *
  * Removing is a two step process:
  * 1. Show confirmation dialog
- * 2. Execute the remova
+ * 2. Execute the removal
+ *
+ * Also used by "Cancel" button to remove a comment being edited
  * @param {Object} parms
  * @param {string} parms.collection_ref
  * @param {string} parms.comment_id
+ * @param {string} parms.id
  * @param {string} parms.uid
+ * @param {boolean} parms.isAdmin
  * @param {boolean} parms.showCancelDialog
- * @param {function} cb CallBack
+ * @param {boolean} parms.skipDialog
  */
-MOD.RemoveComment = (parms, cb) => {
+MOD.RemoveComment = parms => {
   let confirmMessage, okmessage, cancelmessage;
   if (parms.showCancelDialog) {
     // Are you sure you want to cancel?
-    confirmMessage = `Are you sure you want to cancel editing this comment #${parms.comment_id}?`;
+    confirmMessage = `Are you sure you want to cancel editing this comment #${parms.id}?`;
     okmessage = 'Cancel Editing and Delete';
     cancelmessage = 'Go Back to Editing';
   } else {
+    // show delete confirmaiton dialog
     // Are you sure you want to delete?
     parms.isAdmin = SETTINGS.IsAdmin();
     confirmMessage = parms.isAdmin
-      ? `Are you sure you want to delete this comment #${parms.comment_id} and ALL related replies (admin only)?`
-      : `Are you sure you want to delete this comment #${parms.comment_id}?`;
+      ? `Are you sure you want to delete this comment #${parms.id} and ALL related replies (admin only)?`
+      : `Are you sure you want to delete this comment #${parms.id}?`;
     okmessage = 'Delete';
     cancelmessage = "Don't Delete";
   }
-  const dialog = (
-    <NCDialog
-      message={confirmMessage}
-      okmessage={okmessage}
-      onOK={event => m_ExecuteRemoveComment(event, parms, cb)}
-      cancelmessage={cancelmessage}
-      onCancel={m_CloseRemoveCommentDialog}
-    />
-  );
-  const container = document.getElementById(dialogContainerId);
-  ReactDOM.render(dialog, container);
+
+  const CMTSTATUS = UDATA.AppState('CMTSTATUS');
+  if (parms.skipDialog) {
+    m_ExecuteRemoveComment(event, parms);
+  } else {
+    CMTSTATUS.dialog = {
+      isOpen: true,
+      message: confirmMessage,
+      okmessage,
+      onOK: event => m_ExecuteRemoveComment(event, parms),
+      cancelmessage,
+      onCancel: m_CloseRemoveCommentDialog
+    };
+  }
+  UDATA.SetAppState('CMTSTATUS', CMTSTATUS);
+
+  MOD.DeRegisterCommentBeingEdited(parms.comment_id);
+  MOD.UnlockComment(parms.comment_id);
+
+  UDATA.LocalCall('COMMENT_UPDATE_PERMISSIONS');
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * The db call is made AFTER ac/dc handles the removal and the logic of
  * relinking comments.  The db call is dumb, all the logic is in dc-comments.
@@ -567,11 +783,13 @@ function m_ExecuteRemoveComment(event, parms, cb) {
   m_CloseRemoveCommentDialog();
   if (typeof cb === 'function') cb();
 }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_CloseRemoveCommentDialog() {
-  const container = document.getElementById(dialogContainerId);
-  ReactDOM.unmountComponentAtNode(container);
+  const CMTSTATUS = UDATA.AppState('CMTSTATUS');
+  CMTSTATUS.dialog = { isOpen: false };
+  UDATA.SetAppState('CMTSTATUS', CMTSTATUS);
 }
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Requested when a node/edge is deleted
  * @param {string} cref
@@ -586,7 +804,6 @@ MOD.RemoveAllCommentsForCref = cref => {
 
 /// EVENT HANDLERS ////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
 /**
  * Respond to network COMMENTS_UPDATE Messages
  * Usually used after a comment deletion to handle a batch of comment updates
@@ -621,6 +838,7 @@ MOD.HandleCOMMENTS_UPDATE = dataArray => {
   m_SetAppStateCommentCollections();
   m_SetAppStateCommentVObjs();
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Respond to COMMENT_UPDATE Messages from the network
  * After the server/db saves the new/updated comment, COMMENT_UPDATE is
@@ -632,12 +850,49 @@ MOD.HandleCOMMENTS_UPDATE = dataArray => {
  */
 MOD.HandleCOMMENT_UPDATE = data => {
   if (DBG) console.log('COMMENT_UPDATE======================', data);
-  const { comment } = data;
-  m_UpdateComment(comment);
-  // and broadcast a state change
-  m_SetAppStateCommentCollections();
-  m_SetAppStateCommentVObjs();
+
+  // If a new comment is sent over the network
+  // and the incoming comment conflicts with a comment being edited
+  // then re-link the editing comment to point to the incoming comment
+
+  const { comment: incomingComment } = data;
+  const editingCommentId = COMMENT.GetCommentsBeingEdited().values().next().value;
+  const editingComment = COMMENT.GetComment(editingCommentId);
+
+  if (editingComment) {
+    // conflict if both think they're the root
+    if (
+      incomingComment.comment_id_parent === '' &&
+      incomingComment.comment_id_previous === '' &&
+      editingComment.comment_id_parent === '' &&
+      editingComment.comment_id_previous === ''
+    ) {
+      if (DBG) console.error('CONFLICT! both think they are root');
+      // Re-link the comment to the incoming
+      editingComment.comment_id_previous = incomingComment.comment_id;
+    }
+    // conflict if previous of both are the same
+    if (incomingComment.comment_id_previous === editingComment.comment_id_previous) {
+      if (DBG) console.error('CONFLICT! both think they are reply to same previous');
+      // Re-link the comment to the incoming
+      editingComment.comment_id_previous = incomingComment.comment_id;
+    }
+    // conflict if parent of both are the same and previous are blank (new reply root)
+    if (
+      incomingComment.comment_id_parent === editingComment.comment_id_parent &&
+      incomingComment.comment_id_previous === '' &&
+      editingComment.comment_id_previous === ''
+    ) {
+      if (DBG) console.error('CONFLICT! both think they are reply to same parent');
+      // Re-link the comment to the incoming
+      editingComment.comment_id_previous = incomingComment.comment_id;
+    }
+  }
+
+  const updatedComments = [{ comment: incomingComment }, { comment: editingComment }];
+  MOD.HandleCOMMENTS_UPDATE(updatedComments);
 };
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 MOD.HandleREADBY_UPDATE = data => {
   if (DBG) console.log('READBY_UPDATE======================');
   // Not used currently
@@ -664,7 +919,7 @@ MOD.UnlockComment = comment_id => {
     UDATA.LocalCall('SELECTMGR_SET_MODE', { mode: 'normal' });
   });
 };
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_DBUpdateComment(cobj, cb) {
   const comment = {
     collection_ref: cobj.collection_ref,
@@ -682,6 +937,7 @@ function m_DBUpdateComment(cobj, cb) {
     if (typeof cb === 'function') cb(data);
   });
 }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_DBUpdateReadBy(cref, uid) {
   // Get existing readby
   const cvobjs = COMMENT.GetThreadedViewObjects(cref, uid);
@@ -700,6 +956,7 @@ function m_DBUpdateReadBy(cref, uid) {
     if (typeof cb === 'function') cb(data);
   });
 }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * Executes multiple database operations via a batch of commands:
  * - `cobjs` will be updated
diff --git a/app/view/netcreate/components/InfoPanel.jsx b/app/view/netcreate/components/InfoPanel.jsx
index 1994bcc84..c08bf9da3 100644
--- a/app/view/netcreate/components/InfoPanel.jsx
+++ b/app/view/netcreate/components/InfoPanel.jsx
@@ -19,8 +19,8 @@ const React = require('react');
 const ReactStrap = require('reactstrap');
 const { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col, Button } = ReactStrap;
 const classnames = require('classnames');
-const NCNodeTable = require('./NCNodeTable');
-const NCEdgeTable = require('./NCEdgeTable');
+import NCNodeTable from './NCNodeTable';
+import NCEdgeTable from './NCEdgeTable';
 const More = require('./More');
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
diff --git a/app/view/netcreate/components/NCEdge.jsx b/app/view/netcreate/components/NCEdge.jsx
index 62116be2b..f771b0b89 100644
--- a/app/view/netcreate/components/NCEdge.jsx
+++ b/app/view/netcreate/components/NCEdge.jsx
@@ -38,7 +38,7 @@ const NCAutoSuggest = require('./NCAutoSuggest');
 const NCDialog = require('./NCDialog');
 const NCDialogCitation = require('./NCDialogCitation');
 const SETTINGS = require('settings');
-import URCommentBtn from './URCommentBtn';
+import URCommentVBtn from './URCommentVBtn';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -176,8 +176,8 @@ class NCEdge extends UNISYS.Component {
       sourceId: null,
       targetId: null,
       type: '',
-      attributes: [],
-      provenance: [],
+      attributes: {},
+      provenance: {},
       created: undefined,
       updated: undefined,
       revision: 0,
@@ -262,14 +262,22 @@ class NCEdge extends UNISYS.Component {
   SetPermissions(data) {
     const { id } = this.state;
     const edgeIsLocked = data.lockedEdges.includes(id);
-    this.setState(
-      {
-        uIsLockedByDB: edgeIsLocked,
-        uIsLockedByTemplate: data.templateBeingEdited,
-        uIsLockedByImport: data.importActive
-      },
-      () => this.UpdatePermissions()
-    );
+
+    // skip updates if there are no changes in values to optimize renders
+    const newState = {
+      uIsLockedByDB: edgeIsLocked,
+      uIsLockedByTemplate: data.templateBeingEdited,
+      uIsLockedByImport: data.importActive
+    };
+    if (
+      newState.uIsLockedByDB === this.state.uIsLockedByDB &&
+      newState.uIsLockedByTemplate === this.state.uIsLockedByTemplate &&
+      newState.uIsLockedByImport === this.state.uIsLockedByImport
+    ) {
+      return;
+    }
+
+    this.setState(newState, () => this.UpdatePermissions());
   }
   UpdatePermissions() {
     const { uIsLockedByDB, uIsLockedByTemplate, uIsLockedByImport } = this.state;
@@ -817,8 +825,7 @@ class NCEdge extends UNISYS.Component {
   UIDisableEditMode() {
     this.UnlockEdge(() => {
       this.setState({
-        uViewMode: NCUI.VIEWMODE.VIEW,
-        uIsLockedByDB: false
+        uViewMode: NCUI.VIEWMODE.VIEW
       });
 
       // Clear the secondary selection
@@ -940,7 +947,7 @@ class NCEdge extends UNISYS.Component {
           <div className="titlebar" style={{ marginBottom: '3px' }}>
             <div className="nodenumber">EDGE {id} </div>
             <div></div>
-            <URCommentBtn cref={collection_ref} />
+            <URCommentVBtn cref={collection_ref} />
           </div>
           <div className="formview">
             {NCUI.RenderLabel('source', defs['source'].displayLabel)}
diff --git a/app/view/netcreate/components/NCEdgeTable.jsx b/app/view/netcreate/components/NCEdgeTable.jsx
index d4d8a0948..f2917dead 100644
--- a/app/view/netcreate/components/NCEdgeTable.jsx
+++ b/app/view/netcreate/components/NCEdgeTable.jsx
@@ -4,227 +4,96 @@
 
     EdgeTable is used to to display a table of edges for review.
 
-    It displays NCDATA.
-    But also read FILTEREDNCDATA to show highlight/filtered state
+    It checks FILTEREDNCDATA to show highlight/filtered state
 
+    It uses URTable for rendering and sorting.
 
   ## PROPS
 
     * tableHeight -- sets height based on InfoPanel dragger
     * isOpen -- whether the table is visible
 
-
   ## TO USE
 
     EdgeTable is self contained and relies on global NCDATA to load.
 
       <EdgeTable tableHeight isOpen />
 
-
-    Set `DBG` to true to show the `ID` column.
-
-  ## 2018-12-07 Update
-
-    Since we're not using tab navigation:
-    1. The table isExpanded is now true by default.
-    2. The "Show/Hide Table" button is hidden.
-
-    Reset these to restore previous behavior.
-
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
-const React = require('react');
-const NCUI = require('../nc-ui');
-const CMTMGR = require('../comment-mgr');
-const FILTER = require('./filter/FilterEnums');
-const UNISYS = require('unisys/client');
-import HDATE from 'system/util/hdate';
-import URCommentVBtn from './URCommentVBtn';
+import React, { useState, useEffect } from 'react';
+import UNISYS from 'unisys/client';
+import NCUI from '../nc-ui';
+import UTILS from '../nc-utils';
+import FILTER from './filter/FilterEnums';
+import CMTMGR from '../comment-mgr';
+
 import URTable from './URTable';
-const { BUILTIN_FIELDS_EDGE } = require('system/util/enum');
-const { ICON_PENCIL, ICON_VIEW } = require('system/util/constant');
+import URCommentVBtn from './URCommentVBtn';
+
+import { BUILTIN_FIELDS_EDGE } from 'system/util/enum';
+import { ICON_PENCIL, ICON_VIEW } from 'system/util/constant';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-const DBG = false;
-var UDATA = null;
+/// Initialize UNISYS DATA LINK for functional react component
+const UDATAOwner = { name: 'NCEdgeTable' };
+const UDATA = UNISYS.NewDataLink(UDATAOwner);
 
-/// UTILITY METHODS ///////////////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-function u_GetButtonId(cref) {
-  return `table-comment-button-${cref}`;
-}
+const DBG = false;
 
-/// REACT COMPONENT ///////////////////////////////////////////////////////////
+/// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/// export a class object for consumption by brunch/require
-class NCEdgeTable extends UNISYS.Component {
-  constructor(props) {
-    super(props);
+function NCEdgeTable({ tableHeight, isOpen }) {
+  const [state, setState] = useState({});
 
-    const TEMPLATE = this.AppState('TEMPLATE');
-    this.state = {
+  /// USEEFFECT ///////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  useEffect(() => {
+    const TEMPLATE = UDATA.AppState('TEMPLATE');
+    const SESSION = UDATA.AppState('SESSION');
+    setState({
       edgeDefs: TEMPLATE.edgeDefs,
       edges: [],
-      selectedEdgeId: undefined,
-      selectedEdgeColor: TEMPLATE.sourceColor,
       nodes: [], // needed for dereferencing source/target
       disableEdit: false,
-      isLocked: false,
-      isExpanded: true,
-      sortkey: 'Relationship',
-      dummy: 0, // used to force render update
+      isLocked: !SESSION.isValid
+    });
 
-      COLUMNDEFS: []
+    UDATA.OnAppStateChange('FILTEREDNCDATA', urstate_FILTEREDNCDATA);
+    UDATA.OnAppStateChange('SESSION', urstate_SESSION);
+    UDATA.OnAppStateChange('TEMPLATE', urstate_TEMPLATE);
+    return () => {
+      UDATA.AppStateChangeOff('FILTEREDNCDATA', urstate_FILTEREDNCDATA);
+      UDATA.AppStateChangeOff('SESSION', urstate_SESSION);
+      UDATA.AppStateChangeOff('TEMPLATE', urstate_TEMPLATE);
     };
+  }, []);
 
-    this.onUpdateCommentUI = this.onUpdateCommentUI.bind(this);
-    this.onStateChange_SESSION = this.onStateChange_SESSION.bind(this);
-    this.onStateChange_SELECTION = this.onStateChange_SELECTION.bind(this);
-    this.onEDGE_OPEN = this.onEDGE_OPEN.bind(this);
-    this.deriveFilteredEdges = this.deriveFilteredEdges.bind(this);
-    this.updateEdgeFilterState = this.updateEdgeFilterState.bind(this);
-    this.onStateChange_NCDATA = this.onStateChange_NCDATA.bind(this);
-    this.onStateChange_FILTEREDNCDATA = this.onStateChange_FILTEREDNCDATA.bind(this);
-    this.urmsg_EDIT_PERMISSIONS_UPDATE =
-      this.urmsg_EDIT_PERMISSIONS_UPDATE.bind(this);
-    this.onStateChange_TEMPLATE = this.onStateChange_TEMPLATE.bind(this);
-    this.onViewButtonClick = this.onViewButtonClick.bind(this);
-    this.onEditButtonClick = this.onEditButtonClick.bind(this);
-    this.onToggleExpanded = this.onToggleExpanded.bind(this);
-    this.onHighlightNode = this.onHighlightNode.bind(this);
-    this.m_FindMatchingObjsByProp = this.m_FindMatchingObjsByProp.bind(this);
-    this.m_FindMatchingEdgeByProp = this.m_FindMatchingEdgeByProp.bind(this);
-    this.m_FindEdgeById = this.m_FindEdgeById.bind(this);
-    this.lookupNodeLabel = this.lookupNodeLabel.bind(this);
-
-    this.SetColumnDefs = this.SetColumnDefs.bind(this);
-
-    this.sortDirection = 1;
-
-    /// Initialize UNISYS DATA LINK for REACT
-    UDATA = UNISYS.NewDataLink(this);
-
-    UDATA.HandleMessage('EDGE_OPEN', this.onEDGE_OPEN);
-    UDATA.HandleMessage(
-      'EDIT_PERMISSIONS_UPDATE',
-      this.urmsg_EDIT_PERMISSIONS_UPDATE
-    );
-
-    // SESSION is called by SessionSHell when the ID changes
-    //  set system-wide. data: { classId, projId, hashedId, groupId, isValid }
-    this.OnAppStateChange('SESSION', this.onStateChange_SESSION);
-
-    // Always make sure class methods are bind()'d before using them
-    // as a handler, otherwise object context is lost
-    this.OnAppStateChange('NCDATA', this.onStateChange_NCDATA);
-
-    // Handle Template updates
-    this.OnAppStateChange('TEMPLATE', this.onStateChange_TEMPLATE);
-
-    // Track Filtered Data Updates too
-    this.OnAppStateChange('FILTEREDNCDATA', this.onStateChange_FILTEREDNCDATA);
-
-    this.OnAppStateChange('SELECTION', this.onStateChange_SELECTION);
-
-    // Comment Message Handlers
-    // Force update whenever threads are opened or closed
-    UDATA.HandleMessage('CTHREADMGR_THREAD_OPENED', this.onUpdateCommentUI);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED', this.onUpdateCommentUI);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', this.onUpdateCommentUI);
-  } // constructor
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  componentDidMount() {
-    if (DBG) console.log('EdgeTable.componentDidMount!');
-
-    this.onStateChange_SESSION(this.AppState('SESSION'));
-
-    // Explicitly retrieve data because we may not have gotten a NCDATA
-    // update while we were hidden.
-    let NCDATA = this.AppState('NCDATA');
-    this.onStateChange_NCDATA(NCDATA);
-
-    const COLUMNDEFS = this.SetColumnDefs();
-    this.setState({ COLUMNDEFS });
-  }
-
-  componentWillUnmount() {
-    UDATA.UnhandleMessage('EDGE_OPEN', this.onEDGE_OPEN);
-    UDATA.UnhandleMessage(
-      'EDIT_PERMISSIONS_UPDATE',
-      this.urmsg_EDIT_PERMISSIONS_UPDATE
-    );
-    this.AppStateChangeOff('SESSION', this.onStateChange_SESSION);
-    this.AppStateChangeOff('NCDATA', this.onStateChange_NCDATA);
-    this.AppStateChangeOff('FILTEREDNCDATA', this.onStateChange_FILTEREDNCDATA);
-    this.AppStateChangeOff('TEMPLATE', this.onStateChange_TEMPLATE);
-    this.AppStateChangeOff('SELECTION', this.onStateChange_SELECTION);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_OPENED', this.onUpdateCommentUI);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED', this.onUpdateCommentUI);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', this.onUpdateCommentUI);
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Force update so that URCommentVBtn selection state is updated
-  onUpdateCommentUI(data) {
-    this.setState({ dummy: this.state.dummy + 1 });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  onStateChange_SELECTION(data) {
-    if (data === undefined) return;
-
-    const selectedEdgeId = data.edges.length > 0 ? data.edges[0].id : undefined;
-    if (selectedEdgeId === this.state.selectedEdgeId) {
-      return;
-    }
-    this.setState({ selectedEdgeId });
-  }
-  /** Handle change in SESSION data
-    Called both by componentWillMount() and AppStateChange handler.
-    The 'SESSION' state change is triggered in two places in SessionShell during
-    its handleChange() when active typing is occuring, and also during
-    SessionShell.componentWillMount()
-   */
-  onStateChange_SESSION(decoded) {
-    const isLocked = !decoded.isValid;
-    if (isLocked === this.state.isLocked) {
-      return;
+  /// UR HANDLERS /////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urstate_FILTEREDNCDATA(data) {
+    if (data.edges) {
+      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
+      // also need to add back in edges that are not in filteredEdges
+      // (because "COLLAPSE" and "FOCUS" removes edges that are not matched)
+      const FILTERDEFS = UDATA.AppState('FILTERDEFS');
+      if (FILTERDEFS.filterAction === FILTER.ACTION.FADE) {
+        const NCDATA = UDATA.AppState('NCDATA');
+        m_updateEdgeFilterState(NCDATA.edges);
+      } else {
+        m_updateEdgeFilterState(data.edges);
+      }
     }
-    this.setState({ isLocked });
   }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  displayUpdated(nodeEdge) {
-    // Prevent error if `meta` info is not defined yet, or not properly imported
-    if (!nodeEdge.meta) return '';
-
-    var d = new Date(
-      nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created
-    );
-
-    var year = String(d.getFullYear());
-    var date = d.getMonth() + 1 + '/' + d.getDate() + '/' + year.substr(2, 4);
-    var time = d.toTimeString().substr(0, 5);
-    var dateTime = date + ' at ' + time;
-    var titleString = 'v' + nodeEdge.meta.revision;
-    if (nodeEdge._nlog)
-      titleString += ' by ' + nodeEdge._nlog[nodeEdge._nlog.length - 1];
-    var tag = <span title={titleString}> {dateTime} </span>;
-
-    return tag;
+  function m_updateEdgeFilterState(edges) {
+    const filteredEdges = m_deriveFilteredEdges(edges);
+    setState(prevState => ({ ...prevState, edges: filteredEdges }));
   }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// User selected edge usu by clicking NCNode's edge item in Edges tab
-  onEDGE_OPEN(data) {
-    this.setState({ selectedEdgeId: data.edge.id });
-  }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Set node filtered status based on current filteredNodes
-  deriveFilteredEdges(edges) {
+  function m_deriveFilteredEdges(edges) {
     // set filter status
     let filteredEdges = [];
     // If we're transitioning from "HILIGHT/FADE" to "COLLAPSE" or "FOCUS", then we
@@ -241,211 +110,46 @@ class NCEdgeTable extends UNISYS.Component {
       });
     } else {
       // Fade
-      // Fading is handled by setting node.filteredTransparency which is
+      // Fading is handled by setting edge.filteredTransparency which is
       // directly handled by the filter now.  So no need to process it
       // here in the table.
       filteredEdges = edges;
     }
-
+    // }
     return filteredEdges;
   }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Set edge filtered status based on current filteredNodes
-  updateEdgeFilterState(edges) {
-    const filteredEdges = this.deriveFilteredEdges(edges);
-    this.setState({ edges: filteredEdges });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Handle updated SELECTION: NCDATA updates
-   */
-  onStateChange_NCDATA(data) {
-    if (data && data.edges && data.nodes) {
-      // NCDATA.edges no longer uses source/target objects
-      // ...1. So we need to save nodes for dereferencing.
-      this.setState({ nodes: data.nodes }, () => {
-        // ...2. So we stuff 'sourceLabel' and 'targetLabel' into the local edges array
-        let edges = data.edges.map(e => {
-          e.sourceLabel = this.lookupNodeLabel(e.source); // requires `state.nodes` be set
-          e.targetLabel = this.lookupNodeLabel(e.target);
-          return e;
-        });
-        this.setState({ edges });
-        const { filteredEdges } = this.state;
-        this.updateEdgeFilterState(edges, filteredEdges);
-      });
-    }
-  }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Handle FILTEREDNCDATA updates sent by filters-logic.m_FiltersApply
-      Note that edge.soourceLabel and edge.targetLabel should already be set
-      by filter-mgr.
-   */
-  onStateChange_FILTEREDNCDATA(data) {
-    if (data.edges) {
-      const filteredEdges = data.edges;
-      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
-      // also need to add back in edges that are not in filteredEdges
-      // (because "COLLAPSE" and "FOCUS" removes edges that are not matched)
-      const FILTERDEFS = UDATA.AppState('FILTERDEFS');
-      if (FILTERDEFS.filterAction === FILTER.ACTION.FADE) {
-        const NCDATA = UDATA.AppState('NCDATA');
-        this.setState(
-          {
-            edges: NCDATA.edges,
-            filteredEdges
-          },
-          () => {
-            const edges = NCDATA.edges;
-            this.updateEdgeFilterState(edges, filteredEdges);
-          }
-        );
-      } else {
-        this.setState(
-          {
-            edges: filteredEdges,
-            filteredEdges
-          },
-          () => {
-            const edges = filteredEdges;
-            this.updateEdgeFilterState(edges, filteredEdges);
-          }
-        );
-      }
+  function urstate_SESSION(decoded) {
+    const isLocked = !decoded.isValid;
+    if (isLocked === this.state.isLocked) {
+      return;
     }
+    setState(prevState => ({ ...prevState, isLocked }));
   }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  urmsg_EDIT_PERMISSIONS_UPDATE() {
-    // Update COLUMNDEFS after permissions update so disabledState is shown
-    const cb = () => {
-      // Update COLUMNDEFS to update buttons
-      const COLUMNDEFS = this.SetColumnDefs();
-      this.setState({ COLUMNDEFS });
-    };
-    this.updateEditState(cb);
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Disable edit if someone else is editing a template
-  updateEditState(cb) {
-    // disable edit if someone else is editing a template, node, or edge
-    let disableEdit = false;
-    UDATA.NetCall('SRV_GET_EDIT_STATUS').then(data => {
-      // someone else might be editing a template or importing or editing node or edge
-      disableEdit = data.templateBeingEdited || data.importActive;
-      // REVIEW: Only disableEdit if template is being updated, otherwise allow edits
-      // || data.nodeOrEdgeBeingEdited ||
-      // REVIEW: commentBeingEditedByMe shouldn't affect table?
-      // data.commentBeingEditedByMe; // only lock out if this user is the one editing comments, allow network commen edits
-
-      // optimize, skip render if no change
-      if (disableEdit === this.state.disableEdit) {
-        return;
-      }
-
-      this.setState({ disableEdit }, () => {
-        if (typeof cb === 'function') cb();
-      });
-    });
-  }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  onStateChange_TEMPLATE(data) {
-    const COLUMNDEFS = this.SetColumnDefs(data.edgeDefs);
-    this.setState({
+  function urstate_TEMPLATE(data) {
+    setState(prevState => ({
+      ...prevState,
       edgeDefs: data.edgeDefs,
-      selectedEdgeColor: data.sourceColor,
-      COLUMNDEFS
-    });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Look up the Node label for source / target ids
-   */
-  lookupNodeLabel(nodeId) {
-    const node = this.state.nodes.find(n => n.id === nodeId);
-    if (node === undefined) return '...';
-    // if (node === undefined) throw new Error('EdgeTable: Could not find node', nodeId);
-    return node.label;
-  }
-
-  /// UI EVENT HANDLERS /////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  onViewButtonClick(event, edgeId) {
-    event.preventDefault();
-    event.stopPropagation();
-    let edgeID = parseInt(edgeId);
-    let edge = this.m_FindEdgeById(edgeID);
-    if (DBG) console.log('EdgeTable: Edge id', edge.id, 'selected for viewing');
-    // Load Source Node then Edge
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [edge.source] }).then(() => {
-      UDATA.LocalCall('EDGE_SELECT', { edgeId: edge.id });
-    });
-  }
-  onEditButtonClick(event, edgeId) {
-    event.preventDefault();
-    event.stopPropagation();
-    let edgeID = parseInt(edgeId);
-    let edge = this.m_FindEdgeById(edgeID);
-    if (DBG) console.log('EdgeTable: Edge id', edge.id, 'selected for editing');
-    // Load Source Node then Edge
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [edge.source] }).then(() => {
-      UDATA.LocalCall('EDGE_SELECT_AND_EDIT', { edgeId: edge.id });
-    });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  onToggleExpanded(event) {
-    this.setState({
-      isExpanded: !this.state.isExpanded
-    });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-  /*/
-  onHighlightNode(nodeId) {
-    UDATA.LocalCall('TABLE_HILITE_NODE', { nodeId });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /*/
-   */
-  setSortKey(key, type) {
-    if (key === this.state.sortkey) this.sortDirection = -1 * this.sortDirection;
-    // if this was already the key, flip the direction
-    else this.sortDirection = 1;
-
-    const edges = this.sortTable(key, this.state.edges, type);
-    this.setState({
-      edges,
-      sortkey: key
-    });
-    UNISYS.Log('sort edge table', key, this.sortDirection);
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  selectNode(id, event) {
-    event.preventDefault();
-
-    // Load Source
-    if (DBG) console.log('EdgeTable: Edge id', id, 'selected for editing');
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [id] });
+      selectedEdgeColor: data.sourceColor
+    }));
   }
 
-  /// URTABLE COLUMN DEFS /////////////////////////////////////////////////////
+  /// COLUMN DEFINTION GENERATION /////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  SetColumnDefs(incomingEdgeDefs) {
-    const { edges, edgeDefs, disableEdit, isLocked } = this.state;
-
+  function DeriveColumnDefs(incomingEdgeDefs) {
+    const { edges, edgeDefs, disableEdit, isLocked } = state;
     const defs = incomingEdgeDefs || edgeDefs;
 
-    let attributeDefs = Object.keys(defs).filter(
-      k => !BUILTIN_FIELDS_EDGE.includes(k) && !defs[k].hidden
+    // Only include built in fields
+    // Only include non-hidden fields
+    // Only include non-provenance fields
+    const attributeDefs = Object.keys(defs).filter(
+      k =>
+        !BUILTIN_FIELDS_EDGE.includes(k) && !defs[k].isProvenance && !defs[k].hidden
+    );
+    const provenanceDefs = Object.keys(defs).filter(
+      k => !BUILTIN_FIELDS_EDGE.includes(k) && defs[k].isProvenance && !defs[k].hidden
     );
 
     /// CLICK HANDLERS
@@ -475,16 +179,10 @@ class NCEdgeTable extends UNISYS.Component {
       event.stopPropagation();
       UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [parseInt(nodeId)] });
     }
-    /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    /// Toggle Comment Button on and off
-    function ui_ClickComment(cref) {
-      const position = CMTMGR.GetCommentThreadPosition(u_GetButtonId(cref));
-      const uiref = u_GetButtonId(cref);
-      CMTMGR.ToggleCommentCollection(uiref, cref, position);
-    }
     /// RENDERERS
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function RenderViewOrEdit(value) {
+    function col_RenderViewOrEdit(key, tdata, coldef) {
+      const value = tdata[key];
       return (
         <div>
           {!disableEdit && (
@@ -511,46 +209,42 @@ class NCEdgeTable extends UNISYS.Component {
     //   id: String;
     //   label: String;
     // }
-    function RenderNode(value) {
+    function col_RenderNode(key, tdata, coldef) {
+      const value = tdata[key];
       if (!value) return; // skip if not defined yet
-      if (value.id === undefined || value.label === undefined) {
-        // During Edge creation, source/target may not be defined yet
-        return <span style={{ color: 'red' }}>...</span>;
-      }
+      if (tdata.id === undefined)
+        throw new Error(`RenderNode: id is undefined. tdata=${tdata}`);
+      if (value === undefined)
+        throw new Error(`RenderNode: label is undefined. value=${value}`);
       return (
         <button
           className="outline"
           onClick={event => ui_ClickViewNode(event, value.id)}
         >
-          <span style={{ color: 'blue' }}>{value.label}</span>
+          <span>{value.label}</span>
         </button>
       );
     }
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function RenderCommentBtn(value) {
-      return (
-        <URCommentVBtn
-          uiref={u_GetButtonId(value.cref)}
-          count={value.count}
-          hasUnreadComments={value.hasUnreadComments}
-          selected={value.selected}
-          cb={e => ui_ClickComment(value.cref)}
-        />
-      );
+    function col_RenderCommentBtn(key, tdata, coldef) {
+      const value = tdata[key];
+      return <URCommentVBtn cref={value.cref} />;
     }
     /// CUSTOM SORTERS
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     /// tdata = TTblNodeObject[] = { id: String, label: String }
-    function SortNodes(key, tdata, order) {
+    function col_SortNodes(key, tdata, order) {
       const sortedData = [...tdata].sort((a, b) => {
-        if (a[key].label < b[key].label) return order;
-        if (a[key].label > b[key].label) return order * -1;
+        if (String(a[key].label).toLowerCase() < String(b[key].label).toLowerCase())
+          return order;
+        if (String(a[key].label).toLowerCase() > String(b[key].label).toLowerCase())
+          return order * -1;
         return 0;
       });
       return sortedData;
     }
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function SortCommentsByCount(key, tdata, order) {
+    function col_SortCommentsByCount(key, tdata, order) {
       const sortedData = [...tdata].sort((a, b) => {
         if (a[key].count < b[key].count) return order;
         if (a[key].count > b[key].count) return order * -1;
@@ -563,11 +257,16 @@ class NCEdgeTable extends UNISYS.Component {
     // column definitions for custom attributes
     // (built in columns are: view, degrees, label)
     const ATTRIBUTE_COLUMNDEFS = attributeDefs.map(key => {
-      const title = defs[key].displayLabel;
-      const type = defs[key].type;
       return {
-        title,
-        type,
+        title: defs[key].displayLabel,
+        type: defs[key].type,
+        data: key
+      };
+    });
+    const PROVENANCE_COLUMNDEFS = provenanceDefs.map(key => {
+      return {
+        title: defs[key].displayLabel,
+        type: defs[key].type,
         data: key
       };
     });
@@ -575,22 +274,24 @@ class NCEdgeTable extends UNISYS.Component {
       {
         title: '', // View/Edit
         data: 'id',
-        type: 'number',
-        width: 50, // in px
-        renderer: RenderViewOrEdit
+        type: defs['id'].type,
+        width: 45, // in px
+        renderer: col_RenderViewOrEdit,
+        sortDisabled: true,
+        tipDisabled: true
       },
       {
         title: defs['source'].displayLabel,
         width: 130, // in px
         data: 'sourceDef',
-        renderer: RenderNode,
-        sorter: SortNodes
+        renderer: col_RenderNode,
+        sorter: col_SortNodes
       }
     ];
     if (defs['type'] && !defs['type'].hidden) {
       COLUMNDEFS.push({
         title: defs['type'].displayLabel,
-        type: 'text',
+        type: 'text-case-insensitive',
         width: 130, // in px
         data: 'type'
       });
@@ -600,91 +301,71 @@ class NCEdgeTable extends UNISYS.Component {
         title: defs['target'].displayLabel,
         width: 130, // in px
         data: 'targetDef',
-        renderer: RenderNode,
-        sorter: SortNodes
+        renderer: col_RenderNode,
+        sorter: col_SortNodes
       },
       ...ATTRIBUTE_COLUMNDEFS,
-      {
-        title: 'Comments',
-        data: 'commentVBtnDef',
-        type: 'text',
-        width: 50, // in px
-        renderer: RenderCommentBtn,
-        sorter: SortCommentsByCount
-      }
+      ...PROVENANCE_COLUMNDEFS
     );
-
-    return COLUMNDEFS;
-  }
-
-  /// OBJECT HELPERS ////////////////////////////////////////////////////////////
-  /// these probably should go into a utility class
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Return array of objects that match the match_me object keys/values
-    NOTE: make sure that strings are compared with strings, etc
-   */
-  m_FindMatchingObjsByProp(obj_list, match_me = {}) {
-    // operate on arrays only
-    if (!Array.isArray(obj_list))
-      throw Error('FindMatchingObjectsByProp arg1 must be array');
-    let matches = obj_list.filter(obj => {
-      let pass = true;
-      for (let key in match_me) {
-        if (match_me[key] !== obj[key]) pass = false;
-        break;
-      }
-      return pass;
+    // History
+    if (defs['createdBy'] && !defs['createdBy'].hidden)
+      COLUMNDEFS.push({
+        title: defs['createdBy'].displayLabel,
+        type: 'text-case-insensitive',
+        width: 60, // in px
+        data: 'createdBy'
+      });
+    if (defs['created'] && !defs['created'].hidden)
+      COLUMNDEFS.push({
+        title: defs['created'].displayLabel,
+        type: 'timestamp-short',
+        width: 60, // in px
+        data: 'created'
+      });
+    if (defs['updatedBy'] && !defs['updatedBy'].hidden)
+      COLUMNDEFS.push({
+        title: defs['updatedBy'].displayLabel,
+        type: 'text-case-insensitive',
+        width: 60, // in px
+        data: 'updatedBy'
+      });
+    if (defs['updated'] && !defs['updated'].hidden)
+      COLUMNDEFS.push({
+        title: defs['updated'].displayLabel,
+        type: 'timestamp-short',
+        width: 60, // in px
+        data: 'updated'
+      }); // Comment is last
+    COLUMNDEFS.push({
+      title: ' ',
+      data: 'commentVBtnDef',
+      type: 'text',
+      width: 40, // in px
+      renderer: col_RenderCommentBtn,
+      sorter: col_SortCommentsByCount,
+      tipDisabled: true
     });
-    // return array of matches (can be empty array)
-    return matches;
-  }
-
-  /// EDGE HELPERS //////////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Return array of nodes that match the match_me object keys/values
-    NOTE: make sure that strings are compared with strings, etc
-   */
-  m_FindMatchingEdgeByProp(match_me = {}) {
-    return this.m_FindMatchingObjsByProp(this.state.edges, match_me);
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Convenience function to retrieve edge by ID
-   */
-  m_FindEdgeById(id) {
-    return this.m_FindMatchingEdgeByProp({ id })[0];
+    return COLUMNDEFS;
   }
 
-  /// REACT LIFECYCLE METHODS ///////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** This is not yet implemented as of React 16.2.  It's implemented in 16.3.
-      getDerivedStateFromProps (props, state) {
-        console.error('getDerivedStateFromProps!!!');
-      }
-   */
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  render() {
-    const { edges, edgeDefs, disableEdit, isLocked, COLUMNDEFS } = this.state;
-    const { isOpen, tableHeight } = this.props;
-    const uid = CMTMGR.GetCurrentUserId();
-
+  /// TABLE DATA GENERATION ///////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function DeriveTableData({ edgeDefs, edges }) {
     // Only include built in fields
     // Only include non-hidden fields
+    // Only include non-provenance fields
     let attributeDefs = Object.keys(edgeDefs).filter(
-      k => !BUILTIN_FIELDS_EDGE.includes(k) && !edgeDefs[k].hidden
+      k =>
+        !BUILTIN_FIELDS_EDGE.includes(k) &&
+        !edgeDefs[k].hidden &&
+        !edgeDefs[k].isProvenance
+    );
+    const provenanceDefs = Object.keys(edgeDefs).filter(
+      k => edgeDefs[k].isProvenance
     );
 
-    // show 'type' between 'source' and 'target' if `type` has been defined
-    // if it isn't defined, just show attribute fields after `source` and 'target`
-    const hasTypeField = edgeDefs['type'];
-    if (hasTypeField) attributeDefs = attributeDefs.filter(a => a !== 'type');
-
-    /// TABLE DATA GENERATION
-    /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    const TABLEDATA = edges.map((edge, i) => {
+    return edges.map((edge, i) => {
       const { id, source, target, sourceLabel, targetLabel, type } = edge;
-
       const sourceDef = { id: source, label: sourceLabel };
       const targetDef = { id: target, label: targetLabel };
 
@@ -698,15 +379,23 @@ class NCEdgeTable extends UNISYS.Component {
           // b. provide the HTML string
           data.html = NCUI.Markdownify(edge[key]);
           data.raw = edge[key];
-        } else if (edgeDefs[key].type === 'hdate')
+        } else if (edgeDefs[key].type === 'hdate') {
           data = edge[key] && edge[key].formattedDateString;
-        else data = edge[key];
+        } else if (edgeDefs[key].type === 'infoOrigin') {
+          data =
+            edge[key] === undefined || edge[key] === ''
+              ? UTILS.DeriveInfoOriginString(
+                  edge.createdBy,
+                  edge.meta ? edge.meta.created : ''
+                )
+              : edge[key];
+        } else data = edge[key];
         attributes[key] = data;
       });
 
       // comment button definition
-      const cref = CMTMGR.GetNodeCREF(id);
-      const commentCount = CMTMGR.GetThreadedViewObjectsCount(cref, uid);
+      const cref = CMTMGR.GetEdgeCREF(id);
+      const commentCount = CMTMGR.GetCommentCollectionCount(cref);
       const ccol = CMTMGR.GetCommentCollection(cref) || {};
       const hasUnreadComments = ccol.hasUnreadComments;
       const selected = CMTMGR.GetOpenComments(cref);
@@ -717,6 +406,38 @@ class NCEdgeTable extends UNISYS.Component {
         selected
       };
 
+      // provenance
+      const provenance = {};
+      provenanceDefs.forEach((key, i) => {
+        let data = {};
+        if (edgeDefs[key].type === 'markdown') {
+          // for markdown:
+          // a. provide the raw markdown string
+          // b. provide the HTML string
+          data.html = NCUI.Markdownify(edge[key]);
+          data.raw = edge[key];
+        } else if (edgeDefs[key].type === 'hdate') {
+          data = edge[key] && edge[key].formattedDateString;
+        } else if (edgeDefs[key].type === 'infoOrigin') {
+          data =
+            edge[key] === undefined || edge[key] === ''
+              ? UTILS.DeriveInfoOriginString(
+                  edge.createdBy,
+                  edge.meta ? edge.meta.created : ''
+                )
+              : edge[key];
+        } else data = edge[key] || '';
+        provenance[key] = data;
+      });
+
+      // history
+      const history = {
+        createdBy: edge.createdBy,
+        created: edge.meta ? edge.meta.created : '', // meta may not be defined when a new node is creatd
+        updatedBy: edge.updatedBy,
+        updated: edge.meta ? edge.meta.updated : '' // meta may not be defined when a new node is creatd
+      };
+
       return {
         id: { edgeId: id, sourceId: source }, // { edgeId, sourceId} for click handler
         sourceDef, // { id: String, label: String }
@@ -724,19 +445,29 @@ class NCEdgeTable extends UNISYS.Component {
         type,
         ...attributes,
         commentVBtnDef,
+        ...provenance,
+        ...history,
         meta: {
           filteredTransparency: edge.filteredTransparency
         }
       };
     });
-    return (
-      <div className="NCEdgeTable" style={{ height: tableHeight }}>
-        <URTable isOpen={isOpen} data={TABLEDATA} columns={COLUMNDEFS} />
-      </div>
-    );
   }
-} // class EdgeTable
+
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  if (state.edges === undefined) return `loading...waiting for edges ${state.edges}`;
+  if (state.edgeDefs === undefined)
+    return `loading...waiting for nodeDefs ${state.edgeDefs}`;
+  const COLUMNDEFS = DeriveColumnDefs();
+  const TABLEDATA = DeriveTableData({ edgeDefs: state.edgeDefs, edges: state.edges });
+  return (
+    <div className="NCEdgeTable" style={{ height: tableHeight }}>
+      <URTable isOpen={isOpen} data={TABLEDATA} columns={COLUMNDEFS} />
+    </div>
+  );
+}
 
 /// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-module.exports = NCEdgeTable;
+export default NCEdgeTable;
diff --git a/app/view/netcreate/components/NCNode.css b/app/view/netcreate/components/NCNode.css
index 9d22c908a..924e7fee7 100644
--- a/app/view/netcreate/components/NCNode.css
+++ b/app/view/netcreate/components/NCNode.css
@@ -234,11 +234,6 @@
 .nccomponent .formview .viewvalue img {
   max-width: 225px;
 }
-
-.URTable img {
-  max-width: 225px;
-}
-
 .nccomponent .formview div.targetarrow {
   margin-top: -5px;
   text-align: center;
diff --git a/app/view/netcreate/components/NCNode.jsx b/app/view/netcreate/components/NCNode.jsx
index 98317aa1c..881bfeb69 100644
--- a/app/view/netcreate/components/NCNode.jsx
+++ b/app/view/netcreate/components/NCNode.jsx
@@ -48,7 +48,7 @@ const NCUI = require('../nc-ui');
 const NCEdge = require('./NCEdge');
 const NCDialogCitation = require('./NCDialogCitation');
 const SETTINGS = require('settings');
-import URCommentBtn from './URCommentBtn';
+import URCommentVBtn from './URCommentVBtn';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -170,8 +170,8 @@ class NCNode extends UNISYS.Component {
       label: '',
       type: '',
       degrees: null,
-      attributes: [],
-      provenance: [],
+      attributes: {},
+      provenance: {},
       created: undefined,
       createdBy: undefined,
       updated: undefined,
@@ -248,15 +248,23 @@ class NCNode extends UNISYS.Component {
       // someone else might be editing a template or importing or editing node or edge
       const { id } = this.state;
       const nodeIsLocked = data.lockedNodes.includes(id);
-      this.setState(
-        {
-          uIsLockedByDB: nodeIsLocked,
-          uIsLockedByTemplate: data.templateBeingEdited,
-          uIsLockedByImport: data.importActive,
-          uIsLockedByComment: data.commentBeingEditedByMe
-        },
-        () => this.UpdatePermissions()
-      );
+
+      // skip updates if there are no changes in values to optimize renders
+      const newState = {
+        uIsLockedByDB: nodeIsLocked,
+        uIsLockedByTemplate: data.templateBeingEdited,
+        uIsLockedByImport: data.importActive,
+        uIsLockedByComment: data.commentBeingEditedByMe
+      };
+      if (
+        newState.uIsLockedByDB === this.state.uIsLockedByDB &&
+        newState.uIsLockedByTemplate === this.state.uIsLockedByTemplate &&
+        newState.uIsLockedByImport === this.state.uIsLockedByImport &&
+        newState.uIsLockedByComment === this.state.uIsLockedByComment
+      ) {
+        return;
+      }
+      this.setState(newState, () => this.UpdatePermissions());
     });
   }
   UpdatePermissions() {
@@ -680,8 +688,7 @@ class NCNode extends UNISYS.Component {
   UIDisableEditMode() {
     this.UnlockNode(() => {
       this.setState({
-        uViewMode: NCUI.VIEWMODE.VIEW,
-        uIsLockedByDB: false
+        uViewMode: NCUI.VIEWMODE.VIEW
       });
       UDATA.NetCall('SRV_RELEASE_EDIT_LOCK', { editor: EDITORTYPE.NODE });
     });
@@ -774,7 +781,7 @@ class NCNode extends UNISYS.Component {
           <div className="titlebar">
             <div className="nodenumber">NODE {id}</div>
             <div className="nodelabel">{NCUI.RenderLabel('label', label)}</div>
-            <URCommentBtn cref={collection_ref} />
+            <URCommentVBtn cref={collection_ref} />
             {/* using key resets with a new URComment <URCommentBtn cref={collection_ref} key={collection_ref} /> */}
           </div>
           {/* Special handling for `type` field */}
diff --git a/app/view/netcreate/components/NCNodeTable.jsx b/app/view/netcreate/components/NCNodeTable.jsx
index 1b47e48fb..00e2596e8 100644
--- a/app/view/netcreate/components/NCNodeTable.jsx
+++ b/app/view/netcreate/components/NCNodeTable.jsx
@@ -4,15 +4,9 @@
 
     NCNodeTable is used to to display a table of nodes for review.
 
-    It displays NCDATA.
-    But also checks FILTEREDNCDATA to show highlight/filtered state
-
-    This is intended to be a generic table implementation that enables
-    swapping in different table implementations.
-
-    This is an abstraction of the original NodeTable component to make
-    it easier to swap in custom table components.
+    It checks FILTEREDNCDATA to show highlight/filtered state
 
+    It uses URTable for rendering and sorting.
 
   ## PROPS
 
@@ -21,218 +15,87 @@
 
   ## TO USE
 
-    NCNodeTable is self contained and relies on global NCDATA to load.
+    NCNodeTable is self contained and relies on global FILTEREDNCDATA to load.
 
       <NCNodeTable tableHeight isOpen/>
 
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
-const React = require('react');
-const NCUI = require('../nc-ui');
-const CMTMGR = require('../comment-mgr');
-const FILTER = require('./filter/FilterEnums');
-const { BUILTIN_FIELDS_NODE } = require('system/util/enum');
-const UNISYS = require('unisys/client');
-import HDATE from 'system/util/hdate';
-import URCommentVBtn from './URCommentVBtn';
+import React, { useState, useEffect } from 'react';
+import UNISYS from 'unisys/client';
+import NCUI from '../nc-ui';
+import UTILS from '../nc-utils';
+import FILTER from './filter/FilterEnums';
+import CMTMGR from '../comment-mgr';
+
 import URTable from './URTable';
-const { ICON_PENCIL, ICON_VIEW } = require('system/util/constant');
+import URCommentVBtn from './URCommentVBtn';
+
+import { BUILTIN_FIELDS_NODE } from 'system/util/enum';
+import { ICON_PENCIL, ICON_VIEW } from 'system/util/constant';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-const DBG = false;
-let UDATA = null;
+/// Initialize UNISYS DATA LINK for functional react component
+const UDATAOwner = { name: 'NCNodeTable' };
+const UDATA = UNISYS.NewDataLink(UDATAOwner);
 
-/// UTILITY METHODS ///////////////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/// Comment Button ID based on cref
-/// NOTE: This is different from the commenButtonID of URComentBtn,
-/// which is simply `comment-button-${cref}` so that we can distinguish
-/// clicks from the NCNodeTable from clicks from Node/Edges.
-function u_GetButtonId(cref) {
-  return `table-comment-button-${cref}`;
-}
+const DBG = false;
 
-/// REACT COMPONENT ///////////////////////////////////////////////////////////
+/// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/// export a class object for consumption by brunch/require
-class NCNodeTable extends UNISYS.Component {
-  constructor(props) {
-    super(props);
+function NCNodeTable({ tableHeight, isOpen }) {
+  const [state, setState] = useState({});
 
-    const TEMPLATE = this.AppState('TEMPLATE');
-    this.state = {
+  /// USEEFFECT ///////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  useEffect(() => {
+    const TEMPLATE = UDATA.AppState('TEMPLATE');
+    const SESSION = UDATA.AppState('SESSION');
+    setState({
       nodeDefs: TEMPLATE.nodeDefs,
       nodes: [],
-      selectedNodeId: undefined,
-      hilitedNodeId: undefined,
-      selectedNodeColor: TEMPLATE.sourceColor,
-      hilitedNodeColor: TEMPLATE.searchColor,
       disableEdit: false,
-      isLocked: false,
-      isExpanded: true,
-      sortkey: 'label',
-      dummy: 0, // used to force render update
+      isLocked: !SESSION.isValid
+    });
 
-      COLUMNDEFS: []
+    UDATA.OnAppStateChange('FILTEREDNCDATA', urstate_FILTEREDNCDATA);
+    UDATA.OnAppStateChange('SESSION', urstate_SESSION);
+    UDATA.OnAppStateChange('TEMPLATE', urstate_TEMPLATE);
+    return () => {
+      UDATA.AppStateChangeOff('FILTEREDNCDATA', urstate_FILTEREDNCDATA);
+      UDATA.AppStateChangeOff('SESSION', urstate_SESSION);
+      UDATA.AppStateChangeOff('TEMPLATE', urstate_TEMPLATE);
     };
+  }, []);
 
-    this.onUpdateCommentUI = this.onUpdateCommentUI.bind(this);
-    this.onStateChange_SESSION = this.onStateChange_SESSION.bind(this);
-    this.onStateChange_SELECTION = this.onStateChange_SELECTION.bind(this);
-    this.onStateChange_HILITE = this.onStateChange_HILITE.bind(this);
-    this.displayUpdated = this.displayUpdated.bind(this);
-    this.deriveFilteredNodes = this.deriveFilteredNodes.bind(this);
-    this.updateNodeFilterState = this.updateNodeFilterState.bind(this);
-    this.urmsg_EDIT_PERMISSIONS_UPDATE =
-      this.urmsg_EDIT_PERMISSIONS_UPDATE.bind(this);
-    this.updateEditState = this.updateEditState.bind(this);
-    this.onStateChange_NCDATA = this.onStateChange_NCDATA.bind(this);
-    this.onStateChange_FILTEREDNCDATA = this.onStateChange_FILTEREDNCDATA.bind(this);
-    this.onStateChange_TEMPLATE = this.onStateChange_TEMPLATE.bind(this);
-    this.onViewButtonClick = this.onViewButtonClick.bind(this);
-    this.onEditButtonClick = this.onEditButtonClick.bind(this);
-    this.onToggleExpanded = this.onToggleExpanded.bind(this);
-    this.onHighlightRow = this.onHighlightRow.bind(this);
-
-    this.SetColumnDefs = this.SetColumnDefs.bind(this);
-
-    /// Initialize UNISYS DATA LINK for REACT
-    UDATA = UNISYS.NewDataLink(this);
-
-    UDATA.HandleMessage(
-      'EDIT_PERMISSIONS_UPDATE',
-      this.urmsg_EDIT_PERMISSIONS_UPDATE
-    );
-
-    // SESSION is called by SessionSHell when the ID changes
-    //  set system-wide. data: { classId, projId, hashedId, groupId, isValid }
-    this.OnAppStateChange('SESSION', this.onStateChange_SESSION);
-
-    // Always make sure class methods are bind()'d before using them
-    // as a handler, otherwise object context is lost
-    this.OnAppStateChange('NCDATA', this.onStateChange_NCDATA);
-
-    // Track Filtered Data Updates too
-    this.OnAppStateChange('FILTEREDNCDATA', this.onStateChange_FILTEREDNCDATA);
-
-    // Handle Template updates
-    this.OnAppStateChange('TEMPLATE', this.onStateChange_TEMPLATE);
-
-    this.OnAppStateChange('SELECTION', this.onStateChange_SELECTION);
-    this.OnAppStateChange('HILITE', this.onStateChange_HILITE);
-
-    // Comment Message Handlers
-    // Force update whenever threads are opened or closed
-    UDATA.HandleMessage('CTHREADMGR_THREAD_OPENED', this.onUpdateCommentUI);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED', this.onUpdateCommentUI);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', this.onUpdateCommentUI);
-  } // constructor
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  componentDidMount() {
-    if (DBG) console.log('NodeTable.componentDidMount!');
-    this.onStateChange_SESSION(this.AppState('SESSION'));
-
-    // Explicitly retrieve data because we may not have gotten a NCDATA
-    // update while we were hidden.
-    let NCDATA = this.AppState('NCDATA');
-    this.onStateChange_NCDATA(NCDATA);
-
-    const COLUMNDEFS = this.SetColumnDefs();
-    this.setState({ COLUMNDEFS });
-  }
-
-  componentWillUnmount() {
-    UDATA.UnhandleMessage(
-      'EDIT_PERMISSIONS_UPDATE',
-      this.urmsg_EDIT_PERMISSIONS_UPDATE
-    );
-    this.AppStateChangeOff('SESSION', this.onStateChange_SESSION);
-    this.AppStateChangeOff('NCDATA', this.onStateChange_NCDATA);
-    this.AppStateChangeOff('FILTEREDNCDATA', this.onStateChange_FILTEREDNCDATA);
-    this.AppStateChangeOff('TEMPLATE', this.onStateChange_TEMPLATE);
-    this.AppStateChangeOff('SELECTION', this.onStateChange_SELECTION);
-    this.AppStateChangeOff('HILITE', this.onStateChange_HILITE);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_OPENED', this.onUpdateCommentUI);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED', this.onUpdateCommentUI);
-    UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', this.onUpdateCommentUI);
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Force update so that URCommentVBtn selection state is updated
-  onUpdateCommentUI(data) {
-    this.setState({ dummy: this.state.dummy + 1 });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  onStateChange_SELECTION(data) {
-    if (data === undefined) return;
-
-    const selectedNodeId = data.nodes.length > 0 ? data.nodes[0].id : undefined;
-    if (selectedNodeId === this.state.selectedNodeId) {
-      return;
-    }
-    this.setState({ selectedNodeId });
-  }
-
-  onStateChange_HILITE(data) {
-    const { userHighlightNodeId, autosuggestHiliteNodeId } = data; // ignores `tableHiliteNodeId`
-    let hilitedNodeId;
-    if (autosuggestHiliteNodeId !== undefined)
-      hilitedNodeId = autosuggestHiliteNodeId;
-    if (userHighlightNodeId !== undefined) hilitedNodeId = userHighlightNodeId;
-    if (hilitedNodeId === this.state.hilitedNodeId) {
-      return;
-    }
-    this.setState({ hilitedNodeId });
-  }
-
-  /** Handle change in SESSION data
-    Called both by componentWillMount() and AppStateChange handler.
-    The 'SESSION' state change is triggered in two places in SessionShell during
-    its handleChange() when active typing is occuring, and also during
-    SessionShell.componentWillMount()
-   */
-  onStateChange_SESSION(decoded) {
-    const isLocked = !decoded.isValid;
-    if (isLocked === this.state.isLocked) {
-      return;
+  /// UR HANDLERS /////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urstate_FILTEREDNCDATA(data) {
+    if (data.nodes) {
+      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
+      // also need to add back in nodes that are not in filteredNodes
+      // (because "COLLAPSE" and "FOCUS" removes nodes that are not matched)
+      const NCDATA = UDATA.AppState('NCDATA');
+      const FILTERDEFS = UDATA.AppState('FILTERDEFS');
+      if (FILTERDEFS.filterAction === FILTER.ACTION.FADE) {
+        // show ALL nodes
+        m_updateNodeFilterState(NCDATA.nodes);
+      } else {
+        // show only filtered nodes from the filter update
+        m_updateNodeFilterState(data.nodes);
+      }
     }
-    this.setState({ isLocked });
   }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  displayUpdated(nodeEdge) {
-    // Prevent error if `meta` info is not defined yet, or not properly imported
-
-    // this does not ever fire, revert!
-    console.error('NodeTable meta not defined yet', nodeEdge);
-    if (!nodeEdge.meta) {
-      return '';
-    }
-    var d = new Date(
-      nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created
-    );
-
-    var year = String(d.getFullYear());
-    var date = d.getMonth() + 1 + '/' + d.getDate() + '/' + year.substr(2, 4);
-    var time = d.toTimeString().substr(0, 5);
-    var dateTime = date + ' at ' + time;
-    var titleString = 'v' + nodeEdge.meta.revision;
-    if (nodeEdge._nlog)
-      titleString += ' by ' + nodeEdge._nlog[nodeEdge._nlog.length - 1];
-    var tag = <span title={titleString}> {dateTime} </span>;
-
-    return tag;
+  function m_updateNodeFilterState(nodes) {
+    const filteredNodes = m_deriveFilteredNodes(nodes);
+    setState(prevState => ({ ...prevState, nodes: filteredNodes }));
   }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Set node filtered status based on current filteredNodes
-  deriveFilteredNodes(nodes) {
+  function m_deriveFilteredNodes(nodes) {
     // set filter status
     let filteredNodes = [];
     // If we're transitioning from "HILIGHT/FADE" to "COLLAPSE" or "FOCUS", then we
@@ -257,150 +120,39 @@ class NCNodeTable extends UNISYS.Component {
     // }
     return filteredNodes;
   }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Set node filtered status based on current filteredNodes
-  updateNodeFilterState(nodes) {
-    const filteredNodes = this.deriveFilteredNodes(nodes);
-    this.setState({ nodes: filteredNodes });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Hide/Show "View" and "Edit" buttons in table based on template edit state
-  urmsg_EDIT_PERMISSIONS_UPDATE() {
-    // Update COLUMNDEFS after permissions update so disabledState is shown
-    const cb = () => {
-      // Update COLUMNDEFS to update buttons
-      const COLUMNDEFS = this.SetColumnDefs();
-      this.setState({ COLUMNDEFS });
-    };
-    this.updateEditState(cb);
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /// Disable edit if someone else is editing a template
-  updateEditState(cb) {
-    let disableEdit = false;
-    UDATA.NetCall('SRV_GET_EDIT_STATUS').then(data => {
-      // someone else might be editing a template or importing or editing node or edge
-      disableEdit = data.templateBeingEdited || data.importActive;
-      // REVIEW: Only disableEdit if template is being updated, otherwise allow edits
-      // || data.nodeOrEdgeBeingEdited ||
-      // REVIEW: commentBeingEditedByMe shouldn't affect table?
-      // data.commentBeingEditedByMe; // only lock out if this user is the one editing comments, allow network commen edits
-
-      // optimize, skip render if no change
-      if (disableEdit === this.state.disableEdit) {
-        return;
-      }
-
-      this.setState({ disableEdit }, () => {
-        if (typeof cb === 'function') cb();
-      });
-    });
-  }
-
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /** Handle updated SELECTION
-   */
-  onStateChange_NCDATA(data) {
-    if (DBG) console.log('handle data update');
-    if (data.nodes) {
-      const filteredNodes = this.deriveFilteredNodes(data.nodes);
-      // REVIEW DO SOMETHING.  SELECTION update is not currently being handled.
-    }
-  }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  onStateChange_FILTEREDNCDATA(data) {
-    if (data.nodes) {
-      // If we're transitioning from "COLLAPSE" or "FOCUS" to "HILIGHT/FADE", then we
-      // also need to add back in nodes that are not in filteredNodes
-      // (because "COLLAPSE" and "FOCUS" removes nodes that are not matched)
-      const NCDATA = UDATA.AppState('NCDATA');
-      const FILTERDEFS = UDATA.AppState('FILTERDEFS');
-      if (FILTERDEFS.filterAction === FILTER.ACTION.FADE) {
-        // show ALL nodes
-        this.updateNodeFilterState(NCDATA.nodes);
-      } else {
-        // show only filtered nodes from the filter update
-        this.updateNodeFilterState(data.nodes);
-      }
+  function urstate_SESSION(decoded) {
+    const isLocked = !decoded.isValid;
+    if (isLocked === this.state.isLocked) {
+      return;
     }
+    setState(prevState => ({ ...prevState, isLocked }));
   }
-
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  onStateChange_TEMPLATE(data) {
-    const COLUMNDEFS = this.SetColumnDefs(data.nodeDefs);
-    this.setState({
+  function urstate_TEMPLATE(data) {
+    setState(prevState => ({
+      ...prevState,
       nodeDefs: data.nodeDefs,
       selectedNodeColor: data.sourceColor,
-      hilitedNodeColor: data.searchColor,
-      COLUMNDEFS
-    });
-  }
-
-  /// UTILITIES /////////////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-  /// UI EVENT HANDLERS /////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  onViewButtonClick(event, nodeId) {
-    event.preventDefault();
-    event.stopPropagation();
-    let nodeID = parseInt(nodeId);
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [nodeID] });
-  }
-  /**
-   */
-  onEditButtonClick(event, nodeId) {
-    event.preventDefault();
-    event.stopPropagation();
-    let nodeID = parseInt(nodeId);
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [nodeID] }).then(() => {
-      if (DBG) console.error('NodeTable: Calling NODE_EDIT', nodeID);
-      UDATA.LocalCall('NODE_EDIT', { nodeID: nodeID });
-    });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  onToggleExpanded(event) {
-    this.setState({
-      isExpanded: !this.state.isExpanded
-    });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  onHighlightRow(nodeId) {
-    UDATA.LocalCall('TABLE_HILITE_NODE', { nodeId });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   */
-  selectNode(id, event) {
-    event.preventDefault();
-
-    // REVIEW: For some reason React converts the integer IDs into string
-    // values when returned in event.target.value.  So we have to convert
-    // it here.
-    // Load Source
-    UDATA.LocalCall('SOURCE_SELECT', { nodeIDs: [parseInt(id)] });
+      hilitedNodeColor: data.searchColor
+    }));
   }
 
-  /// URTABLE COLUMN DEFS /////////////////////////////////////////////////////
+  /// COLUMN DEFINTION GENERATION /////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  SetColumnDefs(incomingNodeDefs) {
-    const { nodeDefs, disableEdit, isLocked } = this.state;
-
+  function DeriveColumnDefs(incomingNodeDefs) {
+    const { nodeDefs, disableEdit, isLocked } = state;
     const defs = incomingNodeDefs || nodeDefs;
 
     // Only include built in fields
     // Only include non-hidden fields
+    // Only include non-provenance fields
     const attributeDefs = Object.keys(defs).filter(
-      k => !BUILTIN_FIELDS_NODE.includes(k) && !defs[k].hidden
+      k =>
+        !BUILTIN_FIELDS_NODE.includes(k) && !defs[k].isProvenance && !defs[k].hidden
+    );
+    const provenanceDefs = Object.keys(defs).filter(
+      k => !BUILTIN_FIELDS_NODE.includes(k) && defs[k].isProvenance && !defs[k].hidden
     );
 
     /// CLICK HANDLERS
@@ -420,15 +172,10 @@ class NCNodeTable extends UNISYS.Component {
         UDATA.LocalCall('NODE_EDIT', { nodeID: nodeID });
       });
     }
-    /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function ui_ClickCommentBtn(cref) {
-      const position = CMTMGR.GetCommentThreadPosition(u_GetButtonId(cref));
-      const uiref = u_GetButtonId(cref);
-      CMTMGR.ToggleCommentCollection(uiref, cref, position);
-    }
     /// RENDERERS
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function RenderViewOrEdit(value) {
+    function col_RenderViewOrEdit(key, tdata, coldef) {
+      const value = tdata[key];
       return (
         <div>
           {!disableEdit && (
@@ -455,46 +202,30 @@ class NCNodeTable extends UNISYS.Component {
     //   id: String;
     //   label: String;
     // }
-    function RenderNode(value) {
+    function col_RenderNode(key, tdata, coldef) {
+      const value = tdata[key];
       if (!value) return; // skip if not defined yet
-      if (value.id === undefined)
-        throw new Error('RenderNode: value.id is undefined');
-      if (value.label === undefined)
-        throw new Error('RenderNode: value.label is undefined');
+      if (tdata.id === undefined)
+        throw new Error(`RenderNode: id is undefined. tdata=${tdata}`);
+      if (value === undefined)
+        throw new Error(`RenderNode: label is undefined. value=${value}`);
       return (
         <button
           className="outline"
-          onClick={event => ui_ClickViewNode(event, value.id)}
+          onClick={event => ui_ClickViewNode(event, tdata.id)}
         >
-          <span style={{ color: 'blue' }}>{value.label}</span>
+          <span>{value}</span>
         </button>
       );
     }
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function RenderCommentBtn(value) {
-      return (
-        <URCommentVBtn
-          uiref={u_GetButtonId(value.cref)}
-          count={value.count}
-          hasUnreadComments={value.hasUnreadComments}
-          selected={value.selected}
-          cb={e => ui_ClickCommentBtn(value.cref)}
-        />
-      );
+    function col_RenderCommentBtn(key, tdata, coldef) {
+      const value = tdata[key];
+      return <URCommentVBtn cref={value.cref} />;
     }
     /// CUSTOM SORTERS
     /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    /// tdata = TTblNodeObject[] = { id: String, label: String }
-    function SortNodes(key, tdata, order) {
-      const sortedData = [...tdata].sort((a, b) => {
-        if (a[key].label < b[key].label) return order;
-        if (a[key].label > b[key].label) return order * -1;
-        return 0;
-      });
-      return sortedData;
-    }
-    /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    function SortCommentsByCount(key, tdata, order) {
+    function col_SortCommentsByCount(key, tdata, order) {
       const sortedData = [...tdata].sort((a, b) => {
         if (a[key].count < b[key].count) return order;
         if (a[key].count > b[key].count) return order * -1;
@@ -507,11 +238,16 @@ class NCNodeTable extends UNISYS.Component {
     // column definitions for custom attributes
     // (built in columns are: view, degrees, label)
     const ATTRIBUTE_COLUMNDEFS = attributeDefs.map(key => {
-      const title = defs[key].displayLabel;
-      const type = defs[key].type;
       return {
-        title,
-        type,
+        title: defs[key].displayLabel,
+        type: defs[key].type,
+        data: key
+      };
+    });
+    const PROVENANCE_COLUMNDEFS = provenanceDefs.map(key => {
+      return {
+        title: defs[key].displayLabel,
+        type: defs[key].type,
         data: key
       };
     });
@@ -519,76 +255,96 @@ class NCNodeTable extends UNISYS.Component {
       {
         title: '', // View/Edit
         data: 'id',
-        type: 'number',
+        type: defs['id'].type,
         width: 45, // in px
-        renderer: RenderViewOrEdit
+        renderer: col_RenderViewOrEdit,
+        sortDisabled: true,
+        tipDisabled: true
       },
       {
         title: defs['degrees'].displayLabel,
-        type: 'number',
+        type: defs['degrees'].type,
         width: 50, // in px
         data: 'degrees'
       },
       {
         title: defs['label'].displayLabel,
+        type: 'text-case-insensitive',
         data: 'label',
-        width: 300, // in px
-        renderer: RenderNode,
-        sorter: SortNodes
+        width: 200, // in px
+        renderer: col_RenderNode
       }
     ];
     if (defs['type'] && !defs['type'].hidden) {
       COLUMNDEFS.push({
         title: defs['type'].displayLabel,
-        type: 'text',
+        type: 'text-case-insensitive',
         width: 130, // in px
         data: 'type'
       });
     }
-    COLUMNDEFS.push(...ATTRIBUTE_COLUMNDEFS, {
-      title: 'Comments',
+    COLUMNDEFS.push(...ATTRIBUTE_COLUMNDEFS);
+    COLUMNDEFS.push(...PROVENANCE_COLUMNDEFS);
+    // History
+    if (defs['createdBy'] && !defs['createdBy'].hidden)
+      COLUMNDEFS.push({
+        title: defs['createdBy'].displayLabel,
+        type: 'text-case-insensitive',
+        width: 60, // in px
+        data: 'createdBy'
+      });
+    if (defs['created'] && !defs['created'].hidden)
+      COLUMNDEFS.push({
+        title: defs['created'].displayLabel,
+        type: 'timestamp-short',
+        width: 60, // in px
+        data: 'created'
+      });
+    if (defs['updatedBy'] && !defs['updatedBy'].hidden)
+      COLUMNDEFS.push({
+        title: defs['updatedBy'].displayLabel,
+        type: 'text-case-insensitive',
+        width: 60, // in px
+        data: 'updatedBy'
+      });
+    if (defs['updated'] && !defs['updated'].hidden)
+      COLUMNDEFS.push({
+        title: defs['updated'].displayLabel,
+        type: 'timestamp-short',
+        width: 60, // in px
+        data: 'updated'
+      });
+    // Comment is last
+    COLUMNDEFS.push({
+      title: ' ',
       data: 'commentVBtnDef',
-      width: 50, // in px
-      renderer: RenderCommentBtn,
-      sorter: SortCommentsByCount
+      width: 40, // in px
+      renderer: col_RenderCommentBtn,
+      sorter: col_SortCommentsByCount,
+      tipDisabled: true
     });
     return COLUMNDEFS;
   }
 
-  /// REACT LIFECYCLE METHODS /////////////////////////////////////////////////
+  /// TABLE DATA GENERATION ///////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  render() {
-    const {
-      nodes,
-      nodeDefs,
-      selectedNodeId,
-      hilitedNodeId,
-      selectedNodeColor,
-      hilitedNodeColor,
-      disableEdit,
-      isLocked,
-      COLUMNDEFS
-    } = this.state;
-    if (nodes === undefined) return '';
-    const { isOpen, tableHeight } = this.props;
-
-    // skip rendering if COLUMNDEFS is not defined yet
-    // This ensures that URTable is inited only AFTER data has been loaded.
-    if (COLUMNDEFS.length < 1) return '';
-
-    const uid = CMTMGR.GetCurrentUserId();
-
+  function DeriveTableData({ nodeDefs, nodes }) {
+    // Only include built in fields
+    // Only include non-hidden fields
+    // Only include non-provenance fields
     const attributeDefs = Object.keys(nodeDefs).filter(
-      k => !BUILTIN_FIELDS_NODE.includes(k) && !nodeDefs[k].hidden
+      k =>
+        !BUILTIN_FIELDS_NODE.includes(k) &&
+        !nodeDefs[k].hidden &&
+        !nodeDefs[k].isProvenance
+    );
+    const provenanceDefs = Object.keys(nodeDefs).filter(
+      k => nodeDefs[k].isProvenance
     );
 
-    /// TABLE DATA GENERATION
-    /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-    const TABLEDATA = nodes.map((node, i) => {
+    return nodes.map((node, i) => {
       const { id, label, type, degrees } = node;
 
-      const sourceDef = { id, label };
-
       // custom attributes
       const attributes = {};
       attributeDefs.forEach((key, i) => {
@@ -599,15 +355,23 @@ class NCNodeTable extends UNISYS.Component {
           // b. provide the HTML string
           data.html = NCUI.Markdownify(node[key]);
           data.raw = node[key];
-        } else if (nodeDefs[key].type === 'hdate')
+        } else if (nodeDefs[key].type === 'hdate') {
           data = node[key] && node[key].formattedDateString;
-        else data = node[key];
+        } else if (nodeDefs[key].type === 'infoOrigin') {
+          data =
+            node[key] === undefined || node[key] === ''
+              ? UTILS.DeriveInfoOriginString(
+                  node.createdBy,
+                  node.meta ? node.meta.created : ''
+                )
+              : node[key];
+        } else data = node[key];
         attributes[key] = data;
       });
 
       // comment button definition
       const cref = CMTMGR.GetNodeCREF(id);
-      const commentCount = CMTMGR.GetThreadedViewObjectsCount(cref, uid);
+      const commentCount = CMTMGR.GetCommentCollectionCount(cref);
       const ccol = CMTMGR.GetCommentCollection(cref) || {};
       const hasUnreadComments = ccol.hasUnreadComments;
       const selected = CMTMGR.GetOpenComments(cref);
@@ -618,27 +382,68 @@ class NCNodeTable extends UNISYS.Component {
         selected
       };
 
+      // provenance
+      const provenance = {};
+      provenanceDefs.forEach((key, i) => {
+        let data = {};
+        if (nodeDefs[key].type === 'markdown') {
+          // for markdown:
+          // a. provide the raw markdown string
+          // b. provide the HTML string
+          data.html = NCUI.Markdownify(node[key]);
+          data.raw = node[key];
+        } else if (nodeDefs[key].type === 'hdate') {
+          data = node[key] && node[key].formattedDateString;
+        } else if (nodeDefs[key].type === 'infoOrigin') {
+          data =
+            node[key] === undefined || node[key] === ''
+              ? UTILS.DeriveInfoOriginString(
+                  node.createdBy,
+                  node.meta ? node.meta.created : ''
+                )
+              : node[key];
+        } else data = node[key] || '';
+        provenance[key] = data;
+      });
+
+      // history
+      const history = {
+        createdBy: node.createdBy,
+        created: node.meta ? node.meta.created : '', // meta may not be defined when a new node is creatd
+        updatedBy: node.updatedBy,
+        updated: node.meta ? node.meta.updated : '' // meta may not be defined when a new node is creatd
+      };
+
       return {
         id,
-        label: sourceDef, // { id, label } so that we can render a button
+        label,
         type,
         degrees,
         ...attributes,
         commentVBtnDef,
+        ...provenance,
+        ...history,
         meta: {
           filteredTransparency: node.filteredTransparency
         }
       };
     });
-
-    return (
-      <div className="NCNodeTable" style={{ height: tableHeight }}>
-        <URTable isOpen={isOpen} data={TABLEDATA} columns={COLUMNDEFS} />
-      </div>
-    );
   }
+
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  if (state.nodes === undefined) return `loading...waiting for nodes ${state.nodes}`;
+  if (state.nodeDefs === undefined)
+    return `loading...waiting for nodeDefs ${state.nodeDefs}`;
+  const COLUMNDEFS = DeriveColumnDefs();
+  const TABLEDATA = DeriveTableData({ nodeDefs: state.nodeDefs, nodes: state.nodes });
+  return (
+    <div className="NCNodeTable" style={{ height: tableHeight }}>
+      <URTable isOpen={isOpen} data={TABLEDATA} columns={COLUMNDEFS} />
+    </div>
+  );
 }
 
 /// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-module.exports = NCNodeTable;
+export default NCNodeTable;
diff --git a/app/view/netcreate/components/Template.jsx b/app/view/netcreate/components/Template.jsx
index b66ddba84..b3cb069a6 100644
--- a/app/view/netcreate/components/Template.jsx
+++ b/app/view/netcreate/components/Template.jsx
@@ -35,7 +35,6 @@
 const React = require('react');
 const ReactStrap = require('reactstrap');
 const { Button } = ReactStrap;
-import { JSONEditor } from '@json-editor/json-editor';
 const UNISYS = require('unisys/client');
 const { EDITORTYPE } = require('system/util/enum');
 const TEMPLATE_MGR = require('../templateEditor-mgr');
diff --git a/app/view/netcreate/components/URComment.css b/app/view/netcreate/components/URComment.css
index ad68dcdf9..aac66e744 100644
--- a/app/view/netcreate/components/URComment.css
+++ b/app/view/netcreate/components/URComment.css
@@ -8,16 +8,24 @@
   --comment-font-size-medium: 12px;
   --comment-font-weight-light: 300;
   --comment-font-weight-medium: 400;
-  --comment-status-font-color: #d44127; /* <= evan's, orig => #d84a0088; */
+  --comment-status-font-color: #d84a0088;
   --comment-system-font-color: #0003;
   --disabled-opacity: 0.5;
+  --cmtbtn-read: #696969; /* svg symbols */
+  --cmtbtn-unread-light: #ffe143; /* svg symbols */
+  --cmtbtn-unread-dark: #d44127; /* svg symbols */
+  --clr-comment: #ffe143;
+  --clr-comment-dark: #d44127;
+  --clr-comment-light: #ffe143;
+  --clr-comment-read-dark: #696969;
+  --clr-comment-read-light: #fff;
 }
 
 /* Comment Bar ------------------------------------------------------------- */
 #comment-bar {
   display: flex;
   align-self: flex-start;
-  margin-top: 6px;
+  margin-top: 10px;
   font-size: 0.8rem;
   z-index: 2000;
 }
@@ -64,6 +72,7 @@
   max-width: 400px;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--comment-commenter-font-color);
 }
 #comment-bar button.small {
   background-color: #fff6;
@@ -77,7 +86,10 @@
   margin-left: 0.25rem;
   float: right;
 }
-/* Comment Summary */
+/* Comment Status ---------------------------------------------------------- */
+#comment-status {
+}
+/* Comment Summary --------------------------------------------------------- */
 #comment-summary {
   display: flex;
   color: var(--comment-status-font-color);
@@ -87,7 +99,8 @@
   line-height: 1.3rem;
   cursor: pointer;
   width: fit-content;
-  padding: 3px 7px;
+  padding: 1px 5px;
+  float: right;
 }
 #comment-summary.expanded {
   display: none;
@@ -101,14 +114,13 @@
   width: 20px;
   height: 20px;
 }
-#comment-summary .comment-count,
 .comments-unread .comment-count {
   font-size: 10px;
   width: 20px;
   height: 20px;
   line-height: 20px;
 }
-/* Comment Panel */
+/* Comment Panel ----------------------------------------------------------- */
 #comment-panel {
   background-color: var(--comment-bg-light);
   border-radius: 15px;
@@ -120,13 +132,16 @@
 #comment-panel.expanded {
   display: block;
   height: fit-content;
+  /* pop out so so sidebars don't move */
+  position: absolute;
+  margin-left: -300px;
 }
-/* Comment Alert */
+/* Comment Alert ----------------------------------------------------------- */
 #comment-alert {
   height: 2em;
   padding-right: 10px;
   line-height: 1.5rem;
-  overflow: hidden;
+  /* overflow: hidden; skip this?  not necessary? */
   opacity: 0.01;
   transform: translateY(-150%);
 }
@@ -146,6 +161,11 @@
   transform: translateY(0);
   transition: all 5s ease-in;
 }
+#comment-alert .comment-status-body {
+  position: absolute;
+  top: 2px;
+  right: 10px; /* float to the left of the main status */
+}
 .comment-status-body {
   margin-left: 1.3rem;
   padding-bottom: 0.5rem;
@@ -198,6 +218,7 @@ svg#comment-icon {
   height: 30px;
   font-size: 12px;
   font-weight: bold;
+  letter-spacing: -0.08em;
   line-height: 30px;
   position: relative;
   text-align: center;
@@ -214,10 +235,6 @@ svg#comment-icon {
 .hasReadComments .comment-count {
   color: white;
 }
-.commentbtn {
-  display: inline-block;
-  cursor: pointer;
-}
 .comment-intable svg#comment-icon {
   width: 20px;
   height: 20px;
@@ -225,7 +242,7 @@ svg#comment-icon {
   cursor: pointer;
 }
 
-/* Comment Thread */
+/* Comment Thread ---------------------------------------------------------- */
 .commentThread {
   display: flex;
   flex-direction: column;
@@ -265,7 +282,7 @@ svg#comment-icon {
 
 .commentThread button {
   /* emulates nccomponent */
-  color: #333;
+  color: var(--comment-commenter-font-color);
   background-color: #fff6;
   border-radius: 5px;
   border-color: #0006;
@@ -279,10 +296,11 @@ svg#comment-icon {
   opacity: var(--disabled-opacity);
 }
 
-/* Comment */
+/* Comment------------------------------------------------------------------ */
 .comment {
   display: grid;
   grid-template-columns: 5em auto;
+  color: var(--comment-commenter-font-color);
   background-color: #fff5;
   margin-bottom: 5px;
   padding: 5px;
@@ -292,6 +310,9 @@ svg#comment-icon {
   background-color: #fff8;
 }
 
+.comment.unread {
+  border: 3px solid var(--comment-bg-new);
+}
 .comment.deleted {
   background-color: #0000000a;
 }
@@ -334,20 +355,21 @@ svg#comment-icon {
 .comment .label,
 .comment .help /* .help uses nccomponent */,
 .comment .commentId,
-.comment-status-body .commenter {
+.comment-status-body .commenter,
+.comment .commentTypeBar .commentTypeLabel {
   color: #0008;
   font-size: var(--comment-font-size-medium);
   font-weight: var(--comment-font-weight-medium);
+  line-height: 14px;
 }
 .comment .label {
-  margin-top: 10px;
+  margin-top: 2px;
 }
 .commentThread .comment .help {
   /* override nccomponent */
   font-style: italic; /* emulate nccomponent */
-  font-size: 12px;
+  font-size: var(--comment-font-size-small);
   line-height: 14px;
-  padding-bottom: 3px;
   opacity: 0.7;
 }
 
@@ -355,14 +377,22 @@ svg#comment-icon {
   overflow-y: auto;
 }
 
+.comment .commentTypeBar {
+  display: flex;
+  column-gap: 5px;
+}
+.comment .commentTypeBar .commentTypeLabel {
+  flex-grow: 1;
+}
 .comment .comment-item {
-  margin-bottom: 5px;
+  margin-bottom: 8px;
 }
 .comment .feedback,
 .comment .error {
   opacity: 0.7;
-  font-size: 12px;
-  line-height: 14px;
+  font-size: var(--comment-font-size-small);
+  line-height: var(--comment-font-size-medium);
+  margin: -2px 0 8px 0;
 }
 .comment .feedback {
   color: #0008; /* emulate nccomponent help */
@@ -380,7 +410,6 @@ svg#comment-icon {
 
 .comment .commentId {
   color: #0004;
-  float: right;
 }
 
 .comment .editmenu {
@@ -411,11 +440,6 @@ svg#comment-icon {
   cursor: pointer;
 }
 
-.commentbar,
-.editbar {
-  padding-top: 5px;
-}
-
 .commentbar {
   display: flex;
   flex-direction: row-reverse;
@@ -425,6 +449,7 @@ svg#comment-icon {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  padding-top: 5px;
 }
 
 .comment .commentbar button,
@@ -439,10 +464,11 @@ svg#comment-icon {
 .comment .editbar button {
   margin-left: 15px; /* emulate nccomponent */
 }
+
 .comment .commentbar button:hover,
 .comment .editbar button:hover {
   color: white;
-  background-color: rgb(255, 141, 65);
+  background-color: #b2000b;
 }
 .comment .commentbar button.secondary,
 .comment .editbar button.secondary {
@@ -467,6 +493,9 @@ svg#comment-icon {
   /* visibility: hidden; */
   display: none;
 }
+.comment:hover .commentbar {
+  padding-top: 5px;
+}
 .comment:hover .commentbar button {
   /* visibility: visible; */
   display: block;
@@ -537,30 +566,81 @@ svg#comment-icon {
   border: 1px solid;
   border-color: var(--comment-status-font-color);
 }
+.comment .prompt button.selected:disabled {
+  opacity: 0.9;
+}
 .comment .prompt button.notselected {
-  opacity: 0.5;
+  opacity: 0.1;
+}
+.comment .prompt button.notselected:hover {
+  opacity: 0.3;
 }
 
-/* URCommentVBtn */
-.URCommentVBtn {
+/* URCommentCollectionMgr ----------------------------------------------------------- */
+.URCommentCollectionMgr {
+  position: absolute;
+}
+
+/* SVG Comment Icons ------------------------------------------------------- */
+.commentbtn {
+  /* URCommentBtn & URCommentVBtn */
   display: inline-block;
   cursor: pointer;
-  border: none;
-  background-color: transparent;
 }
-.URCommentVBtn svg {
-  width: 24px;
-  height: 24px;
+.commentbtn.disabled {
+  /* URCommentBtn & URCommentVBtn */
+  cursor: default;
 }
-.URCommentVBtn > .count {
-  height: 24px;
-  width: 24px;
-  margin-top: -21px;
-  color: #fff;
-  font-size: 10px;
-  font-weight: bold;
+.commentbtn > .comment-count {
+  position: absolute;
+  line-height: 28px;
+  width: 32px; /* match size of URComentBtnAlias */
+  height: 32px;
   text-align: center;
+  color: var(--cmtbtn-unread-dark);
 }
-.URCommentVBtn > .count.unread {
-  color: var(--comment-status-font-color);
+.commentbtn.hasUnreadComments .comment-count {
+  color: var(--cmtbtn-unread-dark);
+}
+.commentbtn.hasUnreadComments.isOpen .comment-count,
+.commentbtn.hasReadComments.isOpen .comment-count {
+  color: white;
+}
+.commentbtn.hasReadComments .comment-count {
+  color: var(--cmtbtn-read);
+}
+
+.svgcmt-read .svg-fill {
+  fill: var(--clr-comment-read-light);
+}
+.svgcmt-read .svg-outline {
+  fill: var(--clr-comment-read-light);
+}
+
+.svgcmt-read-outlined .svg-fill {
+  fill: var(--clr-comment-read-light);
+}
+.svgcmt-read-outlined .svg-outline {
+  fill: var(--clr-comment-read-dark);
+}
+
+.svgcmt-readSelected .svg-fill {
+  fill: var(--clr-comment-read-dark);
+}
+.svgcmt-readSelected .svg-outline {
+  fill: var(--clr-comment-read-dark);
+}
+
+.svgcmt-unread .svg-fill {
+  fill: var(--clr-comment-light);
+}
+.svgcmt-unread .svg-outline {
+  fill: var(--clr-comment-dark);
+}
+
+.svgcmt-unreadSelected .svg-fill {
+  fill: var(--clr-comment-dark);
+}
+.svgcmt-unreadSelected .svg-outline {
+  fill: var(--clr-comment-dark);
 }
diff --git a/app/view/netcreate/components/URComment.jsx b/app/view/netcreate/components/URComment.jsx
index 3fc899e04..9eee43e64 100644
--- a/app/view/netcreate/components/URComment.jsx
+++ b/app/view/netcreate/components/URComment.jsx
@@ -12,6 +12,15 @@
       key={cvobj.comment_id} // part of thread array
     />
 
+  1. UI input cycle
+      URComment handles updates from by the URCommentPrompt component.
+      The data is stored locally until evt_SaveBtn is clicked, which then
+      calls comment-mgr.UpdateComment.
+  2. Data State management
+      comment-mgr saves the data to the database
+      and updates COMMENTVOJBS state, which triggers a re-render of the
+      URCommentThread component.
+
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
 import React, { useState, useEffect, useCallback } from 'react';
@@ -41,6 +50,7 @@ const PR = 'URComment';
 function URComment({ cref, cid, uid }) {
   const [element, setElement] = useState(null);
   const [state, setState] = useState({
+    id: undefined,
     commenter: '',
     createtime_string: '',
     modifytime_string: '',
@@ -70,10 +80,9 @@ function URComment({ cref, cid, uid }) {
   useEffect(() => {
     // declare helpers
     const urmsg_UpdatePermissions = data => {
-      const isLoggedIn = NetMessage.GlobalGroupID();
       setState(prevState => ({
         ...prevState,
-        uIsDisabled: data.commentBeingEditedByMe || !isLoggedIn
+        uIsDisabled: data.commentBeingEditedByMe
       }));
     };
     const urstate_UpdateCommentVObjs = () => c_LoadCommentVObj();
@@ -95,13 +104,24 @@ function URComment({ cref, cid, uid }) {
   /** Declare helper method to load viewdata from comment manager into the
    *  component state */
   function c_LoadCommentVObj() {
+    // If the comment is being edited, skip the update, else we'd lose the edit
+    if (state.uIsBeingEdited) {
+      if (DBG)
+        console.log(
+          `COMMENTVOBJS Update!  ${cid} is being edited skipping update!!!`
+        );
+      return;
+    }
+
     const cvobj = CMTMGR.GetCommentVObj(cref, cid);
     const comment = CMTMGR.GetComment(cid);
 
     // When deleting, COMMENTVOBJS state change will trigger a load and render
     // before the component is unmounted.  So catch it and skip the state update.
     if (!cvobj || !comment) {
-      console.error('c_LoadCommentVObj: comment or cvobj not found!');
+      console.log(
+        'c_LoadCommentVObj: comment or cvobj not found!  Usually because it has been deleted.'
+      );
       return;
     }
 
@@ -113,6 +133,8 @@ function URComment({ cref, cid, uid }) {
     // set component state from retrieved data
     setState({
       // Data
+      // REVIEW MEME uses `comment.id` and NC uses `comment.comment_id`
+      id: comment.comment_id, // human readable "#xxx" id matching db id // MEME uses comment.id, matching pmcData id
       comment_id_parent: comment.comment_id_parent,
       commenter: CMTMGR.GetUserName(comment.commenter_id),
       selected_comment_type,
@@ -126,7 +148,8 @@ function URComment({ cref, cid, uid }) {
       uIsSelected: cvobj.isSelected,
       uIsBeingEdited: cvobj.isBeingEdited,
       uIsEditable: cvobj.isEditable,
-      uAllowReply: cvobj.allowReply
+      uAllowReply: cvobj.allowReply,
+      uIsDisabled: CMTMGR.GetCommentsAreBeingEdited() // if I'm not editing, but someone else is, disable edit
     });
 
     // Lock edit upon creation of a new comment or a new reply
@@ -159,8 +182,7 @@ function URComment({ cref, cid, uid }) {
       ...prevState,
       uViewMode
     }));
-
-    CMTMGR.LockComment(cid);
+    CMTMGR.UIEditComment(cid);
   }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handle save button, which saves the state to comment manager.
@@ -171,8 +193,7 @@ function URComment({ cref, cid, uid }) {
     comment.comment_type = selected_comment_type;
     comment.commenter_text = [...commenter_text]; // clone, not byref
     comment.commenter_id = uid;
-    CMTMGR.UpdateComment(comment);
-    CMTMGR.UnlockComment(cid);
+    CMTMGR.UISaveComment(comment);
     setState(prevState => ({
       ...prevState,
       uViewMode: CMTMGR.VIEWMODE.VIEW
@@ -205,49 +226,55 @@ function URComment({ cref, cid, uid }) {
   /** handle delete button, which removes the comment associated with this
    *  commment from the comment manager */
   function evt_DeleteBtn() {
+    const { id } = state;
     CMTMGR.RemoveComment({
       collection_ref: cref,
+      id,
       comment_id: cid,
       uid
     });
   }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handle cancel button, which reverts the comment to its previous state,
-   *  doing additional housekeeping to keep comment manager consistent */
+   *  doing additional housekeeping to keep comment manager consistent
+   *  If the comment is empty and it's a new comment, just remove it
+   * */
   function evt_CancelBtn() {
-    const { commenter_text } = state;
-    let savedCommentIsEmpty = true;
-    commenter_text.forEach(t => {
-      if (t !== '') savedCommentIsEmpty = false;
-    });
+    const { commenter_text, id } = state;
 
-    const cb = () => CMTMGR.UnlockComment(cid);
+    let previouslyHadText = false;
+    CMTMGR.GetComment(cid).commenter_text.forEach(t => {
+      if (t !== '') previouslyHadText = true;
+    });
 
-    if (savedCommentIsEmpty) {
-      // "Cancel" will always remove the comment if the comment is empty
-      // - usually because it's a newly created comment
-      // - but also if the user clears all the text fields
-      // We don't care if the user entered any text
-      CMTMGR.RemoveComment(
-        {
-          collection_ref: cref,
-          comment_id: cid,
-          uid,
-          showCancelDialog: true
-        },
-        cb
-      );
-    } else {
-      // revert to previous text if current text is empty
+    if (previouslyHadText) {
+      // revert to previous text
+      CMTMGR.UICancelComment(cid);
       const comment = CMTMGR.GetComment(cid);
       setState(prevState => ({
         ...prevState,
+        modifytime_string: comment.modifytime_string,
+        selected_comment_type: comment.comment_type,
         commenter_text: [...comment.commenter_text], // restore previous text clone, not by ref
+        comment_error: '',
         uViewMode: CMTMGR.VIEWMODE.VIEW
       }));
-
-      cb();
+    } else {
+      // Remove the temporary comment and unlock
+      CMTMGR.RemoveComment({
+        collection_ref: cref,
+        id,
+        comment_id: cid,
+        uid,
+        skipDialog: true
+      });
+      setState({
+        commenter_text: [],
+        uViewMode: CMTMGR.VIEWMODE.VIEW
+      });
     }
+
+    return;
   }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handle select button, which updates the comment type associated with this
@@ -342,7 +369,7 @@ function URComment({ cref, cid, uid }) {
       ))}
     </select>
   );
-  const SelectedType = commentTypes.get(selected_comment_type); //(type => type[0] === selected_comment_type);
+  const SelectedType = commentTypes.get(selected_comment_type);
   const SelectedTypeLabel = SelectedType ? SelectedType.label : 'Type not found';
   // Alternative three-dot menu approach to hide "Edit" and "Delete"
   // const UIOnEditMenuSelect = event => {
@@ -382,8 +409,10 @@ function URComment({ cref, cid, uid }) {
           <div className="date">{modifytime_string || createtime_string}</div>
         </div>
         <div>
-          <div className="commentId">#{cid}</div>
-          <div>{TypeSelector}</div>
+          <div className="commentTypeBar">
+            <div className="commentTypeLabel">{TypeSelector}</div>
+            <div className="commentId">#{comment.comment_id}</div>
+          </div>
           <URCommentPrompt
             cref={cref}
             commentType={selected_comment_type}
@@ -407,17 +436,21 @@ function URComment({ cref, cid, uid }) {
       <div
         id={cid}
         ref={setElement}
-        className={`comment ${comment.comment_isMarkedDeleted ? 'deleted' : ''}`}
+        className={`comment ${comment.comment_isMarkedDeleted ? 'deleted' : ''} ${
+          cvobj.isMarkedRead ? '' : 'unread'
+        }`}
       >
         <div>
           <div className="commenter">{commenter}</div>
           <div className="date">{modifytime_string || createtime_string}</div>
         </div>
         <div>
-          <div className="commentId">#{cid}</div>
-          <div>
-            <span className="date">TYPE: </span>
-            <span className="type">{SelectedTypeLabel}</span>
+          <div className="commentTypeBar">
+            <div className="commentTypeLabel">
+              <span className="date">TYPE: </span>
+              <span className="type">{SelectedTypeLabel}</span>
+            </div>
+            <div className="commentId">#{comment.comment_id}</div>
           </div>
           <URCommentPrompt
             cref={cref}
@@ -426,19 +459,15 @@ function URComment({ cref, cid, uid }) {
             isMarkedDeleted={comment.comment_isMarkedDeleted}
             isMarkedRead={cvobj.isMarkedRead}
             viewMode={CMTMGR.VIEWMODE.VIEW}
-            onChange={evt_CommentText}
             errorMessage={comment_error}
           />
-          {uid && (
+          {uid && !uIsDisabled && (
             <div className="commentbar">
-              {!uIsDisabled && !comment.comment_isMarkedDeleted && ReplyBtn}
-              {(!uIsDisabled &&
-                isAllowedToEditOwnComment &&
+              {!comment.comment_isMarkedDeleted && ReplyBtn}
+              {(isAllowedToEditOwnComment &&
                 !comment.comment_isMarkedDeleted &&
                 EditBtn) || <div></div>}
-              {(((!uIsDisabled &&
-                isAllowedToEditOwnComment &&
-                !comment.comment_isMarkedDeleted) ||
+              {(((isAllowedToEditOwnComment && !comment.comment_isMarkedDeleted) ||
                 isAdmin) &&
                 DeleteBtn) || <div></div>}
             </div>
diff --git a/app/view/netcreate/components/URCommentBtn.jsx b/app/view/netcreate/components/URCommentBtn.jsx
index bcdd2ecbb..827e6d724 100644
--- a/app/view/netcreate/components/URCommentBtn.jsx
+++ b/app/view/netcreate/components/URCommentBtn.jsx
@@ -206,7 +206,7 @@ function URCommentBtn({ cref, uuiid }) {
    *  - the "read" status of all comments: unread (gold) or read (gray)
    *  - isOpen - click on the button to display threads in a new window
    */
-  const count = CMTMGR.GetThreadedViewObjectsCount(cref, uid);
+  const count = CMTMGR.GetCommentCollectionCount(cref);
   const ccol = CMTMGR.GetCommentCollection(cref) || {};
 
   let css = 'commentbtn ';
diff --git a/app/view/netcreate/components/URCommentCollectionMgr.jsx b/app/view/netcreate/components/URCommentCollectionMgr.jsx
new file mode 100644
index 000000000..c8a601d1b
--- /dev/null
+++ b/app/view/netcreate/components/URCommentCollectionMgr.jsx
@@ -0,0 +1,146 @@
+/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
+
+  URCommentCollectionMgr
+
+  Comment collection components are dynamically created and destroyed in the
+  DOM as the user requests opening and closing comment collection windows.
+  The URCommentCollectionMgr handles the insertion and removal of these
+  components.
+
+  UR MESSAGES
+  *  CMT_COLLECTION_SHOW {cref, position}
+  *  CMT_COLLECTION_HIDE {cref}
+  *  CMT_COLLECTION_HIDE_ALL
+
+  USE:
+
+    <URCommentCollectionMgr message={message} handleMessageUpdate/>
+
+
+  HISTORY
+  Originally, URCommentBtn were designed to handle comment opening
+  in Net.Create from two types componets: nodes/edges and
+  NodeTables/EdgeTables.  Since the requests could come
+  from different components, we had to keep track of which component
+  was requesting the opening, so they could close the corresponding
+  comment.  In order to do this, we used a reference that combined
+  the comment id reference (collection reference, or cref)
+  with a unique user interface id (uuiid).
+
+  MEME doesn't need that so we simply use `cref` as the
+  comment id.
+
+  That simplifies the comment references, but there was a second
+  challenge:
+
+  Since the SVG props and mechanisms are NOT react components, we
+  cannot use URCommentBtn to manage opening and editing comments.
+  Moreover, URCommentBtns opened inside Evidence Links are embedded
+  inside the Evidence Library and comments created inside the library
+  end up hidden due to layers of overflow divs.
+
+  To get around this, URCommentCollectionMgr essentially replaces the
+  functionality of URCommentBtn with three pieces, acting as a middle
+  man and breaking out the...
+  * visual display    -- URCommentSVGBtn
+  * UI click requests -- URCommentVBtn
+  * thread opening / closing requests -- URCommentCollectionMgr
+  ...into different functions handled by different components.
+
+\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
+
+import React, { useState, useEffect, useCallback } from 'react';
+import UNISYS from 'unisys/client';
+// import UR from '../../../system/ursys';
+// const STATE = require('../lib/client-state');
+
+import CMTMGR from '../comment-mgr';
+import URCommentThread from './URCommentThread';
+
+/// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+const DBG = true;
+const PR = 'URCommentCollectionMgr';
+
+const UDATAOwner = { name: 'URCommentCollectionMgr' };
+const UDATA = UNISYS.NewDataLink(UDATAOwner);
+
+/// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+function URCommentCollectionMgr(props) {
+  const uid = CMTMGR.GetCurrentUserId();
+  const [cmtBtns, setCmtBtns] = useState([]);
+  const [dummy, setDummy] = useState(0); // Dummy state variable to force update
+
+  /** Component Effect - register listeners on mount */
+  useEffect(() => {
+    UDATA.OnAppStateChange('COMMENTVOBJS', redraw, UDATAOwner);
+    UDATA.HandleMessage('CMT_COLLECTION_SHOW', urmsg_COLLECTION_SHOW);
+    UDATA.HandleMessage('CMT_COLLECTION_HIDE', urmsg_COLLECTION_HIDE);
+    UDATA.HandleMessage('CMT_COLLECTION_HIDE_ALL', urmsg_COLLECTION_HIDE_ALL);
+
+    return () => {
+      UDATA.AppStateChangeOff('COMMENTVOBJS', redraw);
+      UDATA.UnhandleMessage('CMT_COLLECTION_SHOW', urmsg_COLLECTION_SHOW);
+      UDATA.UnhandleMessage('CMT_COLLECTION_HIDE', urmsg_COLLECTION_HIDE);
+      UDATA.UnhandleMessage('CMT_COLLECTION_HIDE_ALL', urmsg_COLLECTION_HIDE_ALL);
+    };
+  }, []);
+
+  /// COMPONENT HELPER METHODS ////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  /// UR HANDLERS /////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function redraw(data) {
+    // This is necessary to force a re-render of the threads
+    // when the comment collection changes on the net
+    // especially when a new comment is added.
+    setDummy(dummy => dummy + 1); // Trigger re-render
+  }
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /**
+   * Handle urmsg_COLLECTION_SHOW message
+   * 1. Register the button, and
+   * 2. Open the URCommentBtn
+   * @param {Object} data
+   * @param {string} data.cref - Collection reference
+   * @param {Object} data.position - Position of the button
+   */
+  function urmsg_COLLECTION_SHOW(data) {
+    if (DBG) console.log(PR, 'CMT_COLLECTION_SHOW', data);
+    setCmtBtns(prevBtns => [...prevBtns, data]);
+  }
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urmsg_COLLECTION_HIDE(data) {
+    if (DBG) console.log(PR, 'CMT_COLLECTION_HIDE', data);
+    setCmtBtns(prevBtns => prevBtns.filter(btn => btn.cref !== data.cref));
+  }
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urmsg_COLLECTION_HIDE_ALL(data) {
+    if (DBG) console.log(PR, 'CMT_COLLECTION_HIDE_ALL', data);
+    setCmtBtns([]);
+  }
+
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  return (
+    <div className="URCommentCollectionMgr">
+      {cmtBtns.map(btn => (
+        <URCommentThread
+          key={btn.cref}
+          uiref={btn.cref}
+          cref={btn.cref}
+          uid={uid}
+          x={btn.position.x}
+          y={btn.position.y}
+        />
+      ))}
+    </div>
+  );
+}
+
+/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+export default URCommentCollectionMgr;
diff --git a/app/view/netcreate/components/URCommentPrompt.jsx b/app/view/netcreate/components/URCommentPrompt.jsx
index 3d1fa6858..f9939e50a 100644
--- a/app/view/netcreate/components/URCommentPrompt.jsx
+++ b/app/view/netcreate/components/URCommentPrompt.jsx
@@ -189,6 +189,18 @@ function URCommentPrompt({
           );
           break;
         case 'dropdown':
+          if (!prompt.options.includes(commenterText[promptIndex])) {
+            // currently selected value does not match an item in the dropdown
+            // fall back to the first item in the dropdown
+            if (prompt.options.length > 0)
+              commenterText[promptIndex] = prompt.options[0];
+            else {
+              console.warn(
+                `Dropdown for ${commentType} has no options!  Check definition!`
+              );
+              commenterText[promptIndex] = ''; // fall back to an empty string
+            }
+          }
           inputJSX = (
             <select
               value={commenterText[promptIndex] || ''}
@@ -291,7 +303,6 @@ function URCommentPrompt({
           {inputJSX}
           <div className="feedback">{prompt.feedback}</div>
           <div className="error">{errorMessage}</div>
-          <hr />
         </div>
       );
     });
@@ -300,7 +311,7 @@ function URCommentPrompt({
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   const RenderViewMode = () => {
     const NOTHING_SELECTED = <span className="help">(nothing selected)</span>;
-
+    if (isMarkedDeleted) return <div className="commenttext">DELETED</div>;
     return commentTypes.get(commentType).prompts.map((prompt, promptIndex) => {
       let displayJSX;
       switch (prompt.format) {
@@ -382,17 +393,11 @@ function URCommentPrompt({
 
       return (
         <div key={promptIndex} className="comment-item">
-          <div className="label">
-            <div className="comment-icon-inline">
-              {!isMarkedRead && !isMarkedDeleted && CMTMGR.COMMENTICON}
-            </div>
-            {prompt.prompt}
-          </div>
+          <div className="label">{prompt.prompt}</div>
           {/* <div className="help">{prompt.help}</div> */}
           {displayJSX}
           {/* <div className="feedback">{prompt.feedback}</div> */}
           <div className="error">{errorMessage}</div>
-          <hr />
         </div>
       );
     });
diff --git a/app/view/netcreate/components/URCommentSVGBtn.jsx b/app/view/netcreate/components/URCommentSVGBtn.jsx
new file mode 100644
index 000000000..065997fba
--- /dev/null
+++ b/app/view/netcreate/components/URCommentSVGBtn.jsx
@@ -0,0 +1,130 @@
+/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
+
+  URCommentSVGBtn
+
+  A purely visual button that uses SVG Symbols.
+  Relies on props to render.
+
+  USE:
+      <URCommentSVGBtn
+        uiref={cref}
+        count={countRepliesToMe}
+        hasUnreadComments={countRepliesToMe > 0}
+        hasReadComments={countRepliesToMe === 0}
+        selected={false}
+        disabled={false}
+        small={false}
+        onClick={evt_ExpandPanel}
+      />
+
+  Used by:
+  - URCommentStatus
+
+  Displays three visual states:
+  - read/unread status
+    - has unread comments (gold color)
+    - all comments are read (gray color)
+  - is open / selected (displaying comments)
+  - the number of comments.
+
+
+  NOTE: Unlike MEME's implementation, we do not use svgjs
+
+\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
+
+import React, { useRef, useState, useEffect } from 'react';
+import CMTMGR from '../comment-mgr';
+// import { SVG } from '@svgdotjs/svg.js'; // esm version // MEME implementation
+// import './URComment.css'; // MEME implementation
+
+/// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+function URCommentSVGBtn({
+  uiref,
+  count,
+  hasUnreadComments,
+  hasReadComments,
+  selected,
+  disabled,
+  small,
+  onClick
+}) {
+  const svgRef = useRef(null);
+  const [label, setLabel] = useState('');
+  const [css, setCss] = useState('');
+  const [svgClass, setSVGClass] = useState('');
+
+  /// USEEFFECT ///////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  useEffect(() => {
+    // const draw = SVG(svgRef.current);
+    c_DrawCommentIcon();
+
+    return () => {
+      // draw.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    c_DrawCommentIcon();
+  }, [count, hasUnreadComments, hasReadComments, selected]);
+
+  /// COMPONENT HELPER METHODS ////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function c_DrawCommentIcon() {
+    // css
+    let css = ' ';
+    if (hasUnreadComments) css += 'hasUnreadComments ';
+    else if (hasReadComments) css += 'hasReadComments ';
+    css += selected ? 'isOpen ' : '';
+    css += disabled ? 'disabled ' : '';
+    setCss(css);
+
+    const commentCountLabel = count > 0 ? count : '';
+    setLabel(commentCountLabel);
+
+    let SVGClass = 'svgcmt-unread';
+    if ((hasReadComments && !hasUnreadComments) || count === '' || count === 0) {
+      // it's possible to have both read and unread comments
+      // if there's anything unread, we want to mark it unread
+      if (selected) SVGClass = 'svgcmt-readSelected';
+      else SVGClass = 'svgcmt-read-outlined'; // only vprops use non-outlined
+    } else {
+      // hasUnreadComments or no comments
+      if (selected) SVGClass = 'svgcmt-unreadSelected';
+      else SVGClass = 'svgcmt-unread';
+    }
+    setSVGClass(SVGClass);
+
+    // const draw = SVG(svgRef.current);
+    // draw.clear();
+    // draw
+    //   .group()
+    //   .attr('class', svgDefKey)
+    //   .add(CMTMGR.COMMENTICON)
+    //   // .add(CMTMGR.COMMENTICON(draw).clone())
+    //   // .add(SVGDEFS.get('comment').clone())
+    //   .transform({
+    //     translate: [4, 0], // center within 32,32
+    //     origin: 'top left', // seems to default to 'center' if not specified
+    //     scale: small ? 0.9 : 1.6
+    //   });
+  }
+
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  const size = small ? '24' : '32';
+  return (
+    <div id={uiref} className={'commentbtn' + css} onClick={onClick}>
+      <div className="comment-count">{label}</div>
+      <svg width={size} height={size}>
+        <g className={svgClass}>{CMTMGR.COMMENTICON}</g>
+      </svg>
+    </div>
+  );
+}
+
+/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+export default URCommentSVGBtn;
diff --git a/app/view/netcreate/components/URCommentStatus.jsx b/app/view/netcreate/components/URCommentStatus.jsx
index b5121cd41..66a97e4d3 100644
--- a/app/view/netcreate/components/URCommentStatus.jsx
+++ b/app/view/netcreate/components/URCommentStatus.jsx
@@ -19,15 +19,17 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
 import UNISYS from 'unisys/client';
-import NetMessage from 'unisys/common-netmessage-class';
 import CMTMGR from '../comment-mgr';
-import URCommentThreadMgr from './URCommentThreadMgr';
+import URCommentCollectionMgr from './URCommentCollectionMgr';
+import URCommentSVGBtn from './URCommentSVGBtn';
+import URDialog from './URDialog';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /// Initialize UNISYS DATA LINK for functional react component
 const UDATAOwner = { name: 'URCommentStatus' };
 const UDATA = UNISYS.NewDataLink(UDATAOwner);
+
 /// Debug Flags
 const DBG = false;
 const PR = 'URCommentStatus';
@@ -43,6 +45,10 @@ let ResetTimer;
  * @returns
  */
 function URCommentStatus(props) {
+  const uid = CMTMGR.GetCurrentUserId();
+
+  const [CMTSTATUS, setCMTSTATUS] = useState({});
+
   const [message, setMessage] = useState('');
   const [messages, setMessages] = useState([]);
   const [activeCSS, setActiveCSS] = useState('');
@@ -51,21 +57,30 @@ function URCommentStatus(props) {
 
   /** Component Effect - register listeners on mount */
   useEffect(() => {
-    UDATA.OnAppStateChange('COMMENTCOLLECTION', urmsg_DUMMY_COMMENTS_UPDATE); // respond to close
-    UDATA.HandleMessage('COMMENTS_UPDATE', urmsg_DUMMY_COMMENTS_UPDATE);
+    UDATA.OnAppStateChange('CMTSTATUS', state_CMTSTATUS, UDATAOwner);
+    UDATA.OnAppStateChange('COMMENTCOLLECTION', redraw, UDATAOwner); // respond to close
+    UDATA.HandleMessage('COMMENTS_UPDATE', redraw);
     UDATA.HandleMessage('COMMENT_UPDATE', urmsg_COMMENT_UPDATE);
 
     return () => {
-      UDATA.AppStateChangeOff('COMMENTCOLLECTION', urmsg_DUMMY_COMMENTS_UPDATE); // respond to close
-      UDATA.UnhandleMessage('COMMENTS_UPDATE', urmsg_DUMMY_COMMENTS_UPDATE);
+      UDATA.AppStateChangeOff('CMTSTATUS', state_CMTSTATUS, UDATAOwner);
+      UDATA.AppStateChangeOff('COMMENTCOLLECTION', redraw, UDATAOwner); // respond to close
+      UDATA.UnhandleMessage('COMMENTS_UPDATE', redraw);
       UDATA.UnhandleMessage('COMMENT_UPDATE', urmsg_COMMENT_UPDATE);
+      clearTimeout(AppearTimer);
+      clearTimeout(DisappearTimer);
+      clearTimeout(ResetTimer);
     };
   }, []);
 
   /// UR HANDLERS /////////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function state_CMTSTATUS(CMTSTATUS) {
+    setCMTSTATUS(CMTSTATUS);
+  }
+
   /** force re-render after COMMENTS_UPDATE from a new comment another user */
-  function urmsg_DUMMY_COMMENTS_UPDATE() {
+  function redraw() {
     // This is necessary to force a re-render of the comment summaries
     // when the comment collection changes on the net
     setDummy(dummy => dummy + 1); // Trigger re-render
@@ -78,15 +93,22 @@ function URCommentStatus(props) {
     const my_uaddr = UNISYS.SocketUADDR();
     const isNotMe = my_uaddr !== uaddr;
 
-    if (comment && comment.commenter_text.length > 0) {
+    // clone the comment object so we can modify the reply text
+    // otherwise we inadvertently change the commenter_id
+    const status_comment = Object.assign({}, comment);
+    if (
+      status_comment &&
+      status_comment.commenter_text &&
+      status_comment.commenter_text.length > 0
+    ) {
       let source;
-      if (comment.comment_id_parent) {
-        source = `${comment.commenter_id} replied: `;
+      if (status_comment.comment_id_parent) {
+        source = `${status_comment.commenter_id} replied: `;
       } else {
-        source = `${comment.commenter_id} commented: `;
+        source = `${status_comment.commenter_id} commented: `;
       }
-      comment.commenter_id = source;
-      const message = c_GetCommentItemJSX(comment);
+      status_comment.commenter_id = source;
+      const message = c_GetCommentItemJSX(status_comment);
       setMessages(prevMessages => [...prevMessages, message]);
 
       // Only show status update if it's coming from another
@@ -96,7 +118,6 @@ function URCommentStatus(props) {
         clearTimeout(ResetTimer);
         // clear it first, then appear (so that each new comment triggers the animation)
         setMessage(message);
-        setActiveCSS('');
         AppearTimer = setTimeout(() => {
           setActiveCSS('appear');
         }, 250);
@@ -141,7 +162,7 @@ function URCommentStatus(props) {
   function evt_OpenComment(event, cref, cid) {
     event.preventDefault();
     event.stopPropagation();
-    CMTMGR.OpenComment(cref, cid);
+    CMTMGR.OpenCommentStatusComment(cref, cid);
   }
 
   /// RENDER HELPERS //////////////////////////////////////////////////////////
@@ -170,18 +191,18 @@ function URCommentStatus(props) {
           href="#"
           onClick={event => evt_OpenComment(event, cref, comment.comment_id)}
         >{`#${comment.comment_id}`}</a>
-        &nbsp;&ldquo;
         <div className="comment-text">
+          &nbsp;&ldquo;
           {String(comment.commenter_text.join('|')).trim()}
+          &rdquo;
         </div>
-        &rdquo;
       </div>
     );
   }
 
   /// COMPONENT RENDER ////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  const isLoggedIn = NetMessage.GlobalGroupID();
+  if (!uid) return ''; // if not logged in, there's no comment status
 
   const { countRepliesToMe, countUnread } = CMTMGR.GetCommentStats();
   const unreadRepliesToMe = CMTMGR.GetUnreadRepliesToMe();
@@ -195,36 +216,35 @@ function URCommentStatus(props) {
 
   const UnreadRepliesToMeButtonJSX = (
     <div>
-      <div
-        className={`commentbtn ${
-          countRepliesToMe ? 'hasNewComments' : 'hasReadComments'
-        }`}
+      <URCommentSVGBtn
+        uiref="unreadRepliesToMe"
+        count={countRepliesToMe}
+        hasUnreadComments={countRepliesToMe > 0}
+        hasReadComments={countRepliesToMe === 0}
+        selected={false}
         onClick={evt_ExpandPanel}
-      >
-        {CMTMGR.COMMENTICON}
-        <div className="comment-count">{countRepliesToMe}</div>
-      </div>
+      />
       <h3>&nbsp;unread replies to me</h3>
     </div>
   );
   const UnreadButtonJSX = (
     <div>
-      <div
-        className={`commentbtn ${
-          countUnread ? 'hasUnreadComments' : 'hasReadComments'
-        }`}
+      <URCommentSVGBtn
+        uiref="unread"
+        count={countUnread}
+        hasUnreadComments={countUnread > 0}
+        hasReadComments={countUnread === 0}
+        selected={false}
         onClick={evt_ExpandPanel}
-      >
-        {CMTMGR.COMMENTICON}
-        <div className="comment-count">{countUnread}</div>
-      </div>
+      />
       <h3>&nbsp;unread</h3>
     </div>
   );
 
   return (
     <div>
-      <URCommentThreadMgr />
+      <URCommentCollectionMgr />
+      <URDialog info={CMTSTATUS.dialog} />
       <div id="comment-bar">
         <div
           id="comment-alert"
@@ -238,7 +258,7 @@ function URCommentStatus(props) {
             className={`${uiIsExpanded ? ' expanded' : ''}`}
             onClick={evt_ExpandPanel}
           >
-            {UnreadRepliesToMeButtonJSX}&nbsp;&nbsp;{UnreadButtonJSX}
+            {UnreadRepliesToMeButtonJSX}&nbsp;{UnreadButtonJSX}
           </div>
           <div
             id="comment-panel"
diff --git a/app/view/netcreate/components/URCommentThread.jsx b/app/view/netcreate/components/URCommentThread.jsx
index 72004fb92..99ad38608 100644
--- a/app/view/netcreate/components/URCommentThread.jsx
+++ b/app/view/netcreate/components/URCommentThread.jsx
@@ -46,21 +46,27 @@ const PR = 'URCommentThread';
  *  when the thread is closed.
  */
 function URCommentThread({ uiref, cref, uid, x, y }) {
-  const [isDisabled, setIsDisabled] = useState(false);
+  const [forceRender, setForceRender] = useState(0); // Dummy state variable to force update
 
   /** Component Effect - set up listeners on mount */
   useEffect(() => {
-    function urmsg_UpdatePermissions(data) {
-      setIsDisabled(data.commentBeingEditedByMe);
-    }
-
-    UDATA.HandleMessage('COMMENT_UPDATE_PERMISSIONS', urmsg_UpdatePermissions);
+    UDATA.HandleMessage('COMMENT_UPDATE_PERMISSIONS', urmsg_ForceRender);
 
     return () => {
-      UDATA.UnhandleMessage('COMMENT_UPDATE_PERMISSIONS', urmsg_UpdatePermissions);
+      UDATA.UnhandleMessage('COMMENT_UPDATE_PERMISSIONS', urmsg_ForceRender);
     };
   }, []);
 
+  /// UR HANDLERS /////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urmsg_ForceRender() {
+    // This is necessary to force a re-render of "Click to add a Comment"
+    // text area if the comment edit is cancelled and placeholder
+    // comment is removed
+    // Current disabled state is refreshed with each render
+    setForceRender(forceRender => forceRender + 1); // Trigger re-render
+  }
+
   /// COMPONENT UI HANDLERS ///////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handles clicking the "Click to add a Comment" textarea to create a new
@@ -91,7 +97,7 @@ function URCommentThread({ uiref, cref, uid, x, y }) {
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handles the "X" or "Close" button click, marks all comments "read" */
   function evt_OnClose() {
-    CMTMGR.CloseCommentCollection(uiref, cref, uid);
+    CMTMGR.CloseCommentCollectionAndMarkRead(uiref, cref, uid);
   }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /** handles clicking on the name of the object being commented on
@@ -107,6 +113,7 @@ function URCommentThread({ uiref, cref, uid, x, y }) {
   /// COMPONENT RENDER ////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   const commentVObjs = CMTMGR.GetThreadedViewObjects(cref, uid);
+  const isDisabled = CMTMGR.GetCommentsAreBeingEdited();
 
   /// SUB COMPONENTS
   const CloseBtn = (
@@ -117,10 +124,15 @@ function URCommentThread({ uiref, cref, uid, x, y }) {
 
   // HACK: To keep the comment from going off screen:
   const windowHeight = Math.min(screen.height, window.innerHeight);
-  const commentMaxHeight = `${windowHeight - y - 100}px`;
+  // max 350 ensures that comments near the bottom of the screen
+  const commentMaxHeight = `${Math.max(350, windowHeight - y - 100)}px`;
 
   const { typeLabel, sourceLabel } = CMTMGR.GetCREFSourceLabel(cref);
 
+  // This is the text area that the user clicks to add a comment
+  // emulates Google Doc comments
+  const showAddCommentClickTarget = !CMTMGR.GetCommentsAreBeingEdited();
+
   return (
     <Draggable>
       <div
@@ -150,7 +162,7 @@ function URCommentThread({ uiref, cref, uid, x, y }) {
               key={cvobj.comment_id}
             />
           ))}
-          {!isDisabled && uid && (
+          {showAddCommentClickTarget && !isDisabled && uid && (
             <textarea
               className="add"
               placeholder="Click to add a Comment..."
diff --git a/app/view/netcreate/components/URCommentThreadMgr.jsx b/app/view/netcreate/components/URCommentThreadMgr.jsx
deleted file mode 100644
index 161474923..000000000
--- a/app/view/netcreate/components/URCommentThreadMgr.jsx
+++ /dev/null
@@ -1,168 +0,0 @@
-/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
-
-  URCommentThreadMgr
-
-  URCommentThreadMgr handles the opening and closing of URCommentThreads
-  being requested from three sources:
-  * Evidence Links -- via URCOmmentBtnAlias
-  * SVG props      -- in class-vbadge via UR.Publish(`CTHREADMGR_THREAD_OPENED`) calls
-  * SVG Mechanisms -- in class-vbadge via UR.Publish(`CTHREADMGR_THREAD_OPENED`) calls
-
-  URCommentVBtn is a visual component that passes clicks
-  to URCommentThreadMgr via UR.Publish(`CTHREADMGR_THREAD_OPENED`) calls
-
-
-  HOW IT WORKS
-    When an EVLink, SVG prop, or SVG mechanism clicks on the
-    URCommentVBtn, URCommentThreadMgr will:
-    * Add the requested Thread to the URCommentThreadMgr
-    * Open the URCommentThread
-    * When the URCommentThread is closed, it will be removed from the URCommentThreadMgr
-
-  See [Whimsical Comment Data Structures](https://whimsical.com/comment-data-structures-3zPhDYLVsEKt2gY7xyMMKS) for how the current system is implemented.
-
-  UR MESSAGES
-    *  CTHREADMGR_THREAD_OPENED {cref, position}
-    *  CTHREADMGR_THREAD_CLOSED {cref}            Just closed, update views
-    *  CTHREADMGR_THREAD_CLOSED_ALL
-
-
-  NOTES
-
-  * Differences with URCommentBtn
-
-    URCommentBtn displays Comment Collections (e.g. URCommentThread) as children
-    of the URCommentBtn.
-    In contrast, URCommentThread are displayed as children of URCommentTHreadMgr.
-    This gets around the problem of URCommentBtns beimg hidden inside Evidence Links.
-
-    To get around this, URCommentThreadMgr essentially replaces the
-    functionality of URCommentBtn with three pieces, acting as a middle
-    man and breaking out the...
-    * visual display    -- URCommentBtnAlias
-    * UI click requests -- UR messages
-    * thread opening / closing requests -- URCommentThreadMgr
-    ...into different functions handled by different components.
-
-  USE:
-
-    <URCommentThreadMgr message={message} handleMessageUpdate/>
-
-
-
-\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
-
-import React, { useState, useEffect, useCallback } from 'react';
-import UNISYS from 'unisys/client';
-
-import CMTMGR from '../comment-mgr';
-import URCommentThread from './URCommentThread';
-
-/// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-/// Initialize UNISYS DATA LINK for functional react component
-const UDATAOwner = { name: 'URCommentThreadMgr' };
-const UDATA = UNISYS.NewDataLink(UDATAOwner);
-//
-const DBG = true;
-const PR = 'URCommentThreadMgr';
-
-/// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-function URCommentThreadMgr() {
-  const uid = CMTMGR.GetCurrentUserId();
-  const [cmtBtns, setCmtBtns] = useState([]); // { uiref, cref, position }
-  const [dummy, setDummy] = useState(100);
-
-  /** Component Effect - register listeners on mount */
-  useEffect(() => {
-    UDATA.OnAppStateChange('COMMENTVOBJS', urstate_UpdateCommentVObjs);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_OPENED', urmsg_THREAD_OPEN);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED', urmsg_THREAD_CLOSE);
-    UDATA.HandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', urmsg_THREAD_CLOSE_ALL);
-
-    return () => {
-      UDATA.AppStateChangeOff('COMMENTVOBJS', urstate_UpdateCommentVObjs);
-      UDATA.UnhandleMessage('CTHREADMGR_THREAD_OPENED', urmsg_THREAD_OPEN);
-      UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED', urmsg_THREAD_CLOSE);
-      UDATA.UnhandleMessage('CTHREADMGR_THREAD_CLOSED_ALL', urmsg_THREAD_CLOSE_ALL);
-    };
-  }, []);
-
-  /// COMPONENT HELPER METHODS ////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-  /// UR HANDLERS /////////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  function urstate_UpdateCommentVObjs(data) {
-    // This is necessary to force a re-render of the threads
-    // when the comment collection changes on the net
-    // especially when a new comment is added.
-    setDummy(dummy => dummy + 1); // Trigger re-render
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  /**
-   * Handle CTHREADMGR_THREAD_OPENED message
-   * 1. Register the button, and
-   * 2. Open the URCommentBtn
-   * @param {Object} data
-   * @param {string} data.uiref - ID of UI component initiating the request
-   * @param {string} data.cref - Collection reference
-   * @param {Object} data.position - Position of the button
-   */
-  function urmsg_THREAD_OPEN(data) {
-    if (DBG) console.log(PR, 'urmsg_THREAD_OPEN', data);
-    // Validate
-    if (data.uiref === undefined)
-      throw new Error(
-        `URCommentThreadMgr: urmsg_THREAD_OPEN: missing uiref ${JSON.stringify(data)}`
-      );
-    if (
-      data.position === undefined ||
-      data.position.x === undefined ||
-      data.position.y === undefined
-    )
-      throw new Error(
-        `URCommentThreadMgr: urmsg_THREAD_OPEN: missing position data ${JSON.stringify(
-          data
-        )}`
-      );
-    // 1. Register the button
-    setCmtBtns(prevBtns => [...prevBtns, data]);
-    // 2. Open the URCommentThread
-    // NOTE: Call is to data.uiref, not data.cref
-    CMTMGR.UpdateCommentUIState(data.uiref, { cref: data.cref, isOpen: true });
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  function urmsg_THREAD_CLOSE(data) {
-    if (DBG) console.log('urmsg_THREAD_CLOSE', data);
-    setCmtBtns(prevBtns => prevBtns.filter(btn => btn.cref !== data.cref));
-  }
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  function urmsg_THREAD_CLOSE_ALL(data) {
-    if (DBG) console.log('urmsg_THREAD_CLOSE_ALL', data);
-    setCmtBtns([]);
-  }
-
-  /// COMPONENT RENDER ////////////////////////////////////////////////////////
-  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-  return (
-    <div className="URCommentThreadMgr">
-      {cmtBtns.map(btn => (
-        <URCommentThread
-          key={btn.cref}
-          uiref={btn.uiref}
-          cref={btn.cref}
-          uid={uid}
-          x={btn.position.x}
-          y={btn.position.y}
-        />
-      ))}
-    </div>
-  );
-}
-
-/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
-/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-export default URCommentThreadMgr;
diff --git a/app/view/netcreate/components/URCommentVBtn.jsx b/app/view/netcreate/components/URCommentVBtn.jsx
index 4868b4eb0..746db38db 100644
--- a/app/view/netcreate/components/URCommentVBtn.jsx
+++ b/app/view/netcreate/components/URCommentVBtn.jsx
@@ -2,47 +2,156 @@
 
   URCommentVBtn
 
-  A purely visual button.
+  NOTE: This is a different implementation from Net.Create's.
+        MEME's URCommentVBtn
+        * uses props only for id (instead of ALL parameters)
+        * id is `cref` (instead of `uiref)`
+        * comment state is derived from global state objects (not props)
 
-  It shows three visual states:
-  * read/unread status
-    * has unread comments (gold color)
-    * all comments are read (gray color)
-  * is open / selected (displaying comments)
-  * the number of comments.
+  A display button that calls URCommentCollectionMgr to open comments.
+  It emulates the visual functionality of URCommentBtn but is not a parent
+  of the URCommentThread and does not directly handle the opening and closing
+  of URCommentThreads.  URCommentThreads are opened separately via
+  URCommentCollectionMgr.
 
+  FUNCTIONALITY:
+    URCommentVBtn does five things:
+    1. Displays whether the comment thread is open (bordered) or closed (no border)
+    2. Displays the number of comments in the thread
+    3. Provides the position of the source component requesting the thread
+    4. Requests URCommentCollectionMgr to open the comment thread
+    5. Requests URCommentCollectionMgr to close the comment thread
+    4. // REVIEW: isDisabled is not used -- where do we get that status forom?
+
+  USE:
+
+    <URCommentVBtn
+      cref={collection_ref}
+    />
+
+  PROPS:
+    * cref    -- collection reference (usu node id, edge id)
+
+  USED BY:
+    * URCommentStatus > URCommentCollectionMgr
+    * Navbar
+    * ELink
+
+  NOTE unlike URCommentBtn, URCommentVBtn does not use the unique user
+  interface id (uuiid) to differentiate comment buttons on EVLinks vs props.
 
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
+import UNISYS from 'unisys/client';
 import CMTMGR from '../comment-mgr';
+import URCommentSVGBtn from './URCommentSVGBtn';
 
 /// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/// Initialize UNISYS DATA LINK for functional react component
+const UDATAOwner = { name: 'URCommentVBtn' };
+const UDATA = UNISYS.NewDataLink(UDATAOwner);
+/// Debug Flags
+const DBG = false;
+const PR = 'URCommentVBtn';
 
 /// REACT FUNCTIONAL COMPONENT ////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-function URCommentVBtn({ uiref, count, hasUnreadComments, selected, cb }) {
-  let icon;
-  if (selected) {
-    if (hasUnreadComments) icon = CMTMGR.ICN_COMMENT_UNREAD_SELECTED;
-    else if (count === 0) icon = CMTMGR.ICN_COMMENT_UNREAD_SELECTED;
-    else icon = CMTMGR.ICN_COMMENT_READ_SELECTED;
-  } else {
-    // not selected
-    if (hasUnreadComments) icon = CMTMGR.ICN_COMMENT_UNREAD;
-    else if (count === 0) icon = CMTMGR.ICN_COMMENT_UNREAD;
-    else icon = CMTMGR.ICN_COMMENT_READ;
+/** URCommentVBtn
+ *  @param {string} cref - Collection reference
+ *  @returns {React.Component} - URCommentVBtn
+ */
+function URCommentVBtn({ cref }) {
+  const btnRef = useRef(null);
+  const [count, setCount] = useState(0);
+  const [hasUnreadComments, setHasUnreadComments] = useState(false);
+  const [hasReadComments, setHasReadComments] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  /// USEEFFECT ///////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  useEffect(() => {
+    c_Update();
+    // Handlers
+    UDATA.OnAppStateChange('COMMENTCOLLECTION', urstate_UpdateCollection, UDATAOwner);
+    UDATA.OnAppStateChange('COMMENTVOBJS', urstate_UpdateVObj, UDATAOwner);
+    // window.addEventListener('resize', evt_OnResize);
+    // clean up on unmount
+    return () => {
+      UDATA.AppStateChangeOff('COMMENTCOLLECTION', urstate_UpdateCollection);
+      UDATA.AppStateChangeOff('COMMENTVOBJS', urstate_UpdateVObj, UDATAOwner);
+      // window.removeEventListener('resize', evt_OnResize);
+    };
+  }, []);
+
+  useEffect(() => {
+    c_Update();
+  }, [cref]);
+
+  /// UR HANDLERS /////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  function urstate_UpdateCollection(COMMENTCOLLECTION) {
+    c_Update();
+  }
+  function urstate_UpdateVObj(COMMENTVOBJS) {}
+
+  /// COMPONENT HELPER METHODS ////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  function c_Update() {
+    const ccol = CMTMGR.GetCommentCollection(cref) || {};
+    const { hasReadComments, hasUnreadComments } = ccol;
+    setHasReadComments(hasReadComments);
+    setHasUnreadComments(hasUnreadComments);
+
+    const uistate = CMTMGR.GetCommentUIState(cref);
+    const isOpen = uistate ? uistate.isOpen : false;
+    setIsOpen(isOpen);
+
+    // commentCountLabel
+    const commentCount = CMTMGR.GetCommentCollectionCount(cref);
+    setCount(commentCount);
+  }
+  /// COMPONENT UI HANDLERS ///////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /** handle URCommentBtn click, which opens and closes the URCommentThread */
+  function evt_OnClick(event) {
+    event.stopPropagation();
+    if (isOpen) {
+      // is currently open, so close it
+      const uid = CMTMGR.GetCurrentUserId();
+      CMTMGR.CloseCommentCollection(cref, cref, uid);
+    } else {
+      // is currently closed, so open it
+      CMTMGR.OpenCommentCollectionByCref(cref);
+    }
   }
+  /// DEPRECATED FOR NOW
+  /// -- URCommentCollectionMgr should handle window resize?
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  // /** handles window resize, which will adjust the URCommentThread window
+  //  *  position relative to the resized location of the URCommentBtn
+  //  */
+  // function evt_OnResize() {
+  //   const position = c_GetCommentThreadPosition();
+  //   setPosition(position);
+  // }
 
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   return (
-    <button id={uiref} onClick={cb} className="URCommentVBtn">
-      {icon}
-      <div className={`count ${hasUnreadComments ? 'unread' : ''}`}>
-        {count === 0 ? '' : count}
-      </div>
-    </button>
+    <div ref={btnRef}>
+      <URCommentSVGBtn
+        uiref={cref}
+        count={count}
+        hasUnreadComments={hasUnreadComments}
+        hasReadComments={hasReadComments}
+        selected={isOpen}
+        onClick={evt_OnClick}
+      />
+    </div>
   );
 }
 
diff --git a/app/view/netcreate/components/URDateField.jsx b/app/view/netcreate/components/URDateField.jsx
index 6e44cbe2b..37dd55352 100644
--- a/app/view/netcreate/components/URDateField.jsx
+++ b/app/view/netcreate/components/URDateField.jsx
@@ -179,7 +179,7 @@ function URDateField({
 
   /// RENDER /////////////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  const READONLY = <div>{hdate.formattedDateString}</div>;
+  const READONLY = <div className="viewvalue">{hdate.formattedDateString}</div>;
 
   const FILTER = (
     <div className="urdate">
diff --git a/app/view/netcreate/components/URDialog.css b/app/view/netcreate/components/URDialog.css
new file mode 100644
index 000000000..d0fb22b89
--- /dev/null
+++ b/app/view/netcreate/components/URDialog.css
@@ -0,0 +1,69 @@
+#urdialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: var(--comment-commenter-font-color);
+  z-index: 11000; /* 10k is the default z-index for comment */
+}
+
+#urdialog .screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #0006;
+  z-index: 2001;
+}
+
+#urdialog .dialogwindow {
+  position: relative;
+  max-width: 90%;
+  max-height: 80%;
+  overflow: hidden;
+  background-color: white;
+  padding: 25px;
+  z-index: 11000;
+}
+
+#urdialog .dialogcontent {
+  display: grid;
+  grid-template-rows: 25px auto 25px;
+  text-align: left;
+}
+
+#urdialog .dialogmessage {
+  margin-bottom: 25px;
+}
+
+#urdialog h1,
+#urdialog .label {
+  font-size: 10px;
+}
+
+#urdialog .label {
+  color: #0008;
+}
+
+#urdialog .dialogpreview {
+  margin: 5px 0 20px 0;
+}
+
+#urdialog img {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+  max-height: 250px;
+  background-color: blue;
+}
+
+#urdialog .dialogcontrolbar {
+  display: flex;
+  justify-content: space-between;
+}
diff --git a/app/view/netcreate/components/URDialog.jsx b/app/view/netcreate/components/URDialog.jsx
new file mode 100644
index 000000000..771dd74e7
--- /dev/null
+++ b/app/view/netcreate/components/URDialog.jsx
@@ -0,0 +1,67 @@
+/*//////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
+
+  Generic Dialog
+
+  USE:
+
+    <URDialog
+      dialog={CMTSTATUS.dialog}
+    />
+
+\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
+
+import React from 'react';
+import Draggable from 'react-draggable';
+// import './URDialog.css'; // MEME-only
+
+/// CONSTANTS & DECLARATIONS //////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+const DBG = false;
+const PR = 'URDialog';
+
+/// REACT COMPONENT ///////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+function URDialog({ info }) {
+  if (info === undefined) return null;
+
+  const {
+    isOpen,
+    message = 'Are you sure?',
+    okmessage = 'OK',
+    cancelmessage = 'Cancel',
+    onOK, // function
+    onCancel // function
+  } = info;
+
+  /// COMPONENT RENDER ////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  const BTN_OK = <button onClick={onOK}>{okmessage}</button>;
+  const BTN_CANCEL = onCancel ? (
+    <button onClick={onCancel}>{cancelmessage}</button>
+  ) : (
+    ''
+  );
+
+  return (
+    isOpen && (
+      <div id="urdialog">
+        <div className="screen"></div>
+        <Draggable>
+          <div className="dialogwindow">
+            <div className="dialogmessage">{message}</div>
+            <div className="dialogcontrolbar">
+              {BTN_CANCEL}
+              {`\u00a0`}
+              {BTN_OK}
+            </div>
+          </div>
+        </Draggable>
+      </div>
+    )
+  );
+}
+
+/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+export default URDialog;
diff --git a/app/view/netcreate/components/URTable.css b/app/view/netcreate/components/URTable.css
index 0446e9e43..c551e85a6 100644
--- a/app/view/netcreate/components/URTable.css
+++ b/app/view/netcreate/components/URTable.css
@@ -1,28 +1,74 @@
 .URTable {
+  /* override styles here */
+  --bg-thead-clr: #fdfdff;
+  --bg-selected-clr: #eef;
+  --bg-hover-clr: #ddf;
+  --tabletip-hover-clr: #ccf;
+  /* layout */
+  --padding-horizontal: 5px;
+  --row-height: 1em;
 }
 .URTable table {
   border-collapse: collapse;
   width: 100%;
+  table-layout: fixed; /* enforce column widths */
+}
+.URTable thead {
+  /* position: sticky; */
+  /* top: 0; */
+  /* z-index: 1; for some reason EdgeTable can't set z to 1 or thead will cover tabletip */
 }
 .URTable th {
-  padding: 0 5px;
+  padding: 0 var(--padding-horizontal);
   border-right: 1px solid #999;
+  background-color: var(--bg-thead-clr);
   top: 0;
-  background-color: #daebef;
   position: -webkit-sticky;
-  position: sticky;
+  position: sticky; /* needed for resizing columns */
   z-index: 1; /* for some reason EdgeTable requires this or body cells will cover td */
 }
 .URTable th.selected {
-  background-color: #c6d5d6;
+  background-color: var(--bg-selected-clr);
 }
 .URTable thead,
 .URTable thead > tr,
 .URTable thead > tr > th {
   user-select: none;
 }
+.URTable th span.sortDisabled {
+  display: none;
+}
+.URTable th span.sortEnabled {
+  display: none;
+}
+.URTable th:hover {
+  background-color: var(--bg-hover-clr);
+  cursor: default;
+}
+.URTable th:hover span {
+  opacity: 0.5;
+}
+.URTable th:hover span.sortEnabled {
+  display: inline;
+  cursor: pointer;
+}
+.URTable th.selected span {
+  display: inline;
+}
+.URTable th.selected:hover span {
+  opacity: 1;
+}
+
 .URTable tr:hover {
-  background-color: #0002;
+  background-color: var(--bg-hover-clr);
+}
+.URTable td {
+  padding: 0 var(--padding-horizontal);
+  height: var(--row-height);
+  max-height: var(--row-height);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .URTable .resize-handle {
   position: absolute;
@@ -41,3 +87,62 @@
   padding: 0 2px;
   text-align: left;
 }
+
+.URTable img {
+  max-width: 225px;
+  max-height: var(--row-height);
+}
+
+/* tooltip */
+.URTable .tabletip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+.URTable .tabletip-text {
+  visibility: visible;
+  width: max-content;
+  max-width: 400px;
+  white-space: normal;
+  text-overflow: unset;
+  background-color: black;
+  color: #fff;
+  border-radius: 4px;
+  padding: 5px;
+  position: absolute;
+  top: 0; /* position directly on top of the element */
+  /* bottom: 125%; /* Position above the element */
+  left: 0%;
+  opacity: 0;
+  transition: opacity 0.3s;
+  z-index: 101;
+}
+.URTable .tabletip p {
+  margin: 0; /* override markdown text spacing */
+}
+.URTable td:hover {
+  overflow: visible;
+  background-color: var(--tabletip-hover-clr);
+  position: relative;
+  z-index: 200;
+}
+.URTable td:hover .tabletip .tabletip-text {
+  visibility: visible;
+  opacity: 1;
+  z-index: 200;
+}
+.URTable td:hover .tabletip .tabletip-text img {
+  max-width: 300px;
+  max-height: 300px;
+}
+.URTable td:hover .tabletip-source {
+  position: relative;
+  padding-top: var(--padding-horizontal);
+  padding-right: var(--padding-horizontal); /* gap next column */
+  padding-bottom: var(--padding-horizontal);
+  background-color: var(--tabletip-hover-clr);
+}
+.URTable td:hover .tabletip-source p {
+  background-color: var(--tabletip-hover-clr); /* override markdown p */
+}
diff --git a/app/view/netcreate/components/URTable.jsx b/app/view/netcreate/components/URTable.jsx
index 2705c8c18..e694de5f7 100644
--- a/app/view/netcreate/components/URTable.jsx
+++ b/app/view/netcreate/components/URTable.jsx
@@ -1,10 +1,123 @@
 /*///////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
 
+
 UR Table
 
-Implements a table with resizable columns.
+Implements a table with resizable and sortable columns.
 Emulates the API of Handsontable.
+Used also on https://github.com/netcreateorg/netcreate-itest/
+
+# API - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+## Renderers
+  This emulates Handsontable's renderer concept.
+  * A renderer is a function that takes a value and returns a JSX element
+  * If a column has a renderer, it will be used to render the value in the cell
+
+## Sorters
+  This emulates Handsontable's sorter concept.
+  * A sorter is a function that takes a key, the table data, and the sort order
+  * If a column has a sorter, it will be used to sort the table data
+
+## Column Widths
+  * Column widths can be set in the column definition
+  * Columns without a width will be evenly distributed
+
+## Column Types
+  Note that `type` determines both the default renderer and sorter
+  but they can be separately overriden.
+
+
+# User Interaction - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+## Resizing Columns
+  * Columns can be resized by dragging the right edge of the column header
+    The column to the right of the dragged edge will expand or contract
+  * Max resize -- Resizing is done between two columns: the current column,
+  and the column to the right. (We assume the table width is fixed or 100%).
+  To give you simple, but finer control over resizing columns, you can expand or
+  contract the current column and the next column up/down to a minimum size.
+  Once you hit the max size, you need to resize other columns to adjust.
+  (We don't allow you to resize neighboring columns once you've hit the
+  max/min just to simplify the math).
+
+## Sort Order
+  By default the table is unsorted.
+  * Clicking on a column header will sort the table by that column in ascending order
+  * Subsequent clicks will toggle to descending to unsorted and back to ascending
+  * The next sort order is highlighted on hover with a transparent arrow
+  * The column remembers the previous sort order when another column is selected
+    so re-selecting the column will restore the previous sort order
+  * A column can be designated unsortable by setting `sortDisabled` to `true`
+
+## Tooltips
+  * Tooltips are displayed when hovering over a cell
+  * The tooltip text is the same as the cell text
+  * Tooltips can be disabled by setting `tipDisabled` to `true`
+
+# PROPS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  `tableData`: array
+      The data to be displayed in the table.
+
+      [
+        { id: 1, label: 'Constantinople', founding: '100 ce' },
+        { id: 2, label: 'Athens', founding: '1000 bce' },
+        { id: 3, label: 'Cairo', founding: '3000 bce' },
+      ]
+
+  `isOpen`: boolean
+      To optimize performance, the column widths are only calculated
+      when it's open.
+
+  `columns`: array
+      Specifications for how each column is to be rendered and sorted.
 
+      Column Definition
+        title: string
+        data: string
+        type: 'text' | 'text-case-insensitive' | 'number' | 'timestamp' | 'markdown' | 'hdate'
+        width: number in px
+        renderer: (value: any) => JSX.Element
+        sorter: (key: string, tdata: any[], order: number) => any[]
+        sortDisabled: boolean
+        tipDisabled: boolean
+
+  Example usage:
+
+    const COLUMNDEFS = [
+      {
+        title: 'TITLE',
+        data: 'title',
+        type: 'text',
+        width: 300, // in px
+        renderer: this.RendererTitle,
+        sorter: (key, tdata, order) => {
+          const sortedData = [...tdata].sort((a, b) => {
+            // note `title` is stuffed into `tdata`
+            if (a[key].title < b[key].title) return order;
+            if (a[key].title > b[key].title) return order * -1;
+            return 0;
+          });
+          return sortedData;
+        }
+      },
+      {
+        title: 'UPDATED',
+        data: 'dateModified',
+        type: 'text',
+        width: 300 // in px
+      },
+    ]
+
+    const TABLEDATA = modelsWithGroupLabels.map(model => {
+      return {
+        id: model.id,
+        title: model.title,
+        groupLabel: model.groupLabel,
+        dateModified: HumanDate(model.dateModified),
+        dateCreated: HumanDate(model.dateCreated)
+      };
+    });
 
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * /////////////////////////////////////*/
 
@@ -17,23 +130,33 @@ import HDATE from 'system/util/hdate';
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 const DBG = false;
 
+const SORTORDER = new Map();
+SORTORDER.set(0, '▲▼');
+SORTORDER.set(1, '▲');
+SORTORDER.set(-1, '▼');
+
 /// FUNCTIONAL COMPONENT DECLARATION //////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function URTable({ isOpen, data, columns }) {
-  const [tabledata, setTableData] = useState([]);
-  const [columndefs, setColumnDefs] = useState([]);
-  const [columnWidths, setColumnWidths] = useState([]);
-  const [sortColumnIdx, setSortColumnIdx] = useState(0);
-  const [sortOrder, setSortOrder] = useState(1);
+  const [_tabledata, setTableData] = useState([]);
+  const [_columndefs, setColumnDefs] = useState([]);
+  const [_columnWidths, setColumnWidths] = useState([]);
+  const [_sortColumnIdx, setSortColumnIdx] = useState(0);
+  const [_sortOrder, setSortOrder] = useState(0);
+  const [_previousColSortOrder, setPreviousColSortOrder] = useState({});
 
-  const tableRef = useRef(null);
-  const resizeRef = useRef(null);
+  const ref_Table = useRef(null);
+  const ref_Resize = useRef(null);
 
   /// USE EFFECT //////////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Init table data
   useEffect(() => {
     setTableData(data);
+    // default to ascending when a column is first clicked
+    const defaultSortOrders = {};
+    columns.forEach((item, idx) => (defaultSortOrders[idx] = -1));
+    setPreviousColSortOrder(defaultSortOrders);
   }, []);
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Calculate Initial Column Widths
@@ -61,23 +184,55 @@ function URTable({ isOpen, data, columns }) {
   useEffect(() => {
     // Sort table data
     m_ExecuteSorter(data);
-  }, [sortColumnIdx, sortOrder]);
+  }, [_sortColumnIdx, _sortOrder, _previousColSortOrder]);
 
   /// UTILITIES ///////////////////////////////////////////////////////////////
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /// e.g. Jan 7 10:05:29 AM
+  function u_HumanDate(timestamp) {
+    if (timestamp === undefined || timestamp === '') return '<no date>';
+    const date = new Date(timestamp);
+    const timestring = date.toLocaleTimeString('en-Us', {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+    const datestring = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+    return `${datestring} ${timestring}`;
+  }
+  /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  /// e.g. 1/7/25 10:05a
+  function u_HumanDateShort(timestamp) {
+    if (timestamp === undefined || timestamp === '') return '<no date>';
+    const date = new Date(timestamp);
+    const timestring = date.toLocaleTimeString('en-Us', {
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+    const datestring = date.toLocaleDateString('en-US', {
+      month: '2-digit',
+      day: '2-digit',
+      year: '2-digit'
+    });
+    return `${datestring} ${timestring}`;
+  }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   const u_CalculateColumnWidths = () => {
-
     // if table is not drawn yet, skip
-    if (tableRef.current.clientWidth < 1) return;
+    if (ref_Table.current.clientWidth < 1) return;
 
     // if it's already set, don't recalculate
-    if (columnWidths.length > 0 && tableRef.current.clientWidth > 0) {
+    if (_columnWidths.length > 0 && ref_Table.current.clientWidth > 0) {
       return;
     }
 
     const definedColWidths = columns.filter(col => col.width).map(col => col.width);
     const definedColWidthSum = definedColWidths.reduce((a, b) => a + b, 0);
-    const remainingWidth = tableRef.current.clientWidth - definedColWidthSum;
+    const remainingWidth = ref_Table.current.clientWidth - definedColWidthSum;
     const colWidths = columns.map(
       col => col.width || remainingWidth / (columns.length - definedColWidths.length)
     );
@@ -89,20 +244,20 @@ function URTable({ isOpen, data, columns }) {
   const ui_MouseDown = (event, index) => {
     event.preventDefault();
     event.stopPropagation();
-    resizeRef.current = {
+    ref_Resize.current = {
       index,
       startX: event.clientX,
-      startWidth: columnWidths[index],
-      nextStartWidth: columnWidths[index + 1],
-      maxCombinedWidth: columnWidths[index] + columnWidths[index + 1] - 50
+      startWidth: _columnWidths[index],
+      nextStartWidth: _columnWidths[index + 1],
+      maxCombinedWidth: _columnWidths[index] + _columnWidths[index + 1] - 50
     };
   };
   const ui_MouseMove = event => {
-    if (resizeRef.current !== null) {
+    if (ref_Resize.current !== null) {
       const { index, startX, startWidth, nextStartWidth, maxCombinedWidth } =
-        resizeRef.current;
+        ref_Resize.current;
       const delta = event.clientX - startX;
-      const newWidths = [...columnWidths];
+      const newWidths = [..._columnWidths];
       newWidths[index] = Math.min(Math.max(50, startWidth + delta), maxCombinedWidth); // Minimum width set to 50px
       newWidths[index + 1] = Math.min(
         Math.max(50, nextStartWidth - delta),
@@ -112,16 +267,35 @@ function URTable({ isOpen, data, columns }) {
     }
   };
   const ui_MouseUp = () => {
-    resizeRef.current = null; // Reset on mouse up
+    ref_Resize.current = null; // Reset on mouse up
   };
 
   /// CLICK HANDLERS //////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-  function ui_ClickSorter(event, index) {
+  function ui_SetSelectedColumn(event, index) {
     event.preventDefault();
     event.stopPropagation();
+    if (_columndefs[index].sortDisabled) return; // If sort is disabled, do nothing
+
+    if (_sortColumnIdx === index) {
+      // if already selected, toggle the sort order
+      let newSortOrder;
+      if (_sortOrder === 0) newSortOrder = -1;
+      else if (_sortOrder > 0) newSortOrder = 0;
+      else newSortOrder = 1;
+      setSortOrder(newSortOrder);
+    } else {
+      // otherwise default to the previous order
+      setSortOrder(_previousColSortOrder[index]);
+    }
+
+    // update the previous sort order
+    setPreviousColSortOrder({
+      ..._previousColSortOrder,
+      [_sortColumnIdx]: _sortOrder
+    });
+
     setSortColumnIdx(index);
-    setSortOrder(sortOrder * -1);
   }
 
   /// BUILT-IN SORTERS ////////////////////////////////////////////////////////
@@ -138,12 +312,25 @@ function URTable({ isOpen, data, columns }) {
     });
     return sortedData;
   }
+  function m_SortCaseInsensitive(key, tdata, order) {
+    const sortedData = [...tdata].sort((a, b) => {
+      if (!a[key] && !b[key]) return 0;
+      if (!a[key]) return 1; // Move undefined or '' to the bottom regardless of sort order
+      if (!b[key]) return -1; // Move undefined or '' the bottom regardless of sort order
+      if (a[key].toLowerCase() < b[key].toLowerCase()) return order;
+      if (a[key].toLowerCase() > b[key].toLowerCase()) return order * -1;
+      return 0;
+    });
+    return sortedData;
+  }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   function m_SortByMarkdown(key, tdata, order) {
     const sortedData = [...tdata].sort((a, b) => {
       // NC's markdown format from NCNodeTable will pass:
       // { html, raw}
       // We will sort by the raw text
+      if (!a[key].raw) return 1; // Move undefined or '' to the bottom regardless of sort order
+      if (!b[key].raw) return -1; // Move undefined or '' the bottom regardless of sort order
       if (a[key].raw < b[key].raw) return order;
       if (a[key].raw > b[key].raw) return order * -1;
       return 0;
@@ -197,95 +384,152 @@ function URTable({ isOpen, data, columns }) {
   /// BUILT-IN TABLE METHODS //////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /**
-   *
-   * @param {*} value
-   * @param {*} col
-   * @param {*} idx
+   * Executes the renderer for a given column
+   * @param {string} key tdata object key
+   * @param {Object} tdata full table data object so you can access other keys
+   * @param {Object} coldef column definition
    * @returns The final value to be rendered in the table cell
    */
-  function m_ExecuteRenderer(value, col, idx) {
-    const customRenderer = col.renderer;
+  function m_ExecuteRenderer(key, tdata, coldef) {
+    let result = '';
+    const customRenderer = coldef.renderer;
     if (customRenderer) {
       if (typeof customRenderer !== 'function')
-        throw new Error('Invalid renderer for', col);
-      return customRenderer(value);
+        throw new Error('Invalid renderer for', coldef);
+      result = customRenderer(key, tdata, coldef);
     } else {
       // Run built-in renderers
-      switch (col.type) {
-        case 'markdown':
-          return value.html;
-        case 'hdate':
+      const value = tdata[key];
+      switch (coldef.type) {
+        case 'markdown': // Net.Create
+          result = value.html;
+          break;
+        case 'hdate': // Net.Create
+          result = value; // display the raw user-entered string
+          break;
+        case 'timestamp':
+          result = u_HumanDate(value);
+          break;
+        case 'hdate-short': // Net.Create
+        case 'timestamp-short':
+          result = u_HumanDateShort(value);
+          break;
         case 'number':
         case 'text':
+        case 'text-case-insensitive':
         default:
-          return value;
+          result = value;
       }
     }
+    if (coldef.tipDisabled) return result;
+    return (
+      <div className="tabletip">
+        <div className="tabletip-source">{result}</div>
+        <div className="tabletip-text">{result}</div>
+      </div>
+    );
   }
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
   /// Sorts then sets the table data
   function m_ExecuteSorter(tdata) {
-    if (columndefs.length < 1) return [];
+    if (_columndefs.length < 1) return [];
 
-    const customSorter = columndefs[sortColumnIdx].sorter;
-    const key = columndefs[sortColumnIdx].data;
+    const customSorter = _columndefs[_sortColumnIdx].sorter;
+    const key = _columndefs[_sortColumnIdx].data;
     let sortedData = [];
     if (customSorter) {
       if (typeof customSorter !== 'function') throw new Error('Invalid sorter');
-      sortedData = customSorter(key, tdata, sortOrder);
+      sortedData = customSorter(key, tdata, _sortOrder);
     } else {
       // Run built-in sorters
-      switch (columndefs[sortColumnIdx].type) {
+      switch (_columndefs[_sortColumnIdx].type) {
         case 'hdate':
-          sortedData = m_SortByHDate(key, tdata, sortOrder);
+          sortedData = m_SortByHDate(key, tdata, _sortOrder);
           break;
         case 'markdown':
-          sortedData = m_SortByMarkdown(key, tdata, sortOrder);
+          sortedData = m_SortByMarkdown(key, tdata, _sortOrder);
           break;
-        case 'date':
         case 'number':
-          sortedData = m_SortByNumber(key, tdata, sortOrder);
+          sortedData = m_SortByNumber(key, tdata, _sortOrder);
           break;
+        case 'text-case-insensitive':
+          sortedData = m_SortCaseInsensitive(key, tdata, _sortOrder);
+          break;
+        case 'timestamp': // timestamp is a string
         case 'text':
         default:
-          sortedData = m_SortByText(key, tdata, sortOrder);
+          sortedData = m_SortByText(key, tdata, _sortOrder);
       }
     }
     setTableData(sortedData);
   }
   /// RENDER //////////////////////////////////////////////////////////////////
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  /**
+   * jsx_SortBtn tracks two states:
+   * if sort is disabled:
+   *  - do not show sort button in header
+   *  - the header is not clickable (no cursor pointer)
+   * if sort is enabled:
+   *  - show sort erder: '▲' or '▼' or '▲▼'
+   *  - show cursor pointer
+   */
+  function jsx_SortBtn(columndef, idx) {
+    const isSelected = _sortColumnIdx === idx;
+    if (columndef.sortDisabled) {
+      return <span className="sortDisabled">-</span>;
+    } else if (isSelected) {
+      console.log('selected sort order', _sortOrder);
+      return <span className="sortEnabled">{SORTORDER.get(_sortOrder)}</span>;
+    } else {
+      // not selected, so sort order is the previous sort order
+      return (
+        <span className="sortEnabled">
+          {SORTORDER.get(_previousColSortOrder[idx])}
+        </span>
+      );
+    }
+  }
+
+  // show cursor pointer if not sortDisabled
+  // needs to be set at `th` not at `th span`
+
   return (
     <div
       className="URTable"
-      ref={tableRef}
+      ref={ref_Table}
       onMouseMove={ui_MouseMove}
       onMouseUp={ui_MouseUp}
     >
       <table>
         <thead>
           <tr>
-            {columndefs.map((col, idx) => (
+            {_columndefs.map((coldef, idx) => (
               <th
                 key={idx}
-                className={sortColumnIdx === idx ? 'selected' : ''}
-                width={`${columnWidths[idx]}`}
+                className={_sortColumnIdx === idx ? 'selected' : ''}
+                width={`${_columnWidths[idx]}`}
               >
-                <div onClick={e => ui_ClickSorter(e, idx)}>{col.title}</div>
+                <div onClick={e => ui_SetSelectedColumn(e, idx)}>
+                  {coldef.title}&nbsp;
+                  {jsx_SortBtn(coldef, idx)}
+                </div>
                 <div
                   className="resize-handle"
                   onMouseDown={e => ui_MouseDown(e, idx)}
-                  hidden={idx === columndefs.length - 1} // hide last resize handle
+                  hidden={idx === _columndefs.length - 1} // hide last resize handle
                 ></div>
               </th>
             ))}
           </tr>
         </thead>
         <tbody>
-          {tabledata.map((tdata, idx) => (
+          {_tabledata.map((tdata, idx) => (
+            /* Net.Create Special Handling: Show filter transparency */
             <tr key={idx} style={{ opacity: tdata.meta.filteredTransparency }}>
-              {columndefs.map((col, idx) => (
-                <td key={idx}>{m_ExecuteRenderer(tdata[col.data], col, idx)}</td>
+              {_columndefs.map((coldef, idx) => (
+                <td key={idx}>{m_ExecuteRenderer(coldef.data, tdata, coldef)}</td>
               ))}
             </tr>
           ))}
diff --git a/app/view/netcreate/components/filter/FilterEnums.js b/app/view/netcreate/components/filter/FilterEnums.js
index 10efcfccb..96cbd1055 100644
--- a/app/view/netcreate/components/filter/FilterEnums.js
+++ b/app/view/netcreate/components/filter/FilterEnums.js
@@ -39,6 +39,7 @@ FILTER.ACTION.FILTER = 'FILTERING'; // FIX: Remove this after we decide to remov
 FILTER.ACTION.REDUCE = 'REMOVE';
 FILTER.ACTION.FOCUS = 'FOCUS';
 // Types of filters definable in template files.
+// See also `nc-ui.js` for field types
 FILTER.TYPES = {};
 FILTER.TYPES.STRING = 'string';
 FILTER.TYPES.NUMBER = 'number';
@@ -47,6 +48,8 @@ FILTER.TYPES.NODE = 'node'; // edge source / target
 FILTER.TYPES.DATE = 'date';
 FILTER.TYPES.HDATE = 'hdate'; // custom historical date
 FILTER.TYPES.MARKDOWN = 'markdown';
+FILTER.TYPES.TIMESTAMP = 'timestamp';
+FILTER.TYPES.INFOORIGIN = 'infoOrigin';
 FILTER.TYPES.HIDDEN = 'hidden';
 // Special Edge Keys mapped to node objects
 // Used by m_IsEdgeMatchedByFilter to find node labels
diff --git a/app/view/netcreate/components/filter/FilterGroup.jsx b/app/view/netcreate/components/filter/FilterGroup.jsx
index c271c4826..46ffc4248 100644
--- a/app/view/netcreate/components/filter/FilterGroup.jsx
+++ b/app/view/netcreate/components/filter/FilterGroup.jsx
@@ -41,6 +41,7 @@ function FilterGroup({ group, label, filters, filterAction, transparency }) {
           case FILTER.TYPES.MARKDOWN:
           case FILTER.TYPES.NODE:
           case FILTER.TYPES.DATE: // generic dates (not hdate) are treated like strings
+          case FILTER.TYPES.INFOORIGIN:
           case FILTER.TYPES.STRING:
             return (
               <StringFilter
@@ -68,6 +69,7 @@ function FilterGroup({ group, label, filters, filterAction, transparency }) {
                 filterAction={filterAction}
               />
             );
+          case FILTER.TYPES.TIMESTAMP: // UI uses HDate to set date, but parser uses custom timestamp
           case FILTER.TYPES.HDATE:
             return (
               <HDateFilter
diff --git a/app/view/netcreate/filter-mgr.js b/app/view/netcreate/filter-mgr.js
index 63bf08d8c..9f16ba65a 100644
--- a/app/view/netcreate/filter-mgr.js
+++ b/app/view/netcreate/filter-mgr.js
@@ -127,7 +127,7 @@ MOD.Hook('INITIALIZE', () => {
    */
   UDATA.HandleMessage('FILTER_CLEAR', () => {
     m_ClearFilters();
-    UNISYS.Log('clear filters')
+    UNISYS.Log('clear filters');
   });
 
   /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -249,25 +249,17 @@ function m_ImportPrompts(prompts) {
     switch (prompt.type) {
       case FILTER.TYPES.MARKDOWN:
       case FILTER.TYPES.STRING:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
-        break;
       case FILTER.TYPES.NUMBER:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
-        break;
       case FILTER.TYPES.SELECT:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
-        break;
       case FILTER.TYPES.NODE:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
-        break;
       case FILTER.TYPES.DATE:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
-        break;
       case FILTER.TYPES.HDATE:
-        operator = FILTER.OPERATORS.NO_OP.key; // default to no_op
+      case FILTER.TYPES.TIMESTAMP:
+      case FILTER.TYPES.INFOORIGIN:
+        operator = FILTER.OPERATORS.NO_OP.key;
         break;
       case FILTER.TYPES.HIDDEN:
-        break;
+        break; // hidden filters are not added
       default:
         // edge template item "edgeIsLockedMessage" will trigger this message
         // filters will not be created for entries with no `type` defined.
@@ -393,7 +385,11 @@ function m_FiltersApply() {
   UTILS.RecalculateAllNodeDegrees(FILTEREDNCDATA);
 
   // Calculate Stats and Send with FILTEREDNCDATA
-  FILTEREDNCDATA.stats = m_UpdateFilterStats(NCDATA, FILTEREDNCDATA, FILTERDEFS.filterAction);
+  FILTEREDNCDATA.stats = m_UpdateFilterStats(
+    NCDATA,
+    FILTEREDNCDATA,
+    FILTERDEFS.filterAction
+  );
 
   // Update FILTEREDNCDATA
   UDATA.SetAppState('FILTEREDNCDATA', FILTEREDNCDATA);
@@ -417,15 +413,21 @@ function m_UpdateFilterStats(NCDATA, FILTEREDNCDATA, filterAction) {
   const edgeCount = NCDATA.edges.length;
   let filteredNodeCount, filteredEdgeCount;
   if (filterAction === FILTER.ACTION.FADE) {
-    filteredNodeCount = nodeCount - FILTEREDNCDATA.nodes.filter(n => n.filteredTransparency <= transparencyNode).length
-    filteredEdgeCount = edgeCount - FILTEREDNCDATA.edges.filter(e => e.filteredTransparency <= transparencyEdge).length
+    filteredNodeCount =
+      nodeCount -
+      FILTEREDNCDATA.nodes.filter(n => n.filteredTransparency <= transparencyNode)
+        .length;
+    filteredEdgeCount =
+      edgeCount -
+      FILTEREDNCDATA.edges.filter(e => e.filteredTransparency <= transparencyEdge)
+        .length;
   } else {
     filteredNodeCount = FILTEREDNCDATA.nodes.length;
     filteredEdgeCount = FILTEREDNCDATA.edges.length;
   }
-  const statsSummary = `Showing ${filteredNodeCount}/${nodeCount} nodes, ${filteredEdgeCount}/${edgeCount} edges`
+  const statsSummary = `Showing ${filteredNodeCount}/${nodeCount} nodes, ${filteredEdgeCount}/${edgeCount} edges`;
 
-  return { nodeCount, edgeCount, filteredNodeCount, filteredEdgeCount, statsSummary }
+  return { nodeCount, edgeCount, filteredNodeCount, filteredEdgeCount, statsSummary };
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function m_UpdateFilterSummary(statsSummary) {
@@ -442,8 +444,9 @@ function m_UpdateFilterSummary(statsSummary) {
   const edgeSummary = m_FiltersToString(FILTERDEFS.edges.filters);
   let summary = '';
   if (nodeSummary || edgeSummary)
-    summary = `${typeSummary} ${nodeSummary ? 'NODES: ' : ''}${nodeSummary} ${edgeSummary ? 'EDGES: ' : ''
-      }${edgeSummary}`;
+    summary = `${typeSummary} ${nodeSummary ? 'NODES: ' : ''}${nodeSummary} ${
+      edgeSummary ? 'EDGES: ' : ''
+    }${edgeSummary}`;
   if (summary) summary += ' ' + statsSummary;
 
   UDATA.LocalCall('FILTER_SUMMARY_UPDATE', { filtersSummary: summary });
@@ -476,7 +479,9 @@ function m_OperatorToString(operator) {
 
 /// UTILITY FUNCTIONS /////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-function clean(str) { return NCLOGIC.EscapeRegexChars(String(str).trim()); };
+function clean(str) {
+  return NCLOGIC.EscapeRegexChars(String(str).trim());
+}
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  *  Match strings, allowing use of `&&` and `||`
@@ -491,9 +496,15 @@ function clean(str) { return NCLOGIC.EscapeRegexChars(String(str).trim()); };
  */
 function m_MatchString(needle, haystack, contains = true) {
   const ANDNeedles = String(needle).split('&&');
-  const ORNeedleArrs = ANDNeedles.map(ands => String(ands).split(/\|\|/).map(str => String(str).trim()));
+  const ORNeedleArrs = ANDNeedles.map(ands =>
+    String(ands)
+      .split(/\|\|/)
+      .map(str => String(str).trim())
+  );
   // For each set of OR Array matches, evaluate the pair
-  const ResultsOR = ORNeedleArrs.map(pair => pair.reduce((a, b) => a || m_MatchStringSnippet(clean(b), haystack, true), false));
+  const ResultsOR = ORNeedleArrs.map(pair =>
+    pair.reduce((a, b) => a || m_MatchStringSnippet(clean(b), haystack, true), false)
+  );
   const ResultsAND = ResultsOR.reduce((a, b) => a && b, true);
   return contains ? ResultsAND : !ResultsAND;
 }
@@ -610,6 +621,48 @@ function m_MatchHDate(operator, filterVal, objVal) {
   }
   return matches;
 }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * This uses the HDate Filter UI to construct a search string
+ * But then converts the HDate filter definition to a timestamp
+ * And then does a simple numeric comparison
+ * @param {number} operator filter operator
+ * @param {hdate} filterVal hdate
+ * @param {number} objVal timestamp
+ * @returns
+ */
+function m_MatchTimestamp(operator, filterVal, objVal) {
+  const hdateValue = HDATE.Parse(filterVal); // deconstruct the HDate filter into a timestamp
+  if (hdateValue.length < 1) return false;
+
+  const knownValues = hdateValue[0].start.knownValues;
+
+  // When filtering, use only as much precision as the HDate filter requests
+  // if a value is missing, assume it is 0
+  const filterTimestamp = new Date(
+    knownValues.year !== undefined ? knownValues.year : 0,
+    knownValues.month !== undefined ? knownValues.month - 1 : 0,
+    knownValues.day !== undefined ? knownValues.day : 1,
+    knownValues.hour !== undefined ? knownValues.hour : 0,
+    knownValues.minute !== undefined ? knownValues.minute : 0,
+    knownValues.second !== undefined ? knownValues.second : 0
+  );
+  const objValDate = new Date(objVal);
+  const objValTimestamp = new Date(
+    knownValues.year !== undefined ? objValDate.getFullYear() : 0,
+    knownValues.month !== undefined ? objValDate.getMonth() : 0,
+    knownValues.day !== undefined ? objValDate.getDate() : 1,
+    knownValues.hour !== undefined ? objValDate.getHours() : 0,
+    knownValues.minute !== undefined ? objValDate.getMinutes() : 0,
+    knownValues.second !== undefined ? objValDate.getSeconds() : 0
+  );
+
+  return m_MatchNumber(
+    operator,
+    filterTimestamp.getTime(),
+    objValTimestamp.getTime()
+  );
+}
 
 /// NODE FILTERS //////////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -695,7 +748,9 @@ function m_IsNodeMatchedByFilter(node, filter) {
     return false; // nothing to filter
   }
 
-  const nodeValue = node[filter.key];
+  const nodeValue = ['created', 'updated'].includes(filter.key)
+    ? node.meta[filter.key] // timestamps are stored in loki meta object
+    : node[filter.key];
 
   switch (filter.operator) {
     case FILTER.OPERATORS.CONTAINS.key:
@@ -708,6 +763,8 @@ function m_IsNodeMatchedByFilter(node, filter) {
       return nodeValue !== undefined && nodeValue !== '';
     default:
       if (nodeValue === undefined) return false; // no value to match
+      if (filter.type === FILTER.TYPES.TIMESTAMP)
+        return m_MatchTimestamp(filter.operator, filter.value, nodeValue);
       if (filter.type === FILTER.TYPES.HDATE)
         return m_MatchHDate(filter.operator, filter.value, nodeValue);
       // else assume it's a number
@@ -831,12 +888,14 @@ function m_IsEdgeMatchedByFilter(edge, filter) {
 
   let edgeValue;
   if (filter.type === FILTER.TYPES.NODE) {
-    // edges fields that poitn to nodes require special handling because `source` and `target`
+    // edges fields that point to nodes require special handling because `source` and `target`
     // point to node objects, not simple strings.
     if (filter.key === 'source') edgeValue = edge.sourceLabel;
     if (filter.key === 'target') edgeValue = edge.targetLabel;
   } else {
-    edgeValue = edge[filter.key];
+    edgeValue = ['created', 'updated'].includes(filter.key)
+      ? edge.meta[filter.key] // timestamps are stored in loki meta object
+      : edge[filter.key];
   }
 
   switch (filter.operator) {
@@ -850,6 +909,8 @@ function m_IsEdgeMatchedByFilter(edge, filter) {
       return edgeValue !== undefined && edgeValue !== '';
     default:
       if (edgeValue === undefined) return false; // no value to match
+      if (filter.type === FILTER.TYPES.TIMESTAMP)
+        return m_MatchTimestamp(filter.operator, filter.value, edgeValue);
       if (filter.type === FILTER.TYPES.HDATE)
         return m_MatchHDate(filter.operator, filter.value, edgeValue);
       // else assume it's a number
diff --git a/app/view/netcreate/importexport-mgr.js b/app/view/netcreate/importexport-mgr.js
index 5c50ef125..ae693a58b 100644
--- a/app/view/netcreate/importexport-mgr.js
+++ b/app/view/netcreate/importexport-mgr.js
@@ -146,6 +146,8 @@ function m_flattenKeys(keys, prefix) {
  *  @returns - array of node values, e.g. [1,'Tacitus','Person',...]
  */
 function m_renderNodeValues(node, keys) {
+  const TEMPLATE = UDATA.AppState('TEMPLATE');
+
   const RESULT = [];
   keys.forEach(key => {
     // If the key is an object, recurse
@@ -175,6 +177,16 @@ function m_renderNodeValues(node, keys) {
       RESULT.push(m_formatDate(node.meta[key]));
       return;
     }
+    // -- Special processing for custom fields
+    const nodeDef = TEMPLATE.nodeDefs[key];
+    if (nodeDef.type === 'infoOrigin') {
+      if (node[key]) RESULT.push(`"${m_encode(node[key])}"`);
+      else
+        RESULT.push(
+          `"${UTILS.DeriveInfoOriginString(node.createdBy, node.meta.created)}"`
+        );
+      return;
+    }
     // -- Normal processing -- wrap in quotes
     if (Object.prototype.hasOwnProperty.call(node, key)) {
       RESULT.push(`"${m_encode(node[key])}"`); // enclose in quotes to support commas
@@ -210,6 +222,8 @@ function m_GenerateNodesArray(nodes, nodekeys) {
  *  @returns - array of edge values, e.g. [1,'is enemy of',2,...]
  */
 function m_renderEdgeValues(edge, keys) {
+  const TEMPLATE = UDATA.AppState('TEMPLATE');
+
   const RESULT = [];
   keys.forEach(key => {
     // If the key is an object, recurse
@@ -218,7 +232,7 @@ function m_renderEdgeValues(edge, keys) {
       // DEPRECATED -- 'attribute' handler.
       const subKeys = Object.keys(key); // can have multiple subKeys
       subKeys.forEach(k => {
-        RESULT.push(m_renderNodeValues(edge[k], key[k]));
+        RESULT.push(m_renderEdgeValues(edge[k], key[k]));
       });
     }
     // Special Data Handling
@@ -245,6 +259,16 @@ function m_renderEdgeValues(edge, keys) {
       RESULT.push(m_formatDate(edge.meta[key]));
       return;
     }
+    // -- Special processing for custom fields
+    const edgeDefs = TEMPLATE.edgeDefs[key];
+    if (edgeDefs.type === 'infoOrigin') {
+      if (edge[key]) RESULT.push(`"${m_encode(edge[key])}"`);
+      else
+        RESULT.push(
+          `"${UTILS.DeriveInfoOriginString(edge.createdBy, edge.meta.created)}"`
+        );
+      return;
+    }
     // -- normal processing -- wrap in quotes
     if (Object.prototype.hasOwnProperty.call(edge, key)) {
       RESULT.push(`"${m_encode(edge[key])}"`); // enclose in quotes to support commas
diff --git a/app/view/netcreate/nc-logic.js b/app/view/netcreate/nc-logic.js
index 15dfb8b00..4a97ee3d8 100644
--- a/app/view/netcreate/nc-logic.js
+++ b/app/view/netcreate/nc-logic.js
@@ -521,7 +521,11 @@ MOD.Hook('INITIALIZE', () => {
 
     return DATASTORE.PromiseNewNodeID().then(newNodeID => {
       const node = {
-        id: newNodeID, label: data.label, provenance, createdBy, updatedBy
+        id: newNodeID,
+        label: data.label,
+        provenance,
+        createdBy,
+        updatedBy
       };
       return UDATA.LocalCall('DB_UPDATE', { node }).then(() => {
         NCDATA.nodes.push(node);
@@ -937,15 +941,19 @@ function m_UpdateColorMap() {
   // someone ever chooses to use the same label twice, but ...
   try {
     const nodeColorMap = {};
-    TEMPLATE.nodeDefs.type.options.forEach(o => {
-      nodeColorMap[o.label] = o.color;
-    });
+    if (TEMPLATE.nodeDefs.type && TEMPLATE.nodeDefs.type.options) {
+      TEMPLATE.nodeDefs.type.options.forEach(o => {
+        nodeColorMap[o.label] = o.color;
+      });
+    }
 
     const edgeColorMap = {};
     let defaultEdgeColor = TEMPLATE.edgeDefs.color || '#999'; //for backwards compatability
-    TEMPLATE.edgeDefs.type.options.forEach(o => {
-      edgeColorMap[o.label] = o.color || defaultEdgeColor;
-    });
+    if (TEMPLATE.edgeDefs.type && TEMPLATE.edgeDefs.type.options) {
+      TEMPLATE.edgeDefs.type.options.forEach(o => {
+        edgeColorMap[o.label] = o.color || defaultEdgeColor;
+      });
+    }
 
     UDATA.SetAppState('COLORMAP', { nodeColorMap, edgeColorMap });
   } catch (error) {
@@ -1092,6 +1100,7 @@ MOD.EscapeRegexChars = u_EscapeRegexChars; // Expose for filter-mgr.js
  *        attributes.Citations = citation
  *        attributes.Notes => notes
  *  3. Remove the old `attributes` key
+ *  4. Clean built-in fields
  */
 function m_MigrateData(data) {
   data.nodes.forEach(node => {
@@ -1104,6 +1113,10 @@ function m_MigrateData(data) {
       // clear it
       Reflect.deleteProperty(node, 'attributes');
     }
+    // clean built-in fields
+    // NOTE: This just cleans up the data, but does not SAVE the fix!
+    node.meta = node.meta || {};
+    node.meta.revision = parseInt(node.meta.revision) || 1;
   });
   data.edges.forEach(edge => {
     edge.id = parseInt(edge.id);
@@ -1120,6 +1133,10 @@ function m_MigrateData(data) {
       // clear it
       Reflect.deleteProperty(edge, 'attributes');
     }
+    // clean built-in fields
+    // NOTE: This just cleans up the data, but does not SAVE the fix!
+    edge.meta = edge.meta || {};
+    edge.meta.revision = parseInt(edge.meta.revision) || 1;
   });
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
diff --git a/app/view/netcreate/nc-ui.js b/app/view/netcreate/nc-ui.js
index 4a3e5b481..166dda2b8 100644
--- a/app/view/netcreate/nc-ui.js
+++ b/app/view/netcreate/nc-ui.js
@@ -8,10 +8,40 @@
   * NCNode
   * NCEdge
 
+  Supported Field Types
+  - number
+  - string
+  - markdown
+  - hdate
+  - select
+  - infoOrigin
+
+
+  Custom Fields Handling
+
+    The `infoOrigin` field requires special handling.
+
+    Ideally, when a node is created, we would process any special fields and
+    derive and save any derived info.  But
+    a) we don't want to have server-database handle any custom fields -- that
+       it should just blindly save data.
+    b) when nc-logic creates a new field via `NODE_CREATE`, again, only built-in
+       fields are created and stored.  Custom fields are created by the UI as
+       needed when they are rendered.
+    This means that the `infoOrigin` field remains blank until the user
+    decides to change the data.
+
+    To handle this, then we need to make sure `infoOrigin` appears to have data
+    whenever it is viewed.  This requires:
+    - nc-ui renders a non-built-in field, e.g. an `attribute` field
+    - nc-ui renders a `provenance` field
+    - importexport-mgr exports node or edge data
+
 \*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * //////////////////////////////////////*/
 
 const React = require('react');
 const UNISYS = require('unisys/client');
+const UTILS = require('./nc-utils');
 const MD = require('markdown-it')();
 const MDEMOJI = require('markdown-it-emoji');
 MD.use(MDEMOJI);
@@ -42,7 +72,7 @@ function DateFormatted() {
   var dateTime = time + ' on ' + date;
   return dateTime;
 }
-
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /** Converts a markdown string to HTML
  *  And does extra HACK processing as needed:
  *  -- Supports emojis
@@ -55,7 +85,6 @@ function Markdownify(str = '') {
   const hackedHtmlString = htmlString.replace(/<a href/g, `<a target="_blank" href`);
   return MDPARSE(hackedHtmlString);
 }
-
 /// INPUT FORM CHANGE HANDLERS ////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /** This processes the form data before passing it on to the parent handler.
@@ -189,7 +218,17 @@ function RenderAttributesTabView(state, defs) {
         items.push(RenderMarkdownValue(k, attributes[k]));
         break;
       case 'hdate':
-        items.push(RenderDateValue(k, attributes[k], defs[k].format, defs[k].allowFormatSelection));
+        items.push(
+          RenderDateValue(
+            k,
+            attributes[k],
+            defs[k].format,
+            defs[k].allowFormatSelection
+          )
+        );
+        break;
+      case 'infoOrigin':
+        items.push(RenderInfoOriginValue(k, attributes[k], state, defs));
         break;
       case 'string':
       default:
@@ -221,11 +260,23 @@ function RenderAttributesTabEdit(state, defs, onchange) {
         items.push(RenderMarkdownInput(k, value, onchange, helpText));
         break;
       case 'hdate':
-        items.push(RenderDateInput(k, value, defs[k].format, defs[k].allowFormatSelection, onchange, helpText));
+        items.push(
+          RenderDateInput(
+            k,
+            value,
+            defs[k].format,
+            defs[k].allowFormatSelection,
+            onchange,
+            helpText
+          )
+        );
         break;
       case 'string':
         items.push(RenderStringInput(k, value, onchange, helpText));
         break;
+      case 'infoOrigin':
+        items.push(RenderInfoOriginInput(k, value, onchange, helpText, state));
+        break;
       case 'number':
         items.push(m_RenderNumberInput(k, value, onchange, helpText));
         break;
@@ -258,7 +309,17 @@ function RenderProvenanceItemsView(state, defs) {
         items.push(RenderMarkdownValue(k, provenance[k]));
         break;
       case 'hdate':
-        items.push(RenderDateValue(k, provenance[k], defs[k].format, defs[k].allowFormatSelection));
+        items.push(
+          RenderDateValue(
+            k,
+            provenance[k],
+            defs[k].format,
+            defs[k].allowFormatSelection
+          )
+        );
+        break;
+      case 'infoOrigin':
+        items.push(RenderInfoOriginValue(k, provenance[k], state, defs));
         break;
       case 'string':
       case 'number':
@@ -283,11 +344,23 @@ function RenderProvenanceItemsEdit(state, defs, onchange) {
         items.push(RenderMarkdownInput(k, value, onchange, helpText));
         break;
       case 'hdate':
-        items.push(RenderDateInput(k, value, defs[k].format, defs[k].allowFormatSelection, onchange, helpText));
+        items.push(
+          RenderDateInput(
+            k,
+            value,
+            defs[k].format,
+            defs[k].allowFormatSelection,
+            onchange,
+            helpText
+          )
+        );
         break;
       case 'string':
         items.push(RenderStringInput(k, value, onchange, helpText));
         break;
+      case 'infoOrigin':
+        items.push(RenderInfoOriginInput(k, value, onchange, helpText, state));
+        break;
       case 'number':
         items.push(m_RenderNumberInput(k, value, onchange, helpText));
         break;
@@ -302,44 +375,55 @@ function RenderProvenanceItemsEdit(state, defs, onchange) {
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function RenderProvenanceTabView(state, defs) {
-  const { provenance, degrees, created, createdBy, updated, updatedBy, revision } = state;
-  // FIXME: These will be dynamically generated with the new Provenance template
+  const { provenance, degrees, created, createdBy, updated, updatedBy, revision } =
+    state;
   return (
     <div className="provenance formview">
       <div className="category">PROVENANCE</div>
       {RenderProvenanceItemsView(state, defs)}
       <div className="category">HISTORY</div>
-      {RenderLabel('createdlabel', defs.created.displayLabel)}
-      {RenderStringValue('createdlabel', RenderProvenanceByline(createdBy, created))}
-      {RenderLabel('updatedlabel', defs.updated.displayLabel)}
-      {RenderStringValue('updatedlabel', RenderProvenanceByline(updatedBy, updated))}
-      {RenderLabel('revisionlabel', defs.revision.displayLabel)}
-      {RenderStringValue('revisionlabel', revision)}
+      {!defs.created.hidden && RenderLabel('createdlabel', defs.created.displayLabel)}
+      {!defs.created.hidden &&
+        RenderProvenanceByline(created, createdBy, defs.createdBy)}
+      {!defs.updated.hidden && RenderLabel('updatedlabel', defs.updated.displayLabel)}
+      {!defs.updated.hidden &&
+        RenderProvenanceByline(updated, updatedBy, defs.updatedBy)}
+      {!defs.revision.hidden &&
+        RenderLabel('revisionlabel', defs.revision.displayLabel)}
+      {!defs.revision.hidden && RenderStringValue('revisionlabel', revision)}
     </div>
   );
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function RenderProvenanceTabEdit(state, defs, onchange) {
-  const { provenance, degrees, created, createdBy, updated, updatedBy, revision } = state;
-  // FIXME: These will be dynamically generated with the new Provenance template
+  const { provenance, degrees, created, createdBy, updated, updatedBy, revision } =
+    state;
   return (
     <div className="provenance formview">
       <div className="category">PROVENANCE</div>
       {RenderProvenanceItemsEdit(state, defs, onchange)}
       <div className="category">HISTORY</div>
-      {RenderLabel('createdlabel', defs.created.displayLabel)}
-      {RenderStringValue('createdlabel', RenderProvenanceByline(createdBy, created))}
-      {RenderLabel('updatedlabel', defs.updated.displayLabel)}
-      {RenderStringValue('updatedlabel', RenderProvenanceByline(updatedBy, updated))}
-      {RenderLabel('revisionlabel', defs.revision.displayLabel)}
-      {RenderStringValue('revisionlabel', revision)}
+      {!defs.created.hidden && RenderLabel('createdlabel', defs.created.displayLabel)}
+      {!defs.created.hidden &&
+        RenderProvenanceByline(created, createdBy, defs.createdBy)}
+      {!defs.updated.hidden && RenderLabel('updatedlabel', defs.updated.displayLabel)}
+      {!defs.updated.hidden &&
+        RenderProvenanceByline(updated, updatedBy, defs.updatedBy)}
+      {!defs.revision.hidden &&
+        RenderLabel('revisionlabel', defs.revision.displayLabel)}
+      {!defs.revision.hidden && RenderStringValue('revisionlabel', revision)}
     </div>
   );
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-function RenderProvenanceByline(author, date) {
-  const by = author ? `${author}` : `(not recorded)`;
-  return `${by}, ${date}`; // leave author blank for older templates
+function RenderProvenanceByline(date, author, defAuthor) {
+  let result = '';
+  if (defAuthor && defAuthor.hidden) result = date;
+  else {
+    const by = author ? `${author}` : `(not recorded)`; // leave author blank for older templates
+    result = `${by}, ${date}`;
+  }
+  return <div className="viewvalue">{result}</div>;
 }
 
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -362,6 +446,18 @@ function RenderMarkdownValue(key, value = '') {
   );
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+function RenderInfoOriginValue(key, value, state) {
+  const newValue =
+    value === undefined || value === ''
+      ? UTILS.DeriveInfoOriginString(state.createdBy, state.created)
+      : value;
+  return (
+    <div id={key} key={`${key}value`} className="viewvalue">
+      {newValue}
+    </div>
+  );
+}
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function RenderStringValue(key, value) {
   return (
     <div id={key} key={`${key}value`} className="viewvalue">
@@ -372,10 +468,15 @@ function RenderStringValue(key, value) {
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 function RenderDateValue(key, value, dateFormat, allowFormatSelection) {
   return (
-    <URDateField id={key} key={`${key}value`} value={value} dateFormat={dateFormat}
+    <URDateField
+      id={key}
+      key={`${key}value`}
+      value={value}
+      dateFormat={dateFormat}
       allowFormatSelection={allowFormatSelection}
-      readOnly />
-  )
+      readOnly
+    />
+  );
 }
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
@@ -420,6 +521,19 @@ function RenderMarkdownInput(key, value, cb, helpText) {
     </div>
   );
 }
+
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/**
+ * Injects `Created by <createdBy> on <created>` if nothing is defined
+ * Otherwise it's treated as a string field
+ */
+function RenderInfoOriginInput(key, value, cb, helpText, state, onFocus, onBlur) {
+  const newValue =
+    value === undefined || value === ''
+      ? UTILS.DeriveInfoOriginString(state.createdBy, state.created)
+      : value;
+  return RenderStringInput(key, newValue, cb, helpText, onFocus, onBlur);
+}
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 /**
  * There are two levels of callbacks necessary here.
@@ -521,13 +635,16 @@ function RenderOptionsInput(key, value, defs, cb, helpText) {
  */
 function RenderDateInput(key, value, dateFormat, allowFormatSelection, cb, helpText) {
   return (
-    <URDateField id={key} key={`${key}value`} value={value}
+    <URDateField
+      id={key}
+      key={`${key}value`}
+      value={value}
       dateFormat={dateFormat}
       allowFormatSelection={allowFormatSelection}
       onChange={event => m_UIDateInputUpdate(event, cb)}
       helpText={helpText}
     />
-  )
+  );
 }
 
 /// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
diff --git a/app/view/netcreate/nc-utils.js b/app/view/netcreate/nc-utils.js
index da164fdcb..228094a3e 100644
--- a/app/view/netcreate/nc-utils.js
+++ b/app/view/netcreate/nc-utils.js
@@ -79,11 +79,22 @@ function RecalculateAllEdgeSizes(data) {
     e.size = size.get(key) || 1;
   });
 }
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+/** API METHOD
+ *  Generates the "InfoOrigin" string:
+ *     "Created by <createdBy> on <creeated>"
+ *  @param {string} author
+ *  @param {date} ms
+ */
+function DeriveInfoOriginString(author, ms) {
+  return `Created by ${author} on ${new Date(ms).toLocaleString()}`;
+}
 
 /// MODULE EXPORTS ///////////////////////////////////////////////////////////
 /// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 module.exports = {
   GenerateUUID,
   RecalculateAllNodeDegrees,
-  RecalculateAllEdgeSizes
+  RecalculateAllEdgeSizes,
+  DeriveInfoOriginString
 };