Merge branch 'FNNDSC:master' into PintoGideon-Integrate-Student-Workflow

docker-entrypoint.sh

@@ -24,6 +24,20 @@ if [ "$(id -u)" != "0" ]; then
   fi
 fi
 
+# When running on Podman with default settings, the host IP address is added to /etc/hosts
+# by Podman by the name "host.containers.local" which we'll use as the IP address.
+if [ "${DISABLE_PODMAN_HOST_IP-no}" = 'no' ] \
+  && [ "$given_cube" = 'nil' ] \
+  && [ "$given_pfdcm" = 'nil' ]; then
+
+  PODMAN_HOST_IP="$(grep -m 1 -F host.containers.internal /etc/hosts | awk '{print $1}')"
+  if [ -n "$PODMAN_HOST_IP" ]; then
+    echo "Detected Podman host IP: $PODMAN_HOST_IP"
+    given_cube="http://$PODMAN_HOST_IP:8000/api/v1/"
+    given_pfdcm="http://$PODMAN_HOST_IP:4005/"
+  fi 
+fi
+
 function replace () {
   local target="$1"
   local api_url="$2"

src/assets/scss/helpers/_variables.scss

@@ -41,7 +41,7 @@ $gotop-dimension: 50px;
 // --------------------------------------------------------------------
 
 $feed-block-background: #000;
-$node-block-background: $chris-blue;
+$node-block-background: #18181b;
 $node-block-border: $chris-light-blue;
 
 // Tree colors

src/assets/scss/layout/_layout.scss

@@ -78,21 +78,33 @@ label {
   color: white !important;
 }
 
-.pf-c-button.pf-m-tertiary,
-.pf-c-button.pf-m-secondary {
-  border: 1px solid white;
+.pf-c-page__header{
+  background-color: #18181b;
+  border-bottom: 1px solid #36363d;
 }
 
+.pf-c-toolbar{
+  background-color: #18181b;
+}
+
+.pf-c-page__main-section.pf-m-dark-100{
+  background-color: #18181b;
+}
+
+
 .pf-c-page__header-brand-toggle {
   margin-right: 1rem !important;
   top: -0.5 !important;
 }
 
 .pf-c-input-group__text {
-  background-color: var(--pf-global--BackgroundColor--dark-400) !important;
+  background-color: #36363d !important;
   color: white;
 }
-
+.pf-c-page__sidebar{
+  background-color: #18181b !important;
+  border-right: 1px solid #36363d;
+}
 .pf-c-form-control {
   color: white !important;
   --pf-c-form-control--Color: white;
@@ -122,7 +134,7 @@ label {
   --pf-c-code-block--BackgroundColor: var(
     --pf-global--BackgroundColor--dark-100
   );
-  border: 1px solid white !important;
+  border: 2px solid white !important;
 }
 
 .pf-c-modal-box {
@@ -147,18 +159,18 @@ label {
   &__toggle {
     display: none;
   }
-
+  &__header{
+    background-color: #36363d !important;
+  }
   &__footer {
-    background-color: var(--pf-global--BackgroundColor--dark-400);
+    background-color: #36363d;
   }
 
   &__outer-wrap {
     padding-left: 0;
   }
 
-  --pf-c-wizard__outer-wrap--BackgroundColor: var(
-    --pf-global--BackgroundColor--dark-400
-  );
+  --pf-c-wizard__outer-wrap--BackgroundColor: #18181b ;
   --pf-c-wizard__nav--BackgroundColor: var(
     --pf-global--BackgroundColor--dark-400
   );
@@ -170,17 +182,10 @@ label {
   --pf-c-wizard__nav-link--focus--Color: white;
   --pf-c-wizard__nav-link--m-current--Color: white;
 
-  .pf-c-card {
-    --pf-c-card--BackgroundColor: var(
-      --pf-global--BackgroundColor--dark-200
-    ) !important;
-  }
 
   .pf-c-form-control {
     color: white;
-    --pf-c-form-control--BackgroundColor: var(
-      --pf-global--BackgroundColor--dark-200
-    ) !important;
+    --pf-c-form-control--BackgroundColor: #18181b !important;
     --pf-c-form-control--placeholder--Color: var(
       --pf-global--Color--400
     ) !important;
@@ -247,3 +252,14 @@ label {
 .pf-c-form__helper-text {
   color: white !important;
 }
+
+.pf-l-grid__item > .pf-c-card{
+  background-color: #36363d;
+}
+
+.pf-c-drawer__head{
+  background-color: #18181b !important;
+}
+div.pf-c-drawer__panel-main {
+  background-color: #18181b !important;
+}

src/components/detailedView/Viewer.scss

@@ -13,10 +13,6 @@
   height: 100vh;
   min-width: 98vw;
 
-  .pf-c-drawer__panel-main {
-    background: #d2d2d2 !important;
-  }
-
   h1,
   button {
     color: rgb(115, 188, 247) !important;

src/components/feed/AddNode/styles/AddNode.scss

@@ -122,7 +122,9 @@
     display: flex;
     flex-direction: column;
   }
-
+  .pf-c-card{
+    background-color: #18181b;
+  }
   &__button {
     margin-top: 1.25rem !important;
     margin-right: 1.25rem !important;

src/components/feed/AddPipeline/AddPipeline.tsx

@@ -135,7 +135,7 @@ const AddPipeline = () => {
         ]}
       >
         <PipelineContainer />
-        {Object.keys(error).length > 0 && <ReactJson src={error} />}
+        {Object.keys(error).length > 0 && <ReactJson theme='grayscale' src={error} />}
       </Modal>
     </React.Fragment>
   );

src/components/feed/CreateFeed/createfeed.scss

@@ -100,6 +100,7 @@
 /* drawer style */
 .drawer_panelContent {
   height: 100vh;
+  background-color: #18181b;
 }
 
 /* Data Configuration */

src/components/feed/FeedOutputBrowser/FeedOutputBrowser.scss

@@ -3,7 +3,8 @@
 @import "../../../assets/scss/helpers/mixins";
 
 .pf-c-drawer__body {
-  padding: 0 !important;
+  padding: 20px !important;
+  background-color: #18181b !important;
 }
 
 .pf-c-app-launcher__menu {
@@ -48,10 +49,20 @@
     }
   }
 
+  .pf-c-drawer__content{
+    background-color: #18181b;
+  }
+
+
   .pf-c-table tr > * {
     color: white;
   }
 
+  .pf-c-table{
+    background-color: #18181b;
+
+  }
+
   &__table {
     &--fileName {
       color: white;
@@ -108,11 +119,6 @@
       margin-right: 0.25em;
     }
 
-    .pf-c-table {
-      background-color: var(
-        --pf-global--BackgroundColor--dark-transparent-400
-      ) !important;
-    }
   }
 
   .header-panel__buttons {

src/components/feed/FeedTree/FeedTree.scss

@@ -39,7 +39,7 @@
   width: 100%;
   height: 100%;
   position: relative;
-
+   background-color: #18181b !important;
   .pf-c-switch {
     display: flex;
     row-gap: 0.3rem;

src/components/feed/FeedTree/ParentComponent.tsx

@@ -32,6 +32,7 @@ const ParentComponent = (props: ParentComponentProps) => {
     if (instances && instances.length > 0) {
       const data = getFeedTree(instances);
       getTsNodes(instances).then((nodes) => {
+
         setTsIds(nodes);
       });
       setData(data);

src/components/feed/FeedTree/data.ts

@@ -1,4 +1,8 @@
-import { PluginInstance, PluginParameter } from "@fnndsc/chrisapi";
+import {
+  PluginInstance,
+  PluginParameter,
+  PluginPiping,
+} from "@fnndsc/chrisapi";
 import { fetchResource } from "../../../api/common";
 
 export interface Datum {
@@ -77,8 +81,11 @@ export const getTsNodes = async (items: PluginInstance[]) => {
         params,
         boundFn
       );
-      if (parameters[0]) {
-        parentIds[instance.data.id] = parameters[0].data.value
+      const filteredParameters = parameters.filter(
+        (param) => param.data.param_name === "plugininstances"
+      );
+      if (filteredParameters[0]) {
+        parentIds[instance.data.id] = filteredParameters[0].data.value
           .split(",")
           .map(Number);
       }
@@ -87,6 +94,34 @@ export const getTsNodes = async (items: PluginInstance[]) => {
   return parentIds;
 };
 
+export const getTsNodesWithPipings = async (
+  items: PluginPiping[],
+  pluginParameters?: any[]
+) => {
+  const parentIds: {
+    [key: string]: number[];
+  } = {};
+
+  for (let i = 0; i < items.length; i++) {
+    const instance = items[i];
+
+    if (instance.data.plugin_name === "pl-topologicalcopy") {
+      //@ts-ignore
+      pluginParameters.data
+        .filter((param: any) => {
+          return param.plugin_piping_id === instance.data.id;
+        })
+        .forEach((param: any) => {
+          if (param.param_name === "plugininstances") {
+            parentIds[param.plugin_piping_id] = param.value
+              .split(",")
+              .map(Number);
+          }
+        });
+    }
+  }
+  return parentIds;
+};
 export function treeAlgorithm(
   event: any,
   selectedD3Node: any,

src/components/feed/NodeDetails/NodeDetails.scss

@@ -18,7 +18,6 @@
 }
 
 .node-block {
-  background: $node-block-background;
   width: 100%;
   height: 100%;
   color: white;
@@ -47,6 +46,7 @@
   .node-details {
     height: 100%;
     margin: 0 0.5em 0 0;
+    background-color: $node-block-background !important;
     &__title {
       display: flex;
       margin: 0.5em auto;
@@ -91,7 +91,6 @@
       color: var(--pf-global--palette--white);
       margin-bottom: 0.25em;
       margin-top: 0.25em;
-
       &-icon {
         color: var(--pf-global--palette--white);
         margin-right: 0.25em;

src/components/feed/Pipelines/CreatePipeline.tsx

@@ -107,7 +107,7 @@ const CreatingPipeline = ({
       {creatingPipeline.loading && <Spin tip="Saving a new pipeline" />}
       {Object.keys(creatingPipeline.error).length > 0 && (
         <span>
-          <ReactJson src={creatingPipeline.error} />
+          <ReactJson theme="grayscale" src={creatingPipeline.error} />
         </span>
       )}
     </div>

src/components/feed/Pipelines/NodeData.tsx

@@ -61,7 +61,16 @@ const NodeData = (props: NodeProps) => {
     state,
     handleSetPipelineEnvironments,
   } = props;
-  const { computeEnvs, title, currentNode } = state;
+  const { computeEnvs, title, currentNode, pluginPipings } = state;
+
+  const root = pluginPipings && pluginPipings[0];
+
+  let currentId = NaN;
+  if (data.previous_id && root) {
+    currentId = data.id - root.data.id;
+  } else {
+    currentId = 0;
+  }
 
   let currentComputeEnv = "";
   if (computeEnvs && computeEnvs[data.id]) {
@@ -107,7 +116,7 @@ const NodeData = (props: NodeProps) => {
   const textLabel = (
     <g id={`text_${data.id}`} transform={`translate(-30,30)`}>
       <text ref={textRef} className="label__title">
-        {titleName ? titleName : data.title}
+        {currentId}:{titleName ? titleName : data.title}
       </text>
     </g>
   );