نحوه طراحی نمودارها در آزمایشگاه ممگراف

Memgraph Lab گزینه های زیادی برای سفارشی کردن نمایش بصری نتایج پرس و جو ارائه می دهد. با زبان برنامه نویسی جدید، نمودارها می توانند تقریباً به هر شکلی که شما می خواهید به نظر برسند. در این پست وبلاگ مجموعه‌ای از ویژگی‌ها ارائه خواهد شد، اما برای کشف قدرت کامل زبان برنامه‌نویسی جدید، لطفاً به مستندات مراجعه کنید.

معرفی

هنگام استفاده از نمای نمودار نتایج پرس و جو در Memgraph Lab، سفارشی کردن نمایشگر عالی است. اکنون دقیقاً این کار با زبان برنامه نویسی جدید امکان پذیر است. ویژگی های سبک (اندازه، رنگ، برچسب،…) گره ها و لبه های نمایش داده شده را می توان با تعریف قوانین سبک تنظیم کرد.

قوانین می توانند برای همه گره ها یا لبه ها اعمال شوند یا فیلتری برای اعمال قانون فقط برای گره ها یا لبه های خاص مشخص شود. قوانین زیر همه گره ها را سبز و تمام لبه ها را آبی رنگ می کند.

@NodeStyle {
  color: forestgreen
}

@EdgeStyle {
  color: dodgerblue
}

تصور کنید چند گره با برچسب داریم Important. ممکن است بخواهیم آن گره ها را قرمز رنگ کنیم. این را می توان با افزودن یک فیلتر پس از نام قانون به دست آورد. در اینجا ما بررسی می کنیم که آیا یک گره دارای برچسب است یا خیر Important. فقط اگر این درست باشد، گره قرمز رنگ می شود.

@NodeStyle HasLabel(node, "Important") {
  color: red
}

اگر دو قانون مقادیر متضاد را برای یک ویژگی سبک تعریف کنند، قاعده ای که بعداً تعریف می شود اولویت بیشتری دارد (مانند CSS). در مثال زیر، تمام گره ها آبی رنگ می شوند.

@NodeStyle {
  color: forestgreen
}

@NodeStyle {
  color: dodgerblue
}

اضافه کردن سبک های سفارشی

برای نمایش ویژگی های جدید Memgraph Lab بهتر است از یک مثال استفاده کنید. ما با نموداری از شهرهای مختلف در سراسر جهان کار خواهیم کرد. می توانید تمام گره ها و روابط را از اینجا دانلود کنید
(دستورالعمل‌های وارد کردن داده‌های Cypher را می‌توانید در اینجا پیدا کنید).
از آنجایی که همه گره ها دارند lat و lng ویژگی های (طول و عرض جغرافیایی)، Memgraph Lab آنها را به طور پیش فرض روی نقشه نشان می دهد.

برای تغییر سبکی که گره‌ها در آن ترسیم می‌شوند، ویرایشگر سبک را در Memgraph Lab باز می‌کنیم و از آنجا می‌توانیم قوانین سبک سفارشی خود را با استفاده از زبان برنامه‌نویسی جدید اضافه کنیم.

برای اینکه گره ها زیباتر به نظر برسند، می توانیم یک حاشیه سفید و کمی سایه اضافه کنیم. این قانون برای همه گره ها اعمال می شود زیرا هیچ فیلتری مشخص نشده است.

@NodeStyle {
  border-width: 4
  border-color: white
  shadow-color: black
  shadow-size: 30
}

خوب است که گره ها را از نظر بصری متمایز کنیم. برای مثال می توان با نمایش تصاویر پرچم در داخل گره ها به این امر دست یافت. خوشبختانه در این مثال، هر گره دارای یک ویژگی است flag. مقدار نشانی اینترنتی تصویر پرچم کشوری است که شهر در آن قرار دارد. ما می توانیم آن پرچم ها را به صورت رسم شده نمایش دهیم
گره ها به روش زیر

@NodeStyle {
  image-url: Property(node, "flag")
}

اکنون Memgraph Lab نمودار زیر را نمایش می دهد.

هر گره نیز دارای ویژگی است population. ما می توانیم از آن برای برجسته کردن شهرهای بزرگ استفاده کنیم. برای رسیدن به آن می توانیم قوانین زیر را اضافه کنیم. در اینجا هر دو قانون یک فیلتر بعد از نام قانون دارند. قوانین تعریف شده به این ترتیب فقط برای گره هایی اعمال می شود که فیلتر برای آنها درست است.

@NodeStyle Greater(Property(node, "population"), 5000000) {
  border-color: forestgreen
  border-width: 6
  size: 30
}

@NodeStyle Greater(Property(node, "population"), 10000000) {
  size: 40
  border-color: Darker(red)
}

این نتیجه ای است که می گیریم. همه شهرهای بزرگ اکنون دارای وسعت و اندازه بزرگتر هستند
حاشیه ضخیم تر شهرهایی با بیش از 5 میلیون جمعیت دارای مرز سبز و
شهرهایی با بیش از 10 میلیون نفر دارای مرز قرمز هستند.

قدرت زبان برنامه نویسی یک ظاهر طراحی شده (اختیاری)

برای نشان دادن قدرت زبان اسکریپت نویسی جدید، می توانیم همه گره ها را با توجه به جمعیت شهرشان اندازه های متفاوتی داشته باشند. اگر اندازه گره را متناسب با جمعیت قرار دهیم، برخی از گره ها خیلی بزرگ خواهند بود و برخی دیگر به سختی قابل مشاهده خواهند بود. برای اینکه تفاوت‌ها کم‌تر شود، می‌توانیم از تابع ریشه مربع استفاده کنیم (به طور متناوب). در زمان نگارش، تابع ریشه مربع یک تابع داخلی نیست، اما زبان به اندازه کافی قدرتمند است تا با استفاده از روش نیوتن، ریشه مربع را از ابتدا پیاده سازی کند.

برای پیاده سازی تابع جذر می توانیم توابع زیر را تعریف کنیم.

Define(abs, Function(x, If(Less(x, 0), Sub(0, x), x)))

Define(newtonSqrt, Function(a, x0, Do(
  Define(f, Function(x, Sub(Mul(x, x), a))),
  Define(df, Function(x, Mul(2, x))),
  If(Less(abs(f(x0)), 0.001),
    x0,
    newtonSqrt(a, Sub(x0, Div(f(x0), df(x0))))))))

Define(sqrt, Function(x, newtonSqrt(x, 1)))

اکنون می توانیم اندازه گره را به جذر جمعیت شهر وابسته کنیم.

@NodeStyle {
  size: Mul(0.01, sqrt(Property(node, "population")))
}

اکنون Memgraph Lab نمودار زیر را نمایش می دهد. شهرهای بزرگتر با
گره های بزرگتر

کاوش نمودارها با یک ظاهر طراحی

جدا از ایجاد نمایش های بصری زیبا از نمودارهای ذخیره شده در پایگاه داده Memgraph، زبان برنامه نویسی جدید می تواند برای کاوش داده ها نیز مورد استفاده قرار گیرد. هنگامی که Memgraph Lab نتیجه پرس و جو را در قالب یک نمودار بارگذاری کرد، تقریباً به نظر می رسد که امکان اجرای سوالات فرعی از طریق زبان اسکریپت استایل وجود دارد. این موضوع در مثال زیر واضح تر خواهد شد.

ما از نمودار کوله پشتی در سراسر اروپا استفاده خواهیم کرد
آموزش کشورها و شهرهای مختلف اروپایی به همراه اطلاعات مفید برای گردشگران هنگام برنامه ریزی سفر، مانند قیمت غذا و نوشیدنی، در پایگاه داده ذخیره می شوند. پس از اجرای یک کوئری که تمام گره ها و لبه های ذخیره شده در پایگاه داده را برمی گرداند، Memgraph Lab نمودار زیر را ارائه می دهد.

فرض کنید ما به شهرهایی علاقه مندیم که نوشیدنی یا غذا در آن ها ارزان هستند. (گره های شهر دارای ویژگی هایی هستند drinks_USD و meals_USD.) برای ساده تر کردن کارها ابتدا دو تابع تعریف می کنیم: cheapDrinks? و cheapFood?. این یک قرارداد برای پایان دادن به نام یک تابع است که یک بولی را با علامت سوال برمی گرداند. هر دو
توابع یک گره را به عنوان تنها آرگومان می گیرند و قیمت نوشیدنی ها/غذاها را در آن گره بررسی می کنند. اگر قیمت کمتر از یک آستانه باشد، مقدار برگشتی درست است.
ممکن است گره هایی بدون آن وجود داشته باشد drinks_USD/meals_USD ویژگی، بنابراین هوشمندانه است که قبل از دسترسی به یک گره، بررسی کنید که آیا یک ویژگی دارد یا خیر.

Define(cheapDrinks?, Function(node,
  And(HasProperty(node, "drinks_USD"),
      Less(Property(node, "drinks_USD"), 7))))

Define(cheapFood?, Function(node, 
  And(HasProperty(node, "meals_USD"),
      Less(Property(node, "meals_USD"), 15))))

اکنون می‌توانیم قوانین سبک زیر را برای برجسته کردن شهرهای مورد علاقه خود تعریف کنیم. ما از توابع تعریف شده در بالا برای شفاف‌تر کردن فیلتر کردن گره‌ها استفاده می‌کنیم. همچنین می‌توانیم قیمت غذا و نوشیدنی را به برچسب‌های گره اضافه کنیم تا بازرسی داده‌ها آسان‌تر شود. (گره های شهر دارای ویژگی هایی هستند drinks_USD و meals_USD.)

@NodeStyle cheapDrinks(node) {
  color: gold
  size: 30
  label: Format("{}\ndrinks: {}", 
                Property(node, "name"), 
                Property(node, "drinks_USD"))
}

@NodeStyle cheapFood(node) {
  color: dodgerblue
  size: 30
  label: Format("{}\nmeals: {}", 
                Property(node, "name"), 
                Property(node, "meals_USD"))
}

@NodeStyle And(cheapDrinks(node), cheapFood(node)) {
  color: forestgreen
  size: 40
  label: Format("{}\ndrinks: {}\nmeals: {}", 
                Property(node, "name"),
                Property(node, "drinks_USD"),
                Property(node, "meals_USD"))
}

اکنون Memgraph Lab نمودار زیر را به ما نشان می دهد.

شهرهایی که قیمت نوشیدنی پایینی دارند با رنگ زرد، شهرهایی که قیمت غذای پایینی دارند با رنگ آبی و شهرهایی با قیمت نوشیدنی پایین و قیمت غذای پایین با رنگ سبز نشان داده شده اند.

در این مثال، ما از زبان برنامه نویسی استایل نه تنها برای بهتر جلوه دادن نمودار، بلکه برای درک بهتر داده ها استفاده کرده ایم. فیلترها پس از قوانین سبک (در این مورد cheapDrinks(node) و cheapFood(node)) استفاده می شود
برای انتخاب گره های خاص این تقریباً مانند افزودن شرایط به کوئری‌های Cypher عمل می‌کند، اما با یک مزیت بزرگ: به این ترتیب می‌توانیم روابط گره‌های «انتخاب‌شده» را با سایر بخش‌های نمودار نیز ببینیم.

مراحل بعدی

بهترین راه برای تجربه کامل ویژگی های جدید Memgraph Lab این است که آن را فورا دانلود کنید
(دستورالعمل ها را می توان یافت [here] https://docs.memgraph.com/memgraph-lab/how_to_install_memgraph_lab_on_macos))
و شروع به بازی کردن با زبان برنامه نویسی جدید کنید. امکانات بی پایان هستند.