1"use strict";(self.webpackChunk_sigma_website=self.webpackChunk_sigma_website||[]).push([[1216],{7540:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>d,default:()=>h,frontMatter:()=>a,metadata:()=>s,toc:()=>o});const s=JSON.parse('{"id":"advanced/lifecycle","title":"Lifecycle","description":"This page outlines the lifecycle and rendering processes of a sigma instance. It details the steps from instantiation to termination and explains the mechanics behind data visualization in sigma.js.","source":"@site/docs/advanced/lifecycle.md","sourceDirName":"advanced","slug":"/advanced/lifecycle","permalink":"/docs/advanced/lifecycle","draft":false,"unlisted":false,"editUrl":"https://github.com/jacomyal/sigma.js/tree/main/packages/website/docs/advanced/lifecycle.md","tags":[],"version":"current","sidebarPosition":0,"frontMatter":{"title":"Lifecycle","sidebar_position":0},"sidebar":"sigmaDocSidebar","previous":{"title":"Advanced topics","permalink":"/docs/category/advanced-topics"},"next":{"title":"Graph data","permalink":"/docs/advanced/data"}}');var t=i(1085),r=i(1184);const a={title:"Lifecycle",sidebar_position:0},d="Sigma.js lifecycle",c={},o=[{value:"Core lifecycle of a sigma instance",id:"core-lifecycle-of-a-sigma-instance",level:2},{value:"Instantiation",id:"instantiation",level:3},{value:"Settings management",id:"settings-management",level:3},{value:"Termination",id:"termination",level:3},{value:"Rendering in sigma",id:"rendering-in-sigma",level:2},{value:"Two-step rendering mechanism",id:"two-step-rendering-mechanism",level:3},{value:"Automatic rendering triggers",id:"automatic-rendering-triggers",level:3},{value:"Manual rendering triggers",id:"manual-rendering-triggers",level:3}];function l(e){const n={code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",ol:"ol",p:"p",strong:"strong",ul:"ul",...(0,r.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.header,{children:(0,t.jsx)(n.h1,{id:"sigmajs-lifecycle",children:"Sigma.js lifecycle"})}),"\n",(0,t.jsx)(n.p,{children:"This page outlines the lifecycle and rendering processes of a sigma instance. It details the steps from instantiation to termination and explains the mechanics behind data visualization in sigma.js."}),"\n",(0,t.jsx)(n.h2,{id:"core-lifecycle-of-a-sigma-instance",children:"Core lifecycle of a sigma instance"}),"\n",(0,t.jsx)(n.h3,{id:"instantiation",children:"Instantiation"}),"\n",(0,t.jsx)(n.p,{children:"A sigma instance is initialized with the following components:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Graphology Instance"}),": This is essential for sigma to function. It provides the graph data structure that sigma visualizes."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"DOM Element"}),": This element acts as the container for the graph visualization and remains consistent throughout the sigma instance's lifetime."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Settings (Optional)"}),": Initial settings can be provided during instantiation to configure sigma's behavior."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:["The graph provided during instantiation can be updated later using the ",(0,t.jsx)(n.code,{children:"setGraph"})," method."]}),"\n",(0,t.jsx)(n.h3,{id:"settings-management",children:"Settings management"}),"\n",(0,t.jsx)(n.p,{children:"Settings play a pivotal role in determining sigma's behavior. They can be:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Provided during instantiation"}),": Initial settings can be passed to the constructor."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Updated later"}),": The ",(0,t.jsx)(n.code,{children:"setSetting"})," and ",(0,t.jsx)(n.code,{children:"updateSetting"})," methods allow for modifications to the settings after instantiation."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"termination",children:"Termination"}),"\n",(0,t.jsxs)(n.p,{children:["To gracefully terminate a sigma instance, the ",(0,t.jsx)(n.code,{children:"kill"})," method should be invoked. This method ensures that all bindings and resources are released, allowing for efficient garbage collection and cleanup of the internal
1components."]}),"\n",(0,t.jsx)(n.h2,{id:"rendering-in-sigma",children:"Rendering in sigma"}),"\n",(0,t.jsx)(n.p,{children:"Rendering in sigma involves two primary steps: processing the data and then visualizing it."}),"\n",(0,t.jsx)(n.h3,{id:"two-step-rendering-mechanism",children:"Two-step rendering mechanism"}),"\n",(0,t.jsxs)(n.ol,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Processing"}),": Before rendering, sigma must process the data. This involves tasks like invoking the ",(0,t.jsx)(n.code,{children:"nodeReducer"})," and ",(0,t.jsx)(n.code,{children:"edgeReducer"})," settings, and indexing data for the WebGL renderers."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Rendering"}),": After processing, sigma visualizes the graph by generating each layer in the canvas element."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"automatic-rendering-triggers",children:"Automatic rendering triggers"}),"\n",(0,t.jsx)(n.p,{children:"Sigma automatically invokes the processing and rendering methods in specific scenarios:"}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Graphology Events"}),": When the Graphology instance emits events related to data updates, sigma takes care of the necessary rendering. Developers don't need to manage this."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"Settings Updates"}),": Any modification to the settings triggers a re-render."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:"User Interactions"}),": Interactions via mouse or touch devices lead to camera updates and subsequent rendering."]}),"\n"]}),"\n",(0,t.jsx)(n.h3,{id:"manual-rendering-triggers",children:"Manual rendering triggers"}),"\n",(0,t.jsxs)(n.p,{children:["In certain situations, developers might need to manually initiate the processing and rendering steps. For instance, if an external factor alters a state utilized by the ",(0,t.jsx)(n.code,{children:"nodeReducer"})," or ",(0,t.jsx)(n.code,{children:"edgeReducer"}),", both processing and rendering must be executed to achieve the correct visualization. Sigma provides three methods for this:"]}),"\n",(0,t.jsxs)(n.ul,{children:["\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.code,{children:"Sigma#refresh"})}),": This method processes the data and then renders it."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.code,{children:"Sigma#scheduleRefresh"})}),": Schedules a ",(0,t.jsx)(n.code,{children:"refresh"})," for the next frame using ",(0,t.jsx)(n.code,{children:"requestAnimationFrame"}),". If a refresh is already scheduled, it avoids redundancy by not scheduling another. This method is useful for debouncing, as ",(0,t.jsx)(n.code,{children:"refresh"})," can sometimes be resource-intensive."]}),"\n",(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.strong,{children:(0,t.jsx)(n.code,{children:"Sigma#scheduleRender"})}),": Schedules a render for the next frame, but only if neither a ",(0,t.jsx)(n.code,{children:"render"})," nor a ",(0,t.jsx)(n.code,{children:"refresh"})," is already scheduled."]}),"\n"]}),"\n",(0,t.jsxs)(n.p,{children:[(0,t.jsx)(n.strong,{children:"Note"}),": The ",(0,t.jsx)(n.code,{children:"render"})," method is private. Developers should always use ",(0,t.jsx)(n.code,{children:"scheduleRender"})," when a re-render is required."]})]})}function h(e={}){const{wrapper:n}={...(0,r.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(l,{...e})}):l(e)}},1184:(e,n,i)=>{i.d(n,{R:()=>a,x:()=>d});var s=i(4041);const t={},r=s.createContext(t);function a(e){const n=s.useContext(r);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function d(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:a(e.components),s.createElement(r.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.