* Fixed that migration_info.md listed two primary keys being added fo…

…r subscriptions table, which caused error. (changed one to just be a UNIQUE constraint) * Replaced pk_user_node constraint with unique_node_user. (uses order of (node, user) rather than (user, node); Marc-Antoine says this gives better performance for the common case of app-server finding all subscriptions on a given node that was just changed) * Tweaked "style" objects to be compacted onto fewer lines. (my subjective preference ofc, but this makes it more consistent with other style objects) * Extracted out the notification-level dropdown controls to be in a separate file, rather than inline in NodeBox.tsx. * Renamed GetNodeSubscriptions to GetNodeSubscription, and have it return only a single entry of Subscription|undefined. (there will only ever be one match for a given user+node combo) * Other small typo fixes and tweaks.
debate-map · May 16, 2024 · baeddca · baeddca
1 parent 79d917a
commit baeddca
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 141 deletions.
diff --git a/Packages/client/Source/UI/@Shared/Maps/Node/ExpandableBox.tsx b/Packages/client/Source/UI/@Shared/Maps/Node/ExpandableBox.tsx
@@ -86,41 +86,31 @@ export class ExpandableBox extends BaseComponent<Props, {}> {
 						{/* children */}
 						{showNotificationButton &&
 						<Div style={css({
-							height: "100%",
-							position: "absolute", right: 0, bottom: 0, top: 0,
-							display: "flex", justifyContent: "center", alignItems: "flex-end",
+							position: "absolute", right: 0, bottom: 0,
+							display: "flex", alignItems: "flex-end", justifyContent: "center",
 							":hover": {
-								padding:3,
+								padding: 3,
 							},
 						})}>
-							<button onClick={e=>{
+							<button style={css({display: "inline-flex", background: "none", padding: "8px 2px", border: "none", cursor: "pointer"})} onClick={e=>{
 								e.stopPropagation();
 								e.preventDefault();
 								if (onToggleNotifications) {
 									onToggleNotifications();
 								}
-							}} style={css({
-								background: "none",
-								padding:2,
-								border: "none",
-								cursor: "pointer",
-							})}>
+							}}>
 								{notificationLevel === "none" &&
-								<svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+								<svg width="11px" height="11px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 									<path d="M14 21H10M8.63306 3.03371C9.61959 2.3649 10.791 2 12 2C13.5913 2 15.1174 2.63214 16.2426 3.75736C17.3679 4.88258 18 6.4087 18 8C18 10.1008 18.2702 11.7512 18.6484 13.0324M6.25867 6.25723C6.08866 6.81726 6 7.40406 6 8C6 11.0902 5.22047 13.206 4.34966 14.6054C3.61513 15.7859 3.24786 16.3761 3.26132 16.5408C3.27624 16.7231 3.31486 16.7926 3.46178 16.9016C3.59446 17 4.19259 17 5.38885 17H17M21 21L3 3" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-								</svg>
-	}
+								</svg>}
 								{notificationLevel === "some" &&
-									<svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path d="M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-									</svg>
-								}
-
+								<svg width="11px" height="11px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+								</svg>}
 								{notificationLevel === "all" &&
-									<svg width="10px" height="10px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path d="M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-									</svg>
-								}
+								<svg width="11px" height="11px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+									<path d="M9.35442 21C10.0596 21.6224 10.9858 22 12.0002 22C13.0147 22 13.9409 21.6224 14.6461 21M2.29414 5.81989C2.27979 4.36854 3.06227 3.01325 4.32635 2.3M21.7024 5.8199C21.7167 4.36855 20.9342 3.01325 19.6702 2.3M18.0002 8C18.0002 6.4087 17.3681 4.88258 16.2429 3.75736C15.1177 2.63214 13.5915 2 12.0002 2C10.4089 2 8.88283 2.63214 7.75761 3.75736C6.63239 4.88258 6.00025 6.4087 6.00025 8C6.00025 11.0902 5.22072 13.206 4.34991 14.6054C3.61538 15.7859 3.24811 16.3761 3.26157 16.5408C3.27649 16.7231 3.31511 16.7926 3.46203 16.9016C3.59471 17 4.19284 17 5.3891 17H18.6114C19.8077 17 20.4058 17 20.5385 16.9016C20.6854 16.7926 20.724 16.7231 20.7389 16.5408C20.7524 16.3761 20.3851 15.7859 19.6506 14.6054C18.7798 13.206 18.0002 11.0902 18.0002 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+								</svg>}
 							</button>
 						</Div>}
 					</div>

diff --git a/Packages/client/Source/UI/@Shared/Maps/Node/NodeBox.tsx b/Packages/client/Source/UI/@Shared/Maps/Node/NodeBox.tsx
@@ -1,4 +1,4 @@
-import {ChildGroup, ClaimForm, GetChangeTypeOutlineColor, GetMainRatingType, GetNodeForm, GetNodeL3, GetPaddingForNode, GetPathNodeIDs, IsUserCreatorOrMod, Map, NodeL3, NodeType, NodeType_Info, NodeView, MeID, NodeRatingType, ReasonScoreValues_RSPrefix, RS_CalculateTruthScore, RS_CalculateTruthScoreComposite, RS_GetAllValues, ChildOrdering, GetExpandedByDefaultAttachment, GetSubPanelAttachments, ShowNodeToolbar, GetExtractedPrefixTextInfo, GetToolbarItemsToShow, GetNodeSubscriptions, Subscription} from "dm_common";
+import {ChildGroup, ClaimForm, GetChangeTypeOutlineColor, GetMainRatingType, GetNodeForm, GetNodeL3, GetPaddingForNode, GetPathNodeIDs, IsUserCreatorOrMod, Map, NodeL3, NodeType, NodeType_Info, NodeView, MeID, NodeRatingType, ReasonScoreValues_RSPrefix, RS_CalculateTruthScore, RS_CalculateTruthScoreComposite, RS_GetAllValues, ChildOrdering, GetExpandedByDefaultAttachment, GetSubPanelAttachments, ShowNodeToolbar, GetExtractedPrefixTextInfo, GetToolbarItemsToShow, GetNodeSubscription, Subscription} from "dm_common";
 import React, {useCallback, useContext, useEffect, useState} from "react";
 import {store} from "Store";
 import {GetNodeChangeType} from "Store/db_ext/mapNodeEdits.js";
@@ -36,6 +36,7 @@ import {NodeToolbar} from "./NodeBox/NodeToolbar.js";
 import {SubPanel} from "./NodeBox/SubPanel.js";
 import {TitlePanel} from "./NodeBox/TitlePanel.js";
 import {NodeUI_Menu_Stub} from "./NodeUI_Menu.js";
+import {getSubscriptionLevel, NodeNotificationControl} from "./NodeBox/NodeNotificationControl.js";
 
 // drag and drop
 // ==========
@@ -79,7 +80,7 @@ export class NodeBox extends BaseComponentPlus(
 	{
 		hovered: false, moreButtonHovered: false, leftPanelHovered: false,
 		lastHoveredPanel: null as string|n, hoverTermIDs: null as string[]|n, lastWidthWhenNotPreview: 0,
-		showNotificationPannel: false,
+		showNotificationPanel: false,
 	},
 ) {
 	root: ExpandableBox|n;
@@ -116,7 +117,7 @@ export class NodeBox extends BaseComponentPlus(
 
 	render() {
 		const {indexInNodeList, map, node, path, treePath, forLayoutHelper, width, standardWidthInGroup, backgroundFillPercentOverride, panelsPosition, useLocalPanelState, style, usePortalForDetailBoxes, childrenShownByNodeExpandButton} = this.props;
-		let {hovered, moreButtonHovered, leftPanelHovered, lastHoveredPanel, hoverTermIDs, lastWidthWhenNotPreview, showNotificationPannel} = this.state;
+		let {hovered, moreButtonHovered, leftPanelHovered, lastHoveredPanel, hoverTermIDs, lastWidthWhenNotPreview, showNotificationPanel} = this.state;
 
 		// connector part
 		// ==========
@@ -324,18 +325,15 @@ export class NodeBox extends BaseComponentPlus(
 			});
 		};
 
-		const subscriptions = GetNodeSubscriptions(MeID()!, node.id);
+		const subscription = GetNodeSubscription(MeID()!, node.id);
+		const subscriptionLevel: "all" | "some" | "none" = getSubscriptionLevel(subscription);
 
-		const getSubscriptionLevel = (subscription?: Subscription): "all" | "some" | "none"=>{
-			if (!subscription) return "none";
-			const all = subscription.addChildNode && subscription.addNodeLink && subscription.addNodeRevision && subscription.deleteNode && subscription.deleteNodeLink && subscription.setNodeRating;
-			const notAll = subscription.addChildNode || subscription.addNodeLink || subscription.addNodeRevision || subscription.deleteNode || subscription.deleteNodeLink || subscription.setNodeRating;
-			if (all) return "all";
-			if (notAll) return "some";
-			return "none";
-		};
-
-		const activeNotification: "all" | "some" | "none" = getSubscriptionLevel(subscriptions[0]);
+		UseDocumentEventListener("click", e=>{
+			// if user clicked outside of node-box, close the subscription-level dropdown
+			if (!e.composedPath().includes(this.root?.DOM as any)) {
+				this.SetState({showNotificationPanel: false});
+			}
+		});
 
 		const renderInner = (dragInfo?: DragInfo)=>{
 			const asDragPreview = dragInfo?.snapshot.isDragging;
@@ -408,13 +406,9 @@ export class NodeBox extends BaseComponentPlus(
 			return (
 				<>
 					<ExpandableBox
-						onToggleNotifications={()=>{
-							this.SetState({showNotificationPannel:
-								!this.state.showNotificationPannel,
-							});
-						}}
 						showNotificationButton={[NodeType.category, NodeType.claim, NodeType.package, NodeType.multiChoiceQuestion].includes(node.type)}
-						notificationLevel={activeNotification}
+						notificationLevel={subscriptionLevel}
+						onToggleNotifications={()=>this.SetState({showNotificationPanel: !this.state.showNotificationPanel})}
 
 						ref={useCallback(c=>{
 							dragInfo?.provided.innerRef(GetDOM(c) as any);
@@ -476,99 +470,11 @@ export class NodeBox extends BaseComponentPlus(
 								{/* fixes click-gap */}
 								{panelsPosition == "below" && <div style={{position: "absolute", right: -1, width: 1, top: 0, bottom: 0}}/>}
 							</NodeUI_LeftBox>}
-							{showNotificationPannel &&
-							<Div
-								style={
-									{position: "absolute",
-									borderRadius: 5,
-									right: 0,
-									width: "100%",
-									bottom: 0,
-									transform: "translateY(100%)",
-									display: "flex",
-									flexDirection: "column",
-									overflow: "hidden",
-									}}
-							>
-								<button onClick={e=>{
-									RunCommand_AddSubscription({
-										node: node.id,
-										addChildNode: false,
-										addNodeLink: false,
-										addNodeRevision: false,
-										deleteNode: false,
-										deleteNodeLink: false,
-										setNodeRating: false,
-									});
-								}} style={{
-									background: activeNotification === "none" ? "#35393E" : "#373D43",
-									border: "none",
-									display: "flex",
-									flexFlow: "row nowrap",
-									alignItems: "center",
-									justifyContent: "space-between",
-									padding: 5,
-								}}>
-									<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path d="M14 21H10M8.63306 3.03371C9.61959 2.3649 10.791 2 12 2C13.5913 2 15.1174 2.63214 16.2426 3.75736C17.3679 4.88258 18 6.4087 18 8C18 10.1008 18.2702 11.7512 18.6484 13.0324M6.25867 6.25723C6.08866 6.81726 6 7.40406 6 8C6 11.0902 5.22047 13.206 4.34966 14.6054C3.61513 15.7859 3.24786 16.3761 3.26132 16.5408C3.27624 16.7231 3.31486 16.7926 3.46178 16.9016C3.59446 17 4.19259 17 5.38885 17H17M21 21L3 3" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-									</svg>
-									<TextPlus style={{color: "#D7D9DA"}} info="all notifications disabled">None</TextPlus>
-								</button>
-								<button
-									onClick={e=>{
-										RunCommand_AddSubscription({
-											node: node.id,
-											addChildNode: true,
-											addNodeLink: false,
-											addNodeRevision: true,
-											deleteNode: false,
-											deleteNodeLink: false,
-											setNodeRating: false,
-										});
-									}}
-								style={{
-									background: activeNotification === "some" ? "#35393E" : "#373D43",
-									border: "none",
-									display: "flex",
-									flexFlow: "row nowrap",
-									alignItems: "center",
-									justifyContent: "space-between",
-									padding: 5,
-								}}>
-									<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path d="M9.35419 21C10.0593 21.6224 10.9856 22 12 22C13.0145 22 13.9407 21.6224 14.6458 21M18 8C18 6.4087 17.3679 4.88258 16.2427 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.8826 2.63214 7.75738 3.75736C6.63216 4.88258 6.00002 6.4087 6.00002 8C6.00002 11.0902 5.22049 13.206 4.34968 14.6054C3.61515 15.7859 3.24788 16.3761 3.26134 16.5408C3.27626 16.7231 3.31488 16.7926 3.46179 16.9016C3.59448 17 4.19261 17 5.38887 17H18.6112C19.8074 17 20.4056 17 20.5382 16.9016C20.6852 16.7926 20.7238 16.7231 20.7387 16.5408C20.7522 16.3761 20.3849 15.7859 19.6504 14.6054C18.7795 13.206 18 11.0902 18 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-									</svg>
-									<TextPlus style={{color: "#D7D9DA"}} info="Recieve Notificaiton for revisions to this node">Personalised</TextPlus>
-								</button>
-								<button onClick={e=>{
-									RunCommand_AddSubscription({
-										node: node.id,
-										addChildNode: true,
-										addNodeLink: true,
-										addNodeRevision: true,
-										deleteNode: true,
-										deleteNodeLink: true,
-										setNodeRating: true,
-									});
-								}}
-								 style={{
-									background: activeNotification === "all" ? "#35393E" : "#373D43",
-									border: "none",
-									display: "flex",
-									flexFlow: "row nowrap",
-									alignItems: "center",
-									justifyContent: "space-between",
-									padding: 5,
-								 }}>
-									<svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-										<path d="M9.35442 21C10.0596 21.6224 10.9858 22 12.0002 22C13.0147 22 13.9409 21.6224 14.6461 21M2.29414 5.81989C2.27979 4.36854 3.06227 3.01325 4.32635 2.3M21.7024 5.8199C21.7167 4.36855 20.9342 3.01325 19.6702 2.3M18.0002 8C18.0002 6.4087 17.3681 4.88258 16.2429 3.75736C15.1177 2.63214 13.5915 2 12.0002 2C10.4089 2 8.88283 2.63214 7.75761 3.75736C6.63239 4.88258 6.00025 6.4087 6.00025 8C6.00025 11.0902 5.22072 13.206 4.34991 14.6054C3.61538 15.7859 3.24811 16.3761 3.26157 16.5408C3.27649 16.7231 3.31511 16.7926 3.46203 16.9016C3.59471 17 4.19284 17 5.3891 17H18.6114C19.8077 17 20.4058 17 20.5385 16.9016C20.6854 16.7926 20.724 16.7231 20.7389 16.5408C20.7524 16.3761 20.3851 15.7859 19.6506 14.6054C18.7798 13.206 18.0002 11.0902 18.0002 8Z" stroke="#D7D9DA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-									</svg>
-									<TextPlus style={{color: "#D7D9DA"}} info="Recieve Notificaiton for all changes to the node">All</TextPlus>
-								</button>
-							</Div>}
-
 							{/* fixes click-gap */}
 							{/*leftPanelShow && panelsPosition == "left" && <div style={{position: "absolute", right: "100%", width: 1, top: 0, bottom: 0}}/>*/}
+
+							{showNotificationPanel &&
+								<NodeNotificationControl {...{node, backgroundColor, subscriptionLevel}}/>}
 						</>}
 						//onTextHolderClick={onTextHolderClick}
 						//textHolderStyle={E(isMultiPremiseArg && {width: null})}