feat: card tooltip component first version

libs/shared/lib/components/CardToolTipVis/cardtooltipvis.module.scss

+.diagonal-lines {
+  border: 1px solid lightgray;
+  background:
+    repeating-linear-gradient(-45deg, transparent, transparent 6px, #eaeaea 6px, #eaeaea 8px),
+    /* Gray diagonal lines */ linear-gradient(to bottom, transparent, transparent); /* Vertical gradient */
+}

libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx

+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { CardToolTipVis, CardToolTipVisProps } from '@graphpolaris/shared/lib/components/CardToolTipVis';
+
+const metaCardToolTipVis: Meta<typeof CardToolTipVis> = {
+  component: CardToolTipVis,
+  title: 'Components/CardToolTipVis',
+};
+
+export default metaCardToolTipVis;
+type Story = StoryObj<typeof CardToolTipVis>;
+
+export const SchemaNode: Story = {
+  render: (args) => {
+    return (
+      <div className="w-1/4 my-10 m-auto flex items-center justify-center">
+        <CardToolTipVis {...args} />
+      </div>
+    );
+  },
+  args: {
+    type: 'schema',
+    name: 'Person',
+    data: {
+      born: 'int',
+      name: 'string',
+      description: 'string',
+    },
+    colorHeader: '#fb7b04',
+  },
+};
+
+export const SchemaRelationship: Story = {
+  render: (args) => {
+    return (
+      <div className="w-1/4 my-10 m-auto flex items-center justify-center">
+        <CardToolTipVis {...args} />
+      </div>
+    );
+  },
+  args: {
+    type: 'schema',
+    name: 'Directed',
+    data: {
+      born: 'int',
+      name: 'string',
+      description: 'string',
+      imdb: 'string',
+      imdbVotes: 'int',
+    },
+    colorHeader: '#0676C1',
+    connectedTo: 'Person',
+    connectedFrom: 'Movie',
+  },
+};
+
+export const PopUpVis: Story = {
+  render: (args) => {
+    return (
+      <div className="w-1/4 my-10 m-auto flex items-center justify-center">
+        <CardToolTipVis {...args} />
+      </div>
+    );
+  },
+  args: {
+    name: 'Person',
+    type: 'popupvis',
+    data: {
+      bio: 'From wikipedia was born in usa from a firefighter father',
+      name: 'Charlotte Henry',
+      born: {},
+      imdbRank: 21213,
+      imdbVotes: 1213,
+      poster: 'https://image.tmdb.org/t/p/w440_and_h660_face/kTKiREs37qd8GUlNI4Koiupwy6W.jpg',
+      tmdbId: '94105',
+      country: undefined,
+      labels: ['Actor', 'Person', 'Human'],
+    },
+    colorHeader: '#B69AEf',
+  },
+};

libs/shared/lib/components/CardToolTipVis/index.tsx

+import React from 'react';
+import { Icon } from '@graphpolaris/shared/lib/components/icon';
+import { AbcOutlined, Settings } from '@mui/icons-material';
+import styles from './cardtooltipvis.module.scss';
+
+export type CardToolTipVisProps = {
+  type: string;
+  name: string;
+  data: Record<string, any>;
+  colorHeader: string;
+  connectedTo?: string;
+  connectedFrom?: string;
+};
+
+export const CardToolTipVis: React.FC<CardToolTipVisProps> = ({ type, name, data, colorHeader }) => {
+  return (
+    <div className="border-2 border-sec-200 bg-white">
+      <div className="flex m-0 items-center border-b-2 border-sec-200">
+        <div className="h-9 w-4" style={{ backgroundColor: 'hsl(29 96 60)' }}></div>
+        <span className="text-xl ml-2">{name}</span>
+      </div>
+      <div className="px-4 py-2">
+        {data &&
+          Object.entries(data).map(([k, v]) => (
+            <div key={k} className="flex flex-row gap-3 items-center">
+              <span className="font-semibold">{k}</span>
+              <span className="ml-auto max-w-[10rem] text-right truncate w-[60%]">
+                {type === 'schema' ? (
+                  <Icon component={v === 'int' ? <Settings /> : <AbcOutlined />} />
+                ) : v !== undefined && (typeof v !== 'object' || Array.isArray(v)) ? (
+                  <span>{v.toString()}</span>
+                ) : (
+                  <div className={`ml-auto h-4 w-12 ${styles['diagonal-lines']}`}></div>
+                )}
+              </span>
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+};

libs/shared/lib/inspector/InspectorPanel.tsx

@@ -18,7 +18,7 @@ export function InspectorPanel(props: { children?: React.ReactNode }) {
   const { activeVisualizationIndex } = useVisualization();
 
   const inspector = useMemo(() => {
-    if (selection) return <SelectionConfig />;
+    //if (selection) return <SelectionConfig />;
     // if (!focus) return <ConnectionInspector />;
     // if (activeVisualizationIndex !== -1) return <ConnectionInspector />;
     return <VisualizationSettings />;

libs/shared/lib/vis/visualizations/semanticsubstratesvis/Overview.mdx

 import { Meta, Unstyled } from '@storybook/blocks';
 
-<Meta title="Visualizations/Implementation" />
+<Meta title="Visualizations/SemanticSubstrates" />
 
 # Variables