DEV Community: yusuf

Can WebAssembly make your web apps faster?

yusuf — Sun, 16 Apr 2023 17:29:10 +0000

What is WebAssembly?

Assembly?

As we all know, machines read binary codes (strings of zeros and ones) because it is very convenient for them but not for humans. So engineers basically created a mapping from binary code and called the mapped version 'Assembly'.

WebAssembly?

WebAssembly is an 'Assembly'-like language. It's nickname is wasm. Basically WebAssembly is the Assembly language for modern browsers.

People usually don't write Assembly code directly because it can be tedious. That's why there are many Assembly compilers that simply create Assembly code from C/C++, C#, Rust, Java ... So basically you can run an existing C/C++ or Rust application inside a browser.

WebAssembly code can be directly injected into Javascript or Node.js environment. This can be very useful because you can combine WebAssembly with Javascript.

WebAssembly provides near native performance. Javascript is just-in-time (JIT) compiled. But WebAssembly is pre-compiled. So that's why wasm can be executed faster than Javascript code.

Get your hands dirty

Firstly, all the source codes used in this post available in GitHub. The ultimate question in my mind is "Can we sort an array of integers faster with WebAssembly?". Since we want to execute faster, I think I should use the holy programming language C.
To compile WebAssembly, I used emscripten I wrote C code and compiled C code into WebAssembly using emscripten. I simply followed instructions at MDN and emscripten

Hello World!

After you download and install emscripten by following their documentation, you should have a emsdk folder. Go into that folder and run source ./emsdk_env.sh. Now you can compile your C codes into WebAssembly. To compile a hello world WebAssembly code, I used command emcc -o hello3.html hello3.c --shell-file html_template/shell_minimal2.html -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']". Here emcc is the emscripten compiler. -o hello3.html hello3.c means compile 'hello3.c' and output HTML file 'hello3.html'. My 'hello3.c' is like below

#include <stdio.h>
#include <emscripten/emscripten.h>

int main() {
    printf("Hello World\n");
    return 0;
}

#ifdef __cplusplus
#define EXTERN extern "C"
#else
#define EXTERN
#endif

EXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {
    printf("MyFunction Called\n");
}

It simply prints 'Hello World' to the developer console when the web page is loaded. And also prints 'MyFunction Called' when the C function is called.

--shell-file html_template/shell_minimal2.html of the script basically uses a template html file to generate the output 'hello3.html' file. My 'shell_minimal2.html' is like below.

<html>
  <body>
    <button id="mybutton">Call the C function</button>
  </body>
</html>
{{{ SCRIPT }}}
<script>
  document.getElementById("mybutton").addEventListener("click", () => {
    alert("check console");
    const result = Module.ccall(
      "myFunction", // name of C function
      null, // return type
      null, // argument types
      null // arguments
    );
  });
</script>

The rest of the command is necessary to call the function using some special method called ccal. If you execute the command, it will generate 'hello3.html', 'hello3.js', and 'hello3.wasm' files. If you look at 'hello3.html' you will see

<html>
  <body>
    <button id="mybutton">Call the C function</button>
  </body>
</html>
<script async type="text/javascript" src="hello3.js"></script>
<script>
  document.getElementById("mybutton").addEventListener("click", () => {
    alert("check console");
    const result = Module.ccall(
      "myFunction", // name of C function
      null, // return type
      null, // argument types
      null // arguments
    );
  });
</script>

The only difference between the template file 'shell_minimal2.html' and 'hello3.html' is the {{{ SCRIPT }}} section. Inside the 'hello3.html', this part is replaced with <script async type="text/javascript" src="hello3.js"> 'hello3.js' is a Javascript file that provides a global variable named Module and also imports hello3.wasm. hello3.wasm is a binary file. You cannot read it with naked eye easily. Start an HTTP server and open 'hello3.html' in a modern browser. I'm using VSCode for code editing and it has a nice extension for simple HTTP server. Then you can actually see that wasm file is converted to WebAssembly Text (.wat) format in your browser.

In developer console, you can see printf statements of C codes are actually printed. This is hello world for WebAssembly! Also if you click to the button, you will see it calls a C function! That's amazing! From JavaScript we can call a C function!

Fibonacci

Now let's see if a C code can execute faster than plain Javascript code. To make a comparison I implemented fibonacci algorithm in a very inefficient way in both C and Javascript and executed side-by-side.

I executed command just like hello world example emcc -o hello4.html fib.c --shell-file html_template/simple_compare.html -sEXPORTED_FUNCTIONS=_fib -sEXPORTED_RUNTIME_METHODS=cwrap. Here to call a C function, we use someother special method cwrap.
Below is my C code file 'fib.c'

int fib(int n)
{
    if (n < 2)
        return n;
    return fib(n - 1) + fib(n - 2);
}

Here is my 'simple_compare.html' file

{{{ SCRIPT }}}
<input type="number" id="fibNum" value="35" />
<button id="mybutton">Compare JS vs C on Fibonacci</button>
<script>
  document.getElementById("mybutton").addEventListener("click", () => {
    const fibIndex = Number(document.getElementById("fibNum").value);
    const t1 = executeFibonacciOnC(fibIndex);
    const t2 = executeFibonacciOnJS(fibIndex);
    console.log("C time:", t1, "JS time:", t2);
  });

  // finds the 'n'th fibonacci number in C using the worst implementation and returns the execution time
  function executeFibonacciOnC(n) {
    fibC = Module.cwrap("fib", "number", ["number"]);
    const t1 = performance.now();
    const res = fibC(n);
    const t2 = performance.now();
    console.log("c result: ", res);
    return t2 - t1;
  }

  function executeFibonacciOnJS(n) {
    const t1 = performance.now();
    const res = fib(n);
    const t2 = performance.now();
    console.log("JS result: ", res);
    return t2 - t1;
  }

  function fib(n) {
    if (n < 2) return n;
    return fib(n - 1) + fib(n - 2);
  }
</script>

Here you can see that Javascript is a lot faster than C code. I feel like I wasted all my time and WebAssembly is just a balloon.

Then I realized there is some compiler optimization flags in emscripten. Let's use them emcc -o hello4.html fib.c --shell-file html_template/simple_compare.html -sEXPORTED_FUNCTIONS=_fib -sEXPORTED_RUNTIME_METHODS=cwrap -O2 I just added a -O2 flag to my command and do it again.

Now you can see some magic!

This time, C code executes faster! In some cases it is like even 2 times faster!

Sort numbers

Now let's try our ultimate aim. Can we sort numbers faster than Javascript? Let's try with C standard library function qsort I think it should be faster, C codes are usually fast. Similar to previous command, I executed command emcc -o qsort.html arraySorter.c --shell-file html_template/simple_compare_array.html -sEXPORTED_FUNCTIONS=_arraySorter,_malloc,_free -sEXPORTED_RUNTIME_METHODS=cwrap My 'arraySorter.c' is very simple like below. It simply calls qsort function with a comparer function.

#include <stdlib.h>

int compareFn(const void *a, const void *b)
{
    return (*(int *)a - *(int *)b);
}

void arraySorter(int *arr, int size)
{
    qsort(arr, size, sizeof(int), compareFn);
}

My template file 'simple_compare_array.html' is like below. Here passing and array as a parameter is bit hard. We need to use malloc and free functions to create and array and pass it to C.

{{{ SCRIPT }}}
<input type="number" id="arrSize" value="1000000" />
<button id="mybutton">Compare JS vs C on sorting integer array</button>
<script>
  function getArray() {
    const l = Number(document.getElementById("arrSize").value);
    return Array.from({ length: l }, () => Math.floor(Math.random() * l));
  }
  document.getElementById("mybutton").addEventListener("click", () => {
    const arr1 = getArray();
    const arr2 = Array.from(arr1);
    const t1 = arrayOperationsOnC(arr1);
    const t2 = arrayOperationsOnJS(arr2);
    console.log("C time:", t1, "JS time:", t2);
  });

  function arrayOperationsOnC(n) {
    const BYTE_SIZE_OF_INT = 4;
    const t1 = performance.now();
    const arraySize = n.length;
    const arrayPointer = Module._malloc(arraySize * BYTE_SIZE_OF_INT);
    Module.HEAP32.set(new Int32Array(n), arrayPointer / BYTE_SIZE_OF_INT);
    const cFunc = Module.cwrap("arraySorter", null, ["number", "number"]);
    cFunc(arrayPointer, arraySize);
    const resultArray = Array.from(
      Module.HEAP32.subarray(
        arrayPointer / BYTE_SIZE_OF_INT,
        arrayPointer / BYTE_SIZE_OF_INT + arraySize
      )
    );
    console.log(resultArray);
    Module._free(arrayPointer);
    const t2 = performance.now();
    return t2 - t1;
  }

  function arrayOperationsOnJS(n) {
    const t1 = performance.now();
    const res = arraySorter(n);
    console.log(res);
    const t2 = performance.now();
    return t2 - t1;
  }

  function arraySorter(arr) {
    return arr.sort((a, b) => a - b);
  }
</script>

If I execute this I see my C code is like 4 times slower!
What the heck is wrong?

OK I see I didn't use compiler optimization flags. Let's try -O2 flag and do it again. Now it is faster but still very slower than Javascript.

C time: 716.1 JS time: 269.5

Even if I use -O3 flag, I see it is still slower. There is no '-O4' this is the most optimized.

C time: 711.9 JS time: 270.6

Now we are sure that quick sort with C cannot pass plain Javascript. But we used C standard library function qsort. Can we try plain C code for quick sort? Let's try. I used command emcc -o faster_sorter.html arraySorter2.c --shell-file html_template/simple_compare_array.html -sEXPORTED_FUNCTIONS=_arraySorter,_malloc,_free -sEXPORTED_RUNTIME_METHODS=cwrap -O2 Here I used the same HTML template but this time I implemented quick sort algorithm with plain C code. Below in my arraySorter2.c file.

// Quick sort in C

// function to swap elements
void swap(int *a, int *b)
{
    int t = *a;
    *a = *b;
    *b = t;
}

// function to find the partition position
int partition(int array[], int low, int high)
{

    // select the rightmost element as pivot
    int pivot = array[high];

    // pointer for greater element
    int i = (low - 1);

    // traverse each element of the array
    // compare them with the pivot
    for (int j = low; j < high; j++)
    {
        if (array[j] <= pivot)
        {

            // if element smaller than pivot is found
            // swap it with the greater element pointed by i
            i++;

            // swap element at i with element at j
            swap(&array[i], &array[j]);
        }
    }

    // swap the pivot element with the greater element at i
    swap(&array[i + 1], &array[high]);

    // return the partition point
    return (i + 1);
}

void quickSort(int array[], int low, int high)
{
    if (low < high)
    {

        // find the pivot element such that
        // elements smaller than pivot are on left of pivot
        // elements greater than pivot are on right of pivot
        int pi = partition(array, low, high);

        // recursive call on the left of pivot
        quickSort(array, low, pi - 1);

        // recursive call on the right of pivot
        quickSort(array, pi + 1, high);
    }
}

void arraySorter(int *arr, int size)
{
    quickSort(arr, 0, size - 1);
}

Now it seems with -O2 flag we can sort integers faster than plain Javascript! Now C code is like 2 times faster. That's amazing!

C time: 156.8 JS time: 271.5

Is Wasm faster in your browser? Try and see now. All the source codes is available under MIT license.

İnternette gezerken dünyayı kurtar!

yusuf — Mon, 20 Jun 2022 13:56:26 +0000

English translation
İnternetin yaygınlaşması ile insanlar hemen hemen her gün dünyayı saran bu kablolu/kablosuz ağda gezinmeye başladı. Küçükken internetin Google olduğunu zannederdim 😁 ancak büyüyüp mühendis olunca "internet tarayıcısı" denilen programlar ve "arama motoru" denilen internet siteleri sayesinde internette gezdiğimi fark ettim.

Google Chrome, Safari, Microsoft Edge, Mozilla Firefox, Opera ... gibi programlar popüler internet tarayıcılarıdır.

Google, Bing, Baidu, Yahoo!, Yandex ... gibi internet siteleri ise yaygın arama motorlarıdır.

İnternet tarayıcılarının ve arama motorlarının çoğu (yukarıda örnek verilenlerin hepsi) ücretsiz olduğu halde reklam alarak milyar dolar mertebelerinde gelirler elde edebiliyorlar. Bunu kullancılarının yaptıkları aramaların ve kişisel bilgilerin kayıtlarını tutup çeşitli algoritmalar kullanarak başarıyorlar. Örneğin Google 2021 yılında 200 milyar dolardan fazla reklam geliri elde etmiştir.

Ecosia

Ecosia da tıpkı Google gibi bir arama motoru. Google'dan farklı olarak Ecosia elde ettiği tüm net kârını ağaç dikmek için harcadığını iddia ediyor. Bu şirketle herhangi bir alakam yok ve bir güvenilirlik garantisi de veremem. Yaklaşık 1-2 yıldır Ecosia'yı kullanıyorum ve genel olarak memnunum. Ecosia'ya güveniyorum çünkü şeffaf bir yapıları var, finansal raporları ve sosyal medya gönderileri bana ikna edici geldi.

Neden Ecosia kullanıyorum?

Kişisel veri toplamıyor. Ecosia Google gibi daha önceden yapılan aramaların kayıtlarını tutmuyor. Tamamen aradığım sözcüklere göre sonuçları getiriyor. Bu hem kişisel verilerinizi korumanızı hem de daha ilgili sonuçlar bulmanızı sağlıyor.
Çok daha az reklam gösteriyor.
Sadece girilen yazıyı baz alıp arama yaptığından daha popüler olanı değil daha alakalı olanı görüyorsunuz. Google'ın PageRank isimli meşhur algoritması zaten popüler sonuçları üste çıkarmayı hedeflemektedir.

Koskoca Google'dan daha mı iyi yani?

Son olarak Google'ın da üstün geldiği taraflar olabilir. Mesela birşey satın almak istiyorsanız Google satın almak istediğiniz ürünlere çok daha iyi ulaşım sağlıyor. Google'ın harita hizmeti de oldukça iyi. Tabi bazen Google daha alakalı sonuçlar da gösterebiliyor.

Son olarak Ecosia'nın mobil uygulaması yani mobil cihazlarda çalışan internet tarayıcısı da var. Ben biraz kullandım ama açıkçası başka tarayıcıları daha çok beğendiğimden kullanmadım.

Ayrıca Ecosia ile yaptığınız arama sayısını kayıt edebilirsiniz. Ben telefonum ile 1400'den fazla, bilgisayar ile ise 2700'den fazla arama yapmışım. Bu sayıları ne kadar doğru tutuyorlar açıkçası pek emin değilim.

OceanHero

İnternet tarayıcınızda boş bir sekme açtığınızda ne göreceğinizi özelleştirebilirsiniz. OceanHero size reklam gösterip, reklam gelirleri ile okyanuslardaki plastik atıkları temizlediğini iddia ediyor.

İşleyişin nasıl olduğunu 1 dakikalık kısa ve açıklayıcı bir video ile anlatmışlar.

Ayrıca OceanHero'da bir arama motoru hizmeti de sunuyor. Çok fazla kullanmadığım için pek yorum yapamayacağım ancak okyanus modunun ("Ocean Mode") çok hoş göründüğünü söyleyebilirim.

Brave

Bu kez ekoloji ile alakası olmayan bir araçtan bahsedeceğim. Brave bir internet tarayıcısı. Gezegenimizin fiziksel olarak yaşanılabilir olmasına direk bir katkısı olmasa da Brave mahremiyete verdiği büyük önem sayesinde dijital hayatın yaşanılabilirliğine büyük katkı sağlıyor. Son dönemde Google, Facebook, Microsoft gibi dev şirketler de mahremiyeti gündemlerine taşıyıp bu konuda daha çok efor sarf etmeye başladılar.

Neden Brave kullanıyorum?

Reklam ve izleyicileri blokluyor. Bazı siteler sizin reklam engelleyicisi kullandığınızı söyleyip size içerik göstermeyebilir. Bu durumda "kalkanlarınızı" indirerek reklam ve izleyicilere izin verebilirsiniz.

Tabletimde kullandığım Brave 1-2 yıllık süreçte 2 GB'lık veri, 1 saatlik ise zaman tasarrufu sağladığını iddia ediyor.

Telefonumda kullandığım Brave ise 3.8 GB'lık veri, 1 saatlik zaman tasarrufu sağladığını iddia ediyor.

Eğer YouTube'u kullanıyorsanız bundan çok daha fazla zaman tasarrufu yapacağınıza gayet eminim. YouTube'un resmi uygulamasını kullanmaktansa Brave ile YouTube'u kullanıyorum çünkü yıllardır YouTube'da reklam izlemiyorum. (Evet, YouTube Premium'a boşa para veriyorlar :)

Daha hızlı. Google Chrome'dan bile daha mı hızlı gerçekten? Bence evet. Çok ciddi ölçümler yapmadım ama reklam ve izleyicileri engellediğinden daha hızlı olması da gayet normal aslında. Brave kullanırken Google Chrome'dan daha hızlı olduğunu açıkça hissediyorum ancak tabiki mühendisler hisleriyle hareket etmemeliler. Brave Google Chrome'dan 3 kata kadar daha hızlı olabileceğini iddia ediyor.
Açık kaynak kodlu. Kodları okuyup tekrar yazmayacak olsanız bile bunu yapabilmeniz ya da başka geliştiricilere yaptırabilmeniz güzel bir imkan. Fazla imkan göz çıkarmaz.
"BAT" tokeni kazanabilirsiniz. İsterseniz Brave ile bazı reklamlara maruz kalıp "BAT" kripto varlığını edinebilirsiniz. Brave gösterilen reklamların mahremiyete önem verdiğini iddia ediyor. Hiç reklam görmemek bana cazip geldiğinden bundan pek yararlanmadım.

Brave hakkında son olarak ilginç bir bilgi verelim. Brave'in CEO'su Brendan Eich JavaScript dilinin yaratıcısı ve Mozilla'nın kurucularındandır.

Son olarak burada bahsettiğim şirketlerin herhangi biri tarafından finansal bir destek almadım. Herhangi biriyle çalışmıyorum. Brave, OceanHero ya da Ecosia hakkında herhangi bir garanti veremem. Bunları sadece beğeniyorum ve kullanıyorum.

Save the world while browsing the internet!

yusuf — Mon, 20 Jun 2022 13:56:07 +0000

Türkçe çevirisi
With the widespread use of the Internet, people started to browse this wired/wireless network that surrounds the world almost every day. When I was little, I thought the internet was Google 😁 but when I grew up and became an engineer, I realized that I was surfing the internet thanks to programs called "internet browser" and websites called "search engines".

Programs such as Google Chrome, Safari, Microsoft Edge, Mozilla Firefox, Opera ... are popular internet browsers.

Internet sites such as Google, Bing, Baidu, Yahoo!, Yandex ... are common search engines.

Although most internet browsers and search engines (all of the examples above) are free, they can earn billions of dollars by advertising. They achieve this by keeping records of their users' searches and personal information, using various algorithms. For example, Google generated more than $200 billion ad revenue in 2021.

Ecosia

Ecosia is a search engine just like Google. Unlike Google, Ecosia claims to spend all its net profits on planting trees. I have no affiliation with this company and I cannot give any guarantee of reliability. I have been using Ecosia for about 1-2 years and I am generally satisfied. I trust Ecosia because they have a transparent structure, financial reports and social media posts sounded convincing to me.

Why do I use Ecosia?

It does not collect personal data. Ecosia does not keep logs of previous searches like Google. It returns results exactly based on the words I'm looking for. This allows you to both protect your personal data and find more relevant results.
It shows a lot less ads.
You only see what's more relevant, not what's more popular, as you search based on the entered text. Google's famous algorithm named PageRank aims to top the already popular results.

Is it really better than all mighty GOOGLE?

Finally, there may be parties where Google excels. For example, if you want to buy something, Google provides much better access to the products you want to buy. Google's map service is pretty good too. Of course, sometimes Google can show more relevant results.

Finally, there is Ecosia's mobile application, that is, an internet browser that works on mobile devices. I used a little bit, but frankly, I didn't use it because I like other browsers more.

You can also record the number of calls you make with Ecosia. I made more than 1400 searches with my phone and more than 2700 searches with my computer. Honestly, I'm not sure how accurate these numbers are.

OceanHero

You can customize what you see when you open a blank tab in your internet browser. OceanHero claims to be showing you ads and clearing plastic waste from the oceans with ad revenue.

They explained how it works with a 1-minute short and explanatory video.

It also offers a search engine service on OceanHero. I can't comment much since I don't use it much, but I can say that the ocean mode ("Ocean Mode") looks very nice.

Brave

This time I will talk about a tool that has nothing to do with ecology. Brave is an internet browser. Although it does not directly contribute to the physical livability of our planet, Brave makes a great contribution to the livability of digital life thanks to the great importance it gives to privacy. Recently, giant companies such as Google, Facebook and Microsoft have also brought privacy to their agenda and started to make more effort in this regard.

Why am I using Brave?

Blocks advertisements and trackers. Some sites may say that you are using an ad-blocker and not show you any content. In this case, you can disable your "shields" and allow ads and trackers.

Brave, which I use on my tablet, claims to save 2 GB of data and 1 hour of time in 1-2 years.

Brave, which I use on my phone, claims to save 3.8 GB of data and 1 hour of time.

If you're using YouTube, I'm pretty sure you'll save a lot more time. Rather than using YouTube's official app, I use YouTube with Brave because I haven't watched YouTube ads for years. (Yes, they are wasting money on YouTube Premium :)

Faster. Is it really even faster than Google Chrome? I think yes. I didn't make very serious measurements, but it is quite normal that it is faster as it blocks ads and trackers. When using Brave, I clearly feel that it is faster than Google Chrome, but of course, engineers should not act based on their feelings. Brave claims it can be up to 3x faster than Google Chrome.
Open source code. Even if you're not going to read and rewrite the code, it's a nice opportunity to be able to do it or have other developers do it.
You can earn "BAT" token. If you want, you can get the "BAT" crypto-asset by being exposed to some advertisements with Brave. Brave claims that the ads shown are privacy-respecting. I didn't get much use out of it as I was tempted to not see any ads.

Finally, let's give some interesting information about Brave. Brave's CEO Brendan Eich is the creator of the JavaScript language and co-founder of Mozilla.

Finally, I have not received any financial support from any of the companies mentioned here. I am not working with anyone. I cannot make any warranties about Brave, OceanHero or Ecosia. I just like and use them.

Visualizing TigerGraph & Neo4j databases with "Davraz"

yusuf — Sun, 12 Jun 2022 11:12:51 +0000

In this post, I will introduce Davraz, a software I created. Firstly, it is deployed on https://canbax.github.io/davraz/. So you can see it in action now.

This post aims to introduce graph visualization to non-technical people.

Introduction

Davraz is a graph database visualizer. Currently it supports only TigerGraph and Neo4j.

Background

I created Davraz for TigerGraph 2020 Graphathon. (It got 1st Place Reward YAAAY!) It is a tool for visualizing your TigerGraph and Neo4j databases. TigerGraph and Neo4j are graph databases. Usually, data is stored in SQL databases. Graph databases are a fairly new way to store data.

Why Graph Database?

In SQL databases, if your data is highly connected, querying data might be time-consuming (due to join operations). In this case, using a graph database might considerably decrease execution time. This depends on how the graph database is implemented at its core. Creating index in SQL database will also help you execute faster. At its core, creating an index is actually like creating a graph data structure. So we can say SQL is also benefiting from graphs for faster execution.

Why Graph Visualization?

Visualizing data is one of the most effective ways of understanding data. Graphs are a pretty generic data structure and almost any data can be defined as a graph. So visualizing graphs can be a very generic and effective way to understand any data. Graph visualization can be used for insightful analysis and interpretation.

Set-up for TigerGraph

From https://tgcloud.io/ you can jump-start creating your own free TigerGraph database. It is very easy, you just need to click "next" etc... But you can find more guidance on the Internet. For visualization, you can also use their embedded system called "Graph Studio".

After you have a running TigerGraph instance, you can start visualizing it on Davraz. If you open https://canbax.github.io/davraz/, at first you should enter database configuration data.

You need to provide "Database URL", "Graph Name", "Database username", and "Database password" fields. After that, if you click to "Generate Token" button, you are ready to go.

You do NOT need to change "Proxy Server URL" if you don't want to use your own proxy.

If your "Database URL" is wrong or if the TigerGraph instance is not active, you might get an error like the below

You might get errors like the below if you don't provide the correct username, password, or graph name.

If there is no error, you are good to GO! Below is a video showing how it works. Also, note that certain operations might require "database secret". So you should provide or generate the secret of your TigerGraph database as well.

Also, note that the proxy server (https://tiger-api.herokuapp.com/) might be down for some reason. (It is a free instance) So just refreshing it might help in some cases.

Set-up for Neo4j

If you use Davraz from the GitHub deployment (https://canbax.github.io/davraz/), you need to serve your Neo4j API from HTTPS. This is because you cannot communicate with an HTTP server from an HTTPS server. Setting up an HTTPS server and setting up the SSL policy seems a bit tedious for me. For this reason, I will run a local version of Davraz on my own machine with HTTP. And also a local Neo4j server again from my own machine with HTTP. Inside Neo4j settings, I set dbms.security.auth_enabled=false so I can make HTTP requests and get a response without providing any username and password.

Below are my settings to connect to my local Neo4j instance. The database URL is http://localhost:7474/db/data/transaction/commit. Username and password are not necessary, they can be empty.

From below video, you can see how you can visualize Neo4j data.

Here you might see a strange view if the styles are not the default styles. See the below image for example.
To use default graph styles, you can click to "File">"Clear Graph Style".

Like TigerGraph, Neo4j also provides free cloud instances. Neo4j AuraDB looks very cool and nice as well. Up to 50k nodes and 175k edges, it is free. Also, it has a nice visualizer called "Bloom".

Features

From "File" menu, you can save a graph as JSON file, load back from the file. You can save only the selected elements. You can export graph as an image. You can load different graph styles.

From "Edit" menu, you can delete selected elements, hide selected elements, show all the previously hidden elements and observe a history of graph states.

From "Data" menu, you can clear all the data or bring a sample data.

From "Layout" menu, you can run an incremental or randomized layout. There are many different layout types but the default is fCoSE algorithm.

From "Highlight" menu, elements can be emphasized to distinguish from others.

From "Compound" menu, compound elements can be created or removed.

From "Table" menu, whole data or a part of the existing data can be shown as table(s).

From "Cluster" menu, you can run "Markov Clustering" algorithm or cluster degree-1 nodes.