173 | 
174 |
175 | `
176 | let divFrame = id2el("div-frame")
177 | divFrame.style.width = withpx(width)
178 | divFrame.style.height = withpx(height)
179 |
180 | setLinkViewPatelState(true)
181 | removeAndAddClass(targetParent, "display-load-effect")
182 | }
183 |
184 | // Open panel for viewing the target url.
185 | // If we open the same link again, reuse the iframe.
186 | function openNodeLink(evt, url, aux) {
187 | evt.preventDefault()
188 |
189 | // In case of middle-click or ctrl-click, open link in a new tab
190 | if (aux || (evt.ctrlKey == true)) {
191 | window.open(url, "newTab")
192 | return
193 | }
194 |
195 | if (url == currentLinkViewUrl) {
196 | setLinkViewPatelState(true)
197 | return
198 | }
199 |
200 | // clear contents of the link-view-inner
201 | let inner = id2el("link-view-inner")
202 | inner.textContent = ""
203 |
204 | let baseUrl = getBaseUrl(url)
205 | if (isImageFile(baseUrl)) {
206 | // Images are open witout an iframe, with a simple div
207 | openInDiv(url, inner)
208 | } else {
209 | // Everything else opened with an iframe
210 | openInIframe(url, inner)
211 | }
212 | currentLinkViewUrl = url
213 | }
214 |
215 | function closeLinkViewPanel() {
216 | setLinkViewPatelState(false)
217 | }
218 |
219 |
220 | function zoomFrameImg(key) {
221 | let minWidth = 100
222 | let maxWidth = 4000
223 | let elem = id2el("frame-img")
224 | if (elem == null) {
225 | return
226 | }
227 | let width = elem.width
228 | if ((key === "[") && (width > minWidth)) {
229 | imgWidth = width * 0.9
230 | elem.width = imgWidth
231 | }
232 | if ((key === "]") && (width < maxWidth)) {
233 | imgWidth = width * 1 / 0.9
234 | elem.width = imgWidth
235 | }
236 | }
237 |
238 |
239 | // Handle escape keypress.
240 | // Close the link view panel when pressing escape.
241 | document.onkeydown = function(evt) {
242 | if(evt.key === "Escape") {
243 | closeLinkViewPanel()
244 | }
245 |
246 | if((evt.key === "[") || (evt.key === "]")) {
247 | zoomFrameImg(evt.key)
248 | }
249 | }
250 |
--------------------------------------------------------------------------------
/src/gdf_loading.go:
--------------------------------------------------------------------------------
1 | // This file handles the loading of Graph Definition File (GDF)
2 | // Contains loading of data to struct, checking input values, and filling optional fields.
3 | // Some of the checks may be redundant as similar checks may be present in modules that actually
4 | // use the data.
5 | package main
6 |
7 | import (
8 | "fmt"
9 | "io"
10 | "os"
11 | "regexp"
12 | "strings"
13 |
14 | "golang.org/x/text/cases"
15 | "golang.org/x/text/language"
16 | "gopkg.in/yaml.v2"
17 | )
18 |
19 | var name_pattern = regexp.MustCompile(`^[a-zA-Z0-9_]+$`)
20 | var importance_pattern = regexp.MustCompile(`^(lowest|lower|low|normal|high|higher|highest)$`)
21 |
22 | // Used in the of the final HTML
23 | type HeadConfigFields struct {
24 | Title string
25 | Description string
26 | Author string
27 | }
28 |
29 | // Configuration related to positioning
30 | type DisplayConfigFields struct {
31 | // Size of horizontal grid step
32 | HorizontalStepPx int `yaml:"horizontal-step-px,omitempty"`
33 | // Size of vertical grid step
34 | VerticalStepPx int `yaml:"vertical-step-px,omitempty"`
35 | // Width of the node box
36 | NodeBoxWidthPx int `yaml:"node-box-width-px,omitempty"`
37 | }
38 |
39 | type LinkToFields struct {
40 | // Resource name to be linked to
41 | ResourceName string `yaml:"resource"`
42 | // A target for the final resource (page/section/div-id) etc.
43 | Target string `yaml:"target"`
44 | }
45 |
46 | type ResourceConfigMap map[string]string
47 |
48 | // Defines the node definition by the user in the
49 | type NodeInputFields struct {
50 | // A unique name for the node (no spaces, all small letters)
51 | Name string
52 | // Title of the node (shown in big font)
53 | Title string
54 | // Subtitle (shown in smaller font or sometimes omitted)
55 | Subtitle string `yaml:"subtitle,omitempty"`
56 | // Importance to be assigned to this node. It is a 7 point scale:
57 | // lowest, lower, low, normal, high, higher, highest
58 | Importance string `yaml:"importance,omitempty"`
59 | // List of node names (current node depends on these nodes)
60 | DependsOn []string `yaml:"depends-on,omitempty"`
61 | // Link to the resource
62 | LinkTo LinkToFields `yaml:"linkto,omitempty"`
63 | }
64 |
65 | type AlgoConfigFields struct {
66 | LevelStrategy string `yaml:"level-strategy,omitempty"`
67 | ArrowDirection string `yaml:"arrow-direction,omitempty"`
68 | NodeSorting string `yaml:"node-sorting,omitempty"`
69 | }
70 |
71 | type GdfDataStruct struct {
72 | Nodes []NodeInputFields `yaml:"nodes"`
73 | HeadConfig HeadConfigFields `yaml:"head-config"`
74 | DisplayConfig DisplayConfigFields `yaml:"display-config,omitempty"`
75 | ResourceConfig ResourceConfigMap `yaml:"resources"`
76 | AlgoConfig AlgoConfigFields `yaml:"algo-config,omitempty"`
77 | }
78 |
79 | func validateAndUpdateAlgoConfig(algoConfig *AlgoConfigFields) error {
80 | if len(algoConfig.LevelStrategy) == 0 {
81 | algoConfig.LevelStrategy = "bottom2top"
82 | }
83 | if algoConfig.LevelStrategy != "bottom2top" && algoConfig.LevelStrategy != "top2bottom" {
84 | return fmt.Errorf("invalid level strategy: '%v'", algoConfig.LevelStrategy)
85 | }
86 |
87 | if len(algoConfig.ArrowDirection) == 0 {
88 | algoConfig.ArrowDirection = "child2parent"
89 | }
90 | if algoConfig.ArrowDirection != "child2parent" && algoConfig.ArrowDirection != "parent2child" {
91 | return fmt.Errorf("invalid arrow direction: '%v'", algoConfig.ArrowDirection)
92 | }
93 |
94 | if len(algoConfig.NodeSorting) == 0 {
95 | algoConfig.NodeSorting = "ascend"
96 | }
97 | if algoConfig.NodeSorting != "ascend" && algoConfig.NodeSorting != "descend" {
98 | return fmt.Errorf("invalid growth strategy: '%v'", algoConfig.NodeSorting)
99 | }
100 | return nil
101 | }
102 |
103 | func validateAndUpdateDisplayConfig(displayConfig *DisplayConfigFields) error {
104 | if displayConfig.HorizontalStepPx == 0 {
105 | displayConfig.HorizontalStepPx = 400
106 | }
107 | if displayConfig.VerticalStepPx == 0 {
108 | displayConfig.VerticalStepPx = 300
109 | }
110 | if displayConfig.NodeBoxWidthPx == 0 {
111 | displayConfig.NodeBoxWidthPx = 300
112 | }
113 | return nil
114 | }
115 |
116 | // Replace underscores with spaces and capitalize first letter of every word.
117 | func convertNameToTitle(name string) string {
118 | spacedStr := strings.ReplaceAll(name, "_", " ")
119 | // We have to do some extra-steps to do since strings.Title is deprecated. :eyeroll:
120 | caser := cases.Title(language.English)
121 | result := caser.String(spacedStr)
122 | return result
123 | }
124 |
125 | // Validate data related to nodes in GDF
126 | // This function changes blank ("") value for node.Importance to "normal".
127 | func validateAndUpdateNodes(nodes []NodeInputFields) error {
128 | // Number of nodes without any dependencies (level 0 nodes)
129 | numLevel0Nodes := 0
130 | // Unique nodes (names)
131 | uniqueNames := map[string]bool{}
132 | for idx := range nodes {
133 | node := &nodes[idx]
134 |
135 | // CHECK: node name must be [a-zA-Z0-9_]
136 | if !name_pattern.MatchString(node.Name) {
137 | return fmt.Errorf("invalid node name (only letters, numbers, _) '%v'", node.Name)
138 | }
139 |
140 | // CHECK: node name must be unique
141 | if _, ok := uniqueNames[node.Name]; ok {
142 | return fmt.Errorf("node name repeated '%v'", node.Name)
143 | }
144 | uniqueNames[node.Name] = true
145 |
146 | if node.Importance == "" {
147 | node.Importance = "normal"
148 | }
149 | // CHECK: importance must be one of the 7 options
150 | if !importance_pattern.MatchString(node.Importance) {
151 | return fmt.Errorf("unknown importance pattern for node '%v': '%v'",
152 | node.Name, node.Importance)
153 | }
154 |
155 | if len(node.DependsOn) == 0 {
156 | // These nodes do not depend on any nodes
157 | numLevel0Nodes += 1
158 | }
159 |
160 | // If the title is not given, fill it using the name.
161 | if len(node.Title) == 0 {
162 | node.Title = convertNameToTitle(node.Name)
163 | }
164 | }
165 |
166 | if numLevel0Nodes == 0 {
167 | return fmt.Errorf("there must be atleast 1 node without any dependency")
168 | }
169 |
170 | for _, node := range nodes {
171 | for _, dep := range node.DependsOn {
172 | // CHECK: dependency must be one of the node names
173 | if _, ok := uniqueNames[dep]; !ok {
174 | return fmt.Errorf("unknown dependency for node '%v': '%v'", node.Name, dep)
175 | }
176 | }
177 | }
178 |
179 | return nil
180 | }
181 |
182 | // Goes over each source in resources and makes sure the input is proper.
183 | // Also iterates over the nodes and makes sure all the resources are available.
184 | // TODO: check if the specified resource file actually exists!
185 | func validateAndUpdateResources(resources ResourceConfigMap, nodes []NodeInputFields) error {
186 | // Check all nodes are using resources actually present in the GDF
187 | for idx := range nodes {
188 | node := &nodes[idx]
189 | if len(node.LinkTo.ResourceName) == 0 {
190 | continue
191 | }
192 | _, ok := resources[node.LinkTo.ResourceName]
193 | if !ok {
194 | return fmt.Errorf("error in node %s: linkto resource %s not found",
195 | node.Name, node.LinkTo.ResourceName)
196 | }
197 | }
198 |
199 | return nil
200 | }
201 |
202 | // Validate graph data loaded from YAML
203 | // Input must not be nil.
204 | func validateAndUpdateGraphData(data *GdfDataStruct) error {
205 | err := validateAndUpdateNodes(data.Nodes)
206 | if err != nil {
207 | return err
208 | }
209 |
210 | err = validateAndUpdateDisplayConfig(&data.DisplayConfig)
211 | if err != nil {
212 | return err
213 | }
214 |
215 | err = validateAndUpdateAlgoConfig(&data.AlgoConfig)
216 | if err != nil {
217 | return err
218 | }
219 |
220 | err = validateAndUpdateResources(data.ResourceConfig, data.Nodes)
221 | if err != nil {
222 | return err
223 | }
224 |
225 | return nil
226 | }
227 |
228 | // Load Graph Definition File
229 | //
230 | // Inputs:
231 | // filename - input filename (YAML file for GDF)
232 | //
233 | // Returns: (data, readable, error)
234 | // data - loaded data (if everything goes fine)
235 | // readable - true if file is readable
236 | // error - error if any
237 | func loadGdf(filename string) (*GdfDataStruct, bool, error) {
238 | file, err := os.Open(filename)
239 | if err != nil {
240 | return nil, false, err
241 | }
242 | defer file.Close()
243 |
244 | fileData, err := io.ReadAll(file)
245 | if err != nil {
246 | return nil, false, err
247 | }
248 |
249 | var data GdfDataStruct
250 | err = yaml.UnmarshalStrict(fileData, &data)
251 | if err != nil {
252 | return nil, true, err
253 | }
254 |
255 | err = validateAndUpdateGraphData(&data)
256 | if err != nil {
257 | return nil, true, err
258 | }
259 |
260 | return &data, true, nil
261 | }
262 |
--------------------------------------------------------------------------------
/src/main.go:
--------------------------------------------------------------------------------
1 | // This file handles the conversion of Graph in YAML format to HTML
2 |
3 | // Important uncommon shortforms used:
4 | // GDF - Graph Definition File (usually in YAML)
5 |
6 | // TODO: Add an output directory option for this tool. As of now, input directory is the target
7 | // directory where we will keep all the files. When used in serve mode, we serve files from the
8 | // input directory.
9 |
10 | package main
11 |
12 | import (
13 | // "html/template"
14 | "bufio"
15 | "fmt"
16 | "log"
17 | "net/http"
18 | "os"
19 | "path/filepath"
20 | "strings"
21 | "time"
22 |
23 | argparse "github.com/alexflint/go-arg"
24 | copylib "github.com/otiai10/copy"
25 | )
26 |
27 | // Some fields (GraphFile, OutFile) are basepaths (just the filename without dir).
28 | // For these, full path is attached by the getInputsForProcessing() function.
29 | type CliArgs struct {
30 | ServerMode bool `arg:"-s,--serve" help:"run in edit-update-serve mode"`
31 | Release bool `arg:"-r,--release" help:"run in release mode"`
32 | ServerAddr string `arg:"-l,--listen" default:":8101" help:"listen address in serve mode"`
33 | InputDir string `arg:"-i,--indir,required" help:"path to the input directory"`
34 | GraphFile string `arg:"-g,--graph" default:"graph.yaml" help:"input graph base filename"`
35 | OutFile string `arg:"-o,--out" default:"index.html" help:"output html base filename"`
36 | Overwrite bool `arg:"--overwrite" help:"overwrite asset files"`
37 | }
38 |
39 | var bufferedStdin *bufio.Reader = bufio.NewReader(os.Stdin)
40 |
41 | // Return path to the assets directory inside indir
42 | func getPathToAssetDir(indir string) string {
43 | return filepath.Join(indir, "linkitall_assets")
44 | }
45 |
46 | // Similar to the above, but for vendor directory
47 | func getPathToVendorDir(indir string) string {
48 | return filepath.Join(indir, "linkitall_vendor")
49 | }
50 |
51 | // Check if the give `path` is accessible.
52 | // kind can be "file" or "dir"
53 | func isPathAccessible(path string, kind string) bool {
54 | stat, err := os.Stat(path)
55 | if err != nil {
56 | return false
57 | }
58 |
59 | result := false
60 | if kind == "dir" {
61 | result = stat.IsDir()
62 | } else if kind == "file" {
63 | file, err := os.Open(path)
64 | if err == nil {
65 | result = true
66 | file.Close()
67 | }
68 | }
69 | return result
70 | }
71 |
72 | // Check if file can be written
73 | func canFileWrite(path string) bool {
74 | file, err := os.OpenFile(path, os.O_APPEND|os.O_CREATE, 0644)
75 | if err != nil {
76 | return false
77 | }
78 | file.Close()
79 | return true
80 | }
81 |
82 | // Parse arguments and perform steps to prepare input for processing.
83 | // If --indir is specified "?", get the input path from the user via stdin.
84 | // Final InputDir path is converted to absolute path.
85 | // Check for existence of indir and graph file.
86 | func getInputsForProcessing() (CliArgs, error) {
87 | var args CliArgs
88 | if len(os.Args) == 1 {
89 | fmt.Printf("No args. Use --help\n")
90 | os.Exit(1)
91 | }
92 | argparse.MustParse(&args)
93 |
94 | if args.InputDir == "?" {
95 | fmt.Printf("Enter input directory => ")
96 | line, err := bufferedStdin.ReadString('\n')
97 | if err != nil {
98 | return args, err
99 | }
100 | line = strings.TrimSpace(line)
101 | args.InputDir = line
102 | }
103 |
104 | if !isPathAccessible(args.InputDir, "dir") {
105 | return args, fmt.Errorf("input dir not accessible: %s", args.InputDir)
106 | }
107 |
108 | absInputDir, err := filepath.Abs(args.InputDir)
109 | if err != nil {
110 | return args, err
111 | }
112 |
113 | args.InputDir = absInputDir
114 | args.GraphFile = filepath.Join(args.InputDir, args.GraphFile)
115 | if !isPathAccessible(args.GraphFile, "file") {
116 | return args, fmt.Errorf("unable to find graph file: %s", args.GraphFile)
117 | }
118 | // Fill full path to input and output
119 | args.OutFile = filepath.Join(args.InputDir, args.OutFile)
120 | if !canFileWrite(args.OutFile) {
121 | return args, fmt.Errorf("unable to open file for writing: %s", args.OutFile)
122 | }
123 |
124 | return args, nil
125 | }
126 |
127 | // Return path to the parent dir where the executable is.
128 | func getExecutableDir() (string, error) {
129 | execFile, err := os.Executable()
130 | if err != nil {
131 | return "", err
132 | }
133 |
134 | execDir := filepath.Dir(execFile)
135 | absExecDir, err := filepath.Abs(execDir)
136 | if err != nil {
137 | return "", err
138 | }
139 |
140 | return absExecDir, nil
141 | }
142 |
143 | // Copy all the assets files to the target directory where the output will be generated.
144 | // The asset files (source) are located in the same directory of the executable.
145 | func copyAssetsAndVendorFilesToDir(targetDir string, overwrite bool, release bool) error {
146 | execDir, err := getExecutableDir()
147 | if err != nil {
148 | return err
149 | }
150 |
151 | assetPath := getPathToAssetDir(execDir)
152 | targetAssetPath := getPathToAssetDir(targetDir)
153 | if !overwrite && isPathAccessible(targetAssetPath, "dir") {
154 | log.Printf("Asset dir %s already exists. Skipping copying assets\n", targetAssetPath)
155 | } else {
156 | log.Printf("Copy %s -> %s\n", assetPath, targetAssetPath)
157 | copylib.Copy(assetPath, targetAssetPath)
158 | }
159 |
160 | vendorPath := getPathToVendorDir(execDir)
161 | targetVendorPath := getPathToVendorDir(targetDir)
162 | if release {
163 | log.Printf("In release mode. Not copying vendor dir")
164 | } else if !overwrite && isPathAccessible(targetVendorPath, "dir") {
165 | log.Printf("Vendor dir %s already exists. Skipping copying vendor\n", targetVendorPath)
166 | } else {
167 | log.Printf("Copy %s -> %s\n", vendorPath, targetVendorPath)
168 | copylib.Copy(vendorPath, targetVendorPath)
169 | }
170 |
171 | return nil
172 | }
173 |
174 | // ** This is the core function which does all the processing **
175 | // Process Graph Data File (GDF) and writes the HTML output.
176 | // The `indir` is also the target dir. Output is generated at the same location.
177 | // Copy the required asset dir to the `indir` before calling this function.
178 | func processGraphWriteOutput(args *CliArgs) error {
179 | log.Printf("Reading graph: %s\n", args.GraphFile)
180 | gdfData, readable, err := loadGdf(args.GraphFile)
181 | if !readable {
182 | log.Fatalf("graph file %s not readable: %s\n", args.GraphFile, err)
183 | }
184 |
185 | if err != nil {
186 | return err
187 | }
188 |
189 | log.Printf("Preparing nodes\n")
190 | nodes, err := createComputeAndFillNodeDataList(gdfData)
191 | if err != nil {
192 | return err
193 | }
194 | log.Printf("Number of nodes: %d\n", len(nodes))
195 |
196 | log.Printf("Generating template data\n")
197 | controlConfig := ControlConfigFields{
198 | Release: args.Release,
199 | }
200 | templateData := newTemplateData(gdfData, nodes, controlConfig)
201 |
202 | targetAssetDir := getPathToAssetDir(args.InputDir)
203 | templateFile := filepath.Join(targetAssetDir, "template.html")
204 |
205 | log.Printf("Filling template and writing output\n")
206 | err = fillTemplateWriteOutput(templateFile, templateData, args.OutFile)
207 | if err != nil {
208 | return err
209 | }
210 |
211 | log.Printf("Done\n")
212 | return nil
213 | }
214 |
215 | // Process the graph file. Print error if any.
216 | func processAndLogError(args *CliArgs) {
217 | err := processGraphWriteOutput(args)
218 |
219 | if err != nil {
220 | log.Printf("Error: %s", err)
221 | }
222 | }
223 |
224 | // In server mode, we run a http server on the target directory.
225 | // We also run a read-update cycle to update the output file.
226 | func runInServerMode(args *CliArgs) {
227 | // Run processing once before starting server
228 | processAndLogError(args)
229 |
230 | // Start server on the target dir
231 | fileServer := http.FileServer(http.Dir(args.InputDir))
232 | go func() {
233 | log.Printf("Starting server for dir %s. Listening at %s\n",
234 | args.InputDir, args.ServerAddr)
235 | http.ListenAndServe(args.ServerAddr, fileServer)
236 | }()
237 |
238 | time.Sleep(time.Second)
239 |
240 | // Run read-update cycle
241 | for {
242 | fmt.Printf("\nq: quit, enter: update output => ")
243 | line, err := bufferedStdin.ReadString('\n')
244 | if err != nil {
245 | log.Fatalf("unable to read from stdin. %s", err)
246 | }
247 |
248 | line = strings.TrimSpace(line)
249 | if line == "q" {
250 | break
251 | } else if len(line) > 0 {
252 | log.Printf("Warning: Ignoring input: '%s'", line)
253 | continue
254 | }
255 | processAndLogError(args)
256 | }
257 | }
258 |
259 | func main() {
260 | args, err := getInputsForProcessing()
261 | if err != nil {
262 | log.Fatalf("unable to read args. %s", err)
263 | }
264 |
265 | // Check if the graph file exists. It is the input file. User only specifies the dir.
266 |
267 | // It doesn't matter whether we are running in server mode or not. We always copy the asset
268 | // files to the target dir (input dir in this case).
269 | err = copyAssetsAndVendorFilesToDir(args.InputDir, args.Overwrite, args.Release)
270 | if err != nil {
271 | log.Fatalf("unable to copy asset files to %s", args.InputDir)
272 | }
273 |
274 | if args.ServerMode {
275 | runInServerMode(&args)
276 | } else {
277 | err = processGraphWriteOutput(&args)
278 | }
279 |
280 | if err != nil {
281 | log.Fatalf("error while processing %s", err)
282 | }
283 | }
284 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Introduction
2 |
3 | Linkitall lets you create a clear, visual map showing how different ideas are related. This map, structured as a dependency graph, shows the hierarchy and connections between concepts. To use it, you simply create a YAML file describing the graph structure, and Linkitall then generates an HTML file with clickable nodes and links. It's especially useful for making educational or reference content, offering a graphical view of topics.
4 |
5 | Linkitall also helps deepen understanding by exploring dependencies. As we ask "why" or "how," we follow these links, uncovering complex relationships that build our knowledge. This process improves both understanding and critical thinking.
6 |
7 | An example: [Trigonometric Relations](https://charstorm.github.io/class-11-12-india/class11/maths/trigonometry/relations/)
8 |
9 | ## Usage
10 |
11 | Download the latest release zipfile and follow the instructions in the README.md inside.
12 |
13 | If the release files fail due to some reason, please build the tool from the source as explained below.
14 |
15 | ## Build
16 |
17 | The steps for building the tool from the source are given here.
18 |
19 | Clone the source files locally:
20 |
21 | ```bash
22 | git clone https://github.com/charstorm/linkitall.git
23 | ```
24 |
25 | The source files are located in `linkitall/src` directory. The project is written in Golang and is tested on version `go1.20.7`.
26 |
27 | CD to the `src` directory, build the tool, and check the result:
28 |
29 | ```bash
30 | cd linkitall/src
31 | go build
32 | ./linkitall --help
33 | ```
34 |
35 | To make the tool available globally, it is required to add the directory path to the PATH environment variable.
36 |
37 | ```bash
38 | export PATH="$PATH:/path/to/linkitall/src/"
39 | ```
40 |
41 | ## Graph Generation
42 |
43 | The tool takes the path to a directory containing the graph file `graph.yaml` and its dependent resources as the input. See `examples/simple` for a quick reference.
44 | More details about the graph file are explained in the section "Graph File",
45 |
46 | To run the graph generation, execute the following command (assuming `targetdir` is the directory of graph file and its resources):
47 |
48 | ```bash
49 | linkitall -i targetdir
50 | ```
51 |
52 | If executed successfully, it will generate an `index.html` file at `targetdir`. Additionally, asset files (CSS, JS, etc) required for the generated HTML will be copied to the `targetdir` with name `linkitall_assets`. These are initially located in the same directory of the `linkitall` tool. However, it is a one-time action. Subsequent invocation of the tool will skip this copy-assets step. Same is true for the vendor files (3rd party libraries) used by the project. They are stored in `linkitall_vendor` directory.
53 |
54 | One can open the generated HTML file in a browser and see the result.
55 |
56 | ### CLI
57 |
58 | ```
59 | Usage: linkitall [--serve] [--release] [--listen LISTEN] --indir INDIR [--graph GRAPH] [--out OUT] [--overwrite]
60 |
61 | Options:
62 | --serve, -s run in edit-update-serve mode
63 | --release, -r run in release mode
64 | --listen LISTEN, -l LISTEN
65 | listen address in serve mode [default: :8101]
66 | --indir INDIR, -i INDIR
67 | path to the input directory
68 | --graph GRAPH, -g GRAPH
69 | input graph base filename [default: graph.yaml]
70 | --out OUT, -o OUT output html base filename [default: index.html]
71 | --overwrite overwrite asset files
72 | --help, -h display this help and exit
73 | ```
74 |
75 | 1. `serve` - to run in server mode. See below.
76 | 2. `release` - run in release mode. This includes:
77 | - use CDN for links, instead of local vendor files.
78 | 3. `listen` - the address to listen to (eg: ":8101") in the server mode.
79 | 4. `indir` - input (or target) directory containing the graph file.
80 | 5. `graph` - base-name of the graph file (eg: "main.yaml") inside `indir`.
81 | 6. `out` - base-name of the output file to be created inside `indir`.
82 |
83 |
84 | ### Server Mode
85 |
86 | The default behavior of the tool is to run the generation process only once. This is not ideal for development. For that, we have added a server mode, which can be enabled by the -s flag.
87 |
88 | ```bash
89 | linkitall -s -i targetdir
90 | ```
91 |
92 | This will start an HTTP development server at default port 8101. One can see the results by visiting http://127.0.0.1:8101 .
93 |
94 | The tool will wait for user input to update the generated graph. Enter will trigger a graph generation, q will quit the tool.
95 |
96 | With this development process for the graph will be as follows:
97 |
98 | 1. Make changes to the graph file
99 |
100 | 2. Press Enter to trigger a graph generation
101 |
102 | 1. If there are errors, fix them and continue
103 |
104 | 3. Refresh the webpage to see the updated graph
105 |
106 | ## Graph File
107 |
108 | The Graph Definition File (GDF) is a YAML file with different sections.
109 | The default filename expected for the file is `graph.yaml`.
110 | Different sections of the graph file are explained below.
111 |
112 | ### head-config
113 | These fields will be forwarded to the `head` section of the output html file.
114 | Example:
115 | ```yaml
116 | head-config:
117 | title: Awesome Graph
118 | description: A long description
119 | author: Someone
120 | ```
121 |
122 | ### display-config
123 | These fields control the size and spacing of nodes in the graph.
124 | Example:
125 | ```yaml
126 | display-config:
127 | # Horizontal spacing
128 | horizontal-step-px: 400
129 | # Vertical spacing
130 | vertical-step-px: 300
131 | # Width of each node
132 | node-box-width-px: 300
133 | # There is no configuration for the node height from the graph file.
134 | ```
135 | The numerical values shown in the configuration above are the default values.
136 |
137 | ### resources
138 | These are the resources used in the graph.
139 | Resources can be images, pdf-files, html pages, etc.
140 | When clicked on that node, the corresponding link will be opened.
141 | Each node can "linkto" a resource.
142 | Multiple nodes can share the same resource.
143 | Example:
144 | ```yaml
145 | # The keys will be used in the "linkto" field of each node
146 | resources:
147 | # An internal link
148 | main: resources/main.html
149 | # An external link
150 | disinfectants_wiki: https://en.wikipedia.org/wiki/Disinfectant
151 | # Local or web images work too
152 | algae_image: resources/pexels-daria-klet-8479585.jpg
153 | # Local or web pdf references also work.
154 | # (Note: #view=fit is not part of the filename. It is added to resize the pdf view)
155 | microorganisms_pdf: resources/microorganisms.pdf#view=fit
156 | ```
157 | An explanation of using these references will be provided below.
158 |
159 | ### nodes
160 | This is a list of data dictionaries for each node in the graph.
161 | Example:
162 | ```yaml
163 | nodes:
164 | # Expects lowercase, without space, must be unique
165 | - name: tap_water
166 | # This the the text that will be shown on the node
167 | title: Tap Water
168 | # Text that will be shown below title
169 | subtitle: Node about tap water
170 | # Resource information for this node
171 | linkto:
172 | # Resource defined in section resources
173 | resource: main
174 | # The id of the target section in the resource page (optional)
175 | target: tap-water
176 | depends-on:
177 | # List of dependencies (their name, not title)
178 | - pure_water
179 | - impurities
180 |
181 | - name: pure_water
182 | # If title is not provided, it will be guessed based on name
183 | linkto:
184 | resource: main
185 | target: pure-water
186 | ```
187 |
188 | ### algo-config
189 | These fields control the node placement, direction, etc of the graph generation
190 | algorithm. Example:
191 | ```yaml
192 | algo-config:
193 | # Supported: bottom2top (default), top2bottom
194 | level-strategy: top2bottom
195 | # Supported: child2parent (default), parent2child
196 | arrow-direction: child2parent
197 | # Supported: ascend (default), descend
198 | node-sorting: ascend
199 | ```
200 |
201 | [More details on algo-config](docs/algo-config/README.md)
202 |
203 | ## User Interface
204 |
205 | The graph generated is a basic HTML web-page. But we have added a few features to make it
206 | easy to use.
207 |
208 | 1. A resource connected to a node (if available) can be accessed by left-clicking the
209 | node's title. Middle-click or Ctrl-click will open the same resource in a new tab.
210 | 2. Clicking on the connection box (those small circles with a +) will move the view to
211 | the target node. The target node will be highlighted in this case.
212 | 3. When an image resource is viewed in the same page of the graph, keys "[" and "]"
213 | can be used to control the size/zoom of the image.
214 |
215 | ## External Examples
216 |
217 | We are currently building graphs for topics covered in class 11 and 12 (plus-one and plus-two).
218 | You will find the example graphs in this repository:
219 | [class-11-12-india](https://github.com/charstorm/class-11-12-india) (See readme.md).
220 |
221 | ## Status
222 |
223 | ❗The project is still in beta phase.
224 |
225 | ## License
226 |
227 | All files in this repo (except those in `src/linkitall_vendor/`) follow the MIT License.
228 | See LICENSE for details. The files in the vendor directory have their own licenses.
229 |
--------------------------------------------------------------------------------
/examples/simple/resources/main.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Tap Water
37 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
38 |Pure Water
39 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
40 |Impurities
41 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
42 |Dissolved gases
43 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
44 |Disinfectants
45 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
46 |Microorganisms
47 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
48 |Chemicals
49 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
50 |Natural Minerals
51 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
52 |Agricultural runoff
53 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
54 |Pharmaceuticals
55 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
56 |Other impurities
57 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
58 |Organic Compounds
59 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
60 |Sediments
61 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
62 |Chlorine
63 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
64 |Methane
65 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
66 |Carbon Dioxide
67 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
68 |Hydrogen Sulfide
69 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
70 |Bacteria
71 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
72 |Protozoa
73 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
74 |Viruses
75 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
76 |Fungi
77 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
78 |Algae
79 |Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
80 | 81 | 82 | -------------------------------------------------------------------------------- /src/node_computation.go: -------------------------------------------------------------------------------- 1 | // This file handles the computation of various fields related to nodes. 2 | // There are some more computations required for the final HTML generation. Those will be handled 3 | // by html_generation.go. 4 | package main 5 | 6 | import ( 7 | "fmt" 8 | "math" 9 | "sort" 10 | "strings" 11 | ) 12 | 13 | const defaultCapacity = 5 14 | const defaultInvalidLevel = -1 15 | 16 | // All the fields related to defining IDs for node and connections 17 | type NodeIntIdFields struct { 18 | // Assign unique integer ID to every node. This is just the index 19 | Uid int 20 | // UIDs of all dependencies that this node depends on 21 | DependsOnIds []int 22 | // UIDs of all nodes that depend on this node 23 | UsedByIds []int 24 | } 25 | 26 | // Fields related to position (level, shift) 27 | type NodePositionFields struct { 28 | // Level is for the vertical position. Level 0 is at the bottom (for axioms and such) 29 | Level int 30 | // Shift is for the horizontal position 31 | Shift int 32 | } 33 | 34 | // In the generated HTML file, every node has a set of connection dots. 35 | // Each connection dot (a div in html) has an element ID of its own. 36 | // Also we should keep track of the ID of the other node which is connected to this node. 37 | type DotElemFields struct { 38 | // HTML ID of the Dot element 39 | DotElemId string 40 | // HTML ID of the partner node (not the node holding the dot) 41 | PartnerNodeId string 42 | // only used for sorting 43 | LinkAngle float64 44 | } 45 | 46 | // Used to allow sorting of DotElemFields using to untangle links. 47 | // Len, Swap, and Less are defined below with the type. 48 | type LinkDots []DotElemFields 49 | 50 | func (x LinkDots) Len() int { 51 | return len(x) 52 | } 53 | 54 | func (x LinkDots) Swap(i int, j int) { 55 | x[i], x[j] = x[j], x[i] 56 | } 57 | 58 | func (x LinkDots) Less(i int, j int) bool { 59 | return x[i].LinkAngle < x[j].LinkAngle 60 | } 61 | 62 | // For every node, we keep track of all the HTML data required. 63 | // IDs in this struct are strings which will be mapped to HTML element IDs. 64 | type NodeElemFields struct { 65 | // Element ID of the node 66 | NodeElemId string 67 | // Dots used for "depends-on" connections. 68 | // By default, these appear at the bottom of every node as a node depends on other nodes that 69 | // are of lower level (more fundamental). 70 | DependsOnDots []DotElemFields 71 | // Dots for "used-by" connections. 72 | // By default, these appear at the top of every node. 73 | UsedByDots []DotElemFields 74 | // Classes used by the node (HTML). This will be used to handle parameters like Importance. 75 | Classes string 76 | // Left edge position (px) 77 | LeftPx int 78 | // Top edge position (px) 79 | TopPx int 80 | // Link to the associated resource 81 | Link string 82 | } 83 | 84 | // All the data corresponding to a node 85 | type NodeData struct { 86 | // Fields coming from input 87 | InputFields NodeInputFields 88 | // Unique number based IDs (computed) 89 | IntIdFields NodeIntIdFields 90 | // Position related fields (computed). Does not handle HTML related positions. 91 | Position NodePositionFields 92 | // HTML related fields (computed). Also handles positions on the HTML page. 93 | ElemFields NodeElemFields 94 | } 95 | 96 | // Create a list of NodeData based on GDF data 97 | // Not handling the error. 98 | func createNodeDataList(gdfData *GdfDataStruct) []NodeData { 99 | // This will contain the final result 100 | nodeDataSeq := make([]NodeData, 0, len(gdfData.Nodes)) 101 | for _, node := range gdfData.Nodes { 102 | var nodeData NodeData 103 | nodeData.InputFields = node 104 | pushBack(&nodeDataSeq, nodeData) 105 | } 106 | return nodeDataSeq 107 | } 108 | 109 | // Fill all the fields related to integer IDs. 110 | func fillIntIdFields(nodeDataSeq []NodeData) error { 111 | // A mapping of name -> integer unique ID 112 | nodeName2Id := map[string]int{} 113 | 114 | // Fill Uid. Also report if node names are repeated. This may not be really required 115 | // since there is already some error checking when reading the input data. 116 | for idx := range nodeDataSeq { 117 | node := &nodeDataSeq[idx] 118 | if _, found := nodeName2Id[node.InputFields.Name]; found { 119 | return fmt.Errorf("node name repeated '%v'", node.InputFields.Name) 120 | } 121 | nodeName2Id[node.InputFields.Name] = idx 122 | node.IntIdFields.Uid = idx 123 | // Initialize the arrays inside the struct 124 | node.IntIdFields.DependsOnIds = make([]int, 0, defaultCapacity) 125 | node.IntIdFields.UsedByIds = make([]int, 0, defaultCapacity) 126 | } 127 | 128 | // Fill DependsOnIds and UsedByIds using nodeName2Id 129 | for idx := range nodeDataSeq { 130 | node := &nodeDataSeq[idx] 131 | for _, depNodeName := range node.InputFields.DependsOn { 132 | depNodeId, ok := nodeName2Id[depNodeName] 133 | if !ok { 134 | return fmt.Errorf("dependency not found '%v'", depNodeName) 135 | } 136 | pushBack(&node.IntIdFields.DependsOnIds, depNodeId) 137 | depNode := &nodeDataSeq[depNodeId] 138 | pushBack(&depNode.IntIdFields.UsedByIds, idx) 139 | } 140 | } 141 | 142 | return nil 143 | } 144 | 145 | // Initialization step of computeLevels algorithm. 146 | // Assign level 0 to all nodes without the specified linked nodes. 147 | // Everyone else gets an invalid level. 148 | // Finally, keep the level 0 nodes in nextLevelNodeIds. 149 | // What linked nodes are considered depends on the strategy. 150 | // 151 | // For bottom2top -> DependsOnIds 152 | // For top2bottom -> UsedByIds 153 | func initializeForComputeLevels(strategy string, nodes []NodeData, level0NodeIds *[]int) { 154 | for idx := range nodes { 155 | node := &nodes[idx] 156 | // We set an invalid value here. This will be useful when checking if all nodes received 157 | // a valid value. 158 | node.Position.Level = defaultInvalidLevel 159 | // count to be used to decide level 0 nodes 160 | level0DecisionCount := defaultInvalidLevel 161 | switch strategy { 162 | case "bottom2top": 163 | level0DecisionCount = len(node.IntIdFields.DependsOnIds) 164 | case "top2bottom": 165 | level0DecisionCount = len(node.IntIdFields.UsedByIds) 166 | default: 167 | panic("unknown strategy for level initialization") 168 | } 169 | if level0DecisionCount == 0 { 170 | // No dependencies -> level 0 (absolute bottom) 171 | node.Position.Level = 0 172 | pushBack(level0NodeIds, idx) 173 | } 174 | } 175 | } 176 | 177 | // Process a single node in the computeLevels function. 178 | func processNodeComputeLevels(strategy string, node *NodeData, nodes []NodeData, 179 | nextLevelNodeIds *[]int) { 180 | nextLevel := node.Position.Level + 1 181 | 182 | var linkedNodeIds []int 183 | switch strategy { 184 | case "bottom2top": 185 | linkedNodeIds = node.IntIdFields.UsedByIds 186 | case "top2bottom": 187 | linkedNodeIds = node.IntIdFields.DependsOnIds 188 | default: 189 | panic("unknown strategy for level initialization") 190 | } 191 | 192 | for _, linkedNodeId := range linkedNodeIds { 193 | linkedNode := &nodes[linkedNodeId] 194 | linkedNode.Position.Level = nextLevel 195 | pushBack(nextLevelNodeIds, linkedNodeId) 196 | } 197 | } 198 | 199 | // Go over all the current nodes and process them 200 | func processCurrentNodesComputeLevels(strategy string, nodes []NodeData, currentLevelNodeIds []int, 201 | nextLevelNodeIds *[]int) { 202 | for _, nodeId := range currentLevelNodeIds { 203 | processNodeComputeLevels(strategy, &nodes[nodeId], nodes, nextLevelNodeIds) 204 | } 205 | } 206 | 207 | // Validate the result of computeLevels 208 | func validateComputeLevels(strategy string, nodes []NodeData) error { 209 | // Compute max-level 210 | maxLevel := 0 211 | for _, node := range nodes { 212 | if node.Position.Level > maxLevel { 213 | maxLevel = node.Position.Level 214 | } 215 | } 216 | 217 | for _, node := range nodes { 218 | // Every node must have a valid level 219 | if node.Position.Level == defaultInvalidLevel { 220 | return fmt.Errorf("unreachable node '%v'", node.InputFields.Name) 221 | } 222 | 223 | // Every child must be at least 1 level above the current node 224 | expectedMinLevelForChildren := node.Position.Level + 1 225 | for _, childNodeId := range node.IntIdFields.UsedByIds { 226 | childNode := &nodes[childNodeId] 227 | if childNode.Position.Level < expectedMinLevelForChildren { 228 | // Shows a bug in the code 229 | panic(fmt.Sprintf("Child node level %v < expected level %v (child %v, parent %v)", 230 | childNode.Position.Level, expectedMinLevelForChildren, 231 | childNode.InputFields.Name, node.InputFields.Name)) 232 | } 233 | } 234 | 235 | // Every parent should be at least 1 level below the current node 236 | expectedMaxLevelForParent := node.Position.Level - 1 237 | for _, parentNodeId := range node.IntIdFields.DependsOnIds { 238 | parentNode := &nodes[parentNodeId] 239 | if parentNode.Position.Level > expectedMaxLevelForParent { 240 | // Shows a bug in the code 241 | panic(fmt.Sprintf("Parent node level %v > expected level %v (child %v, parent %v)", 242 | parentNode.Position.Level, expectedMaxLevelForParent, 243 | node.InputFields.Name, parentNode.InputFields.Name)) 244 | } 245 | } 246 | 247 | if strategy == "bottom2top" { 248 | // A nodes level = max(level of all parents) + 1 249 | maxParentLevel := -1 250 | for _, parentNodeId := range node.IntIdFields.DependsOnIds { 251 | parentNode := &nodes[parentNodeId] 252 | if parentNode.Position.Level > maxParentLevel { 253 | maxParentLevel = parentNode.Position.Level 254 | } 255 | } 256 | if node.Position.Level != maxParentLevel+1 { 257 | // Shows a bug in the code 258 | panic(fmt.Sprintf("For node %v, mismatch in level. Got %v, expected %v", 259 | node.InputFields.Name, node.Position.Level, maxParentLevel+1)) 260 | } 261 | } else if strategy == "top2bottom" { 262 | // A nodes level = min(level of all children) - 1 263 | minChildLevel := maxLevel + 1 264 | for _, childNodeId := range node.IntIdFields.UsedByIds { 265 | childNode := &nodes[childNodeId] 266 | if childNode.Position.Level < minChildLevel { 267 | minChildLevel = childNode.Position.Level 268 | } 269 | } 270 | if node.Position.Level != minChildLevel-1 { 271 | // Shows a bug in the code 272 | panic(fmt.Sprintf("For node %v, mismatch in level. Got %v, expected %v", 273 | node.InputFields.Name, node.Position.Level, minChildLevel-1)) 274 | } 275 | } 276 | } 277 | 278 | return nil 279 | } 280 | 281 | // Reverse node levels. Needed when using top2bottom strategy since the algorithm assigns 282 | // level 0 to the top most nodes. 283 | func reverseNodeLevels(nodes []NodeData) { 284 | maxNodeLevel := 0 285 | // get highest level 286 | for idx := range nodes { 287 | node := &nodes[idx] 288 | if node.Position.Level > maxNodeLevel { 289 | maxNodeLevel = node.Position.Level 290 | } 291 | } 292 | 293 | // reduce node level from highest level to reverse levels 294 | for idx := range nodes { 295 | node := &nodes[idx] 296 | node.Position.Level = maxNodeLevel - node.Position.Level 297 | } 298 | } 299 | 300 | // Compute level for all the nodes. 301 | // This is a tricky algorithm. Basic idea is as follows: 302 | // Find all nodes that do not have any dependencies and assign level 0 303 | // Now, iteratively run for level = 0, 1, ... so on: 304 | // 305 | // for all nodes in current level, 306 | // find nodes that use them 307 | // assign them current level + 1 308 | // keep a list of these and use as the starting point of next iteration 309 | // 310 | // Maximum number of iterations = number of nodes. 311 | // At the end, perform sanity checks on the code (and coder) 312 | func computeLevels(algoConfig *AlgoConfigFields, nodes []NodeData) error { 313 | strategy := algoConfig.LevelStrategy 314 | var currentLevelNodeIds []int 315 | nextLevelNodeIds := make([]int, 0, defaultCapacity) 316 | 317 | initializeForComputeLevels(strategy, nodes, &nextLevelNodeIds) 318 | if len(nextLevelNodeIds) == 0 { 319 | return fmt.Errorf("found no level 0 nodes") 320 | } 321 | 322 | // In the worse case, every node get a unique level. 323 | // We already assigned 0 for the initialization for at least 1 node. 324 | maxIterationCount := len(nodes) - 1 325 | // Heart of the algorithm 326 | for step := 0; step < maxIterationCount; step++ { 327 | // Check if there is any node to process 328 | if len(nextLevelNodeIds) == 0 { 329 | break 330 | } 331 | currentLevelNodeIds = nextLevelNodeIds 332 | nextLevelNodeIds = make([]int, 0, defaultCapacity) 333 | 334 | processCurrentNodesComputeLevels(strategy, nodes, currentLevelNodeIds, &nextLevelNodeIds) 335 | nextLevelNodeIds = getUnique(nextLevelNodeIds) 336 | } 337 | 338 | if strategy == "top2bottom" { 339 | // In this strategy, we get the node levels reversed. We have to reverse the levels. 340 | reverseNodeLevels(nodes) 341 | } 342 | 343 | err := validateComputeLevels(strategy, nodes) 344 | if err != nil { 345 | return err 346 | } 347 | 348 | if algoConfig.NodeSorting == "descend" { 349 | reverseNodeLevels(nodes) 350 | } 351 | 352 | return nil 353 | } 354 | 355 | // Compute shifts - This is straightforward. For every level, we go from left to right. 356 | // We can also compute levelMap with this function. 357 | func computeShiftsAndGetLevelMap(nodes []NodeData) [][]int { 358 | levelMap := make([][]int, 0) 359 | if len(nodes) == 0 { 360 | return levelMap 361 | } 362 | 363 | // find maxLevel 364 | maxLevel := -1 365 | for _, node := range nodes { 366 | if node.Position.Level > maxLevel { 367 | maxLevel = node.Position.Level 368 | } 369 | } 370 | 371 | if maxLevel < 0 { 372 | // shows a bug in code 373 | panic("Unable to find maxLevel") 374 | } 375 | 376 | // Initialize levelMap for each level 377 | levelMap = make([][]int, maxLevel+1) 378 | for level := 0; level <= maxLevel; level++ { 379 | levelMap[level] = make([]int, 0) 380 | } 381 | 382 | // Fill levelMap and shift based on each node level 383 | for idx := range nodes { 384 | node := &nodes[idx] 385 | level := node.Position.Level 386 | node.Position.Shift = len(levelMap[level]) 387 | levelMap[level] = append(levelMap[level], idx) 388 | } 389 | 390 | // Sanity check: 391 | for level := 0; level <= maxLevel; level++ { 392 | if len(levelMap[level]) == 0 { 393 | panic(fmt.Sprintf("Level %v has 0 nodes", level)) 394 | } 395 | } 396 | 397 | return levelMap 398 | } 399 | 400 | // Used to convert numeric IDs to string IDs used by HTML elements 401 | func formatIntId(id int) string { 402 | // TODO: do we need this many digits?! 403 | return fmt.Sprintf("%05d", id) 404 | } 405 | 406 | // Build HTML field IDs used by the connection dots 407 | // D connections: D_OWNER_PARTNER 408 | // U connections: U_PARTNER_OWNER 409 | func buildDotElemFields(prefix string, ownerId int, partnerId int) DotElemFields { 410 | ownerIdStr := formatIntId(ownerId) 411 | partnerIdStr := formatIntId(partnerId) 412 | first := ownerIdStr 413 | second := partnerIdStr 414 | if prefix == "U" { 415 | first = partnerIdStr 416 | second = ownerIdStr 417 | } 418 | dotElemId := fmt.Sprintf("%s_%s_%s", prefix, first, second) 419 | return DotElemFields{dotElemId, partnerIdStr, 0} 420 | } 421 | 422 | // Fill HTML element IDs in string form 423 | // The ids are formatted as follows (examples): 424 | // Node => N00001 (N prefix) 425 | // DependsOn Connection Dot: D_N00008_N00005 (dot is carried by the first node N00008. 426 | // It depends on the second node N00005) 427 | // UsedBy Connection Dot: U_N00003_N00002 (dot is carried by the first node N00002. 428 | // It is used by the second node N00003). Note that the order of nodes is reversed for 429 | // the UsedBy connection dot. This makes it easy to map one dot to another when making 430 | // connections. It is always the node on the top that comes first. 431 | func fillElemIds(node *NodeData) { 432 | nodeElemId := formatIntId(node.IntIdFields.Uid) 433 | node.ElemFields.NodeElemId = nodeElemId 434 | 435 | node.ElemFields.DependsOnDots = make([]DotElemFields, 0) 436 | for _, dependsOnId := range node.IntIdFields.DependsOnIds { 437 | dotElemFields := buildDotElemFields("D", node.IntIdFields.Uid, dependsOnId) 438 | pushBack(&node.ElemFields.DependsOnDots, dotElemFields) 439 | } 440 | 441 | node.ElemFields.UsedByDots = make([]DotElemFields, 0) 442 | for _, usedById := range node.IntIdFields.UsedByIds { 443 | dotElemFields := buildDotElemFields("U", node.IntIdFields.Uid, usedById) 444 | pushBack(&node.ElemFields.UsedByDots, dotElemFields) 445 | } 446 | } 447 | 448 | // Fill HTML element IDs for all the nodes 449 | func fillElemIdsForAllNodes(nodes []NodeData) { 450 | for idx := range nodes { 451 | fillElemIds(&nodes[idx]) 452 | } 453 | } 454 | 455 | // Each node gets a position, which will be set based on inline CSS. 456 | // It is a bit tricky since we want to center the alignment. 457 | func computeNodePositionsAndUpdate(displayConfig *DisplayConfigFields, 458 | levelMap [][]int, nodes []NodeData) { 459 | 460 | // To be used to calculate max shift and center aligning 461 | maxNodesPerLevel := 0 462 | for _, nodeIdsForLevel := range levelMap { 463 | if len(nodeIdsForLevel) > maxNodesPerLevel { 464 | maxNodesPerLevel = len(nodeIdsForLevel) 465 | } 466 | } 467 | 468 | if maxNodesPerLevel == 0 { 469 | return 470 | } 471 | 472 | maxLevel := len(levelMap) - 1 473 | horScale := displayConfig.HorizontalStepPx 474 | levelHorScale := horScale 475 | centering := 0 476 | // We can use levelMap to initialize the positions of nodes 477 | for level, nodeIdsForLevel := range levelMap { 478 | if len(nodeIdsForLevel) == maxNodesPerLevel { 479 | levelHorScale = horScale 480 | centering = 0 481 | } else { 482 | ratio := float64(maxNodesPerLevel-1) / float64(len(nodeIdsForLevel)) 483 | levelHorScaleF64 := ratio * float64(horScale) 484 | levelHorScale = int(levelHorScaleF64) 485 | centering = int(levelHorScaleF64 / 2) 486 | } 487 | for shift, nodeId := range nodeIdsForLevel { 488 | node := &nodes[nodeId] 489 | // Horizontal centering shift 490 | node.ElemFields.LeftPx = shift*levelHorScale + centering 491 | node.ElemFields.TopPx = (maxLevel - level) * displayConfig.VerticalStepPx 492 | } 493 | } 494 | } 495 | 496 | // Compute angle of the link given two nodes 497 | func computeLinkAngle(node1 *NodeData, node2 *NodeData) float64 { 498 | hdiff := node2.ElemFields.LeftPx - node1.ElemFields.LeftPx 499 | vdiff := node2.ElemFields.TopPx - node1.ElemFields.TopPx 500 | angle := math.Atan2(float64(vdiff), float64(hdiff)) 501 | return angle 502 | } 503 | 504 | // We want to adjust the order of connection dots to minimize the amount of link crossings. 505 | // We do this by sorting them according to their angle one way or another. 506 | // Only to be called after computing the position! 507 | func sortDotsToUntangleLinks(nodes []NodeData) { 508 | // Fill the LinkAngle for all nodes (dependson and usedby) 509 | for idx := range nodes { 510 | node1 := &nodes[idx] 511 | 512 | for ii, id2 := range node1.IntIdFields.DependsOnIds { 513 | node2 := &nodes[id2] 514 | node1.ElemFields.DependsOnDots[ii].LinkAngle = -computeLinkAngle(node1, node2) 515 | } 516 | sort.Sort(LinkDots(node1.ElemFields.DependsOnDots)) 517 | 518 | for ii, id2 := range node1.IntIdFields.UsedByIds { 519 | node2 := &nodes[id2] 520 | node1.ElemFields.UsedByDots[ii].LinkAngle = computeLinkAngle(node1, node2) 521 | } 522 | sort.Sort(LinkDots(node1.ElemFields.UsedByDots)) 523 | } 524 | } 525 | 526 | // Fill the fields related to link to resource. 527 | // The gdf nodes initially only contain reference to the resource name. 528 | // We have to map them to real reference files/links. 529 | func computeResourceLinkFields(gdfData *GdfDataStruct, nodes []NodeData) error { 530 | resourceConfig := gdfData.ResourceConfig 531 | for idx := range nodes { 532 | node := &nodes[idx] 533 | if len(node.InputFields.LinkTo.ResourceName) == 0 { 534 | continue 535 | } 536 | link, ok := resourceConfig[node.InputFields.LinkTo.ResourceName] 537 | if !ok { 538 | return fmt.Errorf("error in node %s: linkto resource %s not found", 539 | node.InputFields.Name, node.InputFields.LinkTo.ResourceName) 540 | } 541 | updatedLink := link 542 | if len(node.InputFields.LinkTo.Target) > 0 { 543 | updatedLink = fmt.Sprintf("%s#%s", link, node.InputFields.LinkTo.Target) 544 | // HACK! for pdf document, we allow the link to have additional fields 545 | // For example: ..some_doc.pdf#view=fit 546 | // In this case, we have to add target as &target at the end. 547 | if strings.Contains(link, ".pdf#") { 548 | updatedLink = fmt.Sprintf("%s&%s", link, node.InputFields.LinkTo.Target) 549 | } 550 | } 551 | node.ElemFields.Link = updatedLink 552 | } 553 | 554 | return nil 555 | } 556 | 557 | // In case of NodeSorting == descend, we have to switch the positions of depends-on dots 558 | // and used-by dots. 559 | func handleNodeSorting(algoConfig *AlgoConfigFields, nodes []NodeData) { 560 | if algoConfig.NodeSorting == "ascend" { 561 | // default behavior - nothing to do 562 | return 563 | } 564 | for idx := range nodes { 565 | node := &nodes[idx] 566 | 567 | // we also have to flip the IntIdFields 568 | tempIds := node.IntIdFields.UsedByIds 569 | node.IntIdFields.UsedByIds = node.IntIdFields.DependsOnIds 570 | node.IntIdFields.DependsOnIds = tempIds 571 | } 572 | } 573 | 574 | // Do all the steps related to creating list of NodeData and filling all the fields. 575 | // This is the top level function which handles everything. 576 | func createComputeAndFillNodeDataList(gdfData *GdfDataStruct) ([]NodeData, error) { 577 | nodeDataSeq := createNodeDataList(gdfData) 578 | 579 | err := fillIntIdFields(nodeDataSeq) 580 | if err != nil { 581 | return nodeDataSeq, err 582 | } 583 | 584 | err = computeLevels(&gdfData.AlgoConfig, nodeDataSeq) 585 | if err != nil { 586 | return nodeDataSeq, err 587 | } 588 | 589 | levelMap := computeShiftsAndGetLevelMap(nodeDataSeq) 590 | handleNodeSorting(&gdfData.AlgoConfig, nodeDataSeq) 591 | fillElemIdsForAllNodes(nodeDataSeq) 592 | computeNodePositionsAndUpdate(&gdfData.DisplayConfig, levelMap, nodeDataSeq) 593 | sortDotsToUntangleLinks(nodeDataSeq) 594 | 595 | err = computeResourceLinkFields(gdfData, nodeDataSeq) 596 | if err != nil { 597 | return nodeDataSeq, err 598 | } 599 | 600 | return nodeDataSeq, nil 601 | } 602 | -------------------------------------------------------------------------------- /src/linkitall_vendor/leader-line/leader-line-v1.1.5.min.js: -------------------------------------------------------------------------------- 1 | /*! LeaderLine v1.1.5 (c) anseki https://anseki.github.io/leader-line/ */ 2 | var LeaderLine=function(){"use strict";var te,M,I,C,L,o,t,h,f,p,n,a,e,x,b,l,r,i,k,w,s,u,c,A="leader-line",V=1,P=2,N=3,T=4,W={top:V,right:P,bottom:N,left:T},B=1,R=2,F=3,G=4,D=5,z={straight:B,arc:R,fluid:F,magnet:G,grid:D},ne="behind",d=A+"-defs",y='',ae={disc:{elmId:"leader-line-disc",noRotate:!0,bBox:{left:-5,top:-5,width:10,height:10,right:5,bottom:5},widthR:2.5,heightR:2.5,bCircle:5,sideLen:5,backLen:5,overhead:0,outlineBase:1,outlineMax:4},square:{elmId:"leader-line-square",noRotate:!0,bBox:{left:-5,top:-5,width:10,height:10,right:5,bottom:5},widthR:2.5,heightR:2.5,bCircle:5,sideLen:5,backLen:5,overhead:0,outlineBase:1,outlineMax:4},arrow1:{elmId:"leader-line-arrow1",bBox:{left:-8,top:-8,width:16,height:16,right:8,bottom:8},widthR:4,heightR:4,bCircle:8,sideLen:8,backLen:8,overhead:8,outlineBase:2,outlineMax:1.5},arrow2:{elmId:"leader-line-arrow2",bBox:{left:-7,top:-8,width:11,height:16,right:4,bottom:8},widthR:2.75,heightR:4,bCircle:8,sideLen:8,backLen:7,overhead:4,outlineBase:1,outlineMax:1.75},arrow3:{elmId:"leader-line-arrow3",bBox:{left:-4,top:-5,width:12,height:10,right:8,bottom:5},widthR:3,heightR:2.5,bCircle:8,sideLen:5,backLen:4,overhead:8,outlineBase:1,outlineMax:2.5},hand:{elmId:"leader-line-hand",bBox:{left:-3,top:-12,width:40,height:24,right:37,bottom:12},widthR:10,heightR:6,bCircle:37,sideLen:12,backLen:3,overhead:37},crosshair:{elmId:"leader-line-crosshair",noRotate:!0,bBox:{left:-96,top:-96,width:192,height:192,right:96,bottom:96},widthR:48,heightR:48,bCircle:96,sideLen:96,backLen:96,overhead:0}},j={behind:ne,disc:"disc",square:"square",arrow1:"arrow1",arrow2:"arrow2",arrow3:"arrow3",hand:"hand",crosshair:"crosshair"},ie={disc:"disc",square:"square",arrow1:"arrow1",arrow2:"arrow2",arrow3:"arrow3",hand:"hand",crosshair:"crosshair"},H=[V,P,N,T],U="auto",oe={x:"left",y:"top",width:"width",height:"height"},Z=80,Y=4,X=5,q=120,Q=8,K=3.75,J=10,$=30,ee=.5522847,le=.25*Math.PI,m=/^\s*(\-?[\d\.]+)\s*(\%)?\s*$/,re="http://www.w3.org/2000/svg",S="-ms-scroll-limit"in document.documentElement.style&&"-ms-ime-align"in document.documentElement.style&&!window.navigator.msPointerEnabled,se=!S&&!!document.uniqueID,ue="MozAppearance"in document.documentElement.style,he=!(S||ue||!window.chrome||!window.CSS),pe=!S&&!se&&!ue&&!he&&!window.chrome&&"WebkitAppearance"in document.documentElement.style,ce=se||S?.2:.1,de={path:F,lineColor:"coral",lineSize:4,plugSE:[ne,"arrow1"],plugSizeSE:[1,1],lineOutlineEnabled:!1,lineOutlineColor:"indianred",lineOutlineSize:.25,plugOutlineEnabledSE:[!1,!1],plugOutlineSizeSE:[1,1]},fe=(s={}.toString,u={}.hasOwnProperty.toString,c=u.call(Object),function(e){var t,n;return e&&"[object Object]"===s.call(e)&&(!(t=Object.getPrototypeOf(e))||(n=t.hasOwnProperty("constructor")&&t.constructor)&&"function"==typeof n&&u.call(n)===c)}),ye=Number.isFinite||function(e){return"number"==typeof e&&window.isFinite(e)},g=(x={ease:[.25,.1,.25,1],linear:[0,0,1,1],"ease-in":[.42,0,1,1],"ease-out":[0,0,.58,1],"ease-in-out":[.42,0,.58,1]},b=1e3/60/2,l=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(e){setTimeout(e,b)},r=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.msCancelAnimationFrame||function(e){clearTimeout(e)},i=Number.isFinite||function(e){return"number"==typeof e&&window.isFinite(e)},k=[],w=0,{add:function(n,e,t,a,i,o,l){var r,s,u,h,p,c,d,f,y,m,S,g,_,v=++w;function E(e,t){return{value:n(t),timeRatio:e,outputRatio:t}}if("string"==typeof i&&(i=x[i]),n=n||function(){},t