DEV Community: MonsterPi13

Vue Flow Quickstart and Best Practices

MonsterPi13 — Fri, 02 Feb 2024 17:30:05 +0000

📝 Preface

The immense popularity of large language models (LLMs) in 2023 looks set to continue this year. Following OpenAI's groundbreaking releases of GPT-3 and subsequent iterations, LLMs have become the cutting edge in natural language processing. Numerous tech firms and developers are racing to bring their own LLM offerings to market, capitalizing on intense interest in this burgeoning field. Harnessing the power of LLMs appears to be the wise course forward for those seeking to remain at the forefront of AI capabilities. 🤖

My employer has opted to develop its own product in this sphere, integrating proprietary APIs across the organization. The workflow chart constitutes the crux of this endeavor, empowering users to tailor personalized processes. In the following article, I will illuminate the pivotal steps to constructing such workflow diagrams within web interfaces. It is my sincere aspiration that these insights provide some modicum of assistance to readers pursuing similar objectives. 🙏

📚 Finding the Right Workflow Library

At my present employer, the predominant front-end technology stack comprises Vue3 and TypeScript. Consequently, I sought out a workflow library grounded in Vue3 and ideally authored in TypeScript. Despite utilizing LogicFlow previously, its integration with Vue3 proved insufficiently seamless.Therefore, for this demonstration, I opted for VueFlow, which boasts exceptional support for Vue3.

⚙️ Core Capabilities to Implement

🖱 Drag & Drop Elements to Create New Nodes
🎨 Customizing Nodes
➡️ Connect Nodes with Drag-Based Edges
📤 Pass Data Between Nodes
💾 Save/Load Workflow State

🖱 Drag & Drop Elements to Create New Nodes

Set the element draggable and add dragstart event handler:



<script setup>
function handleDragStart(event, nodeType) {
  event.dataTransfer.setData("node", nodeType);
}
</script>

<template>
  <div 
    draggable 
    @dragstart="handleDragStart($event, 'someNode')">
    ...
  </div>
</template>

Define drop zone with ondragover and ondrop handlers:



<template>
  <div
    @drop="handleDrop"
    @dragover="handleDragOver">

    <VueFlow>
      ...
    </VueFlow>

  </div>  
</template>

<script>
function handleDrop(event) {
  // Create node from dragged data
  const nodeType = event.dataTransfer.getData('node') 
  const newNode = {
    type: nodeType,
    ...
  }

  addNode(newNode)
}

function handleOnDragOver(event) {
  event.preventDefault();

  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = "move";
  }
}
</script>

This enables dragging elements into the flowchart canvas to create new nodes programmatically. 💡

As the code above shows, we can do our business logic in the drop event handler. In this demo, we just add our custom node to the workflow canvas with addNodes. By the way, we can use the useVueFlow hook provided by VueFlow to conveniently add/delete nodes & edges in our app.

🎨 Customizing Nodes

Two approaches exist for defining customized nodes. The first employs template slots, whereby dynamic resolution furnishes a slot denominated #node-custom when the custom type is anticipated. The second leverages the node-types prop. In my estimation, the latter approach promotes superior organization. Thus, I opted to utilize the node-types technique for node definition.

Constructing a bespoke node is remarkably straightforward - simply codify the node UI as an ordinary Vue component. This convenience is quite remarkable.



<script setup lang="ts">
import StartNode from '@/components/vue-flow/nodes/start-node.vue'
import EndNode from '@/components/vue-flow/nodes/end-node.vue'
import LLMNode from '@/components/vue-flow/nodes/LLM-node.vue'
import CodeNode from '@/components/vue-flow/nodes/code-node.vue'
import KnowledgeNode from '@/components/vue-flow/nodes/knowledge-node.vue'
import ApiNode from '@/components/vue-flow/nodes/api-node.vue'

  const nodeTypes = {
    start: markRaw(StartNode),
    end: markRaw(EndNode),
    LLM: markRaw(LLMNode),
    code: markRaw(CodeNode),
    knowledge: markRaw(KnowledgeNode),
    api: markRaw(ApiNode)
  }
</script>

<template>
  <div class="relative h-full w-full">
    <VueFlow :node-types="nodeTypes">
    </VueFlow>
  </div>
</template>

➡️ Connect Nodes with Drag-Based Edges

Employ the onConnect hook, invoked upon establishing a connection between two nodes.
Within the callback, call addEdges to forge an edge linking the nodes.
When instantiating the novel node, the isValidTargetPos attribute can be defined to constrain permissible connections to specific target nodes. ```Typescript

const { onConnect, addEdges } = useVueFlow()
onConnect((params) => {
addEdges(params)
})

Automatically connect nodes on drag.

## 📤 Pass Data Between Nodes

Our envisioned workflow platform necessitates obtanining data from preceding nodes and replaying it to subsequent nodes. This imposes the requirement of devising a technique to retrieve a node's antecedent data.

The current node's attributes incorporate a `connectedEdges` field. By filtering for connected nodes where the current node constitutes the `target` node type, we can identify the direct predecessor. The `findNode` function can then be invoked upon that node to extract its bound data for passage downstream.

This leverages existing node properties and methods to fulfill the prerequisite of data sharing between ajacent nodes in the workflows.
```Typescript


import { useNode, useVueFlow } from "@vue-flow/core";

const node = useNode();
const { findNode } = useVueFlow();
watchEffect(() => {
  if (node.connectedEdges && node.connectedEdges.value.length > 0) {
    const filteredEdges = node.connectedEdges.value.filter(
      (item) => item.target === node.id
    );
    referenceOptions.value = filteredEdges.map((edge) => {
      const node = findNode(edge.source);
      const currentItem: Option = {
        groupName: node?.data.title ?? node?.label,
        options: [],
      };

      if (node?.data.output) {
        node?.data.output
          .filter((item: any) => Boolean(item.name))
          .forEach((option: any) => {
            currentItem.options.push({
              label: option.name,
              value: option.name,
            });
          });
      } else {
        currentItem.options = [];
      }
      return currentItem;
    });
  }
});

💾 Save/Load Workflow State

To enable integration with back-end APIs, persisting the current workflow state is requisite. Retrieving the diagram data proves straightforward - simply invoke the toObject method form the useVueFlow hook. Similarly, restoring a saved workflow is readily achievable by applying the appropriate utilities furnished by the hook.

Leveraging the capabilities surface by useVueFlow provides a clean and convenient approach to serializing and deserializing the workflow for server communication and storage.

For illustration, the workflow data can be obtained, persisted, and restored as follows:



// Retrieve workflow data
const data = toObject(workflow); 

// Save data to backend
saveWorkflow(data);

// Reconstruct workflow from data
setNodes(data.nodes);
setEdges(data.edges);

Through this approach, the current workflow state can be serialized and sent to the backend for storage. Later, it can be fetched and deserialized to recreate the diagram programmatically by re-instantiating the nodes and edges.

This enables full persistence of workflows to facilitate saving progress and resuming from previous sessions. The useVueFlow hook provides convenient utility methods to capture and restore the diagram state.

Additional Beneficial Capabilities

Copying, deleting, and otherwise modifying nodes through handy utility functions.

VueFlow furnishes abundant helper methods to effortlessly copy, remove, or otherwise alter nodes within the workflow diagram. This greatly simplifies tasks like duplicating portions of the workflow.

Supplementary plugins for expanded functionality.

A range of optional VueFlow plugins exist that introduce additional capabilities including minimaps, grid backgrounds, node resizer, and more. These afford further ways to customize the environment to suit specific needs.

In summary, VueFlow comes well-equipped with built-in utilities and an ecosystem of plugins to enable advanced workflows and streamlined customization beyond core dragging and connecting of nodes.

🏁 Conclusion

At its core, constructing a web-based flowchart entails thoughtfully organizing components into a cohesive application. The crux lies with the components themselves, irrespective of the framework such as React or Vue. The process simply involves adhering to documentation, logically structuring components, and conveniently adding/removing them as needed. I hope these insights offer useful pointers on building flowchart tools.

Through creating this demo, I've gained significant clarity around implementing web apps centered on flowcharts. The heart of such applications remains the components - whether using React, Vue, or any other JavaScript framework. It's a matter of fitting components into the framework's architecture. This principle persists unchanged; the steps are to comprehend documentation, keep the framework tidy, and seamlessly inject or remove components. I hope this article📚 provides helpful tips on flowchart apps. Thank you for reading - have an excellent day!😃

🚀 Live Demo: https://chat-bot-workflow.vercel.app/
📚 Original Article: https://www.monsterpi13.dev/writing/vue-flow-quickstart-and-best-practices
📂 GitHub Repo: https://github.com/MonsterPi13/chatBot-workflow

Building My Developer Blog Site🎉✨🍾

MonsterPi13 — Thu, 25 Jan 2024 13:00:55 +0000

Preface

As I reflect on my front-end development career so far, I feel frustrated that I have no major accomplishments to showcase. Front-end technology evolves so rapidly. Whenever a new framework emerges, I eagerly examine and study it, yet I fail to translate this learning into tangible progress.

Therefore, I decided to create a personal blog site to chronicle my professional journey. This blog will empower me to grow by chronicling the process of putting my skills into practice through real projects. Potentially publishing on developer platforms can garner feedback and give me a sense of achievement.

I came across an inspiring blog site called onur.dev which exemplified the kind of site I wanted to build for myself. The clean design and features were just what I had envisioned. I resolved to model my own site after this one.

This is where i found this project:
// Detect dark theme var iframe = document.getElementById('tweet-1747389288772464926-323'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1747389288772464926&theme=dark" }

Key Technologies Used

Key Learning

1.Buying a Domain Name

Previously, I never had my own domain. For this project, purchasing a domain was the first step. I felt this would motivate me to finish building the site - if I owned the domain, I'd be less likely to abandon the project.

After researching domain providers, I chose GoDaddy because it supports Alipay(It's one of the most popular payment in china). The process of connecting the domain to my Vercel site was smooth. This small win spurred me on.

2.Mastering Next.js Concepts

Although I'd used Next.js before, this project consolidated my knowledge.

For example, I implemented Next's generateMetadata API to optimize SEO, pulling content from Contentful. This SEO optimization was very new to me, and helped improve SEO a lot.

I also got familiar with generateStaticParams which builds dynamic routes into static pages at build time for better performance.

In addition, I enabled Draft Mode which allowed me to preview unpublished Contentful posts. This avoids having to rebuild static pages each time I update a draft.

The Link component was another revelation - I didn't know it preloads associated JS/CSS files by default for faster page transitions. However, this caused an issue with incorrectly counting page views which I send PR to origin project .

Finally, I utilized revalidatePath to refresh cached content based on the triggering of Contentful webhooks. This smart revalidation approach was very useful.

3.Headless CMS

This was my first time using a headless CMS in a real project. Contentful's GraphQL API made it simple and flexible to retrieve content as needed.

However, debugging queries was challenging at times as error messages aren't always clear. The JS library also made it hard to take advantage of TypeScript features.

A few UX issues in the Contentful UI itself also proved frustrating:

The template selector often errored out when trying to use a template.
The documentation was not easy to navigate - for example, finding how to pass dynamic params to webhooks involved a lot of trial and error.

But overall, Contentful hugely simplified my content workflow. I can focus on developing, not worrying about the backend. The convenience of managing content separately outweighed the debugging difficulties.

4.supabase

Implementing Supabase's RPC functionality was eye-opening. It encapsulates data logic on the server, while the client just calls remote procedures. This is excellent for security and maintainability.

export async function POST(request: NextRequest) {
  const searchParams = request.nextUrl.searchParams
  const slug = searchParams.get('slug')
  if (!slug) return NextResponse.json({ error: 'Missing slug parameter' }, { status: 400 })

  const res = await getPost(slug)

  try {
    await supabase.rpc('increment_view_count', { page_slug: slug, id: res.sys.id })
    return NextResponse.json({ messsage: `View count incremented successfully for slug: ${slug}` }, { status: 200 })
  } catch (error: any) {
    console.error('Error incrementing view count:', error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

Supabase's realtime sync also impressed me. Subscribing to database changes from the client is powerful yet simple to set up.For example, I implemented a viewer count for blog posts that updates in realtime as people read the post. This feature would have been much more complex without Supabase's streamlined syncing.

  useEffect(() => {
    function handleRealtimeChange(payload: any) {
      if (payload?.new?.slug) {
        setViewData((prev) => {
          if (!prev) return null
          const index = prev.findIndex((item) => item.slug === payload.new.slug)
          index !== -1 ? (prev[index] = payload.new) : prev.push(payload.new)
          return [...prev]
        })
      }
    }

    const channel = supabase
      .channel('supabase_realtime')
      .on(
        'postgres_changes',
        {
          event: 'UPDATE',
          schema: 'public',
          table: SUPABASE_TABLE_NAME,
          ...(slug && { filter: `slug=eq.${slug}` })
        },
        handleRealtimeChange
      )
      .subscribe()

    return () => {
      supabase.removeChannel(channel)
    }

Other Learnings

Here are some other useful libraries and techniques I learned on this project:

Using prettier-plugin-tailwindcss to automatically format Tailwind classes.
frame-motion for smooth CSS animations. In this project, this library made it easy to implement the subtle yet eye-catching effect of the view count fading in .
vaulfor displaying modals in a native-app style in mobile.
react-tweet makes it easy to embed tweets.
react-wrap-balancer makes titles more readable in different viewportsizes.
react-intersection-observer to detect when elements are visible in the viewport and optimize rendering.

import { PropsWithChildren } from "react";
import { useInView } from "react-intersection-observer";

interface ShowInViewProps {
  rootMargin?: string;
  triggerOnce?: boolean;
}

export const ShowInView = ({
  children,
  rootMargin = "0px",
  triggerOnce = true,
  ...rest
}: PropsWithChildren<ShowInViewProps>) => {
  const { ref, inView } = useInView({
    rootMargin,
    triggerOnce,
  });

  return (
    <div ref={ref} data-role="intersection-observer" {...rest}>
      {inView && children}
    </div>
  );
};

My Contributions

Fixed an issue with incorrect view counts caused by Next.js preloading. Submitted a PR with the fix.
Reached out to the original repo owner to discuss Next.js revalidation strategies.
Submitted another PR to fix a small logic bug I found.
Implemented auto-deletion of old view count records using Supabase RPC. This required storing the Contentful sys ID to link entries after deletion.

import { NextRequest, NextResponse } from 'next/server'

export async function POST(request: NextRequest) {
  const requestHeaders = new Headers(request.headers)
  const secret = requestHeaders.get('x-vercel-reval-key')

  if (secret !== process.env.CONTENTFUL_REVALIDATE_SECRET) {
    return NextResponse.json({ message: 'Invalid secret' }, { status: 401 })
  }

  const data = await request.json()
  const { id } = data
  if (!id) return NextResponse.json({ error: 'Missing id parameter' }, { status: 400 })

  try {
    const res = await supabase.rpc('delete_view_count', { entry_id: id })
    return NextResponse.json({ messsage: `View count Deleted successfully for id: ${id}` }, { status: 200 })
  } catch (error: any) {
    console.error('Error incrementing view count:', error)
    return NextResponse.json({ error: error.message }, { status: 500 })
  }
}

Conclusion

This project gave me a polished blog to share my journey. More importantly, it leveled up my React skills. I'm excited to apply these learnings to future ambitious projects.

If you find this article useful, I invite you to check out the👏✨🌹 original project that inspired me as well as my own implementation. I also welcome you to visit my blog and share any feedback🙇🙇‍♀️🫡!