📔 Table of Contents

• 1. About the porject
  • 1.1. Build with
    • 1.1.1. Tech Stack
    • 1.1.2. Features
      • 1.1.2.1. CRUD on items
      • 1.1.2.2. Interactions
• 2. Getting Started
  • 2.1. Prerequisites
  • 2.2. Installation
• 3. Usage
• 4. Roadmap
• 5. Acknowledgments
  • 5.1. About DAG
  • 5.2. About this project
    • 5.2.1. Dev Logs
    • 5.2.2. Directory Structure

1. About the porject

Give item's tag name and it's incomming/outgoing items' name, to get a graph (DAG, or Directed Acyclic Graph) that shows the visualized dependencies graph among these items.

1.1. Build with

1.1.1. Tech Stack

1.1.2. Features

1.1.2.1. CRUD on items

• Create items by Tags and their edges (arrows / dependencies)
• Update item's title by double click
• Delete item and its edges (arrows)
  • delete all
  • delete by Tag

1.1.2.2. Interactions

• Drag and drop support
• Select arrows style
• Dark/Light mode
• Local storage to keep items datas between sessions

(back to top)

2. Getting Started

2.1. Prerequisites

Node version v14.17.0

2.2. Installation

1. Clone the repo

   git clone https://github.com/benson00077/dag_graph-ts.git

2. Install NPM packages

   npm install

(back to top)

3. Usage

• Basic CRUD on items
• Drag and drop support
• Select arrows style
• Dark/Light mode
• Local storage to keep items datas between sessions

(back to top)

4. Roadmap

• useDrawConnectorDynamic 利用閉包來做 Memoizer
• update vertex name (double click)
  • 利用 vertex name / value 資料結構 - 僅顯示端顯示沒問題
  • 處理 click / double click 兩者，利用可取消的 Promise
• delete vertex (maybe hover over trash can icon) -- instance of class 造成 uncontorlled component
  • 封裝在 dagContext 內，並新增 update state 通知 React dag 內部已經修改
• bar select different arrows style

(back to top)

5. Acknowledgments

5.1. About DAG

Directedd Acyclic Graph

• 舉例，按照以下順序創建 vertex ，箭頭 → 表示彼此流向關係:

  Incomming	→ Vertex →	Outgoing
  	Benson	Alice
  	Alice	Catherine
  Ben	Benson	Catherine
  Eva	Benson	David
  [ Ben, Flora ]	Catherine	[ David, George ]

• V.1 See example below

• graph.vertices Object by console.table() :

┌───────────┬─────────────┬───────────────────────────────────────────┬────────────────────────────────┬─────────────┬───────┐
│  (index)  │    name     │                 incoming                  │         incomingNames          │ hasOutgoing │ value │
├───────────┼─────────────┼───────────────────────────────────────────┼────────────────────────────────┼─────────────┼───────┤
│  Benson   │  'Benson'   │     { Ben: [Object], Eva: [Object] }      │        [ 'Ben', 'Eva' ]        │    true     │ null  │
│   Alice   │   'Alice'   │           { Benson: [Object] }            │          [ 'Benson' ]          │    true     │ null  │
│ Catherine │ 'Catherine' │                 [Object]                  │ [ 'Alice', 'Benson', 'Flora' ] │    true     │ null  │
│    Ben    │    'Ben'    │                    {}                     │               []               │    true     │ null  │
│   David   │   'David'   │ { Benson: [Object], Catherine: [Object] } │   [ 'Benson', 'Catherine' ]    │    false    │ null  │
│    Eva    │    'Eva'    │                    {}                     │               []               │    true     │ null  │
│  George   │  'George'   │          { Catherine: [Object] }          │        [ 'Catherine' ]         │    false    │ null  │
│   Flora   │   'Flora'   │                    {}                     │               []               │    true     │ null  │
└───────────┴─────────────┴───────────────────────────────────────────┴────────────────────────────────┴─────────────┴───────┘

• graph.rank Object by console.table() :

┌───────────┬────────┐
│  (index)  │ Values │
├───────────┼────────┤
│  George   │   0    │
│   David   │   0    │
│ Catherine │   1    │
│   Flora   │   2    │
│   Alice   │   2    │
│  Benson   │   3    │
│    Eva    │   4    │
│    Ben    │   4    │
└───────────┴────────┘

5.2. About this project

5.2.1. Dev Logs

• My prototype project
• Personal Notes

5.2.2. Directory Structure

🌲 Directory Structure

./src/components/
├── Arrow
│   └── Arrow.tsx
├── ArrowRenderer.tsx
├── DeleteVertex # 🔺 Controller on DAG
│   ├── DeleteVertex.tsx
│   └── style.ts
├── Draggble
│   ├── Draggable.tsx
│   ├── DraggableCore.tsx
│   ├── domFns.ts
│   ├── draggable.test.tsx
│   ├── log.ts
│   ├── positionFns.ts
│   └── types.ts
├── DrawGraph.tsx # 🔺 View on DAG
├── GraphMiddleWare.tsx # 🔺
├── InputForm # 🔺 Controller on DAG
│   ├── VertexInput.tsx
│   └── styles.ts
├── ResetDag # 🔺 Controller on DAG
│   ├── ResetDag.tsx
│   └── style.ts
├── SelectArrowStyle
│   ├── SelectArrowStyle.tsx
│   └── style.ts
├── TogglerButton
│   ├── ToggleButton.tsx
│   └── styles.ts
├── Vertex
│   ├── Rename.tsx
│   ├── Vertex.tsx
│   └── styles.ts
├── VertexRenderer.tsx
├── contexts
│   ├── DagContext.tsx
│   ├── PositionContext.tsx
│   ├── ThemeContext.tsx
│   └── types.ts
├── hooks
│   ├── useCancellablePromises.ts
│   ├── useDagStorage.ts
│   ├── useDrawSVGConnector.ts
│   └── useThemeMode.ts
├── styles
│   ├── global.ts
│   └── themes.ts
└── utils
    ├── arrowsInfoGetter.ts
    ├── cancellablePromise.ts
    ├── inputParser.ts
    ├── svgPathHandler.ts
    └── uitls.test.ts