feat(devtools): Enhance node to show a dependency indicator

2devs-team · Nov 13, 2024 · 396c0aa · 396c0aa
1 parent e3a86a5
commit 396c0aa
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 38 deletions.
diff --git a/packages/reactter/lib/src/devtools.dart b/packages/reactter/lib/src/devtools.dart
@@ -434,7 +434,15 @@ abstract class _Node<T extends Object> extends LinkedListEntry<_Node> {
 
   _Node({required this.instance});
 
-  Map<String, dynamic> toJson();
+  Map<String, dynamic> toJson() {
+    final dependencyRef = Rt.getDependencyRef(instance);
+    final dependencyId = dependencyRef?.id;
+
+    return {
+      'dependencyId': dependencyId,
+      'dependencyRef': dependencyRef?.hashCode.toString(),
+    };
+  }
 
   _Node? get lastDescendant =>
       children.isEmpty ? this : children.last.lastDescendant as _Node;
@@ -517,7 +525,7 @@ class _InstanceNode extends _Node {
       'kind': _NodeKind.instance,
       'key': key,
       'type': instance.runtimeType.toString(),
-      'dependencyRef': Rt.getDependencyRef(instance)?.hashCode.toString(),
+      ...super.toJson(),
     };
   }
 
@@ -550,7 +558,7 @@ class _StateNode extends _Node<RtState> {
       'type': instance.runtimeType.toString(),
       'debugLabel': instance.debugLabel,
       'boundInstanceKey': instance.boundInstance?.hashCode.toString(),
-      'dependencyRef': Rt.getDependencyRef(instance)?.hashCode.toString(),
+      ...super.toJson(),
     };
   }
 

diff --git a/packages/reactter_devtools_extension/lib/src/controllers/nodes_controller.dart b/packages/reactter_devtools_extension/lib/src/controllers/nodes_controller.dart
@@ -134,6 +134,7 @@ class NodesController {
     final kind = nodeInfo['kind'];
     final key = nodeInfo['key'];
     final type = nodeInfo['type'];
+    final dependencyRef = nodeInfo['dependencyRef'];
 
     switch (kind) {
       case 'dependency':
@@ -149,11 +150,13 @@ class NodesController {
                 kind: kind,
                 type: type,
               );
+
         final debugLabel = nodeInfo['debugLabel'];
         final boundInstanceKey = nodeInfo['boundInstanceKey'];
 
         node.uInfo.value = StateInfo(
-          label: debugLabel,
+          dependencyRef: dependencyRef,
+          debugLabel: debugLabel,
           boundInstanceKey: boundInstanceKey,
         );
 
@@ -184,7 +187,9 @@ class NodesController {
                 type: type,
               );
 
-        node.uInfo.value = InstanceInfo();
+        node.uInfo.value = InstanceInfo(
+          dependencyRef: dependencyRef,
+        );
 
         addNode(node);
 

diff --git a/packages/reactter_devtools_extension/lib/src/data/dependency_node.dart b/packages/reactter_devtools_extension/lib/src/data/dependency_node.dart
@@ -8,6 +8,9 @@ import 'package:vm_service/vm_service.dart';
 base class DependencyNode extends INode<DependencyInfo> {
   final uIsLoading = UseState(false);
 
+  @override
+  String? get label => uInfo.value?.id;
+
   DependencyNode._({
     required super.key,
     required super.kind,

diff --git a/packages/reactter_devtools_extension/lib/src/data/instance_info.dart b/packages/reactter_devtools_extension/lib/src/data/instance_info.dart
@@ -1,5 +1,6 @@
 import 'package:reactter_devtools_extension/src/interfaces/node_info.dart';
 
 class InstanceInfo extends INodeInfo {
-  InstanceInfo();
+
+  const InstanceInfo({super.dependencyRef});
 }
diff --git a/packages/reactter_devtools_extension/lib/src/data/instance_node.dart b/packages/reactter_devtools_extension/lib/src/data/instance_node.dart
@@ -1,8 +1,11 @@
 import 'package:flutter_reactter/reactter.dart';
+import 'package:reactter_devtools_extension/src/data/instance_info.dart';
 import 'package:reactter_devtools_extension/src/interfaces/node.dart';
-import 'package:reactter_devtools_extension/src/interfaces/node_info.dart';
 
-base class InstanceNode extends INode<INodeInfo> {
+base class InstanceNode extends INode<InstanceInfo> {
+  @override
+  final label = null;
+
   InstanceNode._({
     required super.key,
     required super.kind,

diff --git a/packages/reactter_devtools_extension/lib/src/data/slot_node.dart b/packages/reactter_devtools_extension/lib/src/data/slot_node.dart
@@ -3,6 +3,9 @@ import 'package:reactter_devtools_extension/src/interfaces/node.dart';
 import 'package:reactter_devtools_extension/src/interfaces/node_info.dart';
 
 base class SlotNode extends INode<INodeInfo> {
+  @override
+  final String? label = null;
+
   SlotNode._({required super.key, required super.kind, required super.type});
 
   factory SlotNode({

diff --git a/packages/reactter_devtools_extension/lib/src/data/state_info.dart b/packages/reactter_devtools_extension/lib/src/data/state_info.dart
@@ -1,18 +1,25 @@
 import 'package:reactter_devtools_extension/src/interfaces/node_info.dart';
 
 class StateInfo extends INodeInfo {
+  final String? debugLabel;
   final String? boundInstanceKey;
   final List<String> kinds;
 
   StateInfo({
-    super.label,
+    super.dependencyRef,
+    this.debugLabel,
     this.boundInstanceKey,
     this.kinds = const ['RtState'],
   });
 
-  StateInfo copyWith({String? label, String? boundInstanceKey}) {
+  StateInfo copyWith({
+    String? dependencyRef,
+    String? debugLabel,
+    String? boundInstanceKey,
+  }) {
     return StateInfo(
-      label: label ?? this.label,
+      dependencyRef: dependencyRef ?? this.dependencyRef,
+      debugLabel: debugLabel ?? this.debugLabel,
       boundInstanceKey: boundInstanceKey ?? this.boundInstanceKey,
     );
   }

diff --git a/packages/reactter_devtools_extension/lib/src/data/state_node.dart b/packages/reactter_devtools_extension/lib/src/data/state_node.dart
@@ -8,6 +8,9 @@ import 'package:reactter_devtools_extension/src/services/eval_service.dart';
 base class StateNode extends INode<StateInfo> {
   final uIsLoading = UseState(false);
 
+  @override
+  String? get label => uInfo.value?.debugLabel;
+
   StateNode._({
     required super.key,
     required super.kind,

diff --git a/packages/reactter_devtools_extension/lib/src/interfaces/node.dart b/packages/reactter_devtools_extension/lib/src/interfaces/node.dart
@@ -9,6 +9,8 @@ abstract base class INode<I extends INodeInfo> extends TreeNode<INode> {
   final String kind;
   final String type;
 
+  String? get label;
+
   final uInfo = UseState<I?>(null);
   final uIsSelected = UseState(false);
   final propertyNodes = TreeList<PropertyNode>();

diff --git a/packages/reactter_devtools_extension/lib/src/interfaces/node_info.dart b/packages/reactter_devtools_extension/lib/src/interfaces/node_info.dart
@@ -1,5 +1,5 @@
 abstract class INodeInfo {
-  final String? label;
+  final String? dependencyRef;
 
-  INodeInfo({this.label});
+  const INodeInfo({this.dependencyRef});
 }
diff --git a/packages/reactter_devtools_extension/lib/src/widgets/node_tile.dart b/packages/reactter_devtools_extension/lib/src/widgets/node_tile.dart
@@ -32,21 +32,34 @@ class NodeTile extends StatelessWidget {
 
 class NodeTileIcon extends StatelessWidget {
   final String kind;
+  final bool isDependency;
 
-  const NodeTileIcon({super.key, required this.kind});
+  const NodeTileIcon({
+    super.key,
+    required this.kind,
+    this.isDependency = false,
+  });
 
   @override
   Widget build(BuildContext context) {
     final nodeKind = NodeKind.getKind(kind);
 
-    return CircleAvatar(
-      backgroundColor: nodeKind.color,
-      child: Text(
-        nodeKind.abbr,
-        style: Theme.of(context).textTheme.labelSmall?.copyWith(
-              color: Colors.white,
-              fontWeight: FontWeight.bold,
+    return Badge(
+      backgroundColor: isDependency ? Colors.teal : Colors.transparent,
+      child: Padding(
+        padding: const EdgeInsets.all(2.0),
+        child: Center(
+          child: CircleAvatar(
+            backgroundColor: nodeKind.color,
+            child: Text(
+              nodeKind.abbr,
+              style: Theme.of(context).textTheme.labelSmall?.copyWith(
+                    color: Colors.white,
+                    fontWeight: FontWeight.bold,
+                  ),
             ),
+          ),
+        ),
       ),
     );
   }
@@ -62,25 +75,29 @@ class NodeTileTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        SizedBox.square(
-          dimension: 24,
-          child: Padding(
-            padding: const EdgeInsets.all(4).copyWith(left: 0, right: 4),
-            child: NodeTileIcon(kind: node.kind),
-          ),
-        ),
-        RtWatcher((context, watch) {
-          final info = watch(node.uInfo).value;
+    return RtWatcher((context, watch) {
+      final info = watch(node.uInfo).value;
+      final dependencyRef = info?.dependencyRef;
 
-          return InstanceTitle(
+      return Row(
+        children: [
+          SizedBox.square(
+            dimension: 24,
+            child: Padding(
+              padding: const EdgeInsets.all(1),
+              child: NodeTileIcon(
+                kind: node.kind,
+                isDependency: dependencyRef != null,
+              ),
+            ),
+          ),
+          InstanceTitle(
             type: node.type,
-            label: info?.label,
+            label: node.label,
             nKey: node.key,
-          );
-        }),
-      ],
-    );
+          ),
+        ],
+      );
+    });
   }
 }