Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added a node graph to the feed view which combines the file view and file preview into the nodes themselves #916

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Added react-d3-tree and components which use it. Next steps are to pu…
…t the preview and file viewer for each node
  • Loading branch information
root authored and root committed Apr 26, 2023
commit 55b111f5c65c430501a97a19aec1e0c8cb715f11
249 changes: 249 additions & 0 deletions src/components/feed/ReactFlow/ChRISNode.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,249 @@
.chris-plugin-instance-node {
border-radius: 5px;
color: white;

font-family: sans-serif;
position: relative;

max-width: 300px;

/* min-width: 200px; */
/* overflow: hidden; */
}

.chris-plugin-instance-node-thumb {
width: 100%;
max-width: 200px;
aspect-ratio: 1/1;

/* unclear why this is needed */
margin-bottom: -4px;

pointer-events: none;
}

.chris-plugin-instance-node-header {
background-color: rgb(0, 102, 204);
padding: 3px 10px;

font-size: 12px;

position: relative;

display: flex;
justify-content: space-between;
}

.chris-plugin-instance-node-header-closed-top {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.chris-plugin-instance-node-header-closed-bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

.chris-plugin-instance-node-header:hover {
cursor: pointer !important;
}

.chris-plugin-instance-node-header-title {
margin: 0;
}

.chris-plugin-instance-hide-body-button {
background: none;
outline: none;
border: none;
color: white;
margin: auto 0 auto 10px;
vertical-align: middle;
}

.chris-plugin-instance-hide-body-button:hover {
cursor: pointer;
}

.chris-plugin-instance-node-body {
display: flex;
flex-direction: column;
padding: 7px 10px 7px 10px;

background: linear-gradient(140deg, rgba(0, 102, 204, .63) 0%, rgba(95, 101, 128, .66) 100%);
/* backdrop-filter: blur(1px); */
backface-visibility: hidden;
border-radius: 0 0 5px 5px;
}

.hide-body .chris-plugin-instance-node-header {
border-radius: 5px;;
}

.hide-body .chris-plugin-instance-node-body {
display: none;
width: 200px;
}

.react-flow__node-plugininst .react-flow__handle {
width: 6px;
height: 10px;
border-radius: 2px;
background-color: #778899;
}

.chris-plugin-instance-node-id {
font-size: 10px;
margin: 0;
text-align: right;
}

/*

Status effects

*/

.chris-plugin-instance-node[status="finishedSuccessfully"] {
/* box-shadow: 0px 0px 5px 0px green; */
}

.chris-plugin-instance-node[status="finishedSuccessfully"]:after {
content: "Finished";
position: absolute;
bottom: -1.4em;
right: 0;
color: black;

font-size: 12px;
}

.chris-plugin-instance-node[status="finishedWithError"] .chris-plugin-instance-node-header{
background-color: rgb(255, 44, 44);
}

.chris-plugin-instance-node[status="finishedWithError"]:after {
content: "Error";
position: absolute;
bottom: -1.4em;
right: 0;
color: black;

font-size: 12px;
}

.chris-plugin-instance-node[status="cancelled"] .chris-plugin-instance-node-header{
background-color: rgb(137, 137, 141);
}

.chris-plugin-instance-node[status="cancelled"]:after {
content: "Cancelled";
position: absolute;
bottom: -1.4em;
right: 0;
color: black;

font-size: 12px;
}

/*

Replay system

*/

.working.chris-plugin-instance-node {
box-shadow: 0px 0px 10px 5px #333;
}

/*

Yesh Styles

*/

.chris-plugin-instance-node-inline-input {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: 2px;
}

.chris-plugin-instance-node-input-label {
font-size: 12px;
}

.chris-plugin-instance-node-inline-input > * {
margin: auto 0;
font-size: 12px;
}

/* edit here */

/* .chris-plugin-instance-node-input {
background: rgba(255, 255, 255, .2);
border: none;
border-bottom: 1px solid rgba(255, 255, 255, .3);

color: white;
margin-left: 5px;
} */

.chris-plugin-instance-node-input[type="text"] {
background: none;
font-size: 1em;
line-height: 1.5em;
border-radius: 5px;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.24), inset -1px -1px 3px rgba(255, 255, 255, 0.54);
caret-color: black;
width: 100%;
border: none;
outline: none;
}

.chris-plugin-instance-node-input-label {
margin-bottom: 4px;
display: block;
width: 100%;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
color: black;
font-family: Verdana;
}

.chris-plugin-instance-node-input-label::nth-of-type(2) {
margin-top: 12px;
}

.chris-plugin-instance-node-input::placeholder {
color: black;
}

.chris-plugin-instance-node-input[type="checkbox"][value="true"] {
height: 25px;
width: 25px;
accent-color: green;
}
.chris-plugin-instance-node-input[type="checkbox"][value="false"] {
height: 25px;
width: 25px;
accent-color: red;
}

.chris-plugin-instance-node-input[type="number"] {
background: #b3dbf8;
height: 30px;
font-size: 10px;
border-radius: 10px;
box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
caret-color: black;
width: 30%;
border: none;
outline: none;
}

/* trial */


105 changes: 105 additions & 0 deletions src/components/feed/ReactFlow/NodeTree.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
.cs410f23-node-tree
{
width: 100%;
height: 100%;
overflow: hidden;

fill: white;
color: white;
stroke-width: 1;
}

.rd3t-node {
color: white;
fill: white;
}

:root
{
--cs410f23-node-width: 200px;
--cs410f23-node-height: 350px;
--cs410f23-header-height: 30px;

--cs410f23-size: calc(var(--cs410f23-header-height) / 3);
--cs410f23-hsize: calc(var(--cs410f23-size) / 2);
}

.cs410f23-wrap
{
overflow: visible;
}

.cs410f23-wrap p
{
margin: 0;
}

.cs410f23-node
{
width: var(--cs410f23-node-width);
height: var(--cs410f23-node-height);

border-radius: 5x;
font-family: sans-serif;
display: flex;
flex-direction: column;

overflow: visible;
}

.cs410f23-header
{
height: var(--cs410f23-header-height);

background: blue;
display: flex;
justify-content: space-between;

padding: 0 10px;
position: relative;
}

.cs410f23-body
{
background: grey;
margin: 0;
padding: 5px 10px;

display: flex;
flex-direction: column;
flex-grow: 1;
}

.cs410f23-fileview
{
max-height: 200px;
overflow-y: auto;
}

.cs410f23-preview
{
min-width: 200px;
min-height: 200px;
}

.cs410f23-socket
{
position: absolute;
width: var(--cs410f23-size);
height: var(--cs410f23-size);
border-radius: 100%;
background: cyan;

top: calc(50% - var(--cs410f23-hsize));
}

.cs410f23-socket-left
{
left: calc(0px - var(--cs410f23-hsize));

}

.cs410f23-socket-right
{
right: calc(0px - var(--cs410f23-hsize));
}
Loading