Skip to content
Snippets Groups Projects

feat: redesign tooltips for schema and nodelink

Merged feat: redesign tooltips for schema and nodelink
tooltipSchema into main
13 unresolved threads
Merged Marcos Pieras requested to merge tooltipSchema into main
13 unresolved threads

Besides redesign tooltips Additional features:

  • schema: same fit to screen button on app
  • schema: fit to screen button funtionality
  • schema: add minimap

Merge request reports

Pipeline #137682 passed

Stage: tag-release
Stage: get-release-tag

Pipeline passed for 6ddb8986 on tooltipSchema

Merged by Leonardo ChristinoLeonardo Christino 8 months ago (Jul 11, 2024 5:06pm UTC)

Loading

Pipeline #137683 passed

Stage: tag-release
Stage: get-release-tag
Stage: container-image
Stage: deploy-staging

Pipeline passed for 79aab4d3 on main

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
libs/shared/lib/assets/carbonIcons/carbonIcons.tsx 0 → 100644
1 import React from 'react';
  • Leonardo Christino
    Leonardo Christino @milho001 ·
    Owner

    Hmm, not exactly against using other icons, but if we want to do that, we should unify how icons are imported. Since we already have iconify and tailwind, I believe we should move all icons to the following format: image

  • Please register or sign in to reply
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on an old version of the diff
    • libs/shared/lib/components/CardToolTipVis/cardtooltipvis.stories.tsx 0 → 100644
    62 render: (args) => {
    63 return (
    64 <div className="w-1/4 my-10 m-auto flex items-center justify-center">
    65 <CardToolTipVis {...args} />
    66 </div>
    67 );
    68 },
    69 args: {
    70 name: 'Person',
    71 type: 'popupvis',
    72 data: {
    73 bio: 'From wikipedia was born in usa from a firefighter father',
    74 name: 'Charlotte Henry',
    75 born: {},
    76 imdbRank: 21213,
    77 imdbVotesddddddddddddddddddddd: 1213,
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on an old version of the diff
    • libs/shared/lib/components/CardToolTipVis/index.tsx 0 → 100644
    1 import React from 'react';
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on an old version of the diff
    • libs/shared/lib/components/CardToolTipVis/index.tsx 0 → 100644
    101 {type === 'schema' ? (
    102 <Icon
    103 className="ml-auto text-right flex-shrink-0"
    104 component={
    105 v === 'int' || v === 'float' ? (
    106 <CarbonStringInteger />
    107 ) : v === 'string' ? (
    108 <CarbonStringText />
    109 ) : v === 'boolean' ? (
    110 <CarbonBoolean />
    111 ) : v === 'date' ? (
    112 <CarbonCalendar />
    113 ) : v === 'undefined' ? (
    114 <CarbonUndefined />
    115 ) : (
    116 <CarbonUndefined />
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/components/icon/icon.stories.tsx
    21 21 export default Component;
    22 22 type Story = StoryObj<typeof Component>;
    23 23
    24 export const BaseIcon: Story = (args: any) => {
    24 export const MUIIcon: Story = (args: any) => {
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/inspector/InspectorPanel.tsx
    18 18 const { activeVisualizationIndex } = useVisualization();
    19 19
    20 20 const inspector = useMemo(() => {
    21 if (selection) return <SelectionConfig />;
    21 //if (selection) return <SelectionConfig />;
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/schema/panel/Schema.tsx
    115 120 );
    116 121 }, [searchResults]);
    117 122
    123 const nodeColor = (node: any) => {
    124 switch (node.type) {
    125 case 'entity':
    126 return '#fb7b04';
    127 case 'relation':
    128 return '#0676C1';
    129 default:
    130 return '#ff0072';
    131 }
    132 };
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/schema/panel/Schema.tsx
    202 226 onInit(reactFlowInstance);
    203 227 }}
    204 228 proOptions={{ hideAttribution: true }}
    205 ></ReactFlow>
    229 >
    230 <MiniMap nodeColor={nodeColor} />
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPill.tsx
    60 <div>
    61 <CardToolTipVis
    62 type="schema"
    63 typeOfSchema="node"
    64 name={data.name}
    65 colorHeader="#fb7b04"
    66 numberOfElements={1000}
    67 data={data.attributes.reduce(
    68 (acc, attr) => {
    69 if (attr.name && attr.type) {
    70 acc[attr.name] = attr.type;
    71 }
    72 return acc;
    73 },
    74 {} as Record<string, string>,
    75 )}
    • Comment on lines +67 to +75
      Leonardo Christino
      Leonardo Christino @milho001 ·
      Owner

      A tip here is that you can pass elements as children instead of all by props. This means that the VisualizationTooltip do not necessarily need to implement how to show data, but instead you could have a VisualizationTooltip component with a VisualizationTooltipData component inside it which does that. I think this would make the VisualizationTooltip more generic and usable by the Nodelink and other visualizations. In fact, isn't there one like that already in Nodelink?

    • Please register or sign in to reply
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on an old version of the diff
    • libs/shared/lib/schema/pills/nodes/entity/SchemaEntityPopup.tsx
    31 31 return (
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/schema/pills/nodes/relation/SchemaRelationPill.tsx
    74 numberOfElements={1000}
    75 connectedFrom={data.from}
    76 connectedTo={data.to}
    77 data={
    78 data.attributes.length > 0
    79 ? data.attributes.reduce(
    80 (acc, attr) => {
    81 if (attr.name && attr.type) {
    82 acc[attr.name] = attr.type;
    83 }
    84 return acc;
    85 },
    86 {} as Record<string, string>,
    87 )
    88 : {}
    89 }
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on the diff
    • libs/shared/lib/vis/visualizations/nodelinkvis/components/utils.tsx
    18 18 // num = num % 4;
    19 19 // const col = '#000000';
    20 20
    21 let entityColors = Object.values(visualizationColors.GPSeq.colors[9]);
    21 //let entityColors = Object.values(visualizationColors.GPSeq.colors[9]);
  • Leonardo Christino
    Leonardo Christino @milho001 started a thread on an old version of the diff
    • libs/shared/lib/vis/visualizations/semanticsubstratesvis/Overview.mdx
    1 1 import { Meta, Unstyled } from '@storybook/blocks';
    2 2
    3 <Meta title="Visualizations/Implementation" />
    3 <Meta title="Visualizations/SemanticSubstrates" />
  • Leonardo Christino requested changes

    requested changes

  • Leonardo Christino
    Leonardo Christino @milho001 ·
    Owner

    Also, could you rebase the code while you are editing it? (Try rebasing first, and only merge if needed pls)

  • Marcos Pieras added 1 commit

    added 1 commit

    Compare with previous version

  • Marcos Pieras added 1 commit

    added 1 commit

    • f0c523fc - fix: refactor: memoize children ref to prevent recreating virtual elements every update

    Compare with previous version

  • Marcos Pieras added 1 commit

    added 1 commit

    Compare with previous version

  • Marcos Pieras added 6 commits

    added 6 commits

    • 51c332db...60f3fb41 - 4 commits from branch main
    • d675d579 - feat: merged
    • e7719d20 - Merge branch 'tooltipSchema' of git.science.uu.nl:graphpolaris/frontend-v2 into tooltipSchema

    Compare with previous version

  • Leonardo Christino added 2 commits

    added 2 commits

    • 57ec30c9 - 1 commit from branch main
    • 580af4c7 - Merge remote-tracking branch 'refs/remotes/origin/main' into tooltipSchema

    Compare with previous version

  • Leonardo Christino added 1 commit

    added 1 commit

    Compare with previous version

  • Leonardo Christino enabled an automatic merge when the pipeline for 6ddb8986 succeeds

    enabled an automatic merge when the pipeline for 6ddb8986 succeeds

  • Leonardo Christino merged

    merged

  • Alen Zubic
    Alen Zubic @alenzubic ·
    Contributor

    :tada: This MR is included in version 1.67.0 :tada:

    The release is available on GitLab release.

    Your semantic-release bot :package: :rocket:

    • Please register or sign in to reply