@eventcatalog/core 2.4.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @eventcatalog/core
 
+## 2.5.1
+
+### Patch Changes
+
+- 2bbccf8: feat(core): added new MDX component for Flows
+
+## 2.5.0
+
+### Minor Changes
+
+- 067fd89: feat(core): added flows to eventcatalog
+- c336807: feat(core): only latest versions are now shown in visualizer
+- 20c2cba: fix(core): fixing search not working after builds
+- 7476fa6: fix(core): nodegraphs for domains now work with semver versions
+- 737380a: feat(core): added ability to see how many domains a team and users own
+- a1490d3: chore(core): updated astro versions
+  feat(core): visuzlier arrows stroke width increased
+- 58d6a2d: chore(core): fixing default for flows
+
 ## 2.4.0
 
 ### Minor Changes

package/README.md

@@ -113,7 +113,7 @@ You can see the markdown files that generated the website in the GitHub repo und
 
 Interested in collaborating with us? Our offerings include dedicated support, priority assistance, feature development, custom integrations, and more.
 
-Find more details on our [enterprise plan](https://eventcatalog.dev/enterprise).
+Find more details on our [services page](https://eventcatalog.dev/services).
 
 # Looking for v1?
 
@@ -129,6 +129,13 @@ If you have any questions, features or issues please raise any issue or pull req
 
 You can find the [contributing guidelines here](https://eventcatalog.dev/docs/contributing/overview).
 
+## Running the project locally
+
+1. Clone the repo
+1. Install required dependencies `npm run i`
+1. Run the command `npm run start:catalog`
+    - This will start the catalog found in `/examples` repo, locally on your machine
+
 [license-badge]: https://img.shields.io/github/license/event-catalog/eventcatalog.svg?color=yellow
 [license]: https://github.com/event-catalog/eventcatalog/blob/main/LICENSE
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square

package/bin/dist/eventcatalog.cjs

@@ -3095,9 +3095,6 @@ var ensureDir = (dir2) => {
   }
 };
 var copyCore = () => {
-  if (import_fs.default.existsSync(core)) {
-    import_fs.default.rmSync(core, { recursive: true });
-  }
   ensureDir(core);
   import_fs.default.cpSync(eventCatalogDir, core, {
     recursive: true,
@@ -3106,13 +3103,17 @@ var copyCore = () => {
     }
   });
 };
-program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").action((options) => {
+var clearCore = () => {
+  if (import_fs.default.existsSync(core)) import_fs.default.rmSync(core, { recursive: true });
+};
+program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action((options) => {
   console.log("Setting up EventCatalog....");
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
     console.log("CATALOG_DIR", core);
   }
+  if (options.forceRecreate) clearCore();
   copyCore();
   copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
   copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));

package/bin/dist/eventcatalog.js

@@ -3062,9 +3062,6 @@ var ensureDir = (dir2) => {
   }
 };
 var copyCore = () => {
-  if (fs.existsSync(core)) {
-    fs.rmSync(core, { recursive: true });
-  }
   ensureDir(core);
   fs.cpSync(eventCatalogDir, core, {
     recursive: true,
@@ -3073,13 +3070,17 @@ var copyCore = () => {
     }
   });
 };
-program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").action((options) => {
+var clearCore = () => {
+  if (fs.existsSync(core)) fs.rmSync(core, { recursive: true });
+};
+program2.command("dev").description("Run development server of EventCatalog").option("-d, --debug", "Output EventCatalog application information into your terminal").option("--force-recreate", "Recreate the eventcatalog-core directory", false).action((options) => {
   console.log("Setting up EventCatalog....");
   if (options.debug) {
     console.log("Debug mode enabled");
     console.log("PROJECT_DIR", dir);
     console.log("CATALOG_DIR", core);
   }
+  if (options.forceRecreate) clearCore();
   copyCore();
   copyFolder(join(dir, "public"), join(core, "public"));
   copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "publishConfig": {
     "access": "public"
   },
@@ -30,10 +30,10 @@
     "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json,astro}\""
   },
   "dependencies": {
-    "@astrojs/check": "^0.7.0",
-    "@astrojs/markdown-remark": "^5.1.0",
-    "@astrojs/mdx": "^3.1.0",
-    "@astrojs/react": "^3.5.0",
+    "@astrojs/check": "^0.9.2",
+    "@astrojs/markdown-remark": "^5.2.0",
+    "@astrojs/mdx": "^3.1.3",
+    "@astrojs/react": "^3.6.2",
     "@astrojs/tailwind": "^5.1.0",
     "@changesets/cli": "^2.27.5",
     "@headlessui/react": "^2.0.3",
@@ -44,13 +44,14 @@
     "@tanstack/react-table": "^8.17.3",
     "@types/dagre": "^0.7.52",
     "@types/node": "^20.14.2",
-    "astro": "^4.10.1",
+    "astro": "^4.14.2",
     "astro-expressive-code": "^0.35.2",
     "astro-pagefind": "^1.5.0",
     "astro-seo": "^0.8.4",
     "dagre": "^0.8.5",
     "glob": "^10.4.1",
     "html-to-image": "^1.11.11",
+    "lodash.merge": "4.6.2",
     "mermaid": "^10.9.1",
     "rapidoc": "^9.3.4",
     "react": "^18.3.1",
@@ -65,6 +66,7 @@
   },
   "devDependencies": {
     "@parcel/watcher": "^2.4.1",
+    "@types/lodash.merge": "4.6.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "commander": "^12.1.0",

package/scripts/catalog-to-astro-content-directory.js

@@ -22,11 +22,12 @@ const ensureDirSync = async (filePath) => {
   }
 };
 
-const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles, pathToAllFiles, type }) => {
+const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles, pathToAllFiles, type, ignore = null }) => {
   // Find all the event files
   const markdownFiles = await glob(pathToMarkdownFiles, {
     nodir: true,
     windowsPathsNoEscape: os.platform() == 'win32',
+    ignore: ignore,
   });
   const files = await glob(pathToAllFiles, {
     ignore: {
@@ -186,6 +187,11 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
       path.join(source, 'services/**/**/changelog.md'),
     ],
     pathToAllFiles: [path.join(source, 'services/**'), path.join(source, 'domains/**/services/**')],
+    ignore: [
+      path.join(source, 'services/**/events/**'),
+      path.join(source, 'services/**/commands/**'),
+      path.join(source, 'services/**/flows/**'),
+    ],
     type: 'services',
   });
 
@@ -196,9 +202,34 @@ export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) =
     catalogFilesDir,
     pathToMarkdownFiles: [path.join(source, 'domains/**/**/index.md'), path.join(source, 'domains/**/**/changelog.md')],
     pathToAllFiles: [path.join(source, 'domains/**')],
+    ignore: [
+      path.join(source, 'domains/**/services/**'),
+      path.join(source, 'domains/**/commands/**'),
+      path.join(source, 'domains/**/events/**'),
+      path.join(source, 'domains/**/flows/**'),
+    ],
     type: 'domains',
   });
 
+  // // Copy all the flow files over
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [
+      path.join(source, 'flows/**/**/index.md'),
+      path.join(source, 'flows/**/**/changelog.md'),
+      path.join(source, 'services/**/flows/**/index.md'),
+      path.join(source, 'domains/**/flows/**/index.md'),
+    ],
+    pathToAllFiles: [
+      path.join(source, 'flows/**'),
+      path.join(source, 'services/**/flows/**'),
+      path.join(source, 'domains/**/flows/**'),
+    ],
+    type: 'flows',
+  });
+
   // // Copy all the users
   await copyFiles({
     source,

package/scripts/default-files-for-collections/flows.md

@@ -0,0 +1,11 @@
+---
+id: empty
+steps:
+    - id: "empty"
+      title: "empty"
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/pages.md

@@ -1,6 +1,7 @@
 ---
 id: index
 slug: index
+hidden: true
 ---
 
 <!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/watcher.js

@@ -11,7 +11,7 @@ const catalogDirectory = process.env.CATALOG_DIR;
 
 const contentPath = path.join(catalogDirectory, 'src', 'content');
 
-const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages', 'components'];
+const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users', 'pages', 'components', 'flows'];
 // const absoluteWatchList = watchList.map((item) => path.join(projectDirectory, item));
 
 // confirm folders exist before watching them
@@ -62,7 +62,6 @@ for (let item of [...verifiedWatchList]) {
 
       // IF directory remove it
       if (type === 'delete') {
-        console.log('eventPath', eventPath);
         fs.rmSync(newPath);
       }
     }

package/src/components/DocsNavigation.astro

@@ -3,6 +3,7 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
+import { getFlows } from '@utils/flows/flows';
 import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
 import config, { type CatalogConfig } from '@eventcatalog';
@@ -12,19 +13,21 @@ const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
 const services = await getServices({ getAllVersions: false });
 const domains = await getDomains({ getAllVersions: false });
+const flows = await getFlows({ getAllVersions: false });
 const teams = await getTeams();
 const users = await getUsers();
 
 const messages = [...events, ...commands];
 
 // @ts-ignore for large catalogs https://github.com/event-catalog/eventcatalog/issues/552
-const allData = [...domains, ...services, ...messages, ...teams, ...users];
+const allData = [...domains, ...services, ...messages, ...flows, ...teams, ...users];
 
 const eventCatalogConfig = config as CatalogConfig;
 const {
   services: servicesConfig,
   domains: domainsConfig,
   messages: messagesConfig,
+  flows: flowsConfig,
   teams: teamsConfig,
   users: usersConfig,
   showPageHeadings = true,
@@ -38,6 +41,7 @@ const visibleCollections: { [key: string]: boolean } = {
   events: getConfigValue(messagesConfig, 'visible', true),
   commands: getConfigValue(messagesConfig, 'visible', true),
   domains: getConfigValue(domainsConfig, 'visible', true),
+  flows: getConfigValue(flowsConfig, 'visible', true),
   services: getConfigValue(servicesConfig, 'visible', true),
   teams: getConfigValue(teamsConfig, 'visible', true),
   users: getConfigValue(usersConfig, 'visible', true),

package/src/components/MDX/Flow/Flow.astro

@@ -0,0 +1,63 @@
+---
+import { getFlows } from '@utils/flows/flows';
+import { getNodesAndEdges } from '@utils/flows/node-graph';
+import Admonition from '@components/MDX/Admonition';
+import NodeGraph from '../NodeGraph/NodeGraph';
+import { getVersionFromCollection } from '@utils/versions/versions';
+
+const { id, version = 'latest', maxHeight, includeKey = true } = Astro.props;
+
+// Find the flow for the given id and version
+const flows = await getFlows();
+const flowCollection = getVersionFromCollection(flows, id, version) || [];
+const flow = flowCollection[0];
+
+// const flow = flows.find((flow) => flow.data.id === id && flow.data.version === version);
+
+const { nodes, edges } = await getNodesAndEdges({
+  id: id,
+  version: flow.data.version,
+});
+---
+
+{
+  !flow && (
+    <Admonition type="warning">
+      <>
+        <span class="block font-bold">{`<Flow/>`} failed to load</span>
+        <span class="block">
+          Tried to load flow id: {id} with version {version}. Make sure you have this flow defined in your project.
+        </span>
+      </>
+    </Admonition>
+  )
+}
+
+<div
+  class="h-[30em] my-6 mb-12 w-full relative border border-gray-200 rounded-md"
+  id={`${id}-portal`}
+  style={{
+    maxHeight: maxHeight ? `${maxHeight}em` : `30em`,
+  }}
+>
+</div>
+
+<div>
+  <NodeGraph
+    id={id}
+    nodes={nodes}
+    edges={edges}
+    hrefLabel={'View in visualizer'}
+    href={`/visualiser/flows/${id}/${version}`}
+    linkTo={'visualiser'}
+    includeKey={includeKey}
+    footerLabel=`Flow diagram - ${flow.data.name} - v(${flow.data.version})`
+    client:load
+  />
+</div>
+
+<style is:global>
+  .react-flow__attribution {
+    display: none;
+  }
+</style>

package/src/components/MDX/NodeGraph/NodeGraph.astro

@@ -4,6 +4,7 @@ import { getNodesAndEdges as getNodesAndEdgesForService } from '@utils/services/
 import { getNodesAndEdges as getNodesAndEdgesForEvent } from '@utils/events/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForCommand } from '@utils/commands/node-graph';
 import { getNodesAndEdges as getNodesAndEdgesForDomain } from '@utils/domains/node-graph';
+import { getNodesAndEdges as getNodesAndEdgesForFlows } from '@utils/flows/node-graph';
 
 interface Props {
   id: string;
@@ -65,6 +66,17 @@ if (collection === 'domains') {
   nodes = eventNodes;
   edges = eventEdges;
 }
+
+if (collection === 'flows') {
+  const { nodes: eventNodes, edges: eventEdges } = await getNodesAndEdgesForFlows({
+    id: id,
+    version,
+    mode,
+  });
+
+  nodes = eventNodes;
+  edges = eventEdges;
+}
 ---
 
 <div>

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -13,7 +13,10 @@ import ReactFlow, {
 import 'reactflow/dist/style.css';
 import ServiceNode from './Nodes/Service';
 import EventNode from './Nodes/Event';
+import UserNode from './Nodes/User';
+import StepNode from './Nodes/Step';
 import CommandNode from './Nodes/Command';
+import ExternalSystemNode from './Nodes/ExternalSystem';
 import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
@@ -28,6 +31,7 @@ interface Props {
   includeBackground?: boolean;
   includeControls?: boolean;
   linkTo: 'docs' | 'visualiser';
+  includeKey?: boolean;
 }
 
 const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
@@ -38,10 +42,27 @@ const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<Collectio
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {
-const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground = true, linkTo = 'docs' }: Props) => {
-  const [nodes, _, onNodesChange] = useNodesState(initialNodes);
-
-  const nodeTypes = useMemo(() => ({ services: ServiceNode, events: EventNode, commands: CommandNode }), []);
+const NodeGraphBuilder = ({
+  nodes: initialNodes,
+  edges,
+  title,
+  includeBackground = true,
+  linkTo = 'docs',
+  includeKey = true,
+}: Props) => {
+  const nodeTypes = useMemo(
+    () => ({
+      services: ServiceNode,
+      events: EventNode,
+      commands: CommandNode,
+      step: StepNode,
+      user: UserNode,
+      actor: UserNode,
+      externalSystem: ExternalSystemNode,
+    }),
+    []
+  );
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   const nodeOrigin = [0.5, 0.5];
 
   const handleNodeClick = (_: any, node: Node) => {
@@ -60,7 +81,6 @@ const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground
       nodes={nodes}
       edges={edges}
       fitView
-      nodesDraggable
       onNodesChange={onNodesChange}
       connectionLineType={ConnectionLineType.SmoothStep}
       // @ts-ignore
@@ -77,25 +97,27 @@ const NodeGraphBuilder = ({ nodes: initialNodes, edges, title, includeBackground
       <DownloadButton filename={title} addPadding={!!title} />
       {includeBackground && <Background color="#bbb" gap={16} />}
       {includeBackground && <Controls />}
-      <Panel position="bottom-right">
-        <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
-          <span className="font-bold">Key</span>
-          <ul>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-orange-500 block" />
-              <span className="block">Event</span>
-            </li>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-pink-500 block" />
-              <span className="block">Service</span>
-            </li>
-            <li className="flex space-x-2 items-center text-[12px]">
-              <span className="w-2 h-2 bg-blue-500 block" />
-              <span className="block">Command</span>
-            </li>
-          </ul>
-        </div>
-      </Panel>
+      {includeKey && (
+        <Panel position="bottom-right">
+          <div className=" bg-white font-light px-4 text-[14px] shadow-md py-1 rounded-md">
+            <span className="font-bold">Key</span>
+            <ul>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-orange-500 block" />
+                <span className="block">Event</span>
+              </li>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-pink-500 block" />
+                <span className="block">Service</span>
+              </li>
+              <li className="flex space-x-2 items-center text-[12px]">
+                <span className="w-2 h-2 bg-blue-500 block" />
+                <span className="block">Command</span>
+              </li>
+            </ul>
+          </div>
+        </Panel>
+      )}
     </ReactFlow>
   );
 };
@@ -108,9 +130,21 @@ interface NodeGraphProps {
   nodes: Node[];
   edges: Edge[];
   linkTo: 'docs' | 'visualiser';
+  includeKey?: boolean;
+  footerLabel?: string;
 }
 
-const NodeGraph = ({ id, nodes, edges, title, href, linkTo = 'docs', hrefLabel = 'Open in visualiser' }: NodeGraphProps) => {
+const NodeGraph = ({
+  id,
+  nodes,
+  edges,
+  title,
+  href,
+  linkTo = 'docs',
+  hrefLabel = 'Open in visualizer',
+  includeKey = true,
+  footerLabel,
+}: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
 
   useEffect(() => {
@@ -124,15 +158,23 @@ const NodeGraph = ({ id, nodes, edges, title, href, linkTo = 'docs', hrefLabel =
     <div>
       {createPortal(
         <ReactFlowProvider>
-          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} />
+          <NodeGraphBuilder edges={edges} nodes={nodes} title={title} linkTo={linkTo} includeKey={includeKey} />
+
+          <div className="flex justify-between">
+            {footerLabel && (
+              <div className="py-2 w-full text-left ">
+                <span className=" text-sm no-underline py-2 text-gray-300">{footerLabel}</span>
+              </div>
+            )}
 
-          {href && (
-            <div className="py-2 w-full text-right">
-              <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
-                {hrefLabel} &rarr;
-              </a>
-            </div>
-          )}
+            {href && (
+              <div className="py-2 w-full text-right">
+                <a className=" text-sm no-underline py-2 text-gray-800 hover:text-purple-500" href={href}>
+                  {hrefLabel} &rarr;
+                </a>
+              </div>
+            )}
+          </div>
         </ReactFlowProvider>,
         elem
       )}

package/src/components/MDX/NodeGraph/Nodes/ExternalSystem.tsx

@@ -0,0 +1,79 @@
+import { ServerIcon } from '@heroicons/react/16/solid';
+import { GlobeAmericasIcon } from '@heroicons/react/20/solid';
+import type { CollectionEntry } from 'astro:content';
+import { Handle } from 'reactflow';
+
+interface Data {
+  label: string;
+  bgColor: string;
+  color: string;
+  mode: 'simple' | 'full';
+  step: { id: string; title: string; summary: string; externalSystem: { name: string; summary?: string; url?: string } };
+  showTarget?: boolean;
+  showSource?: boolean;
+}
+
+function classNames(...classes: any) {
+  return classes.filter(Boolean).join(' ');
+}
+
+export default function ExternalSystemNode({ data, sourcePosition, targetPosition }: any) {
+  const { mode, step, showTarget = true, showSource = true } = data as Data;
+  const { externalSystem } = step;
+  const { name, summary, url } = externalSystem;
+
+  return (
+    <div
+      className={classNames(
+        `w-full rounded-md border flex justify-start  bg-white text-black border-pink-500`,
+        mode === 'full' ? 'min-h-[7em]' : 'min-h-[2em]'
+      )}
+    >
+      <div
+        className={classNames(
+          'bg-gradient-to-b from-pink-500 to-pink-700 relative flex items-center w-5 justify-center rounded-l-sm text-red-100-500',
+          `border-r-[1px] border-pink-500`
+        )}
+      >
+        <GlobeAmericasIcon className="w-4 h-4 opacity-90 text-white absolute top-1 " />
+        {mode === 'full' && (
+          <span className="rotate -rotate-90 w-1/2 text-center absolute bottom-1 text-[9px] text-white font-bold uppercase tracking-[3px] ">
+            External
+          </span>
+        )}
+      </div>
+      <div className="p-1 min-w-60 max-w-[min-content]">
+        {showTarget && <Handle type="target" position={targetPosition} />}
+        {showSource && <Handle type="source" position={sourcePosition} />}
+        <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
+          <div className="h-full ">
+            <span className="text-sm font-bold pb-0.5 block w-full">{name}</span>
+            {mode === 'simple' && (
+              <div className="w-full text-right">
+                <span className=" w-full text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">External System</span>
+              </div>
+            )}
+          </div>
+        </div>
+        {mode === 'full' && (
+          <div className="divide-y divide-gray-200 ">
+            <div className="leading-3 py-1">
+              <span className="text-[8px] font-light">{summary}</span>
+            </div>
+
+            {url && (
+              <div className="grid grid-cols-2 gap-x-4 py-1">
+                <span className="text-xs" style={{ fontSize: '0.2em' }}>
+                  URL:{' '}
+                  <a href={url} target="_blank" className="text-purple-500 underline">
+                    {url}
+                  </a>
+                </span>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/MDX/NodeGraph/Nodes/Service.tsx

@@ -21,9 +21,6 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
 
   const { version, owners = [], sends = [], receives = [], name } = service.data;
 
-  const renderTarget = showTarget;
-  const renderSource = showSource;
-
   return (
     <div className={classNames('w-full rounded-md border flex justify-start  bg-white text-black border-pink-500')}>
       <div
@@ -42,21 +39,12 @@ export default function ServiceNode({ data, sourcePosition, targetPosition }: an
       <div className="p-1 min-w-60 max-w-[min-content]">
         {showTarget && <Handle type="target" position={targetPosition} />}
         {showSource && <Handle type="source" position={sourcePosition} />}
-        {/* {mode === 'full' && (
-        <div className="flex justify-end font-thin space-x-1 border-b border-orange-200  pb-0.5 " style={{ fontSize: '0.2em' }}>
-          <span>Service</span>
-          <ServerIcon className="w-2 h-2 opacity-90" />
-        </div>
-      )} */}
         <div className={classNames(mode === 'full' ? `border-b border-gray-200` : '')}>
           <span className="text-xs font-bold block pt-0.5 pb-0.5">{name}</span>
           <div className="flex justify-between">
             <span className="text-[10px] font-light block pt-0.5 pb-0.5 ">v{version}</span>
             {mode === 'simple' && <span className="text-[10px] text-gray-500 font-light block pt-0.5 pb-0.5 ">Service</span>}
           </div>
-          {/* <div className="flex justify-end">
-            <span className="text-[8px] text-gray-500 font-light block pt-0.5 pb-0.5 ">View service</span>
-          </div> */}
         </div>
         {mode === 'full' && (
           <div className="divide-y divide-gray-200 ">